@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/ParameterCharts/utils/dataParser.js

@@ -1 +1,39 @@
-import{get as n}from"lodash";import{convertValue as t}from"../../../utils/convert.js";var r=function(r){var e=r.mapping,i=r.data,a=r.indexesKeys;return e.reduce((function(r,e){var o=e.key,u=e.unit,c=e.unitType,m=e.collection,p="".concat(m,".").concat(o),s=a[m],d=1/0,f=-1/0;return r[p]={},i[m]&&(r[p].data=i[m].map((function(r){var e=t(n(r,o),c,u);return Number.isFinite(e)&&(e>f&&(f=e),e<d&&(d=e)),[t(n(r,s.key),s.unitType,s.unit),e]})),r[p].min=d,r[p].max=f),r}),{})};export{r as convertData};
+import { get } from 'lodash';
+import { convertValue } from '../../../utils/convert.js';
+
+var convertData = function convertData(_ref) {
+  var mapping = _ref.mapping,
+    data = _ref.data,
+    indexesKeys = _ref.indexesKeys;
+  return mapping.reduce(function (acc, _ref2) {
+    var key = _ref2.key,
+      unit = _ref2.unit,
+      unitType = _ref2.unitType,
+      collection = _ref2.collection;
+    var dataKey = "".concat(collection, ".").concat(key);
+    var index = indexesKeys[collection];
+    var min = Infinity;
+    var max = -Infinity;
+    acc[dataKey] = {};
+    if (data[collection]) {
+      acc[dataKey].data = data[collection].map(function (item) {
+        var val = convertValue(get(item, key), unitType, unit);
+        if (Number.isFinite(val)) {
+          if (val > max) {
+            max = val;
+          }
+          if (val < min) {
+            min = val;
+          }
+        }
+        return [convertValue(get(item, index.key), index.unitType, index.unit), val];
+      });
+      acc[dataKey].min = min;
+      acc[dataKey].max = max;
+    }
+    return acc;
+  }, {});
+};
+
+export { convertData };
+//# sourceMappingURL=dataParser.js.map

package/components/ParameterCharts/utils/dataParser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataParser.js","sources":["../../../../src/components/ParameterCharts/utils/dataParser.js"],"sourcesContent":["import { get } from 'lodash';\n\nimport { convertValue } from '~/utils/convert';\n\nexport const convertData = ({ mapping, data, indexesKeys }) => {\n  return mapping.reduce((acc, { key, unit, unitType, collection }) => {\n    const dataKey = `${collection}.${key}`;\n    const index = indexesKeys[collection];\n    let min = Infinity;\n    let max = -Infinity;\n\n    acc[dataKey] = {};\n\n    if (data[collection]) {\n      acc[dataKey].data = data[collection].map(item => {\n        const val = convertValue(get(item, key), unitType, unit);\n        if (Number.isFinite(val)) {\n          if (val > max) {\n            max = val;\n          }\n          if (val < min) {\n            min = val;\n          }\n        }\n        return [convertValue(get(item, index.key), index.unitType, index.unit), val];\n      });\n\n      acc[dataKey].min = min;\n      acc[dataKey].max = max;\n    }\n\n    return acc;\n  }, {});\n};\n"],"names":["convertData","mapping","data","indexesKeys","reduce","acc","key","unit","unitType","collection","dataKey","index","min","Infinity","max","map","item","val","convertValue","get","Number","isFinite"],"mappings":";;;AAIaA,IAAAA,WAAW,GAAG,SAAdA,WAAW,CAAuC,IAAA,EAAA;EAAA,IAAjCC,OAAO,QAAPA,OAAO;AAAEC,IAAAA,IAAI,QAAJA,IAAI;AAAEC,IAAAA,WAAW,QAAXA,WAAW,CAAA;AACtD,EAAA,OAAOF,OAAO,CAACG,MAAM,CAAC,UAACC,GAAG,EAA0C,KAAA,EAAA;IAAA,IAAtCC,GAAG,SAAHA,GAAG;AAAEC,MAAAA,IAAI,SAAJA,IAAI;AAAEC,MAAAA,QAAQ,SAARA,QAAQ;AAAEC,MAAAA,UAAU,SAAVA,UAAU,CAAA;AAC3D,IAAA,IAAMC,OAAO,GAAA,EAAA,CAAA,MAAA,CAAMD,UAAU,EAAA,GAAA,CAAA,CAAA,MAAA,CAAIH,GAAG,CAAE,CAAA;AACtC,IAAA,IAAMK,KAAK,GAAGR,WAAW,CAACM,UAAU,CAAC,CAAA;IACrC,IAAIG,GAAG,GAAGC,QAAQ,CAAA;IAClB,IAAIC,GAAG,GAAG,CAACD,QAAQ,CAAA;AAEnBR,IAAAA,GAAG,CAACK,OAAO,CAAC,GAAG,EAAE,CAAA;AAEjB,IAAA,IAAIR,IAAI,CAACO,UAAU,CAAC,EAAE;AACpBJ,MAAAA,GAAG,CAACK,OAAO,CAAC,CAACR,IAAI,GAAGA,IAAI,CAACO,UAAU,CAAC,CAACM,GAAG,CAAC,UAAAC,IAAI,EAAI;AAC/C,QAAA,IAAMC,GAAG,GAAGC,YAAY,CAACC,GAAG,CAACH,IAAI,EAAEV,GAAG,CAAC,EAAEE,QAAQ,EAAED,IAAI,CAAC,CAAA;AACxD,QAAA,IAAIa,MAAM,CAACC,QAAQ,CAACJ,GAAG,CAAC,EAAE;UACxB,IAAIA,GAAG,GAAGH,GAAG,EAAE;AACbA,YAAAA,GAAG,GAAGG,GAAG,CAAA;AACX,WAAA;UACA,IAAIA,GAAG,GAAGL,GAAG,EAAE;AACbA,YAAAA,GAAG,GAAGK,GAAG,CAAA;AACX,WAAA;AACF,SAAA;QACA,OAAO,CAACC,YAAY,CAACC,GAAG,CAACH,IAAI,EAAEL,KAAK,CAACL,GAAG,CAAC,EAAEK,KAAK,CAACH,QAAQ,EAAEG,KAAK,CAACJ,IAAI,CAAC,EAAEU,GAAG,CAAC,CAAA;AAC9E,OAAC,CAAC,CAAA;AAEFZ,MAAAA,GAAG,CAACK,OAAO,CAAC,CAACE,GAAG,GAAGA,GAAG,CAAA;AACtBP,MAAAA,GAAG,CAACK,OAAO,CAAC,CAACI,GAAG,GAAGA,GAAG,CAAA;AACxB,KAAA;AAEA,IAAA,OAAOT,GAAG,CAAA;GACX,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}

package/components/PinnableFilters/PinnableFilters.css.js

@@ -1 +1,8 @@
-import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var n={containerLarge:"PinnableFilters_containerLarge__HlHk-",containerLargeTopright:"PinnableFilters_containerLargeTopright__5O3XY",containerMedium:"PinnableFilters_containerMedium__UJyYm",containerMediumTop:"PinnableFilters_containerMediumTop__8AYOD",containerMediumTopright:"PinnableFilters_containerMediumTopright__uWjrK",containerMediumBottom:"PinnableFilters_containerMediumBottom__omJHC",containerSmall:"PinnableFilters_containerSmall__vHCZw",containerSmallTop:"PinnableFilters_containerSmallTop__f2ksN",containerSmallMiddle:"PinnableFilters_containerSmallMiddle__cWqNa",containerSmallBottom:"PinnableFilters_containerSmallBottom__4Yvda",containerPopper:"PinnableFilters_containerPopper__2d-E7",containerButtonsWrapper:"PinnableFilters_containerButtonsWrapper__Gy6Ej"};e(".PinnableFilters_containerLarge__HlHk-{align-items:center;display:flex;justify-content:space-between}.PinnableFilters_containerLargeTopright__5O3XY{align-items:center;display:flex}.PinnableFilters_containerMedium__UJyYm{display:flex;flex-direction:column}.PinnableFilters_containerMediumTop__8AYOD{align-items:center;display:flex;justify-content:space-between}.PinnableFilters_containerMediumTopright__uWjrK{align-items:center;display:flex}.PinnableFilters_containerMediumBottom__omJHC{align-items:center;display:flex;flex-wrap:wrap}.PinnableFilters_containerMediumBottom__omJHC>div{margin-bottom:8px}.PinnableFilters_containerSmall__vHCZw{display:flex;flex-direction:column}.PinnableFilters_containerSmallTop__f2ksN{align-items:center;display:flex;justify-content:space-between}.PinnableFilters_containerSmallMiddle__cWqNa{align-items:center;display:flex;flex-wrap:wrap}.PinnableFilters_containerSmallBottom__4Yvda{align-items:center;display:flex;justify-content:flex-end}.PinnableFilters_containerPopper__2d-E7{display:flex;flex-direction:column;padding:1rem 1rem 0}.PinnableFilters_containerPopper__2d-E7>div{margin-bottom:16px}.PinnableFilters_containerButtonsWrapper__Gy6Ej{display:flex}");export{n as default};
+import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".PinnableFilters_containerLarge__HlHk- {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.PinnableFilters_containerLargeTopright__5O3XY {\n  display: flex;\n  align-items: center;\n}\n\n.PinnableFilters_containerMedium__UJyYm {\n  display: flex;\n  flex-direction: column;\n}\n\n.PinnableFilters_containerMediumTop__8AYOD {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.PinnableFilters_containerMediumTopright__uWjrK {\n  display: flex;\n  align-items: center;\n}\n\n.PinnableFilters_containerMediumBottom__omJHC {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.PinnableFilters_containerMediumBottom__omJHC > div {\n  margin-bottom: 8px;\n}\n\n.PinnableFilters_containerSmall__vHCZw {\n  display: flex;\n  flex-direction: column;\n}\n\n.PinnableFilters_containerSmallTop__f2ksN {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.PinnableFilters_containerSmallMiddle__cWqNa {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.PinnableFilters_containerSmallBottom__4Yvda {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.PinnableFilters_containerPopper__2d-E7 {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 1rem 0 1rem;\n}\n\n.PinnableFilters_containerPopper__2d-E7 > div {\n  margin-bottom: 16px;\n}\n\n.PinnableFilters_containerButtonsWrapper__Gy6Ej {\n  display: flex;\n}\n";
+var styles = {"containerLarge":"PinnableFilters_containerLarge__HlHk-","containerLargeTopright":"PinnableFilters_containerLargeTopright__5O3XY","containerMedium":"PinnableFilters_containerMedium__UJyYm","containerMediumTop":"PinnableFilters_containerMediumTop__8AYOD","containerMediumTopright":"PinnableFilters_containerMediumTopright__uWjrK","containerMediumBottom":"PinnableFilters_containerMediumBottom__omJHC","containerSmall":"PinnableFilters_containerSmall__vHCZw","containerSmallTop":"PinnableFilters_containerSmallTop__f2ksN","containerSmallMiddle":"PinnableFilters_containerSmallMiddle__cWqNa","containerSmallBottom":"PinnableFilters_containerSmallBottom__4Yvda","containerPopper":"PinnableFilters_containerPopper__2d-E7","containerButtonsWrapper":"PinnableFilters_containerButtonsWrapper__Gy6Ej"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=PinnableFilters.css.js.map

package/components/PinnableFilters/PinnableFilters.js

@@ -1 +1,234 @@
-import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/objectWithoutProperties";import i from"@babel/runtime/helpers/slicedToArray";import{useState as n}from"react";import o from"prop-types";import{SizeMe as t}from"react-sizeme";import{Collapse as l,Popover as a}from"@material-ui/core";import{withStyles as c}from"@material-ui/core/styles";import s from"./components/FiltersToggler.js";import d from"./components/PinAppSwitch.js";import{useComonentsWidth as p,useAppFilterTogglerWidth as m,useFilterLayout as u}from"./effects/index.js";import{getStartComponent as h,getMiddleComponent as f,getEndComponents as b}from"./utils.js";import{LARGE_SIZE_LAYOUT as v,MEDIUM_SIZE_LAYOUT as P,SMALL_SIZE_LAYOUT as O}from"./constants.js";import y from"./PinnableFilters.css.js";import{jsxs as j,jsx as g}from"react/jsx-runtime";var w=["children"];function N(e,r){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),i.push.apply(i,n)}return i}function S(r){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?N(Object(n),!0).forEach((function(i){e(r,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):N(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}function k(e){var r=e.children,o=e.classes,t=e.appWidth,c=e.isPinnedInitial,w=e.isShownInitial,N=e.onShowCallback,S=e.onPinCallback,k=n(null),C=i(k,2),M=C[0],T=C[1],W=n(c),B=i(W,2),E=B[0],I=B[1],q=n(w),z=i(q,2),D=z[0],L=z[1],R=n(!1),x=i(R,2),A=x[0],F=x[1],G=function(e){L(e),N&&N(e)},H=p(r),J=H.componentsWidth,K=H.hiddenElements,Q=m(),U=u(r,J,Q,t),V=h(r),X=f(r),Y=b(r),Z=function(e){E?G(!D):T(e.currentTarget)},$=function(){var e,r=!E;r&&(T(null),G(!0)),I(e=r),S&&S(e)};return j("div",{style:{width:"100%"},children:[g(l,{timeout:10,in:U===v,children:j("div",{className:y.containerLarge,children:[g("div",{children:V}),j("div",{className:y.containerLargeTopright,children:[X,Y]})]})}),g(l,{timeout:10,in:U===P,children:j("div",{className:y.containerMedium,children:[j("div",{className:y.containerMediumTop,children:[j("div",{className:y.containerButtonsWrapper,onMouseEnter:function(){return F(!0)},onMouseLeave:function(){return F(!1)},children:[g(s,{onClick:Z}),(A||E||Boolean(M))&&g(d,{isPinned:E,onClick:$})]}),j("div",{className:y.containerMediumTopright,children:[X,Y]})]}),g(l,{timeout:100,in:E&&D,children:g("div",{className:y.containerMediumBottom,children:V})})]})}),g(l,{timeout:10,in:U===O,children:j("div",{className:y.containerSmall,children:[j("div",{className:y.containerSmallTop,children:[j("div",{className:y.containerButtonsWrapper,onMouseEnter:function(){return F(!0)},onMouseLeave:function(){return F(!1)},children:[g(s,{onClick:Z}),(A||E||Boolean(M))&&g(d,{isPinned:E,onClick:$})]}),g("div",{children:Y})]}),g(l,{timeout:100,in:E&&D,children:g("div",{className:y.containerSmallMiddle,children:V})}),g("div",{className:y.containerSmallBottom,children:X})]})}),g(a,{id:"filters-popper",classes:{paper:o.paper},open:Boolean(M),anchorEl:M,onClose:function(){T(null)},anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},children:g("div",{className:y.containerPopper,children:V})}),K]})}k.propTypes={classes:o.shape({}).isRequired,appWidth:o.number.isRequired,children:o.arrayOf(o.node).isRequired,isPinnedInitial:o.bool,isShownInitial:o.bool,onShowCallback:o.func,onPinCallback:o.func},k.defaultProps={isPinnedInitial:!1,isShownInitial:!1,onShowCallback:void 0,onPinCallback:void 0};var C=c({paper:{backgroundColor:"#414141"}})(k);function M(e){var i=e.children,n=r(e,w);return g(t,{monitorWidth:!0,children:function(e){var r=e.size;return g(C,S(S({appWidth:r.width-21},n),{},{children:i}))}})}M.propTypes={children:o.arrayOf(o.node).isRequired};export{M as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { SizeMe } from 'react-sizeme';
+import { Collapse, Popover } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import FiltersToggler from './components/FiltersToggler.js';
+import PinAppSwitch from './components/PinAppSwitch.js';
+import { useComonentsWidth, useAppFilterTogglerWidth, useFilterLayout } from './effects/index.js';
+import { getStartComponent, getMiddleComponent, getEndComponents } from './utils.js';
+import { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from './constants.js';
+import styles from './PinnableFilters.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var muiStyles = {
+  paper: {
+    backgroundColor: '#414141'
+  }
+};
+function PinnableFilters(_ref) {
+  var children = _ref.children,
+    classes = _ref.classes,
+    appWidth = _ref.appWidth,
+    isPinnedInitial = _ref.isPinnedInitial,
+    isShownInitial = _ref.isShownInitial,
+    onShowCallback = _ref.onShowCallback,
+    onPinCallback = _ref.onPinCallback;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var _useState3 = useState(isPinnedInitial),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPinned = _useState4[0],
+    setIsPinned = _useState4[1];
+  var _useState5 = useState(isShownInitial),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShown = _useState6[0],
+    setIsShown = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showPin = _useState8[0],
+    setShowPin = _useState8[1];
+  var handleChangePinned = function handleChangePinned(value) {
+    setIsPinned(value);
+    if (onPinCallback) onPinCallback(value);
+  };
+  var handleChangeShown = function handleChangeShown(value) {
+    setIsShown(value);
+    if (onShowCallback) onShowCallback(value);
+  };
+
+  // NOTE: Calcualte width of each components
+  var _useComonentsWidth = useComonentsWidth(children),
+    componentsWidth = _useComonentsWidth.componentsWidth,
+    hiddenElements = _useComonentsWidth.hiddenElements;
+
+  // NOTE: Calculate app filter toggler width
+  var appFilterTogglerWidth = useAppFilterTogglerWidth();
+
+  // NOTE: Determine layout to be shown based on the calculated width
+  var layout = useFilterLayout(children, componentsWidth, appFilterTogglerWidth, appWidth);
+  var filtersComponent = getStartComponent(children);
+  var goalComponent = getMiddleComponent(children);
+  var switchComponent = getEndComponents(children);
+  var handleOpen = function handleOpen(e) {
+    if (isPinned) {
+      handleChangeShown(!isShown);
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+  var handlePinClick = function handlePinClick() {
+    var newPinState = !isPinned;
+    if (newPinState) {
+      setAnchorEl(null);
+      handleChangeShown(true);
+    }
+    handleChangePinned(newPinState);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/jsx(Collapse, {
+      timeout: 10,
+      in: layout === LARGE_SIZE_LAYOUT,
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles.containerLarge,
+        children: [/*#__PURE__*/jsx("div", {
+          children: filtersComponent
+        }), /*#__PURE__*/jsxs("div", {
+          className: styles.containerLargeTopright,
+          children: [goalComponent, switchComponent]
+        })]
+      })
+    }), /*#__PURE__*/jsx(Collapse, {
+      timeout: 10,
+      in: layout === MEDIUM_SIZE_LAYOUT,
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles.containerMedium,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: styles.containerMediumTop,
+          children: [/*#__PURE__*/jsxs("div", {
+            className: styles.containerButtonsWrapper,
+            onMouseEnter: function onMouseEnter() {
+              return setShowPin(true);
+            },
+            onMouseLeave: function onMouseLeave() {
+              return setShowPin(false);
+            },
+            children: [/*#__PURE__*/jsx(FiltersToggler, {
+              onClick: handleOpen
+            }), (showPin || isPinned || Boolean(anchorEl)) && /*#__PURE__*/jsx(PinAppSwitch, {
+              isPinned: isPinned,
+              onClick: handlePinClick
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            className: styles.containerMediumTopright,
+            children: [goalComponent, switchComponent]
+          })]
+        }), /*#__PURE__*/jsx(Collapse, {
+          timeout: 100,
+          in: isPinned && isShown,
+          children: /*#__PURE__*/jsx("div", {
+            className: styles.containerMediumBottom,
+            children: filtersComponent
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx(Collapse, {
+      timeout: 10,
+      in: layout === SMALL_SIZE_LAYOUT,
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles.containerSmall,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: styles.containerSmallTop,
+          children: [/*#__PURE__*/jsxs("div", {
+            className: styles.containerButtonsWrapper,
+            onMouseEnter: function onMouseEnter() {
+              return setShowPin(true);
+            },
+            onMouseLeave: function onMouseLeave() {
+              return setShowPin(false);
+            },
+            children: [/*#__PURE__*/jsx(FiltersToggler, {
+              onClick: handleOpen
+            }), (showPin || isPinned || Boolean(anchorEl)) && /*#__PURE__*/jsx(PinAppSwitch, {
+              isPinned: isPinned,
+              onClick: handlePinClick
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            children: switchComponent
+          })]
+        }), /*#__PURE__*/jsx(Collapse, {
+          timeout: 100,
+          in: isPinned && isShown,
+          children: /*#__PURE__*/jsx("div", {
+            className: styles.containerSmallMiddle,
+            children: filtersComponent
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: styles.containerSmallBottom,
+          children: goalComponent
+        })]
+      })
+    }), /*#__PURE__*/jsx(Popover, {
+      id: "filters-popper",
+      classes: {
+        paper: classes.paper
+      },
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.containerPopper,
+        children: filtersComponent
+      })
+    }), hiddenElements]
+  });
+}
+PinnableFilters.propTypes = {
+  classes: PropTypes.shape({}).isRequired,
+  appWidth: PropTypes.number.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  isPinnedInitial: PropTypes.bool,
+  isShownInitial: PropTypes.bool,
+  onShowCallback: PropTypes.func,
+  onPinCallback: PropTypes.func
+};
+PinnableFilters.defaultProps = {
+  isPinnedInitial: false,
+  isShownInitial: false,
+  onShowCallback: undefined,
+  onPinCallback: undefined
+};
+var StyledPinnableFilters = withStyles(muiStyles)(PinnableFilters);
+function WithSizeMe(_ref2) {
+  var _children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/jsx(SizeMe, {
+    monitorWidth: true,
+    children: function children(_ref3) {
+      var size = _ref3.size;
+      return /*#__PURE__*/jsx(StyledPinnableFilters, _objectSpread(_objectSpread({
+        appWidth: size.width - 21
+      }, props), {}, {
+        children: _children
+      }));
+    }
+  });
+}
+WithSizeMe.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired
+};
+
+export { WithSizeMe as default };
+//# sourceMappingURL=PinnableFilters.js.map

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 { Collapse, Popover } from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport FiltersToggler from './components/FiltersToggler';\nimport PinAppSwitch from './components/PinAppSwitch';\nimport { useAppFilterTogglerWidth, useComonentsWidth, useFilterLayout } from './effects';\nimport { getEndComponents, getMiddleComponent, getStartComponent } 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, hiddenElements } = 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      {hiddenElements}\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","useComonentsWidth","componentsWidth","hiddenElements","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,70 @@
-import o from"@babel/runtime/helpers/defineProperty";import s from"prop-types";import t from"@material-ui/icons/Sort";import{withStyles as c}from"@material-ui/core/styles";import n from"../../Button/components/Button/index.js";import{jsx as i}from"react/jsx-runtime";import"moment-timezone";import"@material-ui/core";import"classnames";import"react";import"@icon-park/react/es/all";import"../../../icons/IconParkProvider.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/Gap.js";import"../../Button/components/LiveButton/components/LiveButtonStateIndicator/index.js";import"../../Button/components/LiveButton/styles.js";function r(o,s){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(o);s&&(c=c.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),t.push.apply(t,c)}return t}function e(s){for(var t=1;t<arguments.length;t++){var c=null!=arguments[t]?arguments[t]:{};t%2?r(Object(c),!0).forEach((function(t){o(s,t,c[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(c)):r(Object(c)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(c,o))}))}return s}function m(o){var s=o.onClick,c=o.classes;return i("div",{onClick:s,children:i(n,{className:c.button,startIcon:i(t,{}),children:"Filters"})})}m.propTypes={onClick:s.func.isRequired};var p=c((function(o){return{button:e(e({},o.isLightTheme?{color:"black"}:{}),{},{marginRight:o.spacing()})}}))(m);export{p as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import PropTypes from 'prop-types';
+import SortIcon from '@material-ui/icons/Sort';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '../../Button/components/Button/index.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
+import 'moment-timezone';
+import '@material-ui/core';
+import 'classnames';
+import '@icon-park/react/es/all';
+import { jsx } from 'react/jsx-runtime';
+import '../../../icons/IconParkProvider.js';
+import '../../../icons/customIcons/icons/AddMessage.js';
+import '../../../icons/customIcons/icons/Attention.js';
+import '../../../icons/customIcons/icons/Collapse.js';
+import '../../../icons/customIcons/icons/Dashboard.js';
+import '../../../icons/customIcons/icons/Expand.js';
+import '../../../icons/customIcons/icons/FolderClosed.js';
+import '../../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../../icons/customIcons/icons/FolderOpened.js';
+import '../../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../../icons/customIcons/icons/LessOrEqual.js';
+import '../../../icons/customIcons/icons/Search.js';
+import '../../../icons/customIcons/icons/Wellhub.js';
+import '../../../icons/customIcons/icons/MultiRuler.js';
+import '../../../icons/customIcons/icons/Checkbox.js';
+import '../../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../../icons/customIcons/icons/Radio.js';
+import '../../../icons/customIcons/icons/RadioChecked.js';
+import '../../../icons/customIcons/icons/SimulFrac.js';
+import '../../../icons/customIcons/icons/ZipperFrac.js';
+import '../../../icons/customIcons/icons/CautionFilled.js';
+import '../../../icons/customIcons/icons/MoreApp.js';
+import '../../../icons/customIcons/icons/Pad.js';
+import '../../../icons/customIcons/icons/Gap.js';
+import '../../Button/components/LiveButton/components/LiveButtonStateIndicator/index.js';
+import '../../Button/components/LiveButton/styles.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 { FiltersToggler$1 as default };
+//# sourceMappingURL=FiltersToggler.js.map

package/components/PinnableFilters/components/PinAppSwitch.js

@@ -1 +1,68 @@
-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 PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Tooltip, Typography } from '@material-ui/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+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 { PinAppSwitch$1 as default };
+//# sourceMappingURL=PinAppSwitch.js.map

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