tenjin-ui-kit 0.2.14 → 0.2.17

package/components/wrapperLayout/main/sideBar/index.js

@@ -20,6 +20,11 @@ var _reactRouterDom = require("react-router-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx2 = _interopRequireDefault(require("clsx"));
 var _divider = _interopRequireDefault(require("../../../divider"));
+var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _MoveToInbox = _interopRequireDefault(require("@mui/icons-material/MoveToInbox"));
+var _Drafts = _interopRequireDefault(require("@mui/icons-material/Drafts"));
+var _iconsMaterial = require("@mui/icons-material");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -92,6 +97,22 @@ function SideBar(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     open = _React$useState2[0],
     setOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    openCol = _React$useState4[0],
+    setOpenCol = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    selectedIndex = _React$useState6[0],
+    setSelectedIndex = _React$useState6[1];
+  var handleClick = function handleClick(event) {
+    if (selectedIndex === event) {
+      setSelectedIndex('');
+    } else {
+      setSelectedIndex(event);
+    }
+    setOpenCol(!openCol);
+  };
   return props.type === 'isFixed' ? /*#__PURE__*/React.createElement(_material.Paper, {
     className: (0, _clsx2.default)((_clsx = {}, _defineProperty(_clsx, className, true), _defineProperty(_clsx, classes.wrapper, true), _clsx))
   }, /*#__PURE__*/React.createElement(_material.Grid, {
@@ -109,8 +130,11 @@ function SideBar(props) {
     }, /*#__PURE__*/React.createElement("span", {
       className: classes.headTitle
     }, group.groupTitle)), /*#__PURE__*/React.createElement("div", null, group.modules.map(function (m) {
-      return /*#__PURE__*/React.createElement("div", {
-        href: m.href
+      return /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+        to: m.href,
+        style: {
+          textDecoration: 'none'
+        }
       }, /*#__PURE__*/React.createElement(_material.Grid, {
         container: true,
         item: true,
@@ -129,7 +153,7 @@ function SideBar(props) {
       style: {
         marginTop: '1rem'
       }
-    }, /*#__PURE__*/React.createElement(_divider.default, null), " ")));
+    }, /*#__PURE__*/React.createElement(_divider.default, null), ' ')));
   })) : /*#__PURE__*/React.createElement(_material.Grid, null, /*#__PURE__*/React.createElement(Drawer, {
     variant: "permanent",
     open: open,
@@ -139,8 +163,9 @@ function SideBar(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.scrollableList
   }, /*#__PURE__*/React.createElement(_List.default, {
-    className: classes.list
-  }, props.modules.map(function (module) {
+    className: classes.list,
+    component: "nav"
+  }, !props.withSubMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, props.modules.map(function (module) {
     return /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
       to: module.href,
       key: module.href,
@@ -158,12 +183,54 @@ function SideBar(props) {
     }, /*#__PURE__*/React.createElement(_ListItem.default, null, /*#__PURE__*/React.createElement(_ListItemIcon.default, null, module.icon), open && /*#__PURE__*/React.createElement(_ListItemText.default, {
       primary: module.title
     }))));
-  })))), /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, ' ', props.modules.map(function (module, key) {
+    var _module$subMenus2, _module$subMenus3, _module$subMenus4;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+      to: module.href,
+      key: module.href
+      // className={`${classes.listItem} ${
+      //   module.active && classes.listItemActive
+      // }`}
+      ,
+      className: classes.listStyle,
+      style: {
+        cursor: 'pointer',
+        textDecoration: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(_material.Tooltip, {
+      arrow: true,
+      title: !open ? module.title : '',
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(_material.ListItemButton, {
+      onClick: function onClick() {
+        var _module$subMenus;
+        (module === null || module === void 0 ? void 0 : (_module$subMenus = module.subMenus) === null || _module$subMenus === void 0 ? void 0 : _module$subMenus.length) > 0 && handleClick(key);
+      }
+    }, /*#__PURE__*/React.createElement(_ListItemIcon.default, null, module.icon), /*#__PURE__*/React.createElement(_ListItemText.default, {
+      primary: module.title
+    }), !(module !== null && module !== void 0 && (_module$subMenus2 = module.subMenus) !== null && _module$subMenus2 !== void 0 && _module$subMenus2.length) > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : key === selectedIndex ? /*#__PURE__*/React.createElement(_iconsMaterial.ExpandLess, null) : /*#__PURE__*/React.createElement(_iconsMaterial.ExpandMore, null))), (module === null || module === void 0 ? void 0 : (_module$subMenus3 = module.subMenus) === null || _module$subMenus3 === void 0 ? void 0 : _module$subMenus3.length) > 0 && /*#__PURE__*/React.createElement(_Collapse.default, {
+      in: key === selectedIndex,
+      timeout: "auto",
+      unmountOnExit: true
+    }, /*#__PURE__*/React.createElement(_List.default, {
+      component: "div",
+      disablePadding: true
+    }, module === null || module === void 0 ? void 0 : (_module$subMenus4 = module.subMenus) === null || _module$subMenus4 === void 0 ? void 0 : _module$subMenus4.map(function (subMenu, subMenuKey) {
+      return /*#__PURE__*/React.createElement(_material.ListItemButton, {
+        sx: {
+          pl: 4
+        }
+      }, /*#__PURE__*/React.createElement(_ListItemIcon.default, null, subMenu.icon), /*#__PURE__*/React.createElement(_ListItemText.default, {
+        primary: subMenu.title
+      }));
+    })))));
+  }))))), /*#__PURE__*/React.createElement("div", {
     className: classes.sideBarIcon
   }, /*#__PURE__*/React.createElement(_IconButton.default, {
     disableRipple: true,
     onClick: function onClick() {
       setOpen(!open);
+      setOpenCol(false);
     }
   }, open ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -180,6 +247,7 @@ function SideBar(props) {
 SideBar.propTypes = {
   modules: _propTypes.default.array.isRequired,
   type: _propTypes.default.string,
+  withSubMenu: _propTypes.default.bool,
   expanded: _propTypes.default.func.isRequired,
   sidebarData: _propTypes.default.array.isRequired,
   onToggle: _propTypes.default.func.isRequired,

package/components/wrapperLayout/main/sideBar/style.js

@@ -94,7 +94,7 @@ var useStyles = (0, _styles.makeStyles)(function () {
         color: 'white'
       },
       '& .MuiListItemIcon-root': {
-        color: "white"
+        color: 'white'
       }
     },
     sideBarIcon: {

package/components/wrapperLayout/topBar/index.js

@@ -11,6 +11,7 @@ var _breadCrumbs = _interopRequireDefault(require("../../breadCrumbs"));
 var _avatar = _interopRequireDefault(require("../topBar/avatar"));
 var _propTypes = _interopRequireWildcard(require("prop-types"));
 var _style = _interopRequireDefault(require("./style"));
+var _reactRouterDom = require("react-router-dom");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -118,7 +119,12 @@ var TopBar = function TopBar(props) {
       maxWidth: '100%'
     }
   }, concatedMenu && ((_concatedMenu$clicked = concatedMenu[clickedState]) === null || _concatedMenu$clicked === void 0 ? void 0 : (_concatedMenu$clicked2 = _concatedMenu$clicked.listOfItems) === null || _concatedMenu$clicked2 === void 0 ? void 0 : _concatedMenu$clicked2.map(function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+      to: item === null || item === void 0 ? void 0 : item.to,
+      style: {
+        textDecoration: 'none'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       onClick: handleCloseUserMenu,
       key: index,
       style: {
@@ -156,7 +162,7 @@ var TopBar = function TopBar(props) {
         //   fontSize: "13px",
         fontSize: '80%'
       }
-    }, item.description))));
+    }, item.description)))));
   })))))))));
 };
 TopBar.propTypes = {

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.2.14",
+  "version": "0.2.17",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },
   "dependencies": {
+    "@mantine/core": "^5.10.1",
+    "@mantine/hooks": "^5.10.1",
+    "@mantine/rte": "^5.10.1",
     "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.116",
     "@mui/styles": "^5.11.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.2.2",
     "clsx": "^1.2.1",
+    "moment": "^2.29.4",
     "react-icons": "^4.7.1",
+    "react-moment": "^1.1.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

package/themes/default.js

@@ -9,12 +9,12 @@ var _default = (0, _material.createTheme)({
   components: {
     MuiButton: {
       defaultProps: {
-        variant: 'contained',
+        variant: "contained",
         disableRipple: true
       },
       styleOverrides: {
         root: {
-          textTransform: 'initial'
+          textTransform: "initial"
         }
       }
     },
@@ -34,38 +34,53 @@ var _default = (0, _material.createTheme)({
     },
     MuiOutlinedInput: {
       defaultProps: {
-        size: "small"
+        size: 'small'
+      }
+    }
+  },
+  MuiAutocomplete: {
+    styleOverrides: {
+      root: {
+        padding: "0.5rem 0.75rem",
+        border: "1px solid black !important",
+        borderRadius: "0.25rem",
+        backgroundColor: "white",
+        "& .MuiAutocomplete-input": {
+          padding: "0.5rem 0.75rem",
+          fontSize: "1rem",
+          border: "1px solid black !important"
+        }
       }
     }
   },
   overrides: {
     MuiCssBaseline: {
-      '@global': {
+      "@global": {
         html: {
-          'scroll-behavior': 'smooth',
-          height: '100vh'
+          "scroll-behavior": "smooth",
+          height: "100vh"
         },
         body: {
-          position: 'relative',
+          position: "relative",
           margin: 0,
-          height: '100vh',
-          color: '#000000',
-          backgroundColor: '#f4f7fc'
+          height: "100vh",
+          color: "#000000",
+          backgroundColor: "#f4f7fc"
         },
-        '*::-webkit-scrollbar': {
-          width: '6px'
+        "*::-webkit-scrollbar": {
+          width: "6px"
         },
         a: {
-          textDecoration: 'none',
-          color: '#44409A'
+          textDecoration: "none",
+          color: "#44409A"
         },
-        '*::-webkit-scrollbar-thumb': {
-          backgroundColor: '#e4e4e4',
-          borderRadius: '3px',
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#e4e4e4",
+          borderRadius: "3px",
           opacity: 0.5
         },
-        '*::-webkit-scrollbar-track': {
-          background: 'transparent'
+        "*::-webkit-scrollbar-track": {
+          background: "transparent"
         }
       }
     }
@@ -108,80 +123,80 @@ var _default = (0, _material.createTheme)({
     //   main: "#BF1E1E",
     // },
     primary: {
-      main: '#44409A'
+      main: "#44409A"
     },
     primary_light: {
-      main: '#5B58A9'
+      main: "#5B58A9"
     },
     primary_dark: {
-      main: '#000050'
+      main: "#000050"
     },
     secondary: {
-      main: '#BF1E1E'
+      main: "#BF1E1E"
     },
     secondary_light: {
-      main: '#CC3F3F'
+      main: "#CC3F3F"
     },
     secondary_dark: {
-      main: '#951010'
+      main: "#951010"
     },
     success: {
-      main: '#2C7413'
+      main: "#2C7413"
     },
     success_light: {
-      main: '#5EA342'
+      main: "#5EA342"
     },
     success_dark: {
-      main: '#004700'
+      main: "#004700"
     },
     info: {
-      main: '#70BBFD'
+      main: "#70BBFD"
     },
     info_light: {
-      main: '#A6EDFF'
+      main: "#A6EDFF"
     },
     info_dark: {
-      main: '#358BCA'
+      main: "#358BCA"
     },
     error: {
-      main: '#BE1515'
+      main: "#BE1515"
     },
     error_light: {
-      main: '#F8533F'
+      main: "#F8533F"
     },
     error_dark: {
-      main: '#860000'
+      main: "#860000"
     },
     warning: {
-      main: '#EB9A31'
+      main: "#EB9A31"
     },
     warning_light: {
-      main: '#FFCB62'
+      main: "#FFCB62"
     },
     warning_dark: {
-      main: '#B46C00'
+      main: "#B46C00"
     },
     grey: {
-      main: '#7D7D7D'
+      main: "#7D7D7D"
     },
     grey_light: {
-      main: '#ACACAC'
+      main: "#ACACAC"
     },
     grey_dark: {
-      main: '#515151'
+      main: "#515151"
     },
     secondary_grey: {
-      main: '#D7E2F0'
+      main: "#D7E2F0"
     },
     white: {
-      main: '#ffffff'
+      main: "#ffffff"
     },
     text: {
-      main: '#000000'
+      main: "#000000"
     }
   },
   typography: {
-    fontFamily: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+    fontFamily: ["-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "Roboto", '"Helvetica Neue"', "Arial", "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(",")
   }
 });
 exports.default = _default;