@copart/ops-tool-kit 1.9.0-alpha.3 → 1.9.0-alpha.4

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 (3) hide show
  1. package/dist/ops-tool-kit.js +255 -271
  2. package/dist/ops-tool-kit.js.map +1 -1
  3. package/package.json +1 -1
package/dist/ops-tool-kit.js CHANGED
@@ -33,7 +33,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
33
33
  var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
34
34
 
35
35
  const name$e = "@copart/ops-tool-kit";
36
- const version$3 = "1.9.0-alpha.3";
36
+ const version$3 = "1.9.0-alpha.4";
37
37
  const main = "dist/ops-tool-kit.js";
38
38
  const style = "dist/ops-tool-kit.css";
39
39
  const files = [
@@ -30945,7 +30945,7 @@ var GoHome = function GoHome(props) {
30945
30945
  }, props.reason));
30946
30946
  };
30947
30947
 
30948
- var css_248z$1 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\n display: flex;\n flex-direction: column;\n position: absolute;\n background: #3A4454;\n min-width: 100px;\n max-width: 100px;\n height: 100%;\n color: #ffffff;\n font-size: 16px;\n transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\n max-width: 400px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\n flex: 1;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \n display: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n display: flex;\n width: 100%;\n padding: 6px 0px 6px 12px;\n border-radius: 5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected {\n color: #323130;\n background-color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\n margin-left: auto;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\n background-color: #73A6FF;\n transition: background-color 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\n margin-left: auto;\n font-size: 12px;\n color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\n margin-left: auto;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n margin-right: 5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\n width: 20px;\n color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n max-width: 0;\n overflow: hidden;\n white-space:nowrap;\n margin: 0 5px;\n font-weight: 100;\n cursor: pointer;\n transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n max-width: 100%;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n margin: 0 5px 0 0;\n font-weight: 600;\n margin-left: 0px;\n cursor: auto;\n cursor: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n margin-right: 0px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n padding-left: 12px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\n display: inline;\n display: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\n margin-left: 10px;\n padding: 0 2px;\n background-color: #232932;\n border-left: 1px solid #8A8886;\n overflow: hidden;\n max-height: 0px;\n transition: max-height 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3.utilities_ops-app-frame_NavigationBar_NavigationBar--expanded {\n max-height: 500px;\n margin-top: 3px;\n}";
30948
+ var css_248z$1 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\n display: flex;\n flex-direction: column;\n position: absolute;\n background: #3A4454;\n min-width: 100px;\n max-width: 100px;\n height: 100%;\n color: #ffffff;\n font-size: 16px;\n z-index: 99999;\n transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\n max-width: 400px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\n flex: 1;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \n display: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n display: flex;\n width: 100%;\n padding: 6px 0px 6px 12px;\n border-radius: 5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\n color: #323130;\n background-color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\n margin-left: auto;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\n background-color: #73A6FF;\n transition: background-color 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\n margin-left: auto;\n font-size: 12px;\n color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\n color: #323130;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\n margin-left: auto;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n \n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\n width: 20px;\n color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\n color: #323130;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n max-width: 0;\n overflow: hidden;\n white-space: nowrap;\n margin: 0 5px 0 10px;\n font-weight: 100;\n cursor: pointer;\n transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n max-width: 100%;\n margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n max-width: 100%;\n margin: 0 5px 0 0;\n font-weight: 600;\n margin-left: 0px;\n cursor: auto;\n cursor: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n margin-right: 0px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n padding-left: 12px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\n display: inline;\n display: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\n margin-left: 10px;\n padding: 0 2px;\n background-color: #232932;\n border-left: 1px solid #8A8886;\n overflow: hidden;\n max-height: 0px;\n transition: max-height 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3.utilities_ops-app-frame_NavigationBar_NavigationBar--expanded {\n max-height: 500px;\n margin-top: 3px;\n}";
30949
30949
  styleInject(css_248z$1);
30950
30950
 
30951
30951
  var _styleModuleImportMap = {
@@ -30953,9 +30953,10 @@ var _styleModuleImportMap = {
30953
30953
  "NavBarContainer": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
30954
30954
  "NavMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu",
30955
30955
  "NavItem": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem",
30956
- "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
30956
+ "NavItemSelected": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected",
30957
30957
  "expandButton": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton",
30958
30958
  "expandedMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu",
30959
+ "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
30959
30960
  "NavItemCount": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount",
30960
30961
  "NavItemIcon": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon",
30961
30962
  "NavItemName": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName",
@@ -30973,181 +30974,140 @@ var NavIcon = function NavIcon(_ref) {
30973
30974
  }) : icon;
30974
30975
  };
30975
30976
 
30976
- var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref2) {
30977
- var _navItem$name;
30977
+ var updateRoutes = function updateRoutes(navItems, parentRoute) {
30978
+ var updatedItems = navItems.map(function (item) {
30979
+ var updatedItem = _objectSpread2({}, item);
30978
30980
 
30979
- var navItem = _ref2.navItem,
30980
- isHover = _ref2.isHover,
30981
- activeSubmenu = _ref2.activeSubmenu,
30982
- setActiveSubmenu = _ref2.setActiveSubmenu,
30983
- navigateTo = _ref2.navigateTo,
30984
- selected = _ref2.selected,
30985
- setSelected = _ref2.setSelected,
30986
- defaultRedirect = _ref2.defaultRedirect,
30987
- reloadMenuItems = _ref2.reloadMenuItems;
30988
- var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
30989
- return React__default["default"].createElement("div", {
30990
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1"
30991
- }, React__default["default"].createElement("div", {
30992
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem"
30993
- }, React__default["default"].createElement("div", {
30994
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
30995
- }, React__default["default"].createElement(NavIcon, {
30996
- icon: navItem.icon
30997
- })), React__default["default"].createElement("div", {
30998
- className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
30999
- }, (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase()), React__default["default"].createElement("div", {
31000
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
31001
- }, navItem.count)), React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
31002
- return React__default["default"].createElement(NavigationMenuLevel2, {
31003
- key: subItem.name,
31004
- isHover: isHover,
31005
- navItem: subItem,
31006
- selected: selected,
31007
- setSelected: setSelected,
31008
- defaultRedirect: defaultRedirect,
31009
- activeSubmenu: activeSubmenu,
31010
- setActiveSubmenu: setActiveSubmenu,
31011
- navigateTo: navigateTo,
31012
- reloadMenuItems: reloadMenuItems
31013
- });
31014
- }) : null));
31015
- };
31016
-
31017
- var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref3) {
31018
- var navItem = _ref3.navItem,
31019
- isHover = _ref3.isHover,
31020
- selected = _ref3.selected,
31021
- setSelected = _ref3.setSelected,
31022
- defaultRedirect = _ref3.defaultRedirect,
31023
- activeSubmenu = _ref3.activeSubmenu,
31024
- setActiveSubmenu = _ref3.setActiveSubmenu,
31025
- navigateTo = _ref3.navigateTo,
31026
- reloadMenuItems = _ref3.reloadMenuItems;
30981
+ if (updatedItem.route) {
30982
+ updatedItem.fullRoute = parentRoute + '/' + updatedItem.route;
30983
+ }
31027
30984
 
31028
- var _useState = React.useState(navItem.count),
31029
- _useState2 = _slicedToArray(_useState, 2),
31030
- countText = _useState2[0],
31031
- setCountText = _useState2[1];
30985
+ if (updatedItem.subMenuItems) {
30986
+ updatedItem.subMenuItems = updateRoutes(updatedItem.subMenuItems, updatedItem.fullRoute);
30987
+ }
31032
30988
 
31033
- var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
31034
- React.useEffect(function () {
31035
- setTimeout(function () {
31036
- setCountText(!isHover ? navItem.count > 999 ? '999+' : navItem.count : navItem.count);
31037
- });
31038
- }, [isHover]);
30989
+ return updatedItem;
30990
+ });
30991
+ return updatedItems;
30992
+ };
31039
30993
 
31040
- var handleItemClick = function handleItemClick() {
31041
- setActiveSubmenu(activeSubmenu === navItem.route ? null : navItem.route);
31042
- setSelected(null);
30994
+ var getDepth = function getDepth(navItems) {
30995
+ var depth = 0;
30996
+ navItems.forEach(function (navItem) {
30997
+ var subMenuDepth = navItem.subMenuItems ? getDepth(navItem.subMenuItems) : 0;
30998
+ depth = Math.max(depth, 1 + subMenuDepth);
30999
+ });
31000
+ return depth;
31001
+ };
31002
+
31003
+ var validateConfig = function validateConfig(navItems) {
31004
+ var maxDepth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
31005
+ var keys = ['name', 'route'];
31006
+ if (navItems.length === 0) return false;
31007
+ var depth = getDepth(navItems);
31008
+ if (depth > maxDepth) return false;
31009
+ navItems.map(function (item) {
31010
+ var configItem = _objectSpread2({}, item);
31011
+
31012
+ if (keys.every(function (key) {
31013
+ return configItem.hasOwnProperty(key);
31014
+ }) === false) {
31015
+ console.log("please check and update the navigation config");
31016
+ return false;
31017
+ }
31043
31018
 
31044
- if (activeSubmenu != navItem.route) {
31045
- reloadMenuItems();
31019
+ if (configItem.subMenuItems) {
31020
+ validateConfig(configItem.subMenuItems, maxDepth - 1);
31046
31021
  }
31047
- };
31022
+ });
31023
+ return true;
31024
+ };
31048
31025
 
31049
- return React__default["default"].createElement("div", {
31050
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2"
31051
- }, React__default["default"].createElement("div", {
31052
- onClick: handleItemClick,
31053
- className: _getClassName("NavItem ".concat(activeSubmenu === navItem.route ? "expandedMenu" : ""), _styleModuleImportMap, {
31054
- "handleMissingStyleName": "warn"
31055
- })
31056
- }, React__default["default"].createElement("div", {
31057
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
31058
- }, React__default["default"].createElement(NavIcon, {
31059
- icon: navItem.icon
31060
- })), React__default["default"].createElement("div", {
31061
- className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
31062
- }, navItem.name), hasSubMenuItems ? React__default["default"].createElement("div", {
31063
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton"
31064
- }, React__default["default"].createElement(coreComponents.IconV2, {
31065
- name: activeSubmenu == navItem.route ? 'chevron-up' : 'chevron-down'
31066
- })) : React__default["default"].createElement("div", {
31067
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
31068
- }, countText)), React__default["default"].createElement("div", {
31069
- className: _getClassName("NavMenuLevel3 ".concat(activeSubmenu == navItem.route ? "expanded" : ""), _styleModuleImportMap, {
31070
- "handleMissingStyleName": "warn"
31071
- })
31072
- }, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
31073
- return React__default["default"].createElement(NavigationMenuLevel3, {
31074
- key: subItem.name,
31075
- isHover: isHover,
31076
- navItem: subItem,
31077
- selected: selected,
31078
- setSelected: setSelected,
31079
- defaultRedirect: defaultRedirect,
31080
- navigateTo: navigateTo
31081
- });
31082
- }) : null));
31026
+ var defaultRedirect = function defaultRedirect(addr) {
31027
+ window.open('http://localhost.copart.com' + addr, '_blank');
31083
31028
  };
31084
31029
 
31085
- var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref4) {
31086
- var navItem = _ref4.navItem,
31087
- isHover = _ref4.isHover,
31088
- selected = _ref4.selected,
31089
- setSelected = _ref4.setSelected,
31090
- defaultRedirect = _ref4.defaultRedirect,
31091
- navigateTo = _ref4.navigateTo;
31030
+ var NavigationBar = function NavigationBar(_ref2) {
31031
+ var navItems = _ref2.navItems,
31032
+ navigateTo = _ref2.navigateTo,
31033
+ history = _ref2.history,
31034
+ getCounts = _ref2.getCounts;
31035
+ var navigateFunction = navigateTo || (history === null || history === void 0 ? void 0 : history.push) || defaultRedirect;
31036
+
31037
+ var _useState = React.useState(null),
31038
+ _useState2 = _slicedToArray(_useState, 2),
31039
+ navItemsModified = _useState2[0],
31040
+ setNavItemsModified = _useState2[1];
31092
31041
 
31093
- var _useState3 = React.useState(navItem.count),
31042
+ var _useState3 = React.useState(false),
31094
31043
  _useState4 = _slicedToArray(_useState3, 2),
31095
- countText = _useState4[0],
31096
- setCountText = _useState4[1];
31044
+ isHover = _useState4[0],
31045
+ setHover = _useState4[1];
31046
+
31047
+ var _useState5 = React.useState(null),
31048
+ _useState6 = _slicedToArray(_useState5, 2),
31049
+ configDepth = _useState6[0],
31050
+ setConfigDepth = _useState6[1];
31051
+
31052
+ var _useState7 = React.useState(null),
31053
+ _useState8 = _slicedToArray(_useState7, 2),
31054
+ isConfigValid = _useState8[0],
31055
+ setConfigValid = _useState8[1];
31056
+
31057
+ var _useState9 = React.useState(null),
31058
+ _useState10 = _slicedToArray(_useState9, 2),
31059
+ activeSubmenu = _useState10[0],
31060
+ setActiveSubmenu = _useState10[1];
31097
31061
 
31098
31062
  React.useEffect(function () {
31099
- setTimeout(function () {
31100
- setCountText(!isHover ? navItem.count > 999 ? '999+' : navItem.count : navItem.count);
31101
- });
31102
- }, [isHover]);
31103
- return React__default["default"].createElement("div", {
31104
- onClick: function onClick() {
31105
- setSelected(navItem.route);
31063
+ if (Array.isArray(navItems)) {
31064
+ var isValid = validateConfig(navItems);
31106
31065
 
31107
- if (navigateTo == null) {
31108
- defaultRedirect(navItem.route);
31066
+ if (isValid) {
31067
+ setNavItemsModified(updateRoutes(navItems, ""));
31068
+ setConfigDepth(getDepth(navItems));
31069
+ setConfigValid(true);
31109
31070
  } else {
31110
- navigateTo(navItem.route);
31071
+ setConfigValid(false);
31111
31072
  }
31073
+ } else {
31074
+ setConfigValid(false);
31075
+ }
31076
+ }, []);
31077
+ return React__default["default"].createElement("div", {
31078
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
31079
+ onMouseOver: function onMouseOver() {
31080
+ return setHover(true);
31112
31081
  },
31113
- className: _getClassName("NavItem ".concat(selected === navItem.route ? "selected" : ""), _styleModuleImportMap, {
31114
- "handleMissingStyleName": "warn"
31115
- })
31116
- }, React__default["default"].createElement("div", {
31117
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
31118
- }, React__default["default"].createElement(NavIcon, {
31119
- icon: navItem.icon
31120
- })), React__default["default"].createElement("div", {
31121
- className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
31122
- }, navItem.name), React__default["default"].createElement("div", {
31123
- key: isHover,
31124
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
31125
- }, countText));
31082
+ onMouseLeave: function onMouseLeave() {
31083
+ return setHover(false);
31084
+ }
31085
+ }, isConfigValid ? React__default["default"].createElement(NavigationMenu, {
31086
+ isHover: isHover,
31087
+ navItems: navItemsModified,
31088
+ navigateFunction: navigateFunction,
31089
+ configDepth: configDepth,
31090
+ activeSubmenu: activeSubmenu,
31091
+ setActiveSubmenu: setActiveSubmenu,
31092
+ getCounts: getCounts
31093
+ }) : null, !isConfigValid ? React__default["default"].createElement("div", null, "Please check your navigation config") : null);
31126
31094
  };
31127
31095
 
31128
- var NavigationMenu = function NavigationMenu(_ref5) {
31129
- var navItems = _ref5.navItems,
31130
- isHover = _ref5.isHover,
31131
- navigateTo = _ref5.navigateTo,
31132
- configDepth = _ref5.configDepth,
31133
- reloadMenuItems = _ref5.reloadMenuItems;
31134
-
31135
- var _useState5 = React.useState(null),
31136
- _useState6 = _slicedToArray(_useState5, 2),
31137
- activeSubmenu = _useState6[0],
31138
- setActiveSubmenu = _useState6[1];
31096
+ var NavigationMenu = function NavigationMenu(_ref3) {
31097
+ var navItems = _ref3.navItems,
31098
+ isHover = _ref3.isHover,
31099
+ navigateFunction = _ref3.navigateFunction,
31100
+ configDepth = _ref3.configDepth,
31101
+ activeSubmenu = _ref3.activeSubmenu,
31102
+ setActiveSubmenu = _ref3.setActiveSubmenu,
31103
+ getCounts = _ref3.getCounts;
31139
31104
 
31140
- var _useState7 = React.useState(null),
31141
- _useState8 = _slicedToArray(_useState7, 2),
31142
- selected = _useState8[0],
31143
- setSelected = _useState8[1];
31105
+ var _useState11 = React.useState(null),
31106
+ _useState12 = _slicedToArray(_useState11, 2),
31107
+ selected = _useState12[0],
31108
+ setSelected = _useState12[1];
31144
31109
 
31145
31110
  var redirectUrl = window.location.pathname;
31146
-
31147
- function defaultRedirect(addr) {
31148
- window.open('http://localhost.copart.com' + addr, '_blank');
31149
- }
31150
-
31151
31111
  React.useEffect(function () {
31152
31112
  if (redirectUrl != "/") {
31153
31113
  var splitUrl = redirectUrl.split("/");
@@ -31171,7 +31131,7 @@ var NavigationMenu = function NavigationMenu(_ref5) {
31171
31131
  }, [configDepth]);
31172
31132
  var NavComponent = configDepth === 3 ? NavigationMenuLevel1 : NavigationMenuLevel2;
31173
31133
  return React__default["default"].createElement("div", {
31174
- className: _getClassName("NavMenu ".concat(isHover ? "isHover" : ""), _styleModuleImportMap, {
31134
+ className: _getClassName("NavMenu", _styleModuleImportMap, {
31175
31135
  "handleMissingStyleName": "warn"
31176
31136
  })
31177
31137
  }, navItems.map(function (item) {
@@ -31180,142 +31140,166 @@ var NavigationMenu = function NavigationMenu(_ref5) {
31180
31140
  isHover: isHover,
31181
31141
  navItem: item,
31182
31142
  activeSubmenu: activeSubmenu,
31183
- navigateTo: navigateTo,
31143
+ navigateFunction: navigateFunction,
31184
31144
  setActiveSubmenu: setActiveSubmenu,
31185
31145
  selected: selected,
31186
31146
  setSelected: setSelected,
31187
- defaultRedirect: defaultRedirect,
31188
31147
  redirectUrl: redirectUrl,
31189
- reloadMenuItems: reloadMenuItems
31148
+ getCounts: getCounts
31190
31149
  });
31191
31150
  }));
31192
31151
  };
31193
31152
 
31194
- var NavigationBar = function NavigationBar(_ref6) {
31195
- var getNavItems = _ref6.getNavItems,
31196
- navigateTo = _ref6.navigateTo;
31153
+ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
31154
+ var _navItem$name, _navItem$shortName;
31197
31155
 
31198
- var _useState9 = React.useState(null),
31199
- _useState10 = _slicedToArray(_useState9, 2),
31200
- navItemsModified = _useState10[0],
31201
- setNavItemsModified = _useState10[1];
31156
+ var navItem = _ref4.navItem,
31157
+ isHover = _ref4.isHover,
31158
+ activeSubmenu = _ref4.activeSubmenu,
31159
+ setActiveSubmenu = _ref4.setActiveSubmenu,
31160
+ navigateFunction = _ref4.navigateFunction,
31161
+ selected = _ref4.selected,
31162
+ setSelected = _ref4.setSelected,
31163
+ getCounts = _ref4.getCounts;
31164
+ var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
31165
+ return React__default["default"].createElement("div", {
31166
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1"
31167
+ }, React__default["default"].createElement("div", {
31168
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem"
31169
+ }, React__default["default"].createElement("div", {
31170
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
31171
+ }, React__default["default"].createElement(NavIcon, {
31172
+ icon: navItem.icon
31173
+ })), React__default["default"].createElement("div", {
31174
+ className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
31175
+ }, isHover ? (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase() : (_navItem$shortName = navItem.shortName) === null || _navItem$shortName === void 0 ? void 0 : _navItem$shortName.toUpperCase()), React__default["default"].createElement("div", {
31176
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
31177
+ }, navItem.count)), React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
31178
+ return React__default["default"].createElement(NavigationMenuLevel2, {
31179
+ key: subItem.name,
31180
+ isHover: isHover,
31181
+ navItem: subItem,
31182
+ selected: selected,
31183
+ setSelected: setSelected,
31184
+ activeSubmenu: activeSubmenu,
31185
+ setActiveSubmenu: setActiveSubmenu,
31186
+ navigateFunction: navigateFunction,
31187
+ getCounts: getCounts
31188
+ });
31189
+ }) : null));
31190
+ };
31202
31191
 
31203
- var _useState11 = React.useState(false),
31204
- _useState12 = _slicedToArray(_useState11, 2),
31205
- isHover = _useState12[0],
31206
- setHover = _useState12[1];
31192
+ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
31193
+ var navItem = _ref5.navItem,
31194
+ isHover = _ref5.isHover,
31195
+ selected = _ref5.selected,
31196
+ setSelected = _ref5.setSelected,
31197
+ activeSubmenu = _ref5.activeSubmenu,
31198
+ setActiveSubmenu = _ref5.setActiveSubmenu,
31199
+ navigateFunction = _ref5.navigateFunction,
31200
+ getCounts = _ref5.getCounts;
31201
+ var isMenuExpanded = activeSubmenu === navItem.fullRoute;
31202
+ var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
31207
31203
 
31208
31204
  var _useState13 = React.useState(null),
31209
31205
  _useState14 = _slicedToArray(_useState13, 2),
31210
- configDepth = _useState14[0],
31211
- setConfigDepth = _useState14[1];
31206
+ counts = _useState14[0],
31207
+ setCounts = _useState14[1];
31212
31208
 
31213
- var _useState15 = React.useState(null),
31209
+ var _useState15 = React.useState(false),
31214
31210
  _useState16 = _slicedToArray(_useState15, 2),
31215
- isConfigValid = _useState16[0],
31216
- setConfigValid = _useState16[1];
31211
+ countsLoading = _useState16[0],
31212
+ setCountsLoading = _useState16[1];
31217
31213
 
31214
+ var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
31218
31215
  React.useEffect(function () {
31219
- var navItems = getNavItems();
31220
-
31221
- if (Array.isArray(navItems)) {
31222
- var isValid = validateConfig(navItems);
31223
-
31224
- if (isValid) {
31225
- setConfigDepth(getDepth(navItems));
31226
- setNavItemsModified(updateRoutes(navItems, ""));
31227
- setConfigValid(true);
31228
- } else {
31229
- setConfigValid(false);
31230
- }
31231
- } else {
31232
- reloadMenuItems();
31233
- }
31234
- }, []);
31235
-
31236
- var updateRoutes = function updateRoutes(navItems, parentRoute) {
31237
- var updatedItems = navItems.map(function (item) {
31238
- var updatedItem = _objectSpread2({}, item);
31239
-
31240
- if (updatedItem.route) {
31241
- updatedItem.route = parentRoute + '/' + updatedItem.route;
31242
- }
31243
-
31244
- if (updatedItem.subMenuItems) {
31245
- updatedItem.subMenuItems = updateRoutes(updatedItem.subMenuItems, updatedItem.route);
31246
- }
31247
-
31248
- return updatedItem;
31249
- });
31250
- return updatedItems;
31251
- };
31252
-
31253
- var getDepth = function getDepth(navItems) {
31254
- var depth = 0;
31255
- navItems.forEach(function (navItem) {
31256
- var subMenuDepth = navItem.subMenuItems ? getDepth(navItem.subMenuItems) : 0;
31257
- depth = Math.max(depth, 1 + subMenuDepth);
31258
- });
31259
- return depth;
31260
- };
31261
-
31262
- var validateConfig = function validateConfig(navItems) {
31263
- var keys = ['name', 'route'];
31264
- if (navItems.length === 0) return false;
31265
- navItems.map(function (item) {
31266
- var configItem = _objectSpread2({}, item);
31267
-
31268
- if (keys.every(function (key) {
31269
- return configItem.hasOwnProperty(key);
31270
- }) === false) {
31271
- console.log("please check the navigation config and update the json");
31272
- return false;
31273
- }
31274
-
31275
- if (configItem.subMenuItems) {
31276
- validateConfig(configItem.subMenuItems);
31277
- }
31216
+ if (showCounts) {
31217
+ setCountsLoading(true);
31218
+ reloadCounts(navItem.route);
31219
+ }
31220
+ }, [activeSubmenu]);
31221
+
31222
+ var reloadCounts = function reloadCounts(menuItemName) {
31223
+ getCounts(menuItemName).then(function (result) {
31224
+ setCounts(result);
31225
+ setCountsLoading(false);
31226
+ }).catch(function () {
31227
+ setCountsLoading(false);
31278
31228
  });
31279
- return true;
31280
31229
  };
31281
31230
 
31282
- var reloadMenuItems = function reloadMenuItems() {
31283
- var navItems = getNavItems();
31284
-
31285
- if (!Array.isArray(navItems)) {
31286
- navItems.then(function (result) {
31287
- var isVaild = validateConfig(result);
31231
+ var handleItemClick = function handleItemClick() {
31232
+ setActiveSubmenu(isMenuExpanded ? null : navItem.fullRoute);
31233
+ setSelected(null);
31288
31234
 
31289
- if (isVaild) {
31290
- setConfigDepth(getDepth(result));
31291
- setNavItemsModified(updateRoutes(result, ""));
31292
- setConfigValid(true);
31293
- } else {
31294
- setConfigValid(false);
31295
- }
31296
- });
31235
+ if (!isMenuExpanded) {
31236
+ reloadCounts();
31297
31237
  }
31298
31238
  };
31299
31239
 
31300
- var onMouseOver = function onMouseOver() {
31301
- setHover(true);
31302
- };
31303
-
31304
- var onMouseLeave = function onMouseLeave() {
31305
- setHover(false);
31306
- };
31240
+ return React__default["default"].createElement("div", {
31241
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2"
31242
+ }, React__default["default"].createElement("div", {
31243
+ onClick: handleItemClick,
31244
+ className: _getClassName("NavItem ".concat(isMenuExpanded ? "expandedMenu" : ""), _styleModuleImportMap, {
31245
+ "handleMissingStyleName": "warn"
31246
+ })
31247
+ }, React__default["default"].createElement("div", {
31248
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
31249
+ }, React__default["default"].createElement(NavIcon, {
31250
+ icon: navItem.icon
31251
+ })), React__default["default"].createElement("div", {
31252
+ className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
31253
+ }, navItem.name), hasSubMenuItems && React__default["default"].createElement("div", {
31254
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton"
31255
+ }, React__default["default"].createElement(coreComponents.IconV2, {
31256
+ name: isMenuExpanded ? 'chevron-up' : 'chevron-down'
31257
+ }))), React__default["default"].createElement("div", {
31258
+ className: _getClassName("NavMenuLevel3 ".concat(isMenuExpanded ? "expanded" : ""), _styleModuleImportMap, {
31259
+ "handleMissingStyleName": "warn"
31260
+ })
31261
+ }, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
31262
+ return React__default["default"].createElement(NavigationMenuLevel3, {
31263
+ key: subItem.fullRoute,
31264
+ isHover: isHover,
31265
+ navItem: subItem,
31266
+ count: counts && counts[subItem.route],
31267
+ countsLoading: countsLoading,
31268
+ selected: selected,
31269
+ setSelected: setSelected,
31270
+ navigateFunction: navigateFunction
31271
+ });
31272
+ }) : null));
31273
+ };
31307
31274
 
31275
+ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
31276
+ var navItem = _ref6.navItem,
31277
+ count = _ref6.count,
31278
+ countsLoading = _ref6.countsLoading,
31279
+ isHover = _ref6.isHover,
31280
+ selected = _ref6.selected,
31281
+ setSelected = _ref6.setSelected,
31282
+ navigateFunction = _ref6.navigateFunction;
31283
+ var countText = !isHover ? count > 999 ? '999+' : count : count;
31308
31284
  return React__default["default"].createElement("div", {
31309
- className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
31310
- onMouseOver: onMouseOver,
31311
- onMouseLeave: onMouseLeave
31312
- }, isConfigValid ? React__default["default"].createElement(NavigationMenu, {
31313
- isHover: isHover,
31314
- navItems: navItemsModified,
31315
- navigateTo: navigateTo,
31316
- configDepth: configDepth,
31317
- reloadMenuItems: reloadMenuItems
31318
- }) : null, !isConfigValid ? React__default["default"].createElement("div", null, "Please check your navigation config") : null);
31285
+ onClick: function onClick() {
31286
+ setSelected(navItem.fullRoute);
31287
+ navigateFunction(navItem.fullRoute);
31288
+ },
31289
+ className: _getClassName("NavItem ".concat(selected === navItem.fullRoute ? "NavItemSelected" : ""), _styleModuleImportMap, {
31290
+ "handleMissingStyleName": "warn"
31291
+ })
31292
+ }, React__default["default"].createElement("div", {
31293
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
31294
+ }, React__default["default"].createElement(NavIcon, {
31295
+ icon: navItem.icon
31296
+ })), React__default["default"].createElement("div", {
31297
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
31298
+ }, navItem.name), React__default["default"].createElement("div", {
31299
+ className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
31300
+ }, countsLoading ? React__default["default"].createElement(coreComponents.Spinner, {
31301
+ size: "xxs"
31302
+ }) : null, !countsLoading ? countText : null));
31319
31303
  };
31320
31304
 
31321
31305
  /******************************************************************************
@@ -45674,7 +45658,9 @@ var AppFrame = function AppFrame(props) {
45674
45658
  className: "utilities_ops-app-frame_AppFrame_AppFrame--AppContainer"
45675
45659
  }, props.showNavigation && storage.isAuthenticated ? React__default["default"].createElement(NavigationBar, {
45676
45660
  navigateTo: props.navigateTo,
45677
- getNavItems: props.getNavItems
45661
+ history: props.history,
45662
+ navItems: props.navItems,
45663
+ getCounts: props.getCounts
45678
45664
  }) : null, React__default["default"].createElement("div", {
45679
45665
  style: {
45680
45666
  marginLeft: props.showNavigation ? '100px' : '0px'
@@ -45684,9 +45670,7 @@ var AppFrame = function AppFrame(props) {
45684
45670
  AppFrame.defaultProps = {
45685
45671
  handleScrolling: true,
45686
45672
  showNavigation: false,
45687
- getNavItems: function getNavItems() {
45688
- return [];
45689
- }
45673
+ navItems: []
45690
45674
  };
45691
45675
 
45692
45676
  var logOutboundCalls =