@bigbinary/neeto-molecules 1.15.37 → 1.15.39

package/dist/cjs/ConfigurePageSidebar.js

@@ -1,41 +1,103 @@
 'use strict';
 
+var slicedToArray = require('./slicedToArray-f320d9e7.js');
 var React = require('react');
-var sidebar = require('./sidebar-195d99bd.js');
+var classnames = require('classnames');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var Chevron = require('./Chevron-3258aee1.js');
 require('./extends-1b35a664.js');
 require('./defineProperty-886ed289.js');
 require('./objectWithoutProperties-2fed2d7d.js');
-require('classnames');
 require('@bigbinary/neeto-commons-frontend/utils/general');
 require('@bigbinary/neeto-icons');
-require('@bigbinary/neetoui');
-require('ramda');
 require('@bigbinary/neeto-cist');
 require('@bigbinary/neeto-filters-frontend');
 require('@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint');
-require('react-router-dom');
 require('./inject-css-80a5faa3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var ConfigurePageSidebar = function ConfigurePageSidebar(_ref) {
   var label = _ref.label,
-    items = _ref.navLinks;
+    items = _ref.navLinks,
+    configurePageRoute = _ref.configurePageRoute;
+  var history = reactRouterDom.useHistory();
+  var productName = globalProps.appName.substr(5).toLowerCase();
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isSidebarPaneOpen = _useState2[0],
+    setIsSidebarPaneOpen = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    isSidebarCollapsed = _useState4[0],
+    setIsSidebarCollapsed = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isLargerScreen = function isLargerScreen() {
+    return window.innerWidth > 768;
+  };
+  var isSidebarClosed = isLargerScreen() ? isSidebarCollapsed : ramda.not(isSidebarPaneOpen);
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      if (isLargerScreen()) return;
+      setIsSidebarPaneOpen(false);
+      setIsSidebarCollapsed(true);
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  var handleConfigureLinkClick = function handleConfigureLinkClick() {
+    history.push(configurePageRoute);
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-sidebar__wrapper neeto-molecules-sidebar__wrapper__configure-page",
-    "data-testid": "configure-page-sidebar-container"
+    "data-testid": "configure-page-sidebar-container",
+    className: classnames__default["default"]("neeto-molecules-sidebar__wrapper neeto-molecules-sidebar__wrapper__configure-page", {
+      "neeto-molecules-sidebar__wrapper--collapsed": isLargerScreen() ? isSidebarCollapsed : ramda.not(isSidebarPaneOpen)
+    })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-sidebar__backdrop",
+    onClick: function onClick() {
+      setIsSidebarPaneOpen(false);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-molecules-sidebar neeto-molecules-sidebar__configure-page neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden neeto-molecules-sidebar--focus-mode",
     "data-testid": "configure-page-sidebar"
-  }, /*#__PURE__*/React__default["default"].createElement(sidebar.SelectedLink, {
+  }, /*#__PURE__*/React__default["default"].createElement(Chevron.SelectedLink, {
     isConfigureSidebar: true,
+    handleGoBack: handleConfigureLinkClick,
     navLink: {
       label: label,
       items: items
     }
-  })));
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "neeto-molecules-sidebar__toggler",
+    "data-cy": "configure-page-neeto-molecules-sidebar-toggler",
+    "data-testid": "configure-page-sidebar-toggleButton",
+    style: isLargerScreen() ? "text" : "secondary",
+    icon: function icon() {
+      return /*#__PURE__*/React__default["default"].createElement(Chevron.Chevron, {
+        style: {
+          color: "rgb(var(--neeto-".concat(productName, "-primary))")
+        }
+      });
+    },
+    tooltipProps: {
+      content: isSidebarClosed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
+      position: "bottom"
+    },
+    onClick: function onClick() {
+      setIsSidebarCollapsed(!isSidebarCollapsed);
+      setIsSidebarPaneOpen(ramda.not);
+    }
+  }));
 };
 
 module.exports = ConfigurePageSidebar;

package/dist/cjs/ConfigurePageSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurePageSidebar.js","sources":["../../src/components/ConfigurePageSidebar.jsx"],"sourcesContent":["import React from \"react\";\n\nimport PropTypes from \"prop-types\";\n\nimport SelectedLink from \"components/Sidebar/Components/Links/SelectedLink\";\nimport \"components/Sidebar/sidebar.scss\";\n\nconst ConfigurePageSidebar = ({ label, navLinks: items }) => (\n  <div\n    className=\"neeto-molecules-sidebar__wrapper neeto-molecules-sidebar__wrapper__configure-page\"\n    data-testid=\"configure-page-sidebar-container\"\n  >\n    <div\n      className=\"neeto-molecules-sidebar neeto-molecules-sidebar__configure-page neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden neeto-molecules-sidebar--focus-mode\"\n      data-testid=\"configure-page-sidebar\"\n    >\n      <SelectedLink isConfigureSidebar navLink={{ label, items }} />\n    </div>\n  </div>\n);\n\nConfigurePageSidebar.propTypes = {\n  /**\n   * To specify the label to be shown on top of the sidebar.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the configure nav links to be shown in the sidebar.\n   */\n  navLinks: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      to: PropTypes.string,\n      items: PropTypes.arrayOf(\n        PropTypes.shape({ label: PropTypes.string, to: PropTypes.string })\n      ),\n    })\n  ),\n};\n\nexport default ConfigurePageSidebar;\n"],"names":["ConfigurePageSidebar","_ref","label","items","navLinks","React","createElement","className","SelectedLink","isConfigureSidebar","navLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAYC,KAAK,GAAAF,IAAA,CAAfG,QAAQ,CAAA;EAAA,oBAC7CC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,mFAAmF;IAC7F,aAAY,EAAA,kCAAA;GAEZF,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,gNAAgN;IAC1N,aAAY,EAAA,wBAAA;AAAwB,GAAA,eAEpCF,yBAAA,CAAAC,aAAA,CAACE,oBAAY,EAAA;IAACC,kBAAkB,EAAA,IAAA;AAACC,IAAAA,OAAO,EAAE;AAAER,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAA;GAAI,CAC1D,CACF,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"ConfigurePageSidebar.js","sources":["../../src/components/ConfigurePageSidebar.jsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { not } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\nimport { useHistory } from \"react-router-dom\";\n\nimport SelectedLink from \"components/Sidebar/Components/Links/SelectedLink\";\nimport \"components/Sidebar/sidebar.scss\";\n\nimport Chevron from \"./Sidebar/Components/Chevron\";\n\nconst ConfigurePageSidebar = ({\n  label,\n  navLinks: items,\n  configurePageRoute,\n}) => {\n  const history = useHistory();\n  const productName = globalProps.appName.substr(5).toLowerCase();\n  const [isSidebarPaneOpen, setIsSidebarPaneOpen] = useState(false);\n  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);\n\n  const { t } = useTranslation();\n\n  const isLargerScreen = () => window.innerWidth > 768;\n  const isSidebarClosed = isLargerScreen()\n    ? isSidebarCollapsed\n    : not(isSidebarPaneOpen);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (isLargerScreen()) return;\n      setIsSidebarPaneOpen(false);\n      setIsSidebarCollapsed(true);\n    };\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  const handleConfigureLinkClick = () => {\n    history.push(configurePageRoute);\n  };\n\n  return (\n    <div\n      data-testid=\"configure-page-sidebar-container\"\n      className={classnames(\n        \"neeto-molecules-sidebar__wrapper neeto-molecules-sidebar__wrapper__configure-page\",\n        {\n          \"neeto-molecules-sidebar__wrapper--collapsed\": isLargerScreen()\n            ? isSidebarCollapsed\n            : not(isSidebarPaneOpen),\n        }\n      )}\n    >\n      <div\n        className=\"neeto-molecules-sidebar__backdrop\"\n        onClick={() => {\n          setIsSidebarPaneOpen(false);\n        }}\n      />\n      <div\n        className=\"neeto-molecules-sidebar neeto-molecules-sidebar__configure-page neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden neeto-molecules-sidebar--focus-mode\"\n        data-testid=\"configure-page-sidebar\"\n      >\n        <SelectedLink\n          isConfigureSidebar\n          handleGoBack={handleConfigureLinkClick}\n          navLink={{ label, items }}\n        />\n      </div>\n      <Button\n        className=\"neeto-molecules-sidebar__toggler\"\n        data-cy=\"configure-page-neeto-molecules-sidebar-toggler\"\n        data-testid=\"configure-page-sidebar-toggleButton\"\n        style={isLargerScreen() ? \"text\" : \"secondary\"}\n        icon={() => (\n          <Chevron\n            style={{ color: `rgb(var(--neeto-${productName}-primary))` }}\n          />\n        )}\n        tooltipProps={{\n          content: isSidebarClosed\n            ? t(\"neetoMolecules.sidebar.showMenu\")\n            : t(\"neetoMolecules.sidebar.hideMenu\"),\n          position: \"bottom\",\n        }}\n        onClick={() => {\n          setIsSidebarCollapsed(!isSidebarCollapsed);\n          setIsSidebarPaneOpen(not);\n        }}\n      />\n    </div>\n  );\n};\n\nConfigurePageSidebar.propTypes = {\n  /**\n   * The route to the landing page of the configure screen.\n   * When the user clicks on the 'configure' text, they will be taken to the specified route.\n   */\n  configurePageRoute: PropTypes.string,\n  /**\n   * To specify the label to be shown on top of the sidebar.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the configure nav links to be shown in the sidebar.\n   */\n  navLinks: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      to: PropTypes.string,\n      items: PropTypes.arrayOf(\n        PropTypes.shape({ label: PropTypes.string, to: PropTypes.string })\n      ),\n    })\n  ),\n};\n\nexport default ConfigurePageSidebar;\n"],"names":["ConfigurePageSidebar","_ref","label","items","navLinks","configurePageRoute","history","useHistory","productName","globalProps","appName","substr","toLowerCase","_useState","useState","_useState2","_slicedToArray","isSidebarPaneOpen","setIsSidebarPaneOpen","_useState3","_useState4","isSidebarCollapsed","setIsSidebarCollapsed","_useTranslation","useTranslation","t","isLargerScreen","window","innerWidth","isSidebarClosed","not","useEffect","handleResize","addEventListener","removeEventListener","handleConfigureLinkClick","push","React","createElement","className","classnames","onClick","SelectedLink","isConfigureSidebar","handleGoBack","navLink","Button","style","icon","Chevron","color","concat","tooltipProps","content","position"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAIpB;AAAA,EAAA,IAHJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACKC,KAAK,GAAAF,IAAA,CAAfG,QAAQ;IACRC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB,CAAA;AAElB,EAAA,IAAMC,OAAO,GAAGC,yBAAU,EAAE,CAAA;AAC5B,EAAA,IAAMC,WAAW,GAAGC,WAAW,CAACC,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,EAAE,CAAA;AAC/D,EAAA,IAAAC,SAAA,GAAkDC,cAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,4BAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA1DI,IAAAA,iBAAiB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,oBAAoB,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAC9C,EAAA,IAAAI,UAAA,GAAoDL,cAAQ,CAAC,KAAK,CAAC;IAAAM,UAAA,GAAAJ,4BAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAA5DE,IAAAA,kBAAkB,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,qBAAqB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEhD,EAAA,IAAAG,eAAA,GAAcC,2BAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,GAAA;AAAA,IAAA,OAASC,MAAM,CAACC,UAAU,GAAG,GAAG,CAAA;AAAA,GAAA,CAAA;EACpD,IAAMC,eAAe,GAAGH,cAAc,EAAE,GACpCL,kBAAkB,GAClBS,SAAG,CAACb,iBAAiB,CAAC,CAAA;AAE1Bc,EAAAA,eAAS,CAAC,YAAM;AACd,IAAA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,GAAS;MACzB,IAAIN,cAAc,EAAE,EAAE,OAAA;MACtBR,oBAAoB,CAAC,KAAK,CAAC,CAAA;MAC3BI,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAC5B,CAAA;AACDK,IAAAA,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC,CAAA;IAE/C,OAAO,YAAA;AAAA,MAAA,OAAML,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC,CAAA;AAAA,KAAA,CAAA;GAChE,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,IAAMG,wBAAwB,GAAG,SAA3BA,wBAAwBA,GAAS;AACrC7B,IAAAA,OAAO,CAAC8B,IAAI,CAAC/B,kBAAkB,CAAC,CAAA;GACjC,CAAA;EAED,oBACEgC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,kCAAkC;AAC9CC,IAAAA,SAAS,EAAEC,8BAAU,CACnB,mFAAmF,EACnF;MACE,6CAA6C,EAAEd,cAAc,EAAE,GAC3DL,kBAAkB,GAClBS,SAAG,CAACb,iBAAiB,CAAA;KAE7B,CAAA;GAEAoB,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,mCAAmC;IAC7CE,OAAO,EAAE,SAAAA,OAAAA,GAAM;MACbvB,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAA;AAAE,GACH,CAAC,eACFmB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,gNAAgN;IAC1N,aAAY,EAAA,wBAAA;AAAwB,GAAA,eAEpCF,yBAAA,CAAAC,aAAA,CAACI,oBAAY,EAAA;IACXC,kBAAkB,EAAA,IAAA;AAClBC,IAAAA,YAAY,EAAET,wBAAyB;AACvCU,IAAAA,OAAO,EAAE;AAAE3C,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAA;AAAE,GAC3B,CACE,CAAC,eACNkC,yBAAA,CAAAC,aAAA,CAACQ,cAAM,EAAA;AACLP,IAAAA,SAAS,EAAC,kCAAkC;AAC5C,IAAA,SAAA,EAAQ,gDAAgD;AACxD,IAAA,aAAA,EAAY,qCAAqC;AACjDQ,IAAAA,KAAK,EAAErB,cAAc,EAAE,GAAG,MAAM,GAAG,WAAY;IAC/CsB,IAAI,EAAE,SAAAA,IAAA,GAAA;AAAA,MAAA,oBACJX,yBAAA,CAAAC,aAAA,CAACW,eAAO,EAAA;AACNF,QAAAA,KAAK,EAAE;UAAEG,KAAK,EAAA,kBAAA,CAAAC,MAAA,CAAqB3C,WAAW,EAAA,YAAA,CAAA;AAAa,SAAA;AAAE,OAC9D,CAAC,CAAA;KACF;AACF4C,IAAAA,YAAY,EAAE;MACZC,OAAO,EAAExB,eAAe,GACpBJ,CAAC,CAAC,iCAAiC,CAAC,GACpCA,CAAC,CAAC,iCAAiC,CAAC;AACxC6B,MAAAA,QAAQ,EAAE,QAAA;KACV;IACFb,OAAO,EAAE,SAAAA,OAAAA,GAAM;MACbnB,qBAAqB,CAAC,CAACD,kBAAkB,CAAC,CAAA;MAC1CH,oBAAoB,CAACY,SAAG,CAAC,CAAA;AAC3B,KAAA;AAAE,GACH,CACE,CAAC,CAAA;AAEV;;;;"}