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

package/components/GradientPicker/GradientPicker.styles.js

@@ -1 +1,99 @@
-import{makeStyles as t}from"@material-ui/core";var e=t((function(t){return{root:{width:"100%",paddingBottom:"10px",paddingLeft:"12px",paddingRight:"12px"},indicatorContainer:{marginBottom:"12px",display:"flex",justifyContent:"space-between"},indicator:{fontSize:"12px",lineHeight:"14px"},mainBar:{position:"relative",height:"16px",width:"100%"},addIcon:{fontSize:"16px"},removeButton:{position:"absolute",bottom:"10px",left:"8px",padding:0,width:"36px",height:"36px"},deleteIcon:{fontSize:"20px"},posTextfield:{position:"absolute",bottom:"14px",right:"8px",width:"64px","& input::-webkit-outer-spin-button":{"-webkit-appearance":"none",margin:0},"& input::-webkit-inner-spin-button":{"-webkit-appearance":"none",margin:0}},posOutlinedRoot:{height:"24px",background:t.palette.background.b6},posOutlinedInput:{color:t.palette.primary.text6,padding:"2px 4px",textAlign:"right",fontSize:"14px","&:focus":{color:t.palette.primary.text1}},addCircle:{pointerEvents:"none",position:"absolute",top:"-4px",width:"24px",height:"24px",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",background:"rgba(255, 255, 255, 0.3)",border:"1px solid #ffffff"},circle:function(t){var e=t.readonly;return{position:"absolute",width:"24px",height:"24px",borderRadius:"50%",border:e?"none":"1px solid #ffffff","&:hover":{border:e?"none":"3px solid #ffffff"},"&.highlight":{border:"3px solid #ffffff"}}}}}));export{e as useStyles};
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      width: '100%',
+      paddingBottom: '10px',
+      paddingLeft: '12px',
+      paddingRight: '12px'
+    },
+    indicatorContainer: {
+      marginBottom: '12px',
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    indicator: {
+      fontSize: '12px',
+      lineHeight: '14px'
+    },
+    mainBar: {
+      position: 'relative',
+      height: '16px',
+      width: '100%'
+    },
+    addIcon: {
+      fontSize: '16px'
+    },
+    removeButton: {
+      position: 'absolute',
+      bottom: '10px',
+      left: '8px',
+      padding: 0,
+      width: '36px',
+      height: '36px'
+    },
+    deleteIcon: {
+      fontSize: '20px'
+    },
+    posTextfield: {
+      position: 'absolute',
+      bottom: '14px',
+      right: '8px',
+      width: '64px',
+      '& input::-webkit-outer-spin-button': {
+        '-webkit-appearance': 'none',
+        margin: 0
+      },
+      '& input::-webkit-inner-spin-button': {
+        '-webkit-appearance': 'none',
+        margin: 0
+      }
+    },
+    posOutlinedRoot: {
+      height: '24px',
+      background: theme.palette.background.b6
+    },
+    posOutlinedInput: {
+      color: theme.palette.primary.text6,
+      padding: '2px 4px',
+      textAlign: 'right',
+      fontSize: '14px',
+      '&:focus': {
+        color: theme.palette.primary.text1
+      }
+    },
+    addCircle: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: '-4px',
+      width: '24px',
+      height: '24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '50%',
+      background: 'rgba(255, 255, 255, 0.3)',
+      border: '1px solid #ffffff'
+    },
+    circle: function circle(_ref) {
+      var readonly = _ref.readonly;
+      return {
+        position: 'absolute',
+        width: '24px',
+        height: '24px',
+        borderRadius: '50%',
+        border: readonly ? 'none' : '1px solid #ffffff',
+        '&:hover': {
+          border: readonly ? 'none' : '3px solid #ffffff'
+        },
+        '&.highlight': {
+          border: '3px solid #ffffff'
+        }
+      };
+    }
+  };
+});
+
+export { useStyles };
+//# sourceMappingURL=GradientPicker.styles.js.map

package/components/GradientPicker/GradientPicker.utils.js

@@ -1 +1,55 @@
-import{sortBy as r}from"lodash";import t from"numeral";function o(t){return t&&0!==t.length?r(t,"pos").map((function(r){var t=r.color,o=r.pos;return"".concat(t," ").concat(o,"%")})).join(","):"none"}var a=function(r,o){var a=o.fromValue,e=o.toValue;if(a===e)return String(a);var h=e-a,i=n(h),M=u(a+h*(r/100),i);if(Math.abs(i)>=1)return t(M).format("0,00");var f=Math.ceil(-Math.log10(i));return M.toFixed(Math.max(f,0))},n=function(r){var t=Math.pow(10,Math.floor(Math.log10(r)))/100;return r/t>=500&&(t*=5),r/t>250&&(t*=2),t>1?Math.round(t):1/Math.round(1/t)},u=function(r,t){return e(Math.round(r/t)*t)},e=function(r){if(!r)return r;var t=Math.ceil(Math.log10(Math.abs(r))),o=Math.round(Math.pow(10,15-t));return Math.round(r*o)/o};export{o as calcGradientStyle,n as getRangeStep,a as getStopText,e as reasonableRealValue,u as roundToStep};
+import { sortBy } from 'lodash';
+import numeral from 'numeral';
+
+function calcGradientStyle(stops) {
+  if (!stops || stops.length === 0) {
+    return 'none';
+  }
+  return sortBy(stops, 'pos').map(function (_ref) {
+    var color = _ref.color,
+      pos = _ref.pos;
+    return "".concat(color, " ").concat(pos, "%");
+  }).join(',');
+}
+var getStopText = function getStopText(position, _ref2) {
+  var fromValue = _ref2.fromValue,
+    toValue = _ref2.toValue;
+  if (fromValue === toValue) {
+    return String(fromValue);
+  }
+  var range = toValue - fromValue;
+  var step = getRangeStep(range);
+  var value = fromValue + range * (position / 100);
+  var roundedToStep = roundToStep(value, step);
+  if (Math.abs(step) >= 1) {
+    return numeral(roundedToStep).format('0,00');
+  }
+  var scale = Math.ceil(-Math.log10(step));
+  return roundedToStep.toFixed(Math.max(scale, 0));
+};
+var getRangeStep = function getRangeStep(range) {
+  var step = Math.pow(10, Math.floor(Math.log10(range))) / 100;
+  if (range / step >= 500) {
+    step = step * 5;
+  }
+  if (range / step > 250) {
+    step = step * 2;
+  }
+  var rounded = step > 1 ? Math.round(step) : 1 / Math.round(1 / step);
+  return rounded;
+};
+var roundToStep = function roundToStep(value, step) {
+  return reasonableRealValue(Math.round(value / step) * step);
+};
+var maxSafeIntegerDigitCount = 15;
+var reasonableRealValue = function reasonableRealValue(value) {
+  if (!value) {
+    return value;
+  }
+  var valueMagnitude = Math.ceil(Math.log10(Math.abs(value)));
+  var multiplier = Math.round(Math.pow(10, maxSafeIntegerDigitCount - valueMagnitude));
+  return Math.round(value * multiplier) / multiplier;
+};
+
+export { calcGradientStyle, getRangeStep, getStopText, reasonableRealValue, roundToStep };
+//# sourceMappingURL=GradientPicker.utils.js.map

package/components/HeaderLayout/HeaderLayout.css.js

@@ -1 +1,8 @@
-import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var a={layoutContainer:"HeaderLayout_layoutContainer__w0Y9c",layoutTopLarge:"HeaderLayout_layoutTopLarge__n-g8a",layoutTopRightLarge:"HeaderLayout_layoutTopRightLarge__Jr9yh",layoutTopSmall:"HeaderLayout_layoutTopSmall__4ZxAb",assetChips:"HeaderLayout_assetChips__kvLY7",layoutBottomSmall:"HeaderLayout_layoutBottomSmall__Tl-yE",layoutOffsetpicker:"HeaderLayout_layoutOffsetpicker__gGVNO",layoutOffsetwellChipsLarge:"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe",layoutOffsetwellChipsSmall:"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};e(".HeaderLayout_layoutContainer__w0Y9c{display:flex;flex-direction:column}.HeaderLayout_layoutTopLarge__n-g8a{align-items:center;display:flex;justify-content:space-between}.HeaderLayout_layoutTopRightLarge__Jr9yh{align-items:baseline;display:flex;justify-content:end;overflow:hidden;width:auto}.HeaderLayout_layoutTopSmall__4ZxAb{align-items:center;display:flex;justify-content:space-between;overflow:hidden;width:auto}.HeaderLayout_assetChips__kvLY7{display:flex;justify-content:end;overflow:hidden}.HeaderLayout_layoutBottomSmall__Tl-yE{align-items:baseline;display:flex;flex-wrap:wrap;justify-content:flex-start;padding-top:8px}.HeaderLayout_layoutOffsetpicker__gGVNO{align-items:center;display:flex}.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe{display:flex;flex-wrap:wrap;justify-content:flex-end}.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc{display:flex;flex-wrap:wrap;justify-content:flex-start}");export{a as default};
+import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".HeaderLayout_layoutContainer__w0Y9c {\n  display: flex;\n  flex-direction: column;\n}\n\n.HeaderLayout_layoutTopLarge__n-g8a {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.HeaderLayout_layoutTopRightLarge__Jr9yh {\n  display: flex;\n  align-items: baseline;\n  justify-content: end;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_layoutTopSmall__4ZxAb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_assetChips__kvLY7 {\n  overflow: hidden;\n  display: flex;\n  justify-content: end;\n}\n\n.HeaderLayout_layoutBottomSmall__Tl-yE {\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.HeaderLayout_layoutOffsetpicker__gGVNO {\n  display: flex;\n  align-items: center;\n}\n\n.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe {\n  display: flex;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n}\n";
+var styles = {"layoutContainer":"HeaderLayout_layoutContainer__w0Y9c","layoutTopLarge":"HeaderLayout_layoutTopLarge__n-g8a","layoutTopRightLarge":"HeaderLayout_layoutTopRightLarge__Jr9yh","layoutTopSmall":"HeaderLayout_layoutTopSmall__4ZxAb","assetChips":"HeaderLayout_assetChips__kvLY7","layoutBottomSmall":"HeaderLayout_layoutBottomSmall__Tl-yE","layoutOffsetpicker":"HeaderLayout_layoutOffsetpicker__gGVNO","layoutOffsetwellChipsLarge":"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe","layoutOffsetwellChipsSmall":"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=HeaderLayout.css.js.map

package/components/HeaderLayout/HeaderLayout.js

@@ -1 +1,167 @@
-import{useMemo as e,cloneElement as i}from"react";import r from"prop-types";import{SizeMe as t}from"react-sizeme";import{Collapse as n}from"@material-ui/core";import{useComonentsWidth as l,useFilterLayout as a}from"./effects/index.js";import{getAppTitle as d,getAppSubTitle as o,getExpander as c,getOffsetPicker as s,getSecondaryAsset as m,getModeSelect as h,getPadChip as p,getPrimaryAsset as u,getOffsetWellsChip as f}from"./utils.js";import{LARGE_SIZE_LAYOUT as v,MEDIUM_SIZE_LAYOUT as y,SMALL_SIZE_LAYOUT as N}from"./constants.js";import O from"./HeaderLayout.css.js";import{jsx as g,jsxs as j,Fragment as C}from"react/jsx-runtime";function T(e,r){var t,n,l,a;return e===N&&r?i(r,r.props,(t=r.props.children,n=t.split(" "),l=t[0],a=n[n.length-1],"".concat(l," ").concat(a))):r}function W(i){var r=i.children,t=i.appWidth,W=l(r),w=W.componentsWidth,L=W.hiddenElements,R=a(r,w,t),q=d(r),x=o(r),S=c(r),k=s(r),z=m(r),B=h(r),E=p(r),H=u(r),b=f(r),A=e((function(){return T(R,H)}),[R,H]),D=e((function(){return T(R,E)}),[R,E]);return j("div",{style:{width:"100%"},children:[g(n,{timeout:10,in:R===v,children:j("div",{className:O.layoutContainer,children:[j("div",{className:O.layoutTopLarge,children:[g("div",{children:q}),j("div",{className:O.layoutTopRightLarge,children:[z,B,j("div",{className:O.layoutOffsetpicker,children:[S,k]}),E,H]})]}),g("div",{children:x}),g("div",{className:O.layoutOffsetwellChipsLarge,children:b})]})}),g(n,{timeout:10,in:[y,N].includes(R),children:j("div",{className:O.layoutContainer,children:[j("div",{className:O.layoutTopSmall,children:[g("div",{children:q}),j("div",{className:O.assetChips,children:[R===y&&j(C,{children:[E,H]}),R===N&&A]})]}),g("div",{children:x}),j("div",{className:O.layoutBottomSmall,children:[z,B,R===N&&D,j("div",{className:O.layoutOffsetpicker,children:[S,k]})]}),g("div",{className:O.layoutOffsetwellChipsSmall,children:b})]})}),L]})}function w(e){return g(t,{monitorWidth:!0,children:function(i){var r=i.size;return g(W,{appWidth:r.width-21,children:e.children})}})}W.propTypes={appWidth:r.func.isRequired,children:r.arrayOf(r.node).isRequired},w.propTypes={children:r.arrayOf(r.node).isRequired};export{w as default};
+import { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { SizeMe } from 'react-sizeme';
+import { Collapse } from '@material-ui/core';
+import { useComonentsWidth, useFilterLayout } from './effects/index.js';
+import { getAppTitle, getAppSubTitle, getExpander, getOffsetPicker, getSecondaryAsset, getModeSelect, getPadChip, getPrimaryAsset, getOffsetWellsChip } from './utils.js';
+import { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from './constants.js';
+import styles from './HeaderLayout.css.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+/**
+ * A wrapper component that handles the layout of completion app headers
+ *
+ * MUST 1: "key" props must be specified to make "auto layout" working
+ * --------- "title": App Title
+ * --------- "subtitle": App SubTitle
+ * --------- "expander": Offset Picker expander
+ * --------- "offset-picker": Offset Picker
+ * --------- "secondary-asset": Active Well Chip
+ * --------- "mode-select": Completion Mode Select
+ * --------- "primary-asset": Pad (or Well) Chip
+ * --------- "offset-chip": Offset Well Chips
+ * MUST 2: Each child component must be "inline-block" style
+ *
+ *
+ * If the above conditions meet, this component will auto-place children components.
+ *
+ * Layout 1: Large Size
+ * ---------------------------------------------------------------------------------------------------
+ * | title                | secondary-asset | mode-select | expander | offset-picker | primary-asset |
+ * ---------------------------------------------------------------------------------------------------
+ * | subtitle                                                                                        |
+ * ---------------------------------------------------------------------------------------------------
+ * |                                                                      | chip 1 | chip 2 | chip 3 |
+ *
+ * Layout 2: Medium/Small Size Size
+ * --------------------------------------------------------------------------
+ * | title                                                  | primary-asset |
+ * --------------------------------------------------------------------------
+ * | subtitle                                                               |
+ * --------------------------------------------------------------------------
+ * | secondary-asset | mode-select | expander | offset-picker |
+ * --------------------------------------------------------------------------
+ * | chip 1 | chip 2 | chip 3 |
+ *
+ */
+function formatAssetName(assetName) {
+  var words = assetName.split(' ');
+  var firstChar = assetName[0];
+  var endWord = words[words.length - 1];
+  return "".concat(firstChar, " ").concat(endWord);
+}
+function getShortComponent(layout, primaryAssetComponent) {
+  if (layout === SMALL_SIZE_LAYOUT && primaryAssetComponent) {
+    // NOTE: When asset name is long, use its shorthand
+    var clonedComponent = cloneElement(primaryAssetComponent, primaryAssetComponent.props, formatAssetName(primaryAssetComponent.props.children));
+    return clonedComponent;
+  }
+  return primaryAssetComponent;
+}
+function HeaderLayout(_ref) {
+  var children = _ref.children,
+    appWidth = _ref.appWidth;
+  // NOTE: Calcualte width of each components
+  var _useComonentsWidth = useComonentsWidth(children),
+    componentsWidth = _useComonentsWidth.componentsWidth,
+    hiddenElements = _useComonentsWidth.hiddenElements;
+
+  // NOTE: Determine layout to be shown based on the calculated width
+  var layout = useFilterLayout(children, componentsWidth, appWidth);
+  var titleComponent = getAppTitle(children);
+  var subTitleComponent = getAppSubTitle(children);
+  var expanderComponent = getExpander(children);
+  var offsetPickerComponent = getOffsetPicker(children);
+  var secondaryAssetComponent = getSecondaryAsset(children);
+  var modeSelectComponent = getModeSelect(children);
+  var padChipComponent = getPadChip(children);
+  var primaryAssetComponent = getPrimaryAsset(children);
+  var offsetWellChipsComponent = getOffsetWellsChip(children);
+
+  // NOTE: Drilling apps won't have primaryAsset chip in asset dashabord
+  var primaryAssetShortComponent = useMemo(function () {
+    return getShortComponent(layout, primaryAssetComponent);
+  }, [layout, primaryAssetComponent]);
+  var padChipShortComponent = useMemo(function () {
+    return getShortComponent(layout, padChipComponent);
+  }, [layout, padChipComponent]);
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/jsx(Collapse, {
+      timeout: 10,
+      in: layout === LARGE_SIZE_LAYOUT,
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles.layoutContainer,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: styles.layoutTopLarge,
+          children: [/*#__PURE__*/jsx("div", {
+            children: titleComponent
+          }), /*#__PURE__*/jsxs("div", {
+            className: styles.layoutTopRightLarge,
+            children: [secondaryAssetComponent, modeSelectComponent, /*#__PURE__*/jsxs("div", {
+              className: styles.layoutOffsetpicker,
+              children: [expanderComponent, offsetPickerComponent]
+            }), padChipComponent, primaryAssetComponent]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          children: subTitleComponent
+        }), /*#__PURE__*/jsx("div", {
+          className: styles.layoutOffsetwellChipsLarge,
+          children: offsetWellChipsComponent
+        })]
+      })
+    }), /*#__PURE__*/jsx(Collapse, {
+      timeout: 10,
+      in: [MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT].includes(layout),
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles.layoutContainer,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: styles.layoutTopSmall,
+          children: [/*#__PURE__*/jsx("div", {
+            children: titleComponent
+          }), /*#__PURE__*/jsxs("div", {
+            className: styles.assetChips,
+            children: [layout === MEDIUM_SIZE_LAYOUT && /*#__PURE__*/jsxs(Fragment, {
+              children: [padChipComponent, primaryAssetComponent]
+            }), layout === SMALL_SIZE_LAYOUT && primaryAssetShortComponent]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          children: subTitleComponent
+        }), /*#__PURE__*/jsxs("div", {
+          className: styles.layoutBottomSmall,
+          children: [secondaryAssetComponent, modeSelectComponent, layout === SMALL_SIZE_LAYOUT && padChipShortComponent, /*#__PURE__*/jsxs("div", {
+            className: styles.layoutOffsetpicker,
+            children: [expanderComponent, offsetPickerComponent]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: styles.layoutOffsetwellChipsSmall,
+          children: offsetWellChipsComponent
+        })]
+      })
+    }), hiddenElements]
+  });
+}
+HeaderLayout.propTypes = {
+  appWidth: PropTypes.func.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired
+};
+function WithSizeMe(props) {
+  return /*#__PURE__*/jsx(SizeMe, {
+    monitorWidth: true,
+    children: function children(_ref2) {
+      var size = _ref2.size;
+      return /*#__PURE__*/jsx(HeaderLayout, {
+        appWidth: size.width - 21,
+        children: props.children
+      });
+    }
+  });
+}
+WithSizeMe.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired
+};
+
+export { WithSizeMe as default };
+//# sourceMappingURL=HeaderLayout.js.map

package/components/HeaderLayout/HeaderLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderLayout.js","sources":["../../../src/components/HeaderLayout/HeaderLayout.js"],"sourcesContent":["/**\n * A wrapper component that handles the layout of completion app headers\n *\n * MUST 1: \"key\" props must be specified to make \"auto layout\" working\n * --------- \"title\": App Title\n * --------- \"subtitle\": App SubTitle\n * --------- \"expander\": Offset Picker expander\n * --------- \"offset-picker\": Offset Picker\n * --------- \"secondary-asset\": Active Well Chip\n * --------- \"mode-select\": Completion Mode Select\n * --------- \"primary-asset\": Pad (or Well) Chip\n * --------- \"offset-chip\": Offset Well Chips\n * MUST 2: Each child component must be \"inline-block\" style\n *\n *\n * If the above conditions meet, this component will auto-place children components.\n *\n * Layout 1: Large Size\n * ---------------------------------------------------------------------------------------------------\n * | title                | secondary-asset | mode-select | expander | offset-picker | primary-asset |\n * ---------------------------------------------------------------------------------------------------\n * | subtitle                                                                                        |\n * ---------------------------------------------------------------------------------------------------\n * |                                                                      | chip 1 | chip 2 | chip 3 |\n *\n * Layout 2: Medium/Small Size Size\n * --------------------------------------------------------------------------\n * | title                                                  | primary-asset |\n * --------------------------------------------------------------------------\n * | subtitle                                                               |\n * --------------------------------------------------------------------------\n * | secondary-asset | mode-select | expander | offset-picker |\n * --------------------------------------------------------------------------\n * | chip 1 | chip 2 | chip 3 |\n *\n */\n\nimport { useMemo, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport { SizeMe } from 'react-sizeme';\nimport { Collapse } from '@material-ui/core';\n\nimport { useComonentsWidth, useFilterLayout } from './effects';\nimport {\n  getAppTitle,\n  getAppSubTitle,\n  getExpander,\n  getOffsetPicker,\n  getSecondaryAsset,\n  getModeSelect,\n  getPrimaryAsset,\n  getOffsetWellsChip,\n  getPadChip,\n} from './utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from './constants';\n\nimport styles from './HeaderLayout.css';\n\nfunction formatAssetName(assetName) {\n  const words = assetName.split(' ');\n  const firstChar = assetName[0];\n  const endWord = words[words.length - 1];\n  return `${firstChar} ${endWord}`;\n}\n\nfunction getShortComponent(layout, primaryAssetComponent) {\n  if (layout === SMALL_SIZE_LAYOUT && primaryAssetComponent) {\n    // NOTE: When asset name is long, use its shorthand\n    const clonedComponent = cloneElement(\n      primaryAssetComponent,\n      primaryAssetComponent.props,\n      formatAssetName(primaryAssetComponent.props.children)\n    );\n    return clonedComponent;\n  }\n\n  return primaryAssetComponent;\n}\n\nfunction HeaderLayout({ children, appWidth }) {\n  // NOTE: Calcualte width of each components\n  const { componentsWidth, hiddenElements } = useComonentsWidth(children);\n\n  // NOTE: Determine layout to be shown based on the calculated width\n  const layout = useFilterLayout(children, componentsWidth, appWidth);\n\n  const titleComponent = getAppTitle(children);\n  const subTitleComponent = getAppSubTitle(children);\n  const expanderComponent = getExpander(children);\n  const offsetPickerComponent = getOffsetPicker(children);\n  const secondaryAssetComponent = getSecondaryAsset(children);\n  const modeSelectComponent = getModeSelect(children);\n  const padChipComponent = getPadChip(children);\n  const primaryAssetComponent = getPrimaryAsset(children);\n  const offsetWellChipsComponent = getOffsetWellsChip(children);\n\n  // NOTE: Drilling apps won't have primaryAsset chip in asset dashabord\n  const primaryAssetShortComponent = useMemo(\n    () => getShortComponent(layout, primaryAssetComponent),\n    [layout, primaryAssetComponent]\n  );\n\n  const padChipShortComponent = useMemo(\n    () => getShortComponent(layout, padChipComponent),\n    [layout, padChipComponent]\n  );\n\n  return (\n    <div style={{ width: '100%' }}>\n      <Collapse timeout={10} in={layout === LARGE_SIZE_LAYOUT}>\n        <div className={styles.layoutContainer}>\n          <div className={styles.layoutTopLarge}>\n            <div>{titleComponent}</div>\n\n            <div className={styles.layoutTopRightLarge}>\n              {secondaryAssetComponent}\n              {modeSelectComponent}\n              <div className={styles.layoutOffsetpicker}>\n                {expanderComponent}\n                {offsetPickerComponent}\n              </div>\n              {padChipComponent}\n              {primaryAssetComponent}\n            </div>\n          </div>\n\n          <div>{subTitleComponent}</div>\n\n          <div className={styles.layoutOffsetwellChipsLarge}>{offsetWellChipsComponent}</div>\n        </div>\n      </Collapse>\n\n      <Collapse timeout={10} in={[MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT].includes(layout)}>\n        <div className={styles.layoutContainer}>\n          <div className={styles.layoutTopSmall}>\n            <div>{titleComponent}</div>\n            <div className={styles.assetChips}>\n              {layout === MEDIUM_SIZE_LAYOUT && (\n                <>\n                  {padChipComponent}\n                  {primaryAssetComponent}\n                </>\n              )}\n              {layout === SMALL_SIZE_LAYOUT && primaryAssetShortComponent}\n            </div>\n          </div>\n\n          <div>{subTitleComponent}</div>\n\n          <div className={styles.layoutBottomSmall}>\n            {secondaryAssetComponent}\n            {modeSelectComponent}\n            {layout === SMALL_SIZE_LAYOUT && padChipShortComponent}\n            <div className={styles.layoutOffsetpicker}>\n              {expanderComponent}\n              {offsetPickerComponent}\n            </div>\n          </div>\n\n          <div className={styles.layoutOffsetwellChipsSmall}>{offsetWellChipsComponent}</div>\n        </div>\n      </Collapse>\n      {hiddenElements}\n    </div>\n  );\n}\n\nHeaderLayout.propTypes = {\n  appWidth: PropTypes.func.isRequired,\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n};\n\nfunction WithSizeMe(props) {\n  return (\n    <SizeMe monitorWidth>\n      {({ size }) => <HeaderLayout appWidth={size.width - 21}>{props.children}</HeaderLayout>}\n    </SizeMe>\n  );\n}\n\nWithSizeMe.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n};\n\nexport default WithSizeMe;\n"],"names":["formatAssetName","assetName","words","split","firstChar","endWord","length","getShortComponent","layout","primaryAssetComponent","SMALL_SIZE_LAYOUT","clonedComponent","cloneElement","props","children","HeaderLayout","appWidth","useComonentsWidth","componentsWidth","hiddenElements","useFilterLayout","titleComponent","getAppTitle","subTitleComponent","getAppSubTitle","expanderComponent","getExpander","offsetPickerComponent","getOffsetPicker","secondaryAssetComponent","getSecondaryAsset","modeSelectComponent","getModeSelect","padChipComponent","getPadChip","getPrimaryAsset","offsetWellChipsComponent","getOffsetWellsChip","primaryAssetShortComponent","useMemo","padChipShortComponent","_jsxs","width","_jsx","LARGE_SIZE_LAYOUT","styles","layoutContainer","layoutTopLarge","layoutTopRightLarge","layoutOffsetpicker","layoutOffsetwellChipsLarge","MEDIUM_SIZE_LAYOUT","includes","layoutTopSmall","assetChips","_Fragment","layoutBottomSmall","layoutOffsetwellChipsSmall","propTypes","PropTypes","func","isRequired","arrayOf","node","WithSizeMe","size"],"mappings":"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"}

package/components/HeaderLayout/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/HeaderLayout/effects/index.js

@@ -1 +1,110 @@
-import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as t,useEffect as n,useRef as o}from"react";import{get as i,isEqual as l}from"lodash";import{getAppTitle as c,getExpander as u,getOffsetPicker as f,getSecondaryAsset as a,getModeSelect as s,getPrimaryAsset as p}from"../utils.js";import{LARGE_SIZE_LAYOUT as d,MEDIUM_SIZE_LAYOUT as y,SMALL_SIZE_LAYOUT as m}from"../constants.js";import{jsx as b}from"react/jsx-runtime";function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function h(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}function O(e,o,l){var b=t(null),v=r(b,2),h=v[0],O=v[1];return n((function(){if(l&&o){var r=c(e),t=u(e),n=f(e),b=a(e),v=s(e),h=p(e),j=o[i(r,"key")]||0,g=o[i(t,"key")]||0,k=o[i(n,"key")]||0,w=o[i(b,"key")]||0,P=o[i(v,"key")]||0,D=o[i(h,"key")]||0;O(j+(g+k+w+P+D)<=l?d:j+D<=l?y:m)}}),[o,l]),h}function j(c){var u=o(),a=t(null),s=r(a,2),p=s[0],d=s[1],y=o({}),m=c.filter((function(e){return!!e})),v=b("div",{ref:u,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:m.map((function(e,r){return b("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return n((function(){var r;if(!l(m,y.current)){var t=f(c),n=i(t,"key"),o=Array.from(null===(r=u.current)||void 0===r?void 0:r.childNodes).reduce((function(r,t){var o,i=null==t||null===(o=t.getAttribute)||void 0===o?void 0:o.call(t,"data-key"),l=i===n?36:null==t?void 0:t.getBoundingClientRect().width;return h(h({},r),{},e({},i,l))}),{});Object.values(o).length===m.length&&(l(p,o)||d(o)),y.current=m}})),{componentsWidth:p,hiddenElements:v}}export{j as useComonentsWidth,O as useFilterLayout};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect, useRef } from 'react';
+import { get, isEqual } from 'lodash';
+import { getAppTitle, getExpander, getOffsetPicker, getSecondaryAsset, getModeSelect, getPrimaryAsset } from '../utils.js';
+import { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants.js';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+function useFilterLayout(components, componentsWidth, appWidth) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    layout = _useState2[0],
+    setLayout = _useState2[1];
+  useEffect(function () {
+    if (!appWidth || !componentsWidth) {
+      return;
+    }
+    var titleComponent = getAppTitle(components);
+    var expanderComponent = getExpander(components);
+    var offsetPickerComponent = getOffsetPicker(components);
+    var secondaryAssetComponent = getSecondaryAsset(components);
+    var modeSelectComponent = getModeSelect(components);
+    var primaryAssetComponent = getPrimaryAsset(components);
+    var titleWidth = componentsWidth[get(titleComponent, 'key')] || 0;
+    var expanderWidth = componentsWidth[get(expanderComponent, 'key')] || 0;
+    var offsetPickerWidth = componentsWidth[get(offsetPickerComponent, 'key')] || 0;
+    var secondaryAssetWidth = componentsWidth[get(secondaryAssetComponent, 'key')] || 0;
+    var modeSelectWidth = componentsWidth[get(modeSelectComponent, 'key')] || 0;
+    var primaryAssetWidth = componentsWidth[get(primaryAssetComponent, 'key')] || 0;
+    var extraWidth = expanderWidth + offsetPickerWidth + secondaryAssetWidth + modeSelectWidth + primaryAssetWidth;
+    if (titleWidth + extraWidth <= appWidth) {
+      setLayout(LARGE_SIZE_LAYOUT);
+    } else if (titleWidth + primaryAssetWidth <= appWidth) {
+      setLayout(MEDIUM_SIZE_LAYOUT);
+    } else {
+      setLayout(SMALL_SIZE_LAYOUT);
+    }
+  }, [componentsWidth, appWidth]);
+  return layout;
+}
+
+// NOTE: Calculate the width of child components here
+function useComonentsWidth(components) {
+  var hiddenElementsRef = useRef();
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    widthDict = _useState4[0],
+    setWidthDict = _useState4[1];
+  var prevComponentsRef = useRef({});
+  var validComponents = components.filter(function (component) {
+    return !!component;
+  });
+  var hiddenElements = /*#__PURE__*/jsx("div", {
+    ref: hiddenElementsRef,
+    style: {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      overflow: 'hidden'
+    },
+    children: validComponents.map(function (component, index) {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        jsx("div", {
+          "data-key": component === null || component === void 0 ? void 0 : component.key,
+          style: {
+            position: 'absolute'
+          },
+          children: component
+        }, index)
+      );
+    })
+  });
+
+  // NOTE: Calcualte width of each components
+  useEffect(function () {
+    var _hiddenElementsRef$cu;
+    // NOTE: Don't calcuate width again
+    if (isEqual(validComponents, prevComponentsRef.current)) {
+      return;
+    }
+
+    // NOTE: There's data loading in offset picker
+    var offsetPickerComponent = getOffsetPicker(components);
+    var offsetPickerKey = get(offsetPickerComponent, 'key');
+    var nodesArray = Array.from((_hiddenElementsRef$cu = hiddenElementsRef.current) === null || _hiddenElementsRef$cu === void 0 ? void 0 : _hiddenElementsRef$cu.childNodes);
+    var sizeMap = nodesArray.reduce(function (acc, node) {
+      var _node$getAttribute;
+      var key = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'data-key');
+      var value = key === offsetPickerKey ? 36 : node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width;
+      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, value));
+    }, {});
+    if (Object.values(sizeMap).length === validComponents.length) {
+      if (!isEqual(widthDict, sizeMap)) {
+        setWidthDict(sizeMap);
+      }
+    }
+    prevComponentsRef.current = validComponents;
+  });
+  return {
+    componentsWidth: widthDict,
+    hiddenElements: hiddenElements
+  };
+}
+
+export { useComonentsWidth, useFilterLayout };
+//# sourceMappingURL=index.js.map

package/components/HeaderLayout/utils.js

@@ -1 +1,49 @@
-function n(n){return n.find((function(n){return n&&n.key&&n.key.includes("title")}))}function e(n){return n.find((function(n){return n&&n.key&&n.key.includes("subtitle")}))}function t(n){return n.find((function(n){return n&&n.key&&n.key.includes("expander")}))}function u(n){return n.find((function(n){return n&&n.key&&n.key.includes("offset-picker")}))}function i(n){return n.find((function(n){return n&&n.key&&n.key.includes("secondary-asset")}))}function r(n){return n.find((function(n){return n&&n.key&&n.key.includes("mode-select")}))}function c(n){return n.find((function(n){return n&&n.key&&n.key.includes("pad-chip")}))}function f(n){return n.find((function(n){return n&&n.key&&n.key.includes("primary-asset")}))}function o(n){return n.find((function(n){return n&&n.key&&n.key.includes("offset-chip")}))}export{e as getAppSubTitle,n as getAppTitle,t as getExpander,r as getModeSelect,u as getOffsetPicker,o as getOffsetWellsChip,c as getPadChip,f as getPrimaryAsset,i as getSecondaryAsset};
+// NOTE: Get components based on "key" props specified
+function getAppTitle(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('title');
+  });
+}
+function getAppSubTitle(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('subtitle');
+  });
+}
+function getExpander(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('expander');
+  });
+}
+function getOffsetPicker(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('offset-picker');
+  });
+}
+function getSecondaryAsset(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('secondary-asset');
+  });
+}
+function getModeSelect(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('mode-select');
+  });
+}
+function getPadChip(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('pad-chip');
+  });
+}
+function getPrimaryAsset(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('primary-asset');
+  });
+}
+function getOffsetWellsChip(components) {
+  return components.find(function (item) {
+    return item && item.key && item.key.includes('offset-chip');
+  });
+}
+
+export { getAppSubTitle, getAppTitle, getExpander, getModeSelect, getOffsetPicker, getOffsetWellsChip, getPadChip, getPrimaryAsset, getSecondaryAsset };
+//# sourceMappingURL=utils.js.map