@agilemotion/oui-react-js 1.8.47 → 1.8.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/dist/ViewContext.js +7 -2
  2. package/dist/components/DocumentViewer.js +10 -5
  3. package/dist/components/Graph.js +1 -1
  4. package/dist/components/SocketManager.js +2 -1
  5. package/dist/components/StepperTitleBar.css +2 -2
  6. package/dist/components/Toolbar.js +1 -17
  7. package/dist/components/WordDocumentViewer.js +3 -3
  8. package/dist/components/dashboard/FoldingSideTabDashboard.bck.js +332 -0
  9. package/dist/components/dashboard/FoldingSideTabDashboard.css +5 -0
  10. package/dist/components/dashboard/FoldingSideTabDashboard.js +254 -124
  11. package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.bck.js +321 -0
  12. package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.css +164 -6
  13. package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js +251 -173
  14. package/dist/components/form/Form.js +0 -1
  15. package/dist/components/layout/View.css +27 -2
  16. package/dist/components/layout/View.js +7 -7
  17. package/dist/components/layout/ViewPort.js +4 -3
  18. package/dist/components/layout/Window.js +6 -6
  19. package/dist/components/media/ClosablePanel.css +1 -1
  20. package/dist/components/media/MediaSoupHelper.js +3 -2
  21. package/dist/components/media/Toolbar.js +34 -41
  22. package/dist/components/media/TrainingRoom.js +1 -1
  23. package/dist/components/media/VCRoomWorkspace.js +2 -2
  24. package/dist/view/Dashboard.js +11 -10
  25. package/dist/view/security/ChangePasswordBasic.js +5 -1
  26. package/dist/view/security/ForgotPasswordBasic.js +5 -1
  27. package/dist/view/security/LoginBasic.js +5 -1
  28. package/dist/view/security/LoginInteractionPortal.js +5 -1
  29. package/dist/view/security/ResetPasswordBasic.js +5 -1
  30. package/package.json +2 -5
  31. package/dist/assets/css/black-dashboard-react.css +0 -12531
  32. package/dist/assets/css/black-dashboard-react.css.map +0 -134
  33. package/dist/assets/css/black-dashboard-react.min.css +0 -1
  34. package/dist/assets/css/nucleo-icons.css +0 -543
  35. package/dist/assets/scss/black-dashboard-react/bootstrap/_alert.scss +0 -51
  36. package/dist/assets/scss/black-dashboard-react/bootstrap/_badge.scss +0 -47
  37. package/dist/assets/scss/black-dashboard-react/bootstrap/_breadcrumb.scss +0 -41
  38. package/dist/assets/scss/black-dashboard-react/bootstrap/_button-group.scss +0 -172
  39. package/dist/assets/scss/black-dashboard-react/bootstrap/_buttons.scss +0 -143
  40. package/dist/assets/scss/black-dashboard-react/bootstrap/_card.scss +0 -301
  41. package/dist/assets/scss/black-dashboard-react/bootstrap/_carousel.scss +0 -236
  42. package/dist/assets/scss/black-dashboard-react/bootstrap/_close.scss +0 -35
  43. package/dist/assets/scss/black-dashboard-react/bootstrap/_code.scss +0 -48
  44. package/dist/assets/scss/black-dashboard-react/bootstrap/_custom-forms.scss +0 -433
  45. package/dist/assets/scss/black-dashboard-react/bootstrap/_dropdown.scss +0 -166
  46. package/dist/assets/scss/black-dashboard-react/bootstrap/_forms.scss +0 -333
  47. package/dist/assets/scss/black-dashboard-react/bootstrap/_functions.scss +0 -86
  48. package/dist/assets/scss/black-dashboard-react/bootstrap/_grid.scss +0 -52
  49. package/dist/assets/scss/black-dashboard-react/bootstrap/_images.scss +0 -42
  50. package/dist/assets/scss/black-dashboard-react/bootstrap/_input-group.scss +0 -173
  51. package/dist/assets/scss/black-dashboard-react/bootstrap/_jumbotron.scss +0 -16
  52. package/dist/assets/scss/black-dashboard-react/bootstrap/_list-group.scss +0 -115
  53. package/dist/assets/scss/black-dashboard-react/bootstrap/_media.scss +0 -8
  54. package/dist/assets/scss/black-dashboard-react/bootstrap/_mixins.scss +0 -41
  55. package/dist/assets/scss/black-dashboard-react/bootstrap/_modal.scss +0 -180
  56. package/dist/assets/scss/black-dashboard-react/bootstrap/_nav.scss +0 -118
  57. package/dist/assets/scss/black-dashboard-react/bootstrap/_navbar.scss +0 -299
  58. package/dist/assets/scss/black-dashboard-react/bootstrap/_pagination.scss +0 -78
  59. package/dist/assets/scss/black-dashboard-react/bootstrap/_popover.scss +0 -185
  60. package/dist/assets/scss/black-dashboard-react/bootstrap/_print.scss +0 -141
  61. package/dist/assets/scss/black-dashboard-react/bootstrap/_progress.scss +0 -34
  62. package/dist/assets/scss/black-dashboard-react/bootstrap/_reboot.scss +0 -482
  63. package/dist/assets/scss/black-dashboard-react/bootstrap/_root.scss +0 -19
  64. package/dist/assets/scss/black-dashboard-react/bootstrap/_tables.scss +0 -187
  65. package/dist/assets/scss/black-dashboard-react/bootstrap/_tooltip.scss +0 -115
  66. package/dist/assets/scss/black-dashboard-react/bootstrap/_transitions.scss +0 -22
  67. package/dist/assets/scss/black-dashboard-react/bootstrap/_type.scss +0 -125
  68. package/dist/assets/scss/black-dashboard-react/bootstrap/_utilities.scss +0 -15
  69. package/dist/assets/scss/black-dashboard-react/bootstrap/_variables.scss +0 -952
  70. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_alert.scss +0 -13
  71. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_background-variant.scss +0 -21
  72. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_badge.scss +0 -12
  73. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_border-radius.scss +0 -35
  74. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_box-shadow.scss +0 -5
  75. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_breakpoints.scss +0 -123
  76. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_buttons.scss +0 -109
  77. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_caret.scss +0 -66
  78. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_clearfix.scss +0 -7
  79. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_float.scss +0 -11
  80. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_forms.scss +0 -147
  81. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_gradients.scss +0 -45
  82. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_grid-framework.scss +0 -67
  83. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_grid.scss +0 -54
  84. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_hover.scss +0 -37
  85. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_image.scss +0 -36
  86. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_list-group.scss +0 -21
  87. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_lists.scss +0 -7
  88. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_nav-divider.scss +0 -10
  89. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_pagination.scss +0 -22
  90. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_reset-text.scss +0 -17
  91. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_resize.scss +0 -6
  92. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_screen-reader.scss +0 -33
  93. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_size.scss +0 -6
  94. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_table-row.scss +0 -30
  95. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_text-emphasis.scss +0 -14
  96. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_text-hide.scss +0 -13
  97. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_text-truncate.scss +0 -8
  98. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_transition.scss +0 -13
  99. package/dist/assets/scss/black-dashboard-react/bootstrap/mixins/_visibility.scss +0 -7
  100. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_align.scss +0 -8
  101. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_background.scss +0 -19
  102. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_borders.scss +0 -59
  103. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_clearfix.scss +0 -3
  104. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_display.scss +0 -38
  105. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_embed.scss +0 -54
  106. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_flex.scss +0 -51
  107. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_float.scss +0 -9
  108. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_position.scss +0 -37
  109. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_screenreaders.scss +0 -11
  110. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_shadows.scss +0 -6
  111. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_sizing.scss +0 -12
  112. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_spacing.scss +0 -51
  113. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_text.scss +0 -58
  114. package/dist/assets/scss/black-dashboard-react/bootstrap/utilities/_visibility.scss +0 -11
  115. package/dist/assets/scss/black-dashboard-react/custom/_alerts.scss +0 -103
  116. package/dist/assets/scss/black-dashboard-react/custom/_badges.scss +0 -3
  117. package/dist/assets/scss/black-dashboard-react/custom/_buttons.scss +0 -242
  118. package/dist/assets/scss/black-dashboard-react/custom/_card.scss +0 -232
  119. package/dist/assets/scss/black-dashboard-react/custom/_checkboxes-radio.scss +0 -154
  120. package/dist/assets/scss/black-dashboard-react/custom/_dropdown.scss +0 -359
  121. package/dist/assets/scss/black-dashboard-react/custom/_fixed-plugin.scss +0 -324
  122. package/dist/assets/scss/black-dashboard-react/custom/_footer.scss +0 -94
  123. package/dist/assets/scss/black-dashboard-react/custom/_forms.scss +0 -133
  124. package/dist/assets/scss/black-dashboard-react/custom/_functions.scss +0 -23
  125. package/dist/assets/scss/black-dashboard-react/custom/_images.scss +0 -7
  126. package/dist/assets/scss/black-dashboard-react/custom/_input-group.scss +0 -333
  127. package/dist/assets/scss/black-dashboard-react/custom/_misc.scss +0 -228
  128. package/dist/assets/scss/black-dashboard-react/custom/_mixins.scss +0 -15
  129. package/dist/assets/scss/black-dashboard-react/custom/_modal.scss +0 -161
  130. package/dist/assets/scss/black-dashboard-react/custom/_navbar.scss +0 -436
  131. package/dist/assets/scss/black-dashboard-react/custom/_rtl.scss +0 -245
  132. package/dist/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss +0 -763
  133. package/dist/assets/scss/black-dashboard-react/custom/_tables.scss +0 -165
  134. package/dist/assets/scss/black-dashboard-react/custom/_type.scss +0 -174
  135. package/dist/assets/scss/black-dashboard-react/custom/_utilities.scss +0 -9
  136. package/dist/assets/scss/black-dashboard-react/custom/_variables.scss +0 -996
  137. package/dist/assets/scss/black-dashboard-react/custom/_white-content.scss +0 -299
  138. package/dist/assets/scss/black-dashboard-react/custom/cards/_card-chart.scss +0 -73
  139. package/dist/assets/scss/black-dashboard-react/custom/cards/_card-map.scss +0 -3
  140. package/dist/assets/scss/black-dashboard-react/custom/cards/_card-plain.scss +0 -16
  141. package/dist/assets/scss/black-dashboard-react/custom/cards/_card-task.scss +0 -30
  142. package/dist/assets/scss/black-dashboard-react/custom/cards/_card-user.scss +0 -77
  143. package/dist/assets/scss/black-dashboard-react/custom/mixins/_alert.scss +0 -14
  144. package/dist/assets/scss/black-dashboard-react/custom/mixins/_background-variant.scss +0 -18
  145. package/dist/assets/scss/black-dashboard-react/custom/mixins/_badges.scss +0 -15
  146. package/dist/assets/scss/black-dashboard-react/custom/mixins/_buttons.scss +0 -343
  147. package/dist/assets/scss/black-dashboard-react/custom/mixins/_dropdown.scss +0 -26
  148. package/dist/assets/scss/black-dashboard-react/custom/mixins/_forms.scss +0 -127
  149. package/dist/assets/scss/black-dashboard-react/custom/mixins/_icon.scss +0 -4
  150. package/dist/assets/scss/black-dashboard-react/custom/mixins/_inputs.scss +0 -234
  151. package/dist/assets/scss/black-dashboard-react/custom/mixins/_modals.scss +0 -15
  152. package/dist/assets/scss/black-dashboard-react/custom/mixins/_page-header.scss +0 -7
  153. package/dist/assets/scss/black-dashboard-react/custom/mixins/_popovers.scss +0 -41
  154. package/dist/assets/scss/black-dashboard-react/custom/mixins/_vendor-prefixes.scss +0 -209
  155. package/dist/assets/scss/black-dashboard-react/custom/mixins/_wizard.scss +0 -26
  156. package/dist/assets/scss/black-dashboard-react/custom/mixins/opacity.scss +0 -8
  157. package/dist/assets/scss/black-dashboard-react/custom/utilities/_backgrounds.scss +0 -42
  158. package/dist/assets/scss/black-dashboard-react/custom/utilities/_floating.scss +0 -54
  159. package/dist/assets/scss/black-dashboard-react/custom/utilities/_helper.scss +0 -62
  160. package/dist/assets/scss/black-dashboard-react/custom/utilities/_position.scss +0 -19
  161. package/dist/assets/scss/black-dashboard-react/custom/utilities/_shadows.scss +0 -10
  162. package/dist/assets/scss/black-dashboard-react/custom/utilities/_sizing.scss +0 -5
  163. package/dist/assets/scss/black-dashboard-react/custom/utilities/_spacing.scss +0 -105
  164. package/dist/assets/scss/black-dashboard-react/custom/utilities/_text.scss +0 -40
  165. package/dist/assets/scss/black-dashboard-react/custom/utilities/_transform.scss +0 -8
  166. package/dist/assets/scss/black-dashboard-react/custom/vendor/_plugin-perfect-scrollbar.scss +0 -116
  167. package/dist/assets/scss/black-dashboard-react/custom/vendor/_plugin-react-notification-alert.scss +0 -4
  168. package/dist/assets/scss/black-dashboard-react/react-differences/_inputs.scss +0 -3
  169. package/dist/assets/scss/black-dashboard-react/react-differences/react-differences.scss +0 -1
  170. package/dist/assets/scss/black-dashboard-react.scss +0 -105
@@ -3,99 +3,167 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
6
+ exports.default = FoldingSideTabDashboard;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _material = require("@mui/material");
9
+ var _MenuOpen = _interopRequireDefault(require("@mui/icons-material/MenuOpen"));
10
+ var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
11
+ var _Mail = _interopRequireDefault(require("@mui/icons-material/Mail"));
12
+ var _Logout = _interopRequireDefault(require("@mui/icons-material/Logout"));
13
+ var _ManageAccounts = _interopRequireDefault(require("@mui/icons-material/ManageAccounts"));
8
14
  var _withWidth = require("material-ui/utils/withWidth");
9
15
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
16
  var _Utils = _interopRequireDefault(require("../../Utils"));
11
17
  var _ViewPort = _interopRequireDefault(require("../layout/ViewPort"));
12
18
  var _reactRouterDom = require("react-router-dom");
13
19
  var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
14
- var _FoldingTabSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/FoldingTabSidebar"));
15
20
  var _HomeNavbar = _interopRequireDefault(require("../navbars/HomeNavbar"));
16
- var _reactRedux = require("react-redux");
17
21
  var _DashboardStore = require("../../redux/store/DashboardStore");
18
22
  var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
19
23
  var _SocketManager = _interopRequireDefault(require("../SocketManager"));
20
24
  var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
21
25
  require("./FoldingSideTabDashboard.css");
26
+ var _ActionHandlers = _interopRequireDefault(require("../../event/ActionHandlers"));
27
+ var _FoldingTabSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/FoldingTabSidebar"));
28
+ var _styles = require("@mui/material/styles");
29
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
22
30
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
23
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
31
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
32
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
33
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // FoldingSideTabDashboard.jsx
34
+ const DRAWER_WIDTH = 320;
35
+ const MINI_WIDTH = 72;
36
+ const DrawerStyled = (0, _styles.styled)(_material.Drawer, {
37
+ shouldForwardProp: prop => prop !== "open"
38
+ })(_ref => {
39
+ let {
40
+ theme,
41
+ open
42
+ } = _ref;
43
+ return {
44
+ width: open ? DRAWER_WIDTH : MINI_WIDTH,
45
+ flexShrink: 0,
46
+ whiteSpace: "nowrap",
47
+ "& .MuiDrawer-paper": {
48
+ width: open ? DRAWER_WIDTH : MINI_WIDTH,
49
+ overflowX: "hidden",
50
+ transition: theme.transitions.create("width", {
51
+ easing: theme.transitions.easing.sharp,
52
+ duration: theme.transitions.duration.standard
53
+ })
54
+ }
55
+ };
56
+ });
57
+ const Main = (0, _styles.styled)("main", {
58
+ shouldForwardProp: prop => prop !== "open"
59
+ })(_ref2 => {
60
+ let {
61
+ theme,
62
+ open
63
+ } = _ref2;
64
+ return {
65
+ flexGrow: 1,
66
+ transition: theme.transitions.create("margin-left", {
67
+ easing: theme.transitions.easing.sharp,
68
+ duration: theme.transitions.duration.standard
69
+ }),
70
+ padding: 0,
71
+ background: "transparent"
72
+ };
73
+ });
24
74
  let ps;
25
- const DATA_URL_PREFIX = 'data:image/png;base64,';
75
+ const DATA_URL_PREFIX = "data:image/png;base64,";
26
76
  function normalizeLogo(src) {
27
77
  if (!src) return undefined;
28
78
  const s = src.trim();
29
79
  if (/^data:/i.test(s)) {
30
- const dup = new RegExp(`^(${DATA_URL_PREFIX})+`, 'i');
80
+ const dup = new RegExp(`^(${DATA_URL_PREFIX})+`, "i");
31
81
  return s.replace(dup, DATA_URL_PREFIX);
32
82
  }
33
83
  return DATA_URL_PREFIX + s;
34
84
  }
35
- const FoldingSideTabDashboard = props => {
36
- const [navDrawerOpen, setNavDrawerOpen] = _react.default.useState(true);
37
- const [loading, setLoading] = _react.default.useState(true);
38
- const [activeColor, setActiveColor] = _react.default.useState('blue');
39
- const [secondaryThemeColor, setSecondaryThemeColor] = _react.default.useState('');
40
- const [primaryThemeColor, setPrimaryThemeColor] = _react.default.useState('');
41
- const [themeTextColor, setThemeTextColor] = _react.default.useState('');
42
- const [routes, setRoutes] = _react.default.useState([]);
43
- const [logo, setLogo] = _react.default.useState(normalizeLogo(props.logo));
44
- const [sidebarOpened, setSidebarOpened] = _react.default.useState(document.documentElement.className.indexOf('nav-open') !== -1);
45
- const [sidebarMini, setSidebarMini] = _react.default.useState(true);
46
- const [opacity, setOpacity] = _react.default.useState(0);
47
- const [windowPinned, setWindowPinned] = _react.default.useState(false);
48
- const dispatch = (0, _reactRedux.useDispatch)();
85
+ function FoldingSideTabDashboard(props) {
86
+ const [open, setOpen] = React.useState(true);
87
+ const [navDrawerOpen, setNavDrawerOpen] = React.useState(true);
88
+ const [loading, setLoading] = React.useState(true);
89
+ const [activeColor, setActiveColor] = React.useState("blue");
90
+ const [secondaryThemeColor, setSecondaryThemeColor] = React.useState("");
91
+ const [primaryThemeColor, setPrimaryThemeColor] = React.useState("");
92
+ const [themeTextColor, setThemeTextColor] = React.useState("");
93
+ const [routes, setRoutes] = React.useState([]);
94
+ const [logo, setLogo] = React.useState(normalizeLogo(props.logo));
95
+ const [sidebarOpened, setSidebarOpened] = React.useState(document.documentElement.className.indexOf("nav-open") !== -1);
96
+ const [sidebarMini, setSidebarMini] = React.useState(true);
97
+ const [opacity, setOpacity] = React.useState(0);
98
+ const [windowPinned, setWindowPinned] = React.useState(false);
99
+
100
+ // Avatar menu state
101
+ const [userMenuEl, setUserMenuEl] = React.useState(null);
102
+ const userMenuOpen = Boolean(userMenuEl);
103
+ const handleUserMenuOpen = e => setUserMenuEl(e.currentTarget);
104
+ const handleUserMenuClose = () => setUserMenuEl(null);
105
+ const theme = (0, _styles.useTheme)();
106
+ const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
107
+ const handleProfile = () => {
108
+ handleUserMenuClose();
109
+ launchView("/system/views/user-profile.json");
110
+ };
111
+ const handleLogout = () => {
112
+ handleUserMenuClose();
113
+ props.logoutCallBack && props.logoutCallBack();
114
+ };
49
115
  const handleChangeRequestNavDrawer = () => {
50
116
  setNavDrawerOpen(!navDrawerOpen);
51
117
  };
52
118
  const handleBgClick = color => {
53
119
  setActiveColor(color);
54
120
  };
55
- _react.default.useEffect(() => {
56
- if (navigator.platform.indexOf('Win') > -1) {
57
- document.documentElement.classList.add('perfect-scrollbar-on');
58
- document.documentElement.classList.remove('perfect-scrollbar-off');
59
- let tables = document.querySelectorAll('.table-responsive');
121
+ React.useEffect(() => {
122
+ if (isMobile) {
123
+ setOpen(false); // auto collapse when screen is small
124
+ }
125
+ }, [isMobile]);
126
+ React.useEffect(() => {
127
+ if (navigator.platform.indexOf("Win") > -1) {
128
+ document.documentElement.classList.add("perfect-scrollbar-on");
129
+ document.documentElement.classList.remove("perfect-scrollbar-off");
130
+ let tables = document.querySelectorAll(".table-responsive");
60
131
  for (let i = 0; i < tables.length; i++) {
61
132
  ps = new _perfectScrollbar.default(tables[i]);
62
133
  }
63
134
  }
64
- window.addEventListener('scroll', showNavbarButton);
135
+ window.addEventListener("scroll", showNavbarButton);
65
136
  });
66
- _react.default.useEffect(() => {
67
- if (props.width !== null && typeof props.width !== 'undefined') {
137
+ React.useEffect(() => {
138
+ if (props.width !== null && typeof props.width !== "undefined") {
68
139
  setNavDrawerOpen(props.width === _withWidth.LARGE);
69
140
  }
70
141
  }, [props.width]);
71
- _react.default.useEffect(() => {
142
+ React.useEffect(() => {
72
143
  _SocketManager.default.init();
73
144
  return () => {
74
145
  _SocketManager.default.disconnect();
75
146
  };
76
147
  }, []);
77
- _react.default.useEffect(() => {
78
- document.body.classList.add('white-content');
79
- if (navigator.platform.indexOf('Win') > -1) {
80
- //ps.destroy();
81
- //document.documentElement.className.add("perfect-scrollbar-off");
82
- //document.documentElement.classList.remove("perfect-scrollbar-on");
148
+ React.useEffect(() => {
149
+ document.body.classList.add("white-content");
150
+ if (navigator.platform.indexOf("Win") > -1) {
151
+ // Keeping for parity with your original code
83
152
  }
84
- window.removeEventListener('scroll', showNavbarButton);
85
- setActiveColor('agility');
153
+ window.removeEventListener("scroll", showNavbarButton);
154
+ setActiveColor("agility");
86
155
  setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor);
87
156
  setPrimaryThemeColor(props.settings.systemProfileDto.firstCorporateBrandColor);
88
157
  setThemeTextColor(props.settings.systemProfileDto.themeTextColor);
89
- dispatch(_DashboardStore.actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
90
158
  if (!_Utils.default.isNull(props.settings)) {
91
159
  let dashboardMenu = {};
92
- dashboardMenu.id = 'dashboard';
160
+ dashboardMenu.id = "dashboard";
93
161
  dashboardMenu.menus = [];
94
162
  let myDashboardMenu = {};
95
- myDashboardMenu.id = 'myDashboard';
163
+ myDashboardMenu.id = "myDashboard";
96
164
  myDashboardMenu.items = [];
97
165
  myDashboardMenu.attributes = {};
98
- myDashboardMenu.attributes.label = 'My Dashboards';
166
+ myDashboardMenu.attributes.label = "My Dashboards";
99
167
  dashboardMenu.menus.push(myDashboardMenu);
100
168
  if (!_Utils.default.isNull(props.settings.userDashboards)) {
101
169
  for (let i = 0; i < props.settings.userDashboards.length; i++) {
@@ -108,10 +176,10 @@ const FoldingSideTabDashboard = props => {
108
176
  }
109
177
  }
110
178
  let createNewMenu = {};
111
- createNewMenu.id = 'createNew';
179
+ createNewMenu.id = "createNew";
112
180
  createNewMenu.items = [];
113
181
  createNewMenu.attributes = {};
114
- createNewMenu.attributes.label = 'Create New';
182
+ createNewMenu.attributes.label = "Create New";
115
183
  dashboardMenu.menus.push(createNewMenu);
116
184
  if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
117
185
  for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
@@ -129,10 +197,10 @@ const FoldingSideTabDashboard = props => {
129
197
  let newRoutes = [];
130
198
  let newRoute = {};
131
199
  if (_Utils.default.isNull(props.showDashboardMenu) || props.showDashboardMenu) {
132
- newRoute.name = 'Dashboard';
133
- newRoute.id = 'dashboard';
134
- newRoute.icon = 'fa fa-pie-chart';
135
- newRoute.layout = '/admin';
200
+ newRoute.name = "Dashboard";
201
+ newRoute.id = "dashboard";
202
+ newRoute.icon = "fa fa-pie-chart";
203
+ newRoute.layout = "/admin";
136
204
  newRoute.level = 0;
137
205
  newRoute.isParent = true;
138
206
  newRoutes.push(newRoute);
@@ -144,25 +212,25 @@ const FoldingSideTabDashboard = props => {
144
212
  route.name = module.label;
145
213
  route.icon = module.icon;
146
214
  route.menu = module.menu;
147
- route.layout = '/admin';
215
+ route.layout = "/admin";
148
216
  route.level = 0;
149
217
  if (module.menu) {
150
218
  route.collapse = true;
151
- route.state = module.name + 'Collapse';
219
+ route.state = module.name + "Collapse";
152
220
  }
153
221
  newRoutes.push(route);
154
222
  }
155
223
  }
156
224
  if (props.settings.settingsMenu) {
157
225
  newRoute = {};
158
- newRoute.name = 'Settings';
159
- newRoute.icon = 'fa fa-cog';
160
- newRoute.layout = '/admin';
226
+ newRoute.name = "Settings";
227
+ newRoute.icon = "fa fa-cog";
228
+ newRoute.layout = "/admin";
161
229
  newRoute.isParent = true;
162
230
  newRoute.collapse = true;
163
231
  newRoute.level = 0;
164
- newRoute.menu = ''; // TODO : set menu value
165
- newRoute.state = 'settingsMenuCollapse';
232
+ newRoute.menu = ""; // TODO : set menu value
233
+ newRoute.state = "settingsMenuCollapse";
166
234
  newRoutes.push(newRoute);
167
235
  }
168
236
  setRoutes(newRoutes);
@@ -171,7 +239,7 @@ const FoldingSideTabDashboard = props => {
171
239
  }
172
240
  }, [props.settings]);
173
241
  const toggleSidebar = () => {
174
- document.documentElement.classList.toggle('nav-open');
242
+ document.documentElement.classList.toggle("nav-open");
175
243
  setSidebarOpened(!sidebarOpened);
176
244
  };
177
245
  const showNavbarButton = () => {
@@ -186,8 +254,8 @@ const FoldingSideTabDashboard = props => {
186
254
  if (prop.collapse) {
187
255
  return getRoutes(prop.views);
188
256
  }
189
- if (prop.layout === '/admin') {
190
- return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
257
+ if (prop.layout === "/admin") {
258
+ return /*#__PURE__*/React.createElement(_reactRouterDom.Route, {
191
259
  path: prop.layout + prop.path,
192
260
  component: prop.component,
193
261
  key: key
@@ -198,7 +266,7 @@ const FoldingSideTabDashboard = props => {
198
266
  });
199
267
  };
200
268
  const getActiveRoute = routes => {
201
- let activeRoute = 'Dashboard';
269
+ let activeRoute = "Dashboard";
202
270
  for (let i = 0; i < routes.length; i++) {
203
271
  if (routes[i].collapse && routes[i].views) {
204
272
  let collapseActiveRoute = getActiveRoute(routes[i].views);
@@ -216,61 +284,127 @@ const FoldingSideTabDashboard = props => {
216
284
  const handleActiveClick = color => {
217
285
  setActiveColor(color);
218
286
  };
219
- const handleMiniClick = () => {
220
- let notifyMessage = 'Sidebar mini ';
221
- if (document.body.classList.contains('sidebar-mini')) {
222
- setSidebarMini(false);
223
- notifyMessage += 'deactivated...';
224
- } else {
225
- setSidebarMini(true);
226
- notifyMessage += 'activated...';
227
- }
228
- let options = {};
229
- options = {
230
- place: 'tr',
231
- message: notifyMessage,
232
- type: 'primary',
233
- icon: 'tim-icons icon-bell-55',
234
- autoDismiss: 7
235
- };
236
- document.body.classList.toggle('sidebar-mini');
237
- };
238
287
  const closeSidebar = () => {
239
288
  setSidebarOpened(false);
240
- document.documentElement.classList.remove('nav-open');
289
+ document.documentElement.classList.remove("nav-open");
241
290
  };
242
291
  function launchDashboard() {
243
292
  _ApplicationManager.default.closeAllViews();
244
293
  //applicationManager.navigate('/switch');
245
- _ApplicationManager.default.navigate('/view/dashboard');
294
+ _ApplicationManager.default.navigate("/view/dashboard");
246
295
  }
247
- return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
248
- className: "wrapper",
249
- style: {
250
- height: '100%',
251
- overflow: 'hidden'
296
+ function launchView(path) {
297
+ let actionConfig = {};
298
+ actionConfig.actionType = "route";
299
+ actionConfig.path = path;
300
+ actionConfig.parent = true;
301
+ _ActionHandlers.default.invokeHandler(actionConfig);
302
+ }
303
+ if (loading) {
304
+ return /*#__PURE__*/React.createElement("div", null, "Loading...");
305
+ }
306
+ return /*#__PURE__*/React.createElement(_material.Box, {
307
+ sx: {
308
+ display: "flex"
252
309
  }
253
- }, /*#__PURE__*/_react.default.createElement("div", {
254
- className: "navbar-minimize-fixed",
255
- style: {
256
- opacity: opacity
310
+ }, /*#__PURE__*/React.createElement(_material.CssBaseline, null), /*#__PURE__*/React.createElement(_material.AppBar, {
311
+ position: "fixed",
312
+ color: "primary",
313
+ elevation: 1,
314
+ sx: {
315
+ zIndex: theme => theme.zIndex.drawer + 1
316
+ }
317
+ }, /*#__PURE__*/React.createElement(_material.Toolbar, null, /*#__PURE__*/React.createElement(_material.Tooltip, {
318
+ title: open ? "Collapse menu" : "Expand menu"
319
+ }, /*#__PURE__*/React.createElement(_material.IconButton, {
320
+ color: "inherit",
321
+ edge: "start",
322
+ onClick: () => setOpen(o => !o)
323
+ }, open ? /*#__PURE__*/React.createElement(_MenuOpen.default, null) : /*#__PURE__*/React.createElement(_Menu.default, null))), /*#__PURE__*/React.createElement(_material.Box, {
324
+ sx: {
325
+ ml: 1,
326
+ fontWeight: 600
327
+ }
328
+ }), /*#__PURE__*/React.createElement(_material.Box, {
329
+ sx: {
330
+ ml: "auto",
331
+ display: "flex",
332
+ alignItems: "center"
333
+ }
334
+ }, /*#__PURE__*/React.createElement(_material.Tooltip, {
335
+ title: "Account"
336
+ }, /*#__PURE__*/React.createElement(_material.IconButton, {
337
+ onClick: handleUserMenuOpen,
338
+ size: "small",
339
+ sx: {
340
+ ml: 1
341
+ },
342
+ "aria-controls": userMenuOpen ? "account-menu" : undefined,
343
+ "aria-haspopup": "true",
344
+ "aria-expanded": userMenuOpen ? "true" : undefined
345
+ }, /*#__PURE__*/React.createElement(_material.Avatar, {
346
+ alt: "User",
347
+ src: props.avatar,
348
+ sx: {
349
+ width: 36,
350
+ height: 36,
351
+ borderRadius: "50%"
257
352
  }
258
- }, /*#__PURE__*/_react.default.createElement("button", {
259
- className: "minimize-sidebar btn btn-link btn-just-icon",
260
- onClick: handleMiniClick
261
- }, /*#__PURE__*/_react.default.createElement("i", {
262
- className: "tim-icons icon-align-center visible-on-sidebar-regular text-muted"
263
- }), /*#__PURE__*/_react.default.createElement("i", {
264
- className: "tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"
265
- })), ' '), ' ', /*#__PURE__*/_react.default.createElement(_FoldingTabSidebar.default, _extends({}, props, {
353
+ }))), /*#__PURE__*/React.createElement(_material.Menu, {
354
+ anchorEl: userMenuEl,
355
+ id: "account-menu",
356
+ open: userMenuOpen,
357
+ onClose: handleUserMenuClose,
358
+ onClick: handleUserMenuClose,
359
+ transformOrigin: {
360
+ horizontal: "right",
361
+ vertical: "top"
362
+ },
363
+ anchorOrigin: {
364
+ horizontal: "right",
365
+ vertical: "bottom"
366
+ },
367
+ PaperProps: {
368
+ elevation: 3,
369
+ sx: {
370
+ mt: 1.5,
371
+ minWidth: 220,
372
+ overflow: "visible",
373
+ "&:before": {
374
+ content: '""',
375
+ display: "block",
376
+ position: "absolute",
377
+ top: 0,
378
+ right: 14,
379
+ width: 10,
380
+ height: 10,
381
+ bgcolor: "background.paper",
382
+ transform: "translateY(-50%) rotate(45deg)",
383
+ zIndex: 0
384
+ }
385
+ }
386
+ }
387
+ }, /*#__PURE__*/React.createElement(_material.MenuItem, {
388
+ onClick: handleProfile
389
+ }, /*#__PURE__*/React.createElement(_material.ListItemIcon, null, /*#__PURE__*/React.createElement(_ManageAccounts.default, {
390
+ fontSize: "small"
391
+ })), /*#__PURE__*/React.createElement(_material.Typography, null, "Profile")), /*#__PURE__*/React.createElement(_material.Divider, null), /*#__PURE__*/React.createElement(_material.MenuItem, {
392
+ onClick: handleLogout
393
+ }, /*#__PURE__*/React.createElement(_material.ListItemIcon, null, /*#__PURE__*/React.createElement(_Logout.default, {
394
+ fontSize: "small"
395
+ })), /*#__PURE__*/React.createElement(_material.Typography, null, "Log out")))))), /*#__PURE__*/React.createElement(DrawerStyled, {
396
+ variant: isMobile ? "temporary" : "permanent",
397
+ open: open
398
+ }, /*#__PURE__*/React.createElement(_material.Toolbar, null), /*#__PURE__*/React.createElement(_FoldingTabSidebar.default, _extends({}, props, {
266
399
  routes: routes,
400
+ open: open,
267
401
  activeColor: 'agility',
268
402
  secondaryThemeColor: secondaryThemeColor,
403
+ onOpenDrawer: () => setOpen(true),
269
404
  activeRouteMenu: props.showDashboardMenu ? {
270
405
  id: 'dashboard',
271
406
  name: 'Dashboard'
272
407
  } : null,
273
- className: 'sidebar',
274
408
  dashboardLauncher: () => {
275
409
  launchDashboard();
276
410
  },
@@ -282,28 +416,17 @@ const FoldingSideTabDashboard = props => {
282
416
  },
283
417
  logoStyle: props.logoStyle,
284
418
  closeSidebar: closeSidebar
285
- })), ' ', /*#__PURE__*/_react.default.createElement("div", {
286
- className: "main-panel",
287
- data: activeColor
288
- }, /*#__PURE__*/_react.default.createElement(_HomeNavbar.default, _extends({}, props, {
289
- color: primaryThemeColor,
290
- themeTextColor: themeTextColor,
291
- handleMiniClick: handleMiniClick,
292
- brandText: getActiveRoute(routes),
293
- sidebarOpened: sidebarOpened,
294
- avatar: props.avatar,
295
- settingsMenu: props.settings.settingsMenu,
296
- toggleSidebar: toggleSidebar,
297
- logoutCallBack: props.logoutCallBack
298
- })), ' ', /*#__PURE__*/_react.default.createElement("div", {
299
- className: "content",
419
+ })), ' '), /*#__PURE__*/React.createElement(Main, {
420
+ open: open
421
+ }, /*#__PURE__*/React.createElement(_material.Toolbar, null), /*#__PURE__*/React.createElement("div", {
422
+ className: "dashboard-main-content",
300
423
  style: {
301
424
  height: "calc(100vh - 70px)",
302
425
  maxHeight: "calc(100vh - 70px)"
303
426
  }
304
- }, /*#__PURE__*/_react.default.createElement("div", {
427
+ }, /*#__PURE__*/React.createElement("div", {
305
428
  className: "content w-100 h-100 row no-margin no-padding"
306
- }, /*#__PURE__*/_react.default.createElement("div", {
429
+ }, /*#__PURE__*/React.createElement("div", {
307
430
  style: {
308
431
  width: windowPinned ? 'calc(100% - 320px)' : '100%',
309
432
  height: "100%",
@@ -311,22 +434,29 @@ const FoldingSideTabDashboard = props => {
311
434
  overflow: 'auto',
312
435
  paddingTop: '4px'
313
436
  }
314
- }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
315
- windowPinned: windowPinned
316
- })), /*#__PURE__*/_react.default.createElement("div", {
437
+ }, /*#__PURE__*/React.createElement(_ViewPort.default, {
438
+ windowPinned: windowPinned,
439
+ menuOffset: open ? DRAWER_WIDTH : MINI_WIDTH
440
+ })), /*#__PURE__*/React.createElement("div", {
317
441
  className: 'col no-margin no-padding',
318
442
  style: {
319
443
  width: windowPinned ? '320px' : '0',
320
444
  margin: '8px'
321
445
  }
322
- }, /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, {
446
+ }, /*#__PURE__*/React.createElement(_WindowViewPort.default, {
323
447
  stateChangeHandler: state => {
324
448
  setWindowPinned(state.pinned);
325
449
  }
326
- }))))), ' '));
327
- };
450
+ }))))));
451
+ }
328
452
  FoldingSideTabDashboard.propTypes = {
329
453
  children: _propTypes.default.element,
330
- width: _propTypes.default.number
331
- };
332
- var _default = exports.default = FoldingSideTabDashboard;
454
+ width: _propTypes.default.number,
455
+ settings: _propTypes.default.object,
456
+ showDashboardMenu: _propTypes.default.bool,
457
+ logo: _propTypes.default.string,
458
+ logoStyle: _propTypes.default.object,
459
+ appLogoPath: _propTypes.default.string,
460
+ avatar: _propTypes.default.string,
461
+ logoutCallBack: _propTypes.default.func
462
+ };