@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/PinnableFilters/PinnableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnableFilters.js","sources":["../../../src/components/PinnableFilters/PinnableFilters.js"],"sourcesContent":["/**\n * A wrapper component that handles the layout of completion app filters\n *\n * MUST 1: \"key\" props must be specified to make \"auto layout\" working\n * --------- \"filter\" or \"start\" needs to be included for Filter component key\n * --------- \"goal\" or \"middle\" needs to be included for Goal component key\n * --------- \"switch\" or \"end\" needs to be included for Switch component key\n * MUST 2: Each child component must be \"inline-block\" style\n * MUST 3: Filter components must be wrapped with <Fragment>\n *\n *\n * If the above conditions meet, this component will auto-place children components.\n *\n * Layout 1: Large Size\n * -----------------------------------------------\n * | filters                      | middle | end |\n * -----------------------------------------------\n *\n * Layout 2: Medium Size\n * -------------------------------\n * | icon |       | middle | end |\n * -------------------------------\n * | filters                     |\n * -------------------------------\n *\n * Layout 3: Small Size\n * ---------------------\n * | icon |      | end |\n * ---------------------\n *            | middle |\n * ---------------------\n *\n */\n\nimport { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { SizeMe } from 'react-sizeme';\nimport { Popover, Collapse } from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport FiltersToggler from './components/FiltersToggler';\nimport PinAppSwitch from './components/PinAppSwitch';\nimport { useComonentsWidth, useFilterLayout, useAppFilterTogglerWidth } from './effects';\nimport { getStartComponent, getMiddleComponent, getEndComponents } from './utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from './constants';\n\nimport styles from './PinnableFilters.css';\n\nconst muiStyles = {\n  paper: {\n    backgroundColor: '#414141',\n  },\n};\n\nfunction PinnableFilters({\n  children,\n  classes,\n  appWidth,\n  isPinnedInitial,\n  isShownInitial,\n  onShowCallback,\n  onPinCallback,\n}) {\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [isPinned, setIsPinned] = useState(isPinnedInitial);\n  const [isShown, setIsShown] = useState(isShownInitial);\n  const [showPin, setShowPin] = useState(false);\n  const handleChangePinned = value => {\n    setIsPinned(value);\n    if (onPinCallback) onPinCallback(value);\n  };\n  const handleChangeShown = value => {\n    setIsShown(value);\n    if (onShowCallback) onShowCallback(value);\n  };\n\n  // NOTE: Calcualte width of each components\n  const componentsWidth = useComonentsWidth(children);\n\n  // NOTE: Calculate app filter toggler width\n  const appFilterTogglerWidth = useAppFilterTogglerWidth();\n\n  // NOTE: Determine layout to be shown based on the calculated width\n  const layout = useFilterLayout(children, componentsWidth, appFilterTogglerWidth, appWidth);\n\n  const filtersComponent = getStartComponent(children);\n  const goalComponent = getMiddleComponent(children);\n  const switchComponent = getEndComponents(children);\n\n  const handleOpen = e => {\n    if (isPinned) {\n      handleChangeShown(!isShown);\n    } else {\n      setAnchorEl(e.currentTarget);\n    }\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handlePinClick = () => {\n    const newPinState = !isPinned;\n    if (newPinState) {\n      setAnchorEl(null);\n      handleChangeShown(true);\n    }\n    handleChangePinned(newPinState);\n  };\n\n  return (\n    <div style={{ width: '100%' }}>\n      <Collapse timeout={10} in={layout === LARGE_SIZE_LAYOUT}>\n        <div className={styles.containerLarge}>\n          <div>{filtersComponent}</div>\n          <div className={styles.containerLargeTopright}>\n            {goalComponent}\n            {switchComponent}\n          </div>\n        </div>\n      </Collapse>\n\n      <Collapse timeout={10} in={layout === MEDIUM_SIZE_LAYOUT}>\n        <div className={styles.containerMedium}>\n          <div className={styles.containerMediumTop}>\n            <div\n              className={styles.containerButtonsWrapper}\n              onMouseEnter={() => setShowPin(true)}\n              onMouseLeave={() => setShowPin(false)}\n            >\n              <FiltersToggler onClick={handleOpen} />\n              {(showPin || isPinned || Boolean(anchorEl)) && (\n                <PinAppSwitch isPinned={isPinned} onClick={handlePinClick} />\n              )}\n            </div>\n            <div className={styles.containerMediumTopright}>\n              {goalComponent}\n              {switchComponent}\n            </div>\n          </div>\n\n          <Collapse timeout={100} in={isPinned && isShown}>\n            <div className={styles.containerMediumBottom}>{filtersComponent}</div>\n          </Collapse>\n        </div>\n      </Collapse>\n\n      <Collapse timeout={10} in={layout === SMALL_SIZE_LAYOUT}>\n        <div className={styles.containerSmall}>\n          <div className={styles.containerSmallTop}>\n            <div\n              className={styles.containerButtonsWrapper}\n              onMouseEnter={() => setShowPin(true)}\n              onMouseLeave={() => setShowPin(false)}\n            >\n              <FiltersToggler onClick={handleOpen} />\n              {(showPin || isPinned || Boolean(anchorEl)) && (\n                <PinAppSwitch isPinned={isPinned} onClick={handlePinClick} />\n              )}\n            </div>\n            <div>{switchComponent}</div>\n          </div>\n\n          <Collapse timeout={100} in={isPinned && isShown}>\n            <div className={styles.containerSmallMiddle}>{filtersComponent}</div>\n          </Collapse>\n\n          <div className={styles.containerSmallBottom}>{goalComponent}</div>\n        </div>\n      </Collapse>\n\n      <Popover\n        id=\"filters-popper\"\n        classes={{\n          paper: classes.paper,\n        }}\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        <div className={styles.containerPopper}>{filtersComponent}</div>\n      </Popover>\n    </div>\n  );\n}\n\nPinnableFilters.propTypes = {\n  classes: PropTypes.shape({}).isRequired,\n  appWidth: PropTypes.number.isRequired,\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  isPinnedInitial: PropTypes.bool,\n  isShownInitial: PropTypes.bool,\n  onShowCallback: PropTypes.func,\n  onPinCallback: PropTypes.func,\n};\n\nPinnableFilters.defaultProps = {\n  isPinnedInitial: false,\n  isShownInitial: false,\n  onShowCallback: undefined,\n  onPinCallback: undefined,\n};\n\nconst StyledPinnableFilters = withStyles(muiStyles)(PinnableFilters);\n\nfunction WithSizeMe({ children, ...props }) {\n  return (\n    <SizeMe monitorWidth>\n      {({ size }) => (\n        <StyledPinnableFilters appWidth={size.width - 21} {...props}>\n          {children}\n        </StyledPinnableFilters>\n      )}\n    </SizeMe>\n  );\n}\n\nWithSizeMe.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n};\n\nexport default WithSizeMe;\n"],"names":["muiStyles","paper","backgroundColor","PinnableFilters","children","classes","appWidth","isPinnedInitial","isShownInitial","onShowCallback","onPinCallback","useState","anchorEl","setAnchorEl","isPinned","setIsPinned","isShown","setIsShown","showPin","setShowPin","handleChangePinned","value","handleChangeShown","componentsWidth","useComonentsWidth","appFilterTogglerWidth","useAppFilterTogglerWidth","layout","useFilterLayout","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","handleOpen","e","currentTarget","handleClose","handlePinClick","newPinState","_jsxs","width","_jsx","LARGE_SIZE_LAYOUT","styles","containerLarge","containerLargeTopright","MEDIUM_SIZE_LAYOUT","containerMedium","containerMediumTop","containerButtonsWrapper","Boolean","containerMediumTopright","containerMediumBottom","SMALL_SIZE_LAYOUT","containerSmall","containerSmallTop","containerSmallMiddle","containerSmallBottom","vertical","horizontal","containerPopper","propTypes","PropTypes","shape","isRequired","number","arrayOf","node","bool","func","defaultProps","undefined","StyledPinnableFilters","withStyles","WithSizeMe","props","size"],"mappings":"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"}

package/components/PinnableFilters/components/FiltersToggler.js

@@ -1 +1,41 @@
-import r from"@babel/runtime/helpers/defineProperty";import e from"prop-types";import t from"@material-ui/icons/Sort";import{withStyles as o}from"@material-ui/core/styles";import n from"../../Button/index.js";import{jsx as i}from"react/jsx-runtime";function c(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(r);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,o)}return t}function p(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?c(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):c(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}function s(r){var e=r.onClick,o=r.classes;return i("div",{onClick:e,children:i(n,{className:o.button,startIcon:i(t,{}),children:"Filters"})})}s.propTypes={onClick:e.func.isRequired};var a=o((function(r){return{button:p(p({},r.isLightTheme?{color:"black"}:{}),{},{marginRight:r.spacing()})}}))(s);export{a as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { jsx } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import SortIcon from '@material-ui/icons/Sort';
+import Button from '../../Button/index.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var muiStyles = function muiStyles(theme) {
+  return {
+    button: _objectSpread(_objectSpread({}, theme.isLightTheme ? {
+      color: 'black'
+    } : {}), {}, {
+      marginRight: theme.spacing()
+    })
+  };
+};
+
+function FiltersToggler(_ref) {
+  var onClick = _ref.onClick,
+      classes = _ref.classes;
+  return /*#__PURE__*/jsx("div", {
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Button, {
+      className: classes.button,
+      startIcon: /*#__PURE__*/jsx(SortIcon, {}),
+      children: "Filters"
+    })
+  });
+}
+
+FiltersToggler.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+var FiltersToggler$1 = withStyles(muiStyles)(FiltersToggler);
+
+export default FiltersToggler$1;
+//# sourceMappingURL=FiltersToggler.js.map

package/components/PinnableFilters/components/FiltersToggler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersToggler.js","sources":["../../../../src/components/PinnableFilters/components/FiltersToggler.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport SortIcon from '@material-ui/icons/Sort';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '~/components/Button';\n\nconst muiStyles = theme => ({\n  button: {\n    ...(theme.isLightTheme ? { color: 'black'}  : {}),\n\n    marginRight: theme.spacing(),\n  },\n});\n\nfunction FiltersToggler({ onClick, classes }) {\n  return (\n    <div onClick={onClick}>\n      <Button className={classes.button} startIcon={<SortIcon />}>\n        Filters\n      </Button>\n    </div>\n  );\n}\n\nFiltersToggler.propTypes = {\n  onClick: PropTypes.func.isRequired,\n};\nexport default withStyles(muiStyles)(FiltersToggler);\n"],"names":["muiStyles","theme","button","isLightTheme","color","marginRight","spacing","FiltersToggler","onClick","classes","_jsx","propTypes","PropTypes","func","isRequired","withStyles"],"mappings":";;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAAAC,KAAK;AAAA,SAAK;AAC1BC,IAAAA,MAAM,kCACAD,KAAK,CAACE,YAAN,GAAqB;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAArB,GAA0C,EAD1C;AAGJC,MAAAA,WAAW,EAAEJ,KAAK,CAACK,OAAN;AAHT;AADoB,GAAL;AAAA,CAAvB;;AAQA,SAASC,cAAT,OAA8C;AAAA,MAApBC,OAAoB,QAApBA,OAAoB;AAAA,MAAXC,OAAW,QAAXA,OAAW;AAC5C,sBACEC;AAAK,IAAA,OAAO,EAAEF,OAAd;AAAA,2BACEE,IAAC,MAAD;AAAQ,MAAA,SAAS,EAAED,OAAO,CAACP,MAA3B;AAAmC,MAAA,SAAS,eAAEQ,IAAC,QAAD,KAA9C;AAAA;AAAA;AADF,IADF;AAOD;;AAEDH,cAAc,CAACI,SAAf,GAA2B;AACzBH,EAAAA,OAAO,EAAEI,SAAS,CAACC,IAAV,CAAeC;AADC,CAA3B;AAGA,uBAAeC,UAAU,CAACf,SAAD,CAAV,CAAsBO,cAAtB,CAAf;;;;"}

package/components/PinnableFilters/components/PinAppSwitch.js

@@ -1 +1,70 @@
-import e from"prop-types";import{withStyles as i}from"@material-ui/core/styles";import{Tooltip as r,Typography as n}from"@material-ui/core";import{jsx as o,jsxs as t,Fragment as a}from"react/jsx-runtime";var l=i({tooltip:{backgroundColor:"rgba(59, 59, 59, 0.9)",color:"#ffffff",fontSize:"11px",fontWeight:500,lineHeight:"16px",borderRadius:"4px"}})(r);function s(e){var i=e.isPinned,r=e.onClick,s=e.classes;return o(l,{title:i?"Unpin Filters":"Pin Filters",enterTouchDelay:10,children:o("div",{onClick:r,className:s.container,style:{alignSelf:i?"flex-end":"flex-start"},children:t(a,{children:[o("img",{src:"/static/media/8c46f4027d283b5424dea0e75f546378.svg",alt:"Pin icon",className:s.icon}),o(n,{variant:"body2",className:s.label,children:i?"Unpin":"Pin"})]})})})}s.propTypes={isPinned:e.bool.isRequired,classes:e.shape({}).isRequired,onClick:e.func.isRequired};var c=i({container:{display:"flex",alignItems:"center",cursor:"pointer",margin:"auto",color:"#999999"},icon:{marginRight:"6px"},label:{fontSize:"10px",lineHeight:"14px"}})(s);export{c as default};
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Tooltip, Typography } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+var pinIcon = "/static/media/8c46f4027d283b5424dea0e75f546378.svg";
+var muiStyles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    margin: 'auto',
+    color: '#999999'
+  },
+  icon: {
+    marginRight: '6px'
+  },
+  label: {
+    fontSize: '10px',
+    lineHeight: '14px'
+  }
+};
+var StyledTooltip = withStyles({
+  tooltip: {
+    backgroundColor: 'rgba(59, 59, 59, 0.9)',
+    color: '#ffffff',
+    fontSize: '11px',
+    fontWeight: 500,
+    lineHeight: '16px',
+    borderRadius: '4px'
+  }
+})(Tooltip);
+
+function PinAppSwitch(_ref) {
+  var isPinned = _ref.isPinned,
+      onClick = _ref.onClick,
+      classes = _ref.classes;
+  return /*#__PURE__*/jsx(StyledTooltip, {
+    title: isPinned ? 'Unpin Filters' : 'Pin Filters',
+    enterTouchDelay: 10,
+    children: /*#__PURE__*/jsx("div", {
+      onClick: onClick,
+      className: classes.container,
+      style: {
+        alignSelf: isPinned ? 'flex-end' : 'flex-start'
+      },
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("img", {
+          src: pinIcon,
+          alt: "Pin icon",
+          className: classes.icon
+        }), /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          className: classes.label,
+          children: isPinned ? 'Unpin' : 'Pin'
+        })]
+      })
+    })
+  });
+}
+
+PinAppSwitch.propTypes = {
+  isPinned: PropTypes.bool.isRequired,
+  classes: PropTypes.shape({}).isRequired,
+  onClick: PropTypes.func.isRequired
+};
+var PinAppSwitch$1 = withStyles(muiStyles)(PinAppSwitch);
+
+export default PinAppSwitch$1;
+//# sourceMappingURL=PinAppSwitch.js.map

package/components/PinnableFilters/components/PinAppSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinAppSwitch.js","sources":["../../../../src/components/PinnableFilters/components/PinAppSwitch.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography, Tooltip } from '@material-ui/core';\nimport pinIcon from './pin.svg';\n\nconst muiStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    cursor: 'pointer',\n    margin: 'auto',\n    color: '#999999',\n  },\n  icon: {\n    marginRight: '6px',\n  },\n  label: {\n    fontSize: '10px',\n    lineHeight: '14px',\n  },\n};\n\nconst StyledTooltip = withStyles({\n  tooltip: {\n    backgroundColor: 'rgba(59, 59, 59, 0.9)',\n    color: '#ffffff',\n    fontSize: '11px',\n    fontWeight: 500,\n    lineHeight: '16px',\n    borderRadius: '4px',\n  },\n})(Tooltip);\n\nfunction PinAppSwitch({ isPinned, onClick, classes }) {\n  return (\n    <StyledTooltip title={isPinned ? 'Unpin Filters' : 'Pin Filters'} enterTouchDelay={10}>\n      <div\n        onClick={onClick}\n        className={classes.container}\n        style={{ alignSelf: isPinned ? 'flex-end' : 'flex-start' }}\n      >\n        <>\n          <img src={pinIcon} alt=\"Pin icon\" className={classes.icon} />\n          <Typography variant=\"body2\" className={classes.label}>\n            {isPinned ? 'Unpin' : 'Pin'}\n          </Typography>\n        </>\n      </div>\n    </StyledTooltip>\n  );\n}\n\nPinAppSwitch.propTypes = {\n  isPinned: PropTypes.bool.isRequired,\n  classes: PropTypes.shape({}).isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default withStyles(muiStyles)(PinAppSwitch);\n"],"names":["muiStyles","container","display","alignItems","cursor","margin","color","icon","marginRight","label","fontSize","lineHeight","StyledTooltip","withStyles","tooltip","backgroundColor","fontWeight","borderRadius","Tooltip","PinAppSwitch","isPinned","onClick","classes","_jsx","alignSelf","_jsxs","pinIcon","propTypes","PropTypes","bool","isRequired","shape","func"],"mappings":";;;;;;AAKA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,OAAO,EAAE,MADA;AAETC,IAAAA,UAAU,EAAE,QAFH;AAGTC,IAAAA,MAAM,EAAE,SAHC;AAITC,IAAAA,MAAM,EAAE,MAJC;AAKTC,IAAAA,KAAK,EAAE;AALE,GADK;AAQhBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,WAAW,EAAE;AADT,GARU;AAWhBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,MADL;AAELC,IAAAA,UAAU,EAAE;AAFP;AAXS,CAAlB;AAiBA,IAAMC,aAAa,GAAGC,UAAU,CAAC;AAC/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAE,uBADV;AAEPT,IAAAA,KAAK,EAAE,SAFA;AAGPI,IAAAA,QAAQ,EAAE,MAHH;AAIPM,IAAAA,UAAU,EAAE,GAJL;AAKPL,IAAAA,UAAU,EAAE,MALL;AAMPM,IAAAA,YAAY,EAAE;AANP;AADsB,CAAD,CAAV,CASnBC,OATmB,CAAtB;;AAWA,SAASC,YAAT,OAAsD;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,OAAoB,QAApBA,OAAoB;AAAA,MAAXC,OAAW,QAAXA,OAAW;AACpD,sBACEC,IAAC,aAAD;AAAe,IAAA,KAAK,EAAEH,QAAQ,GAAG,eAAH,GAAqB,aAAnD;AAAkE,IAAA,eAAe,EAAE,EAAnF;AAAA,2BACEG;AACE,MAAA,OAAO,EAAEF,OADX;AAEE,MAAA,SAAS,EAAEC,OAAO,CAACrB,SAFrB;AAGE,MAAA,KAAK,EAAE;AAAEuB,QAAAA,SAAS,EAAEJ,QAAQ,GAAG,UAAH,GAAgB;AAArC,OAHT;AAAA,6BAKEK;AAAA,gCACEF;AAAK,UAAA,GAAG,EAAEG,OAAV;AAAmB,UAAA,GAAG,EAAC,UAAvB;AAAkC,UAAA,SAAS,EAAEJ,OAAO,CAACf;AAArD,UADF,eAEEgB,IAAC,UAAD;AAAY,UAAA,OAAO,EAAC,OAApB;AAA4B,UAAA,SAAS,EAAED,OAAO,CAACb,KAA/C;AAAA,oBACGW,QAAQ,GAAG,OAAH,GAAa;AADxB,UAFF;AAAA;AALF;AADF,IADF;AAgBD;;AAEDD,YAAY,CAACQ,SAAb,GAAyB;AACvBP,EAAAA,QAAQ,EAAEQ,SAAS,CAACC,IAAV,CAAeC,UADF;AAEvBR,EAAAA,OAAO,EAAEM,SAAS,CAACG,KAAV,CAAgB,EAAhB,EAAoBD,UAFN;AAGvBT,EAAAA,OAAO,EAAEO,SAAS,CAACI,IAAV,CAAeF;AAHD,CAAzB;AAMA,qBAAejB,UAAU,CAACb,SAAD,CAAV,CAAsBmB,YAAtB,CAAf;;;;"}

package/components/PinnableFilters/constants.js

@@ -1 +1,6 @@
-var r=0,a=1,e=2;export{r as LARGE_SIZE_LAYOUT,a as MEDIUM_SIZE_LAYOUT,e as SMALL_SIZE_LAYOUT};
+var LARGE_SIZE_LAYOUT = 0;
+var MEDIUM_SIZE_LAYOUT = 1;
+var SMALL_SIZE_LAYOUT = 2;
+
+export { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT };
+//# sourceMappingURL=constants.js.map

package/components/PinnableFilters/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/PinnableFilters/constants.js"],"sourcesContent":["export const LARGE_SIZE_LAYOUT = 0;\nexport const MEDIUM_SIZE_LAYOUT = 1;\nexport const SMALL_SIZE_LAYOUT = 2;"],"names":["LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","SMALL_SIZE_LAYOUT"],"mappings":"IAAaA,iBAAiB,GAAG;IACpBC,kBAAkB,GAAG;IACrBC,iBAAiB,GAAG;;;;"}

package/components/PinnableFilters/effects/index.js

@@ -1 +1,178 @@
-import r from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import{useState as t,useEffect as i,useRef as o}from"react";import n from"react-dom";import{isEqual as m}from"lodash";import{MuiThemeProvider as c}from"@material-ui/core/styles";import{MuiPickersUtilsProvider as u}from"@material-ui/pickers";import l from"@date-io/moment";import s from"moment";import{darkTheme as a}from"../../../config/theme/index.js";import"highcharts";import"highcharts/highcharts-more";import"highcharts-multicolor-series";import"highcharts/modules/solid-gauge";import"highcharts/modules/heatmap";import"highcharts/modules/boost";import"highcharts/modules/exporting";import"highcharts/modules/xrange";import"highcharts/modules/dumbbell";import"highcharts/modules/pattern-fill";import"@babel/runtime/helpers/typeof";import"../../../config/mapbox/index.js";import p from"../components/FiltersToggler.js";import{getStartComponent as h,getMiddleComponent as f,getEndComponents as d}from"../utils.js";import{LARGE_SIZE_LAYOUT as b,MEDIUM_SIZE_LAYOUT as g,SMALL_SIZE_LAYOUT as y}from"../constants.js";import{jsx as v}from"react/jsx-runtime";function j(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,i)}return t}function O(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?j(Object(i),!0).forEach((function(t){r(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):j(Object(i)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(i,r))}))}return e}function k(r,o,n,m){var c=t(null),u=e(c,2),l=u[0],s=u[1];return i((function(){if(m&&o){var e=h(r),t=f(r),i=d(r),c=e&&t&&!i,u=e&&!t&&i,l=e&&t&&i;if(e&&!t&&!i){var a=o[e.key];if(a<=m)return void s(b);if(a<=m/2)return void s(g)}else if(c||u){var p=o[e.key],v=c?o[t.key]:o[i.key];if(p+v<=m)return void s(b);if(n+v<=m)return void s(g)}else if(l){var j=o[e.key],O=o[t.key],k=o[i.key];if(j+O+k<=m)return void s(b);if(n+O+k<=m)return void s(g);if(n+k<=m)return void s(y)}s(y)}}),[o,m]),l}function P(p){var h=o({}),f=t(null),d=e(f,2),b=d[0],g=d[1],y=o({});return i((function(){var e=p.filter((function(r){return!!r}));m(e,y.current)||(h.current={},e.forEach((function(t){var i=document.createElement("div");i.style.position="absolute",i.style.visibility="hidden",document.body.appendChild(i),t&&n.render(v(c,{theme:a,children:v(u,{libInstance:s,utils:l,children:t})}),i,(function(){var o=i.getBoundingClientRect();i.remove(),h.current=O(O({},h.current),{},r({},t.key,o.width)),Object.values(h.current).length===e.length&&(m(b,h.current)||g(h.current))}))})),y.current=e)})),b}function w(){var r=t(null),o=e(r,2),m=o[0],u=o[1];return i((function(){var r=document.createElement("div");r.style.position="absolute",r.style.visibility="hidden",document.body.appendChild(r),n.render(v(c,{theme:a,children:v(p,{})}),r,(function(){var e=r.getBoundingClientRect();r.remove(),u(e.width)}))}),[]),m}export{w as useAppFilterTogglerWidth,P as useComonentsWidth,k as useFilterLayout};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { isEqual } from 'lodash';
+import moment from 'moment';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/typeof';
+import { jsx } from 'react/jsx-runtime';
+import { darkTheme } from '../../../config/theme/index.js';
+import 'highcharts';
+import 'highcharts/highcharts-more';
+import 'highcharts-multicolor-series';
+import 'highcharts/modules/solid-gauge';
+import 'highcharts/modules/heatmap';
+import 'highcharts/modules/boost';
+import 'highcharts/modules/exporting';
+import 'highcharts/modules/xrange';
+import 'highcharts/modules/dumbbell';
+import 'highcharts/modules/pattern-fill';
+import '../../../config/mapbox/index.js';
+import { useState, useEffect, useRef } from 'react';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
+import ReactDOM from 'react-dom';
+import FiltersToggler from '../components/FiltersToggler.js';
+import { getStartComponent, getMiddleComponent, getEndComponents } from '../utils.js';
+import { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      layout = _useState2[0],
+      setLayout = _useState2[1];
+
+  useEffect(function () {
+    if (!appWidth || !componentsWidth) {
+      return;
+    }
+
+    var filtersComponent = getStartComponent(components);
+    var goalComponent = getMiddleComponent(components);
+    var switchComponent = getEndComponents(components);
+    var hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;
+    var hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;
+    var hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;
+    var hasAll = filtersComponent && goalComponent && switchComponent;
+
+    if (hasFiltersOnly) {
+      var filtersWidth = componentsWidth[filtersComponent.key];
+
+      if (filtersWidth <= appWidth) {
+        setLayout(LARGE_SIZE_LAYOUT);
+        return;
+      }
+
+      if (filtersWidth <= appWidth / 2) {
+        setLayout(MEDIUM_SIZE_LAYOUT);
+        return;
+      }
+    } else if (hasFiltersAndGoals || hasFiltersAndSwitch) {
+      var startWidth = componentsWidth[filtersComponent.key];
+      var endWidth = hasFiltersAndGoals ? componentsWidth[goalComponent.key] : componentsWidth[switchComponent.key];
+
+      if (startWidth + endWidth <= appWidth) {
+        setLayout(LARGE_SIZE_LAYOUT);
+        return;
+      }
+
+      if (appFilterTogglerWidth + endWidth <= appWidth) {
+        setLayout(MEDIUM_SIZE_LAYOUT);
+        return;
+      }
+    } else if (hasAll) {
+      var _startWidth = componentsWidth[filtersComponent.key];
+      var middleWidth = componentsWidth[goalComponent.key];
+      var _endWidth = componentsWidth[switchComponent.key];
+
+      if (_startWidth + middleWidth + _endWidth <= appWidth) {
+        setLayout(LARGE_SIZE_LAYOUT);
+        return;
+      }
+
+      if (appFilterTogglerWidth + middleWidth + _endWidth <= appWidth) {
+        setLayout(MEDIUM_SIZE_LAYOUT);
+        return;
+      }
+
+      if (appFilterTogglerWidth + _endWidth <= appWidth) {
+        setLayout(SMALL_SIZE_LAYOUT);
+        return;
+      }
+    }
+
+    setLayout(SMALL_SIZE_LAYOUT);
+  }, [componentsWidth, appWidth]);
+  return layout;
+} // NOTE: Calculate the width of child components here
+
+function useComonentsWidth(components) {
+  var widthRef = useRef({});
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      widthDict = _useState4[0],
+      setWidthDict = _useState4[1];
+
+  var prevComponentsRef = useRef({}); // NOTE: Calcualte width of each components
+
+  useEffect(function () {
+    var validComponents = components.filter(function (component) {
+      return !!component;
+    }); // NOTE: Don't calcuate width again
+
+    if (isEqual(validComponents, prevComponentsRef.current)) {
+      return;
+    }
+
+    widthRef.current = {};
+    validComponents.forEach(function (component) {
+      var element = document.createElement('div');
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      document.body.appendChild(element);
+
+      if (component) {
+        ReactDOM.render( /*#__PURE__*/jsx(MuiThemeProvider, {
+          theme: darkTheme,
+          children: /*#__PURE__*/jsx(MuiPickersUtilsProvider, {
+            libInstance: moment,
+            utils: MomentUtils,
+            children: component
+          })
+        }), element, function () {
+          var dims = element.getBoundingClientRect();
+          element.remove();
+          widthRef.current = _objectSpread(_objectSpread({}, widthRef.current), {}, _defineProperty({}, component.key, dims.width));
+
+          if (Object.values(widthRef.current).length === validComponents.length) {
+            if (!isEqual(widthDict, widthRef.current)) {
+              setWidthDict(widthRef.current);
+            }
+          }
+        });
+      }
+    });
+    prevComponentsRef.current = validComponents;
+  });
+  return widthDict;
+} // NOTE: Calculate the width of Toggler Component
+
+function useAppFilterTogglerWidth() {
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      width = _useState6[0],
+      setWidth = _useState6[1];
+
+  useEffect(function () {
+    var element = document.createElement('div');
+    element.style.position = 'absolute';
+    element.style.visibility = 'hidden';
+    document.body.appendChild(element);
+    ReactDOM.render( /*#__PURE__*/jsx(MuiThemeProvider, {
+      theme: darkTheme,
+      children: /*#__PURE__*/jsx(FiltersToggler, {})
+    }), element, function () {
+      var dims = element.getBoundingClientRect();
+      element.remove();
+      setWidth(dims.width);
+    });
+  }, []);
+  return width;
+}
+
+export { useAppFilterTogglerWidth, useComonentsWidth, useFilterLayout };
+//# sourceMappingURL=index.js.map

package/components/PinnableFilters/effects/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/PinnableFilters/effects/index.js"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { isEqual } from 'lodash';\n\nimport { MuiThemeProvider } from '@material-ui/core/styles';\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers';\nimport MomentUtils from '@date-io/moment';\nimport moment from 'moment';\nimport { theme } from '~/config';\nimport FiltersToggler from '../components/FiltersToggler';\n\nimport { getStartComponent, getMiddleComponent, getEndComponents } from '../utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants';\n\n// NOTE: Determine layout according to the width of elements\nexport function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {\n  const [layout, setLayout] = useState(null);\n\n  useEffect(() => {\n    if (!appWidth || !componentsWidth) {\n      return;\n    }\n\n    const filtersComponent = getStartComponent(components);\n    const goalComponent = getMiddleComponent(components);\n    const switchComponent = getEndComponents(components);\n\n    const hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;\n    const hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;\n    const hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;\n    const hasAll = filtersComponent && goalComponent && switchComponent;\n\n    if (hasFiltersOnly) {\n      const filtersWidth = componentsWidth[filtersComponent.key];\n\n      if (filtersWidth <= appWidth) {\n        setLayout(LARGE_SIZE_LAYOUT);\n        return;\n      }\n\n      if (filtersWidth <= appWidth / 2) {\n        setLayout(MEDIUM_SIZE_LAYOUT);\n        return;\n      }\n    } else if (hasFiltersAndGoals || hasFiltersAndSwitch) {\n      const startWidth = componentsWidth[filtersComponent.key];\n      const endWidth = hasFiltersAndGoals\n        ? componentsWidth[goalComponent.key]\n        : componentsWidth[switchComponent.key];\n\n      if (startWidth + endWidth <= appWidth) {\n        setLayout(LARGE_SIZE_LAYOUT);\n        return;\n      }\n\n      if (appFilterTogglerWidth + endWidth <= appWidth) {\n        setLayout(MEDIUM_SIZE_LAYOUT);\n        return;\n      }\n    } else if (hasAll) {\n      const startWidth = componentsWidth[filtersComponent.key];\n      const middleWidth = componentsWidth[goalComponent.key];\n      const endWidth = componentsWidth[switchComponent.key];\n\n      if (startWidth + middleWidth + endWidth <= appWidth) {\n        setLayout(LARGE_SIZE_LAYOUT);\n        return;\n      }\n\n      if (appFilterTogglerWidth + middleWidth + endWidth <= appWidth) {\n        setLayout(MEDIUM_SIZE_LAYOUT);\n        return;\n      }\n\n      if (appFilterTogglerWidth + endWidth <= appWidth) {\n        setLayout(SMALL_SIZE_LAYOUT);\n        return;\n      }\n    }\n\n    setLayout(SMALL_SIZE_LAYOUT);\n  }, [componentsWidth, appWidth]);\n\n  return layout;\n}\n\n// NOTE: Calculate the width of child components here\nexport function useComonentsWidth(components) {\n  const widthRef = useRef({});\n  const [widthDict, setWidthDict] = useState(null);\n  const prevComponentsRef = useRef({});\n\n  // NOTE: Calcualte width of each components\n  useEffect(() => {\n    const validComponents = components.filter(component => !!component);\n\n    // NOTE: Don't calcuate width again\n    if (isEqual(validComponents, prevComponentsRef.current)) {\n      return;\n    }\n\n    widthRef.current = {};\n\n    validComponents.forEach(component => {\n      const element = document.createElement('div');\n      element.style.position = 'absolute';\n      element.style.visibility = 'hidden';\n      document.body.appendChild(element);\n\n      if (component) {\n        ReactDOM.render(\n          <MuiThemeProvider theme={theme.darkTheme}>\n            <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>\n              {component}\n            </MuiPickersUtilsProvider>\n          </MuiThemeProvider>,\n          element,\n          () => {\n            const dims = element.getBoundingClientRect();\n            element.remove();\n\n            widthRef.current = {\n              ...widthRef.current,\n              [component.key]: dims.width,\n            };\n\n            if (Object.values(widthRef.current).length === validComponents.length) {\n              if (!isEqual(widthDict, widthRef.current)) {\n                setWidthDict(widthRef.current);\n              }\n            }\n          }\n        );\n      }\n    });\n\n    prevComponentsRef.current = validComponents;\n  });\n\n  return widthDict;\n}\n\n// NOTE: Calculate the width of Toggler Component\nexport function useAppFilterTogglerWidth() {\n  const [width, setWidth] = useState(null);\n\n  useEffect(() => {\n    const element = document.createElement('div');\n    element.style.position = 'absolute';\n    element.style.visibility = 'hidden';\n    document.body.appendChild(element);\n\n    ReactDOM.render(\n      <MuiThemeProvider theme={theme.darkTheme}>\n        <FiltersToggler />\n      </MuiThemeProvider>,\n      element,\n      () => {\n        const dims = element.getBoundingClientRect();\n        element.remove();\n        setWidth(dims.width);\n      }\n    );\n  }, []);\n\n  return width;\n}\n"],"names":["useFilterLayout","components","componentsWidth","appFilterTogglerWidth","appWidth","useState","layout","setLayout","useEffect","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","hasFiltersOnly","hasFiltersAndGoals","hasFiltersAndSwitch","hasAll","filtersWidth","key","LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","startWidth","endWidth","middleWidth","SMALL_SIZE_LAYOUT","useComonentsWidth","widthRef","useRef","widthDict","setWidthDict","prevComponentsRef","validComponents","filter","component","isEqual","current","forEach","element","document","createElement","style","position","visibility","body","appendChild","ReactDOM","render","_jsx","theme","moment","MomentUtils","dims","getBoundingClientRect","remove","width","Object","values","length","useAppFilterTogglerWidth","setWidth"],"mappings":"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"}

package/components/PinnableFilters/utils.js

@@ -1 +1,19 @@
-function n(n){return n.find((function(n){return n&&n.key&&(n.key.includes("filter")||n.key.includes("start"))}))}function e(n){return n.find((function(n){return n&&n.key&&(n.key.includes("goal")||n.key.includes("middle"))}))}function i(n){return n.find((function(n){return n&&n.key&&(n.key.includes("switch")||n.key.includes("end"))}))}export{i as getEndComponents,e as getMiddleComponent,n as getStartComponent};
+// NOTE: Get components based on "key" props specified
+function getStartComponent(components) {
+  return components.find(function (item) {
+    return item && item.key && (item.key.includes('filter') || item.key.includes('start'));
+  });
+}
+function getMiddleComponent(components) {
+  return components.find(function (item) {
+    return item && item.key && (item.key.includes('goal') || item.key.includes('middle'));
+  });
+}
+function getEndComponents(components) {
+  return components.find(function (item) {
+    return item && item.key && (item.key.includes('switch') || item.key.includes('end'));
+  });
+}
+
+export { getEndComponents, getMiddleComponent, getStartComponent };
+//# sourceMappingURL=utils.js.map

package/components/PinnableFilters/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/PinnableFilters/utils.js"],"sourcesContent":["// NOTE: Get components based on \"key\" props specified\nexport function getStartComponent(components) {\n  return components.find(\n    item => item && item.key && (item.key.includes('filter') || item.key.includes('start'))\n  );\n}\n\nexport function getMiddleComponent(components) {\n  return components.find(\n    item => item && item.key && (item.key.includes('goal') || item.key.includes('middle'))\n  );\n}\n\nexport function getEndComponents(components) {\n  return components.find(\n    item => item && item.key && (item.key.includes('switch') || item.key.includes('end'))\n  );\n}"],"names":["getStartComponent","components","find","item","key","includes","getMiddleComponent","getEndComponents"],"mappings":"AAAA;AACO,SAASA,iBAAT,CAA2BC,UAA3B,EAAuC;AAC5C,SAAOA,UAAU,CAACC,IAAX,CACL,UAAAC,IAAI;AAAA,WAAIA,IAAI,IAAIA,IAAI,CAACC,GAAb,KAAqBD,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,QAAlB,KAA+BF,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,OAAlB,CAApD,CAAJ;AAAA,GADC,CAAP;AAGD;AAEM,SAASC,kBAAT,CAA4BL,UAA5B,EAAwC;AAC7C,SAAOA,UAAU,CAACC,IAAX,CACL,UAAAC,IAAI;AAAA,WAAIA,IAAI,IAAIA,IAAI,CAACC,GAAb,KAAqBD,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,MAAlB,KAA6BF,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,QAAlB,CAAlD,CAAJ;AAAA,GADC,CAAP;AAGD;AAEM,SAASE,gBAAT,CAA0BN,UAA1B,EAAsC;AAC3C,SAAOA,UAAU,CAACC,IAAX,CACL,UAAAC,IAAI;AAAA,WAAIA,IAAI,IAAIA,IAAI,CAACC,GAAb,KAAqBD,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,QAAlB,KAA+BF,IAAI,CAACC,GAAL,CAASC,QAAT,CAAkB,KAAlB,CAApD,CAAJ;AAAA,GADC,CAAP;AAGD;;;;"}

package/components/PostInput/PostInput.css.js

@@ -1 +1,8 @@
-import t from'./../../ext-esm/style-inject/dist/style-inject.es.js';var i={input:"PostInput_input__gBiG5",inputTextField:"PostInput_inputTextField__uwBDT",inputTextFieldSmaller:"PostInput_inputTextFieldSmaller__yG0Ll",inputInput:"PostInput_inputInput__86zk8",inputAdornment:"PostInput_inputAdornment__dFrqi"};t(".PostInput_input__gBiG5{width:100%}.PostInput_inputTextField__uwBDT{background:#4d4d4d;border-radius:4px;box-sizing:border-box;min-height:120px;padding:8px 6px!important;transition:box-shadow .2s ease-in-out;width:100%}.PostInput_inputTextFieldSmaller__yG0Ll{height:77px;min-height:77px}.PostInput_inputTextFieldSmaller__yG0Ll div[class^=style_mention]{max-height:27px;z-index:1}.PostInput_inputTextFieldSmaller__yG0Ll .PostInput_inputInput__86zk8{height:30px}.PostInput_inputTextField__uwBDT:focus-within{box-shadow:inset 0 0 0 2px #03bcd4}.PostInput_inputAdornment__dFrqi{display:flex;flex:1;height:auto;justify-content:flex-end;margin:0 16px;width:100%}.PostInput_input__gBiG5 .MuiInputBase-root{display:flex;flex-direction:column}");export{i as default};
+import styleInject from '../../ext-esm/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".PostInput_input__16eG- {\n  width: 100%;\n}\n\n.PostInput_inputTextField__kEr_F {\n  width: 100%;\n  min-height: 120px;\n  background: #4d4d4d;\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 8px 6px !important;\n  transition: box-shadow 0.2s ease-in-out;\n}\n\n.PostInput_inputTextFieldSmaller__1L9a1 {\n  min-height: 77px;\n  height: 77px;\n}\n\n/* To style react-mentions elements inside the input */\n\n.PostInput_inputTextFieldSmaller__1L9a1 div[class^='style_mention'] {\n  z-index: 1;\n  max-height: 27px;\n}\n\n.PostInput_inputTextFieldSmaller__1L9a1 .PostInput_inputInput__20Jmc {\n  height: 30px;\n}\n\n.PostInput_inputTextField__kEr_F:focus-within {\n  box-shadow: inset 0 0 0 2px #03bcd4;\n}\n\n.PostInput_inputAdornment__2hpEe {\n  height: auto;\n  width: 100%;\n  display: flex;\n  flex: 1;\n  margin: 0 16px;\n  justify-content: flex-end;\n}\n\n.PostInput_input__16eG- .MuiInputBase-root {\n  display: flex;\n  flex-direction: column;\n}\n";
+var styles = {"input":"PostInput_input__16eG-","inputTextField":"PostInput_inputTextField__kEr_F","inputTextFieldSmaller":"PostInput_inputTextFieldSmaller__1L9a1","inputInput":"PostInput_inputInput__20Jmc","inputAdornment":"PostInput_inputAdornment__2hpEe"};
+styleInject(css_248z);
+
+export default styles;
+//# sourceMappingURL=PostInput.css.js.map

package/components/PostInput/PostInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,oDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;"}

package/components/PostInput/PostInput.js

@@ -1 +1,135 @@
-import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import r from"prop-types";import{useState as o,useEffect as i}from"react";import{TextField as t,InputAdornment as a}from"@material-ui/core";import l from"classnames";import{noop as s}from"lodash";import m from"../FilePreview/index.js";import p from"../FailedFileUploading.js";import u from"../UserMention/index.js";import c from"../FileUploadIconButton.js";import d from"../EmojiIconButton.js";import f from"./PostInput.css.js";import{jsxs as h,jsx as y}from"react/jsx-runtime";var w=function(r){var s=r.className,w=r.userCompanyId,g=r.onChange,v=r.onKeyDown,b=r.initialValue,C=r.filePreviewWrapperClass,P=r.smallerView,F=o(b.body),j=n(F,2),I=j[0],N=j[1],T=o(b.attachment),x=n(T,2),D=x[0],U=x[1],V=o(null),A=n(V,2),K=A[0],E=A[1];return i((function(){g({body:I,attachment:D})}),[I,D]),h("div",{className:l(f.input,s),children:[y(t,{className:l(f.inputTextField,e({},f.inputTextFieldSmaller,P)),placeholder:"Add Comment...",FormHelperTextProps:{component:"div",margin:"dense"},InputProps:{inputComponent:u,inputProps:{onChange:N,value:I,withLightTheme:!1,companyId:w,autoFocus:!0,className:f.inputInput,placeholder:"Type here..."},endAdornment:h(a,{position:"end",className:f.inputAdornment,children:[!D&&y("div",{children:y(c,{openPreviewDialogOnUpload:!1,onFinish:function(e,n,r){U({url:e,name:n,size:r})},onError:E})}),y("div",{children:y(d,{handleSelectEmoji:function(e){return N((function(n){return"".concat(n).concat(e.native)}))}})})]}),disableUnderline:!0,classes:{}},onKeyDown:v}),D&&y(m,{fileName:D.name,fileUrl:D.url,handleFileDelete:function(){return U(null)},classes:{wrapper:C}}),K&&y(p,{errorMessage:K})]})};w.propTypes={userCompanyId:r.oneOfType([r.string,r.number]).isRequired,className:r.string,onKeyDown:r.func,onChange:r.func,initialValue:r.shape({body:r.string,attachment:r.shape({})}),filePreviewWrapperClass:r.string,smallerView:r.bool},w.defaultProps={className:null,initialValue:{body:"",attachment:null},filePreviewWrapperClass:null,onKeyDown:s,onChange:s,smallerView:!1};export{w as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { noop } from 'lodash';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextField, InputAdornment } from '@material-ui/core';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import UserMention from '../UserMention/index.js';
+import EmojiIconButton from '../EmojiIconButton.js';
+import FailedFileUploading from '../FailedFileUploading.js';
+import FileUploadIconButton from '../FileUploadIconButton.js';
+import FilePreview from '../FilePreview/index.js';
+import styles from './PostInput.css.js';
+
+var PostInput = function PostInput(_ref) {
+  var className = _ref.className,
+      userCompanyId = _ref.userCompanyId,
+      onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
+      initialValue = _ref.initialValue,
+      filePreviewWrapperClass = _ref.filePreviewWrapperClass,
+      smallerView = _ref.smallerView;
+
+  var _useState = useState(initialValue.body),
+      _useState2 = _slicedToArray(_useState, 2),
+      body = _useState2[0],
+      setBody = _useState2[1];
+
+  var _useState3 = useState(initialValue.attachment),
+      _useState4 = _slicedToArray(_useState3, 2),
+      attachment = _useState4[0],
+      setAttachment = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      attachmentLoadingError = _useState6[0],
+      setAttachmentLoadingError = _useState6[1];
+
+  useEffect(function () {
+    onChange({
+      body: body,
+      attachment: attachment
+    });
+  }, [body, attachment]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(styles.input, className),
+    children: [/*#__PURE__*/jsx(TextField, {
+      className: classNames(styles.inputTextField, _defineProperty({}, styles.inputTextFieldSmaller, smallerView)),
+      placeholder: "Add Comment...",
+      FormHelperTextProps: {
+        component: 'div',
+        margin: 'dense'
+      },
+      InputProps: {
+        inputComponent: UserMention,
+        inputProps: {
+          onChange: setBody,
+          value: body,
+          withLightTheme: false,
+          companyId: userCompanyId,
+          autoFocus: true,
+          className: styles.inputInput,
+          placeholder: 'Type here...'
+        },
+        endAdornment: /*#__PURE__*/jsxs(InputAdornment, {
+          position: "end",
+          className: styles.inputAdornment,
+          children: [!attachment && /*#__PURE__*/jsx("div", {
+            children: /*#__PURE__*/jsx(FileUploadIconButton, {
+              openPreviewDialogOnUpload: false,
+              onFinish: function onFinish(url, name, size) {
+                setAttachment({
+                  url: url,
+                  name: name,
+                  size: size
+                });
+              },
+              onError: setAttachmentLoadingError
+            })
+          }), /*#__PURE__*/jsx("div", {
+            children: /*#__PURE__*/jsx(EmojiIconButton, {
+              handleSelectEmoji: function handleSelectEmoji(emoji) {
+                return setBody(function (prevText) {
+                  return "".concat(prevText).concat(emoji.native);
+                });
+              }
+            })
+          })]
+        }),
+        disableUnderline: true,
+        classes: {}
+      },
+      onKeyDown: onKeyDown
+    }), attachment && /*#__PURE__*/jsx(FilePreview, {
+      fileName: attachment.name,
+      fileUrl: attachment.url,
+      handleFileDelete: function handleFileDelete() {
+        return setAttachment(null);
+      },
+      classes: {
+        wrapper: filePreviewWrapperClass
+      }
+    }), attachmentLoadingError && /*#__PURE__*/jsx(FailedFileUploading, {
+      errorMessage: attachmentLoadingError
+    })]
+  });
+};
+
+PostInput.propTypes = {
+  userCompanyId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  className: PropTypes.string,
+  onKeyDown: PropTypes.func,
+  onChange: PropTypes.func,
+  initialValue: PropTypes.shape({
+    body: PropTypes.string,
+    attachment: PropTypes.shape({})
+  }),
+  filePreviewWrapperClass: PropTypes.string,
+  smallerView: PropTypes.bool
+};
+PostInput.defaultProps = {
+  className: null,
+  initialValue: {
+    body: '',
+    attachment: null
+  },
+  filePreviewWrapperClass: null,
+  onKeyDown: noop,
+  onChange: noop,
+  smallerView: false
+};
+
+export default PostInput;
+//# sourceMappingURL=PostInput.js.map

package/components/PostInput/PostInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostInput.js","sources":["../../../src/components/PostInput/PostInput.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useState, useEffect } from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport classNames from 'classnames';\nimport { noop } from 'lodash';\nimport FilePreview from '~/components/FilePreview';\nimport FailedFileUploading from '~/components/FailedFileUploading';\nimport UserMention from '~/components/UserMention';\nimport FileUploadIconButton from '~/components/FileUploadIconButton';\nimport EmojiIconButton from '~/components/EmojiIconButton';\n\nimport styles from './PostInput.css';\n\nconst PostInput = ({\n  className,\n  userCompanyId,\n  onChange,\n  onKeyDown,\n  initialValue,\n  filePreviewWrapperClass,\n  smallerView,\n}) => {\n  const [body, setBody] = useState(initialValue.body);\n  const [attachment, setAttachment] = useState(initialValue.attachment);\n  const [attachmentLoadingError, setAttachmentLoadingError] = useState(null);\n\n  useEffect(() => {\n    onChange({\n      body,\n      attachment,\n    });\n  }, [body, attachment]);\n\n  return (\n    <div className={classNames(styles.input, className)}>\n      <TextField\n        className={classNames(styles.inputTextField, {\n          [styles.inputTextFieldSmaller]: smallerView,\n        })}\n        placeholder=\"Add Comment...\"\n        FormHelperTextProps={{\n          component: 'div',\n          margin: 'dense',\n        }}\n        InputProps={{\n          inputComponent: UserMention,\n          inputProps: {\n            onChange: setBody,\n            value: body,\n            withLightTheme: false,\n            companyId: userCompanyId,\n            autoFocus: true,\n            className: styles.inputInput,\n            placeholder: 'Type here...',\n          },\n          endAdornment: (\n            <InputAdornment position=\"end\" className={styles.inputAdornment}>\n              {!attachment && (\n                <div>\n                  <FileUploadIconButton\n                    openPreviewDialogOnUpload={false}\n                    onFinish={(url, name, size) => {\n                      setAttachment({\n                        url,\n                        name,\n                        size,\n                      });\n                    }}\n                    onError={setAttachmentLoadingError}\n                  />\n                </div>\n              )}\n              <div>\n                <EmojiIconButton\n                  handleSelectEmoji={emoji => setBody(prevText => `${prevText}${emoji.native}`)}\n                />\n              </div>\n            </InputAdornment>\n          ),\n          disableUnderline: true,\n          classes: {},\n        }}\n        onKeyDown={onKeyDown}\n      />\n      {attachment && (\n        <FilePreview\n          fileName={attachment.name}\n          fileUrl={attachment.url}\n          handleFileDelete={() => setAttachment(null)}\n          classes={{ wrapper: filePreviewWrapperClass }}\n        />\n      )}\n      {attachmentLoadingError && <FailedFileUploading errorMessage={attachmentLoadingError} />}\n    </div>\n  );\n};\n\nPostInput.propTypes = {\n  userCompanyId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  className: PropTypes.string,\n  onKeyDown: PropTypes.func,\n  onChange: PropTypes.func,\n  initialValue: PropTypes.shape({\n    body: PropTypes.string,\n    attachment: PropTypes.shape({}),\n  }),\n  filePreviewWrapperClass: PropTypes.string,\n  smallerView: PropTypes.bool,\n};\n\nPostInput.defaultProps = {\n  className: null,\n  initialValue: {\n    body: '',\n    attachment: null,\n  },\n  filePreviewWrapperClass: null,\n  onKeyDown: noop,\n  onChange: noop,\n  smallerView: false,\n};\n\nexport default PostInput;\n"],"names":["PostInput","className","userCompanyId","onChange","onKeyDown","initialValue","filePreviewWrapperClass","smallerView","useState","body","setBody","attachment","setAttachment","attachmentLoadingError","setAttachmentLoadingError","useEffect","_jsxs","classNames","styles","input","_jsx","inputTextField","inputTextFieldSmaller","component","margin","inputComponent","UserMention","inputProps","value","withLightTheme","companyId","autoFocus","inputInput","placeholder","endAdornment","inputAdornment","url","name","size","emoji","prevText","native","disableUnderline","classes","wrapper","propTypes","PropTypes","oneOfType","string","number","isRequired","func","shape","bool","defaultProps","noop"],"mappings":"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"}