@salesgenterp/ui-components 0.4.94 → 0.4.95

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Stack, Tooltip, TableCell, TableContainer as TableContainer$1, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, TableHead as TableHead$1, Paper, TablePagination, Typography, CardMedia, CardContent, Button, ListItemIcon, ListItem, Collapse, Divider, List, ListItemText, CssBaseline, Drawer } from '@mui/material';
+import { Stack, Tooltip, TableCell, TableContainer as TableContainer$1, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, TableHead as TableHead$1, Paper, TablePagination, Typography, CardMedia, CardContent, Button, ListItemIcon, ListItem, Collapse, Divider, List, ListItemText, CssBaseline, Toolbar, IconButton, Box as Box$1, Drawer } from '@mui/material';
 import React__default, { useState, useEffect, createElement, forwardRef } from 'react';
 import { GrClose, GrRadialSelected, GrStackOverflow } from 'react-icons/gr';
 import 'react-icons/gi';
@@ -15,15 +15,15 @@ import TableRow$1 from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { BiNotepad, BiWallet } from 'react-icons/bi';
 import { CgProfile } from 'react-icons/cg';
-import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdOutlineCall, MdMailOutline, MdMonetizationOn, MdRemoveRedEye, MdOutlineFileDownload, MdExpandMore, MdExpandLess, MdDashboard, MdShoppingCart, MdPeopleAlt, MdLibraryBooks } from 'react-icons/md';
+import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdOutlineCall, MdMailOutline, MdMonetizationOn, MdRemoveRedEye, MdOutlineFileDownload, MdExpandMore, MdExpandLess, MdDashboard, MdShoppingCart, MdPeopleAlt, MdLibraryBooks, MdOutlineMenuOpen, MdMenu } from 'react-icons/md';
 import { Controller, useForm } from 'react-hook-form';
 import { HiOutlineChevronDown } from 'react-icons/hi';
 import Cards from 'react-credit-cards';
 import { FiTruck } from 'react-icons/fi';
+import { styled as styled$1, useTheme } from '@mui/material/styles';
 import moment from 'moment';
 import { isEmpty, get, isPlainObject } from 'lodash';
 import axios from 'axios';
-import { makeStyles, createStyles } from '@mui/styles';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -3555,7 +3555,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)) {
@@ -4567,7 +4566,7 @@ var TotalContainer = styled(Stack)(_templateObject8$2 || (_templateObject8$2 = _
 });
 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,
@@ -4607,8 +4606,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),
@@ -4620,10 +4619,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(ListItemText, {
     primary: name,
     inset: !Icon
@@ -4638,27 +4638,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 = makeStyles(function (theme) {
-  return createStyles({
-    menuItem: {
-      '&.active': {
-        background: 'rgba(0, 0, 0, 0.08)',
-        '& .MuiListItemIcon-root': {
-          color: '#fff'
-        }
-      }
+var ListItemIconContainer = styled(ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var SideMenuItemComponentContainer = styled$1(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(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 = [{
@@ -4739,7 +4741,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,
@@ -4752,14 +4755,61 @@ var AccountDetails = function AccountDetails(_ref) {
       backgroundColor = _ref.backgroundColor,
       _ref$fontColor = _ref.fontColor,
       fontColor = _ref$fontColor === void 0 ? '#000000D9' : _ref$fontColor;
+  var theme = useTheme();
+
+  var _useState = 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(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(Toolbar, {
+    style: {
+      padding: '0 2px',
+      minHeight: 32
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26
+      }
+    }
+  }, open ? /*#__PURE__*/React__default.createElement(MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(MdMenu, null)), /*#__PURE__*/React__default.createElement(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,
@@ -4768,13 +4818,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(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(Box$1)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose([""])));
+var Main = styled$1('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(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() {};