{"version":3,"file":"NestedGrid.mjs","names":["React","Fragment","makeStyles","Typography","FluentIconButton","clsx","CalculatorMultiplyIcon","TimerIcon","PaddingRightIcon","PaddingLeftIcon","useStyles","theme","root","marginTop","nestedWrapper","display","columnAdornment","borderLeft","palette","secondary","main","borderTop","detailHeader","padding","spacing","color","background","grey","dark","detailHeaderActive","columnHeaderWrapper","columnTitle","flex","paddingTop","icon","common","white","expandIcon","marginLeft","NestParent","t0","$","_c","parentTitle","children","showDetail","classes","t1","t2","NestWrapper","columnFr","gridTemplateColumns","t3","toggleHeader","type","setShowDetail","setColumnFr","NestedGrid","childTitle","toggleWide","marginRight","t4"],"sources":["../../../../src/UI/surfaces/NestedGrid/NestedGrid.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport clsx from 'clsx'\nimport {\n  CalculatorMultiplyIcon,\n  TimerIcon,\n  PaddingRightIcon,\n  PaddingLeftIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: 32\n  },\n  nestedWrapper: {\n    display: 'grid'\n  },\n  columnAdornment: {\n    borderLeft: `4px solid ${theme.palette.secondary.main}`,\n    borderTop: `4px solid ${theme.palette.secondary.main}`\n  },\n  detailHeader: {\n    padding: theme.spacing(1),\n    color: 'white',\n    background: theme.palette.grey.dark\n  },\n  detailHeaderActive: {\n    background: theme.palette.secondary.main\n  },\n  columnHeaderWrapper: {\n    display: 'flex'\n  },\n  columnTitle: {\n    flex: 1,\n    display: 'flex',\n    paddingTop: theme.spacing(1)\n  },\n  icon: {\n    color: theme.palette.common.white\n  },\n  expandIcon: {\n    marginLeft: theme.spacing(2),\n    marginTop: theme.spacing(-1)\n  }\n}))\n\nexport const NestParent = ({ parentTitle, children, showDetail }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.root}>\n      {showDetail && (\n        <div className={classes.detailHeader}>\n          <Typography variant='subtitle2'> {parentTitle} </Typography>\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport const NestWrapper = ({ children, columnFr }) => {\n  const classes = useStyles()\n  return (\n    <div\n      className={classes.nestedWrapper}\n      style={{ gridTemplateColumns: `1fr ${columnFr}fr` }}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const toggleHeader = (\n  type,\n  setShowDetail,\n  setColumnFr\n  // setSplitGrid\n) => {\n  if (type === 'open') {\n    setShowDetail(true)\n    setColumnFr(4)\n    // setSplitGrid(true)\n  } else {\n    setShowDetail(false)\n    setColumnFr(0)\n  }\n}\n\nexport const NestedGrid = ({\n  children,\n  setShowDetail,\n  setColumnFr,\n  // setSplitGrid,\n  columnFr,\n  childTitle,\n  showDetail\n}) => {\n  const classes = useStyles()\n  const toggleHeader = (type) => {\n    if (type === 'open') {\n      setShowDetail(true)\n      setColumnFr(4)\n      // setSplitGrid(true)\n    } else {\n      setShowDetail(false)\n      setColumnFr(0)\n    }\n  }\n\n  const toggleWide = () => {\n    if (columnFr === 4) {\n      setColumnFr(1)\n    } else {\n      setColumnFr(4)\n    }\n  }\n\n  return (\n    <Fragment>\n      {showDetail && (\n        <div className={classes.columnAdornment}>\n          <div\n            className={clsx(classes.detailHeader, classes.detailHeaderActive)}\n          >\n            <div className={classes.columnHeaderWrapper}>\n              <div className={classes.columnTitle}>\n                <TimerIcon style={{ marginRight: 8 }} />\n                <Typography variant='subtitle2'>{childTitle}</Typography>\n                <div>\n                  <FluentIconButton\n                    className={clsx(classes.icon, classes.expandIcon)}\n                    icon={columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon}\n                    onClick={toggleWide}\n                  />\n                </div>\n              </div>\n              <div>\n                <FluentIconButton\n                  style={{ color: 'white', marginRight: 8 }}\n                  icon={CalculatorMultiplyIcon}\n                  onClick={() => toggleHeader('close')}\n                />\n              </div>\n            </div>\n          </div>\n          {children}\n        </div>\n      )}\n    </Fragment>\n  )\n}\n"],"mappings":"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"}