@salesgenterp/ui-components 0.4.94 → 0.4.95

package/dist/index.js

@@ -23,10 +23,10 @@ var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
 var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
+var styles = require('@mui/material/styles');
 var moment = _interopDefault(require('moment'));
 var lodash = require('lodash');
 var axios = _interopDefault(require('axios'));
-var styles = require('@mui/styles');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -3558,7 +3558,6 @@ var getLocalTime = function getLocalTime(_ref) {
   return convertedTime;
 };
 function hexToRgbA(hex) {
-  console.log('hex: ', hex);
   var c;
 
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
@@ -4570,7 +4569,7 @@ var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObje
 });
 var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
 
-var _templateObject$b, _templateObject2$b;
+var _templateObject$b;
 
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
@@ -4610,8 +4609,8 @@ var SideMenuItem = function SideMenuItem(props) {
       Icon = props.Icon,
       _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items,
-      primaryColor = props.primaryColor;
-  var classes = useStyles();
+      primaryColor = props.primaryColor,
+      list = props.list;
   var isExpandable = items && items.length > 0;
 
   var _React$useState = React__default.useState(false),
@@ -4623,10 +4622,11 @@ var SideMenuItem = function SideMenuItem(props) {
   }
 
   var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponentContainer, {
-    className: classes.menuItem,
     link: link,
     onClick: handleClick,
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    open: open,
+    list: list
   }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
     primary: name,
     inset: !Icon
@@ -4641,27 +4641,29 @@ var SideMenuItem = function SideMenuItem(props) {
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
-      primaryColor: primaryColor
+      primaryColor: primaryColor,
+      list: true
     }));
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-
-var useStyles = styles.makeStyles(function (theme) {
-  return styles.createStyles({
-    menuItem: {
-      '&.active': {
-        background: 'rgba(0, 0, 0, 0.08)',
-        '& .MuiListItemIcon-root': {
-          color: '#fff'
-        }
-      }
+var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(function (_ref) {
+  var primaryColor = _ref.primaryColor,
+      list = _ref.list;
+  return {
+    background: list ? "rgba(" + hexToRgbA(primaryColor) + ",0.9)" : "rgba(" + hexToRgbA(primaryColor) + ")",
+    color: '#fff',
+    '& .MuiTypography-root': {
+      fontWeight: '600 '
+    },
+    '&:hover': {
+      background: "rgba(" + hexToRgbA(primaryColor) + ",0.8)"
+    },
+    '& svg': {
+      fontSize: 22
     }
-  });
-});
-var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n"])));
-var SideMenuItemComponentContainer = styled(SideMenuItemComponent)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  background: rgba(", ", 0.8) !important;\n  font-weight: 600;\n"])), function (props) {
-  return hexToRgbA(props.primaryColor);
+  };
 });
 
 var sideMenuItems = [{
@@ -4742,7 +4744,8 @@ var SideMenu = function SideMenu(props) {
   }));
 };
 
-var _templateObject$c, _templateObject2$c, _templateObject3$b;
+var _templateObject$c, _templateObject2$b;
+var drawerWidth = 240;
 
 var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
@@ -4755,14 +4758,61 @@ var AccountDetails = function AccountDetails(_ref) {
       backgroundColor = _ref.backgroundColor,
       _ref$fontColor = _ref.fontColor,
       fontColor = _ref$fontColor === void 0 ? '#000000D9' : _ref$fontColor;
+  var theme = styles.useTheme();
+
+  var _useState = React.useState(true),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handleDrawerOpen = function handleDrawerOpen() {
+    setOpen(function (prev) {
+      return !prev;
+    });
+  };
+
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$2, {
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    sx: {
+      display: 'flex'
+    }
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
-    variant: "permanent",
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    sx: {
+      width: drawerWidth,
+      flexShrink: 0,
+      '& .MuiDrawer-paper': {
+        width: drawerWidth,
+        boxSizing: 'border-box'
+      }
+    },
+    variant: "persistent",
+    anchor: "left",
+    open: open
   }, /*#__PURE__*/React__default.createElement(SideMenu, {
     primaryColor: primaryColor
-  })), /*#__PURE__*/React__default.createElement(Main, null, /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
+  })), /*#__PURE__*/React__default.createElement(Main, {
+    open: open
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Toolbar, {
+    style: {
+      padding: '0 2px',
+      minHeight: 32
+    }
+  }, /*#__PURE__*/React__default.createElement(material.IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26
+      }
+    }
+  }, open ? /*#__PURE__*/React__default.createElement(md.MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(md.MdMenu, null)), /*#__PURE__*/React__default.createElement(material.Typography, {
+    variant: "h6",
+    noWrap: true,
+    component: "div"
+  }, "Dashboard"))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
     token: token,
     primaryColor: primaryColor,
@@ -4771,13 +4821,31 @@ var AccountDetails = function AccountDetails(_ref) {
     fontColor: fontColor
   })))));
 };
-var Root$2 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var Main = styled.main(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  overflow: auto;\n  background-color: ", ";\n  padding: 0 2rem;\n"])), function (props) {
-  return props.backgroundColor;
-});
-var ContainerDrawer = styled(material.Drawer)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    white-space: nowrap;\n    width: 240px;\n    // background-color: ", "60;\n    color: #fff;\n    z-index: 1;\n  }\n"])), function (props) {
-  return props.primaryColor;
+var Root$2 = styled(material.Box)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose([""])));
+var Main = styles.styled('main', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'open';
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      open = _ref2.open;
+  return _extends({
+    flexGrow: 1,
+    padding: "0 " + theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    marginLeft: "-" + drawerWidth + "px"
+  }, open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    marginLeft: 0
+  });
 });
+var ContainerDrawer = styled(material.Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    width: 240px;\n    z-index: 1;\n    overflow: hidden;\n  }\n"])));
 
 var Breakpoint = function Breakpoint() {};