@rio-cloud/rio-uikit 0.16.1-beta-7 → 0.16.1-beta-10

package/lib/components/applicationHeader/NavItems.js

@@ -11,17 +11,7 @@ exports.default = exports.NavItems = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -31,15 +21,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _head = _interopRequireDefault(require("lodash/fp/head"));
 
-var _includes = _interopRequireDefault(require("lodash/fp/includes"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
-var _size = _interopRequireDefault(require("lodash/fp/size"));
-
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
-
-var _ApplicationActionBar = require("./ApplicationActionBar");
+var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
 
 var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
 
@@ -47,285 +31,193 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var collapsedDropdownWidth = 50;
-
-var NavItems = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(NavItems, _Component);
-
-  var _super = _createSuper(NavItems);
-
-  function NavItems(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, NavItems);
-    _this = _super.call(this, props);
-    _this.state = {
-      hasComputed: false,
-      isCollapsedNavItemOpen: false,
-      showCollapsedNavItems: false
-    };
-    _this.visibleNavItems = [];
-    _this.collapsedNavItems = [];
-    _this.resetRenderedNavItems = _this.resetRenderedNavItems.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleCollapsedDropdown = _this.handleCollapsedDropdown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleCollapsedNavItemSelected = _this.handleCollapsedNavItemSelected.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
-
-  (0, _createClass2.default)(NavItems, [{
-    key: "resetRenderedNavItems",
-    value: function resetRenderedNavItems() {
-      this.collapsedNavItems = [];
-      this.visibleNavItems = [];
-    } // eslint-disable-next-line camelcase
-
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps !== this.props) {
-        this.setState(function () {
-          return {
-            hasComputed: false
-          };
-        });
-      }
+var paddingLeft = 15;
+
+var NavItems = function NavItems(props) {
+  var externalNavItems = props.navItems,
+      actionBarItems = props.actionBarItems,
+      containerWidth = props.containerWidth;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isCollapsedNavItemOpen = _useState2[0],
+      setIsCollapsedNavItemOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      collapsedNavItems = _useState4[0],
+      setCollapsedNavItems = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      visibleNavItems = _useState6[0],
+      setVisibleNavItems = _useState6[1];
+
+  var collapsedDropdownRef = (0, _useClickOutside.default)(function () {
+    return setIsCollapsedNavItemOpen(false);
+  });
+  var navigationRef = (0, _react.useRef)();
+  var isOffscreen = (0, _react.useRef)(true); // console.log({ containerWidth });
+  // Before any new changes are applied
+
+  (0, _react.useEffect)(function () {
+    // After the component received new props, every nav item has to be rendered offscreen
+    // again without collapsing them into the dropdown to measure its width
+    isOffscreen.current = true;
+  }, [externalNavItems, actionBarItems, containerWidth]); // After the component has been rendered
+
+  (0, _react.useLayoutEffect)(function () {
+    // After every nav item was rendered offscreen again we need to recalculate the width
+    // of the items again and render the result with possible collapsible dropdown.
+    if (isOffscreen.current) {
+      computeNavItems();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      // After the component received new props, every nav item has to be rendered again without
-      // collapsing them in the dropdown. Since there is no new render cycle triggered,
-      // we need to recalculate the width of the items again and render trhe result.
-      if (!this.state.hasComputed) {
-        this.computeNavItems();
-      }
-    }
-  }, {
-    key: "getAvailableWidth",
-    value: function getAvailableWidth(element) {
-      // Get relevant elements
-      var parent = element.parentNode;
-      var actionBar = (0, _head.default)(parent.getElementsByClassName('ApplicationActionBar'));
-      var actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0; // Since the collapsed dropdown has not been rendered yet,
-      // use the fixed with for it to compute available width
-
-      var availableWidth = element.scrollWidth - actionBarWidth - collapsedDropdownWidth;
-      return availableWidth;
-    }
-  }, {
-    key: "computeNavItems",
-    value: function computeNavItems() {
-      var _this2 = this;
-
-      if (this.props.isMobile) {
+  });
+
+  var getAvailableWidth = function getAvailableWidth(element) {
+    // Get relevant elements
+    // const parent = element.parentNode;
+    // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));
+    // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;
+    // Since the collapsed dropdown has not been rendered yet,
+    // use the fixed with for it to compute available width
+    var availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;
+    return availableWidth;
+  };
+
+  var computeNavItems = function computeNavItems() {
+    var element = navigationRef.current;
+    var navItems = (0, _toConsumableArray2.default)(element.children);
+    var availableWidth = getAvailableWidth(element);
+
+    if (availableWidth < 0) {
+      return;
+    } // Iterate over all rendered navItems to figure out their widths in order to figure out
+    // which navItems need to be rendered in the collapsed dropdown
+
+
+    var requiredNavItemsSize = 0;
+    var updatedVisibleItems = [];
+    var updatedCollapsedItems = [];
+    navItems.forEach(function (item) {
+      if (!item.className) {
         return;
-      }
-
-      var element = this.navigationRef;
-      var navItems = (0, _toConsumableArray2.default)(element.children);
-      var availableWidth = this.getAvailableWidth(element);
-      this.resetRenderedNavItems(); // Iterate over all rendered navItems to figure out their widths in order to figure out
-      // which navItems need to be rendered in the collapsed dropdown
+      } // Calculate the remaining width
 
-      var requiredNavItemsSize = 0;
-      navItems.forEach(function (item) {
-        if (!item.className) {
-          return;
-        } // Calculate the remaining width
 
+      requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth; // console.log({ requiredNavItemsSize });
+      // Use the navItems.key to find corresponding navItems for each DOM node
 
-        requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth; // Use the navItems.key to find corresponding navItems for each DOM node
-
-        var matchedNavItem = _this2.props.navItems.find(function (navItem) {
-          var dataAttr = item.attributes['data-nav-item-key'];
-          return dataAttr && navItem.key === dataAttr.value;
-        }); // Add navItems to the visible group until the available with exceeds.
-        // All other navItems will be added to the collapsed group
-
-
-        if (availableWidth > requiredNavItemsSize) {
-          _this2.visibleNavItems.push(matchedNavItem);
-        } else {
-          _this2.collapsedNavItems.push(matchedNavItem);
-        }
-      }); // Set the state to render the navItems again
-
-      this.setState(function () {
-        return {
-          hasComputed: true
-        };
+      var matchedNavItem = externalNavItems.find(function (navItem) {
+        var dataAttr = item.attributes['data-nav-item-key'];
+        return dataAttr && navItem.key === dataAttr.value;
       });
-    }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside(event) {
-      if (!event || !event.path) {
+
+      if (!matchedNavItem) {
         return;
-      }
+      } // Add navItems to the visible group until the available with exceeds.
+      // All other navItems will be added to the collapsed group
 
-      var isTargetActionBarItem = event.path.find(function (item) {
-        return !!item.className && (0, _includes.default)('ActionBarItemIcon', item.className);
-      });
-      var isPopoverTarget = event.path.find(function (item) {
-        return !!item.className && (0, _includes.default)('popover', item.className);
-      }); // Do not close when any ActionBarItemIcon was clicked but close when a popover is is clicked
-
-      if (!isTargetActionBarItem && this.state.isCollapsedNavItemOpen || isPopoverTarget) {
-        this.setState(function () {
-          return {
-            isCollapsedNavItemOpen: false
-          };
-        });
-      }
-    }
-  }, {
-    key: "handleCollapsedDropdown",
-    value: function handleCollapsedDropdown() {
-      // When the dropdown is open, set showCollapsedNavItems to false so all sumodule items
-      // are rendered and their size can be computed
-      if (this.state.isCollapsedNavItemOpen) {
-        this.setState(function () {
-          return {
-            isCollapsedNavItemOpen: false
-          };
-        });
+
+      if (availableWidth > requiredNavItemsSize) {
+        updatedVisibleItems.push(matchedNavItem);
       } else {
-        // When the dropdown is closed, just set the flag to open is enough
-        this.setState(function () {
-          return {
-            isCollapsedNavItemOpen: true
-          };
-        });
+        updatedCollapsedItems.push(matchedNavItem);
       }
+    }); // Set the state to render the navItems again
+
+    isOffscreen.current = false;
+    setVisibleNavItems(updatedVisibleItems);
+    setCollapsedNavItems(updatedCollapsedItems);
+  };
+
+  var handleCollapsedDropdown = function handleCollapsedDropdown() {
+    // When the dropdown is open, set showCollapsedNavItems to false so all submodule items
+    // are rendered and their size can be computed
+    if (isCollapsedNavItemOpen) {
+      setIsCollapsedNavItemOpen(false);
+    } else {
+      // When the dropdown is closed, just set the flag to open is enough
+      setIsCollapsedNavItemOpen(true);
     }
-  }, {
-    key: "handleCollapsedNavItemSelected",
-    value: function handleCollapsedNavItemSelected() {
-      // Close collapsed dropdown on item select
-      if (this.state.isCollapsedNavItemOpen) {
-        this.setState(function () {
-          return {
-            isCollapsedNavItemOpen: false
-          };
-        });
-      }
+  };
+
+  var handleCollapsedNavItemSelected = function handleCollapsedNavItemSelected() {
+    // Close collapsed dropdown on item select
+    if (isCollapsedNavItemOpen) {
+      setIsCollapsedNavItemOpen(false);
     }
-  }, {
-    key: "renderCollapsedNavItem",
-    value: function renderCollapsedNavItem(collapsedNavItems) {
-      var _this3 = this;
-
-      var _this$props = this.props,
-          isMobile = _this$props.isMobile,
-          containerWidth = _this$props.containerWidth,
-          actionBarItems = _this$props.actionBarItems;
-      var collapsedDropdownClass = this.state.isCollapsedNavItemOpen ? 'open' : '';
-      var inlineStyle = isMobile ? {
-        width: "".concat(containerWidth, "px")
-      } : {};
-
-      if (!collapsedNavItems.length && !actionBarItems.length) {
-        return null;
-      }
+  };
 
-      return /*#__PURE__*/_react.default.createElement("li", {
-        className: "CollapsedDropdown dropdown ".concat(collapsedDropdownClass),
-        key: 'collapsed-dropdown'
-      }, /*#__PURE__*/_react.default.createElement("a", {
-        id: "basic-nav-dropdown",
-        role: "button",
-        className: "dropdown-toggle",
-        "aria-haspopup": "true",
-        "aria-expanded": "true",
-        onClick: this.handleCollapsedDropdown
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-option-horizontal",
-        "aria-hidden": "true"
-      })), /*#__PURE__*/_react.default.createElement("ul", {
-        className: 'dropdown-menu',
-        role: "menu",
-        "aria-labelledby": "basic-nav-dropdown",
-        style: inlineStyle
-      }, /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
-        items: this.props.actionBarItems
-      }), collapsedNavItems.map(function (navItem) {
-        return /*#__PURE__*/_react.default.createElement("li", {
-          key: navItem.key,
-          className: 'submodule nav-link-item',
-          onClick: _this3.handleCollapsedNavItemSelected,
-          "data-nav-item-key": navItem.key
-        }, navItem.route);
-      })));
+  var renderCollapsedNavItem = function renderCollapsedNavItem(navItems) {
+    var collapsedDropdownClass = isCollapsedNavItemOpen ? 'open' : '';
+
+    if ((0, _isEmpty.default)(navItems) && (0, _isEmpty.default)(actionBarItems)) {
+      return null;
     }
-  }, {
-    key: "renderNavItem",
-    value: function renderNavItem(navItem, isOffscreen) {
+
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "CollapsedDropdown dropdown ".concat(collapsedDropdownClass),
+      key: "collapsed-dropdown",
+      ref: collapsedDropdownRef
+    }, /*#__PURE__*/_react.default.createElement("a", {
+      id: "basic-nav-dropdown",
+      role: "button",
+      className: "dropdown-toggle text-color-gray",
+      "aria-haspopup": "true",
+      "aria-expanded": "true",
+      onClick: handleCollapsedDropdown
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "rioglyph rioglyph-option-horizontal",
+      "aria-hidden": "true"
+    })), /*#__PURE__*/_react.default.createElement("ul", {
+      className: "dropdown-menu",
+      role: "menu",
+      "aria-labelledby": "basic-nav-dropdown"
+    }, navItems.map(function (navItem) {
       return /*#__PURE__*/_react.default.createElement("li", {
         key: navItem.key,
-        className: "submodule nav-link-item ".concat(isOffscreen ? 'offscreen' : ''),
+        className: "submodule",
+        onClick: handleCollapsedNavItemSelected,
         "data-nav-item-key": navItem.key
       }, navItem.route);
-    }
-  }, {
-    key: "renderNavItems",
-    value: function renderNavItems() {
-      var _this4 = this;
-
-      var _this$props2 = this.props,
-          isMobile = _this$props2.isMobile,
-          navItems = _this$props2.navItems,
-          actionBarItems = _this$props2.actionBarItems;
-      var isOffscreen = !this.state.hasComputed;
-      var hasNavItems = !(0, _isEmpty.default)(navItems);
-      var hasSingleActionItem = (0, _size.default)(actionBarItems) === 1;
-
-      if (isMobile) {
-        return !hasNavItems && hasSingleActionItem ? /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
-          items: actionBarItems,
-          className: 'position-relative'
-        }) : this.renderCollapsedNavItem(navItems);
-      }
-
-      if (!isOffscreen && this.collapsedNavItems.length) {
-        var items = this.visibleNavItems.map(function (navItem) {
-          return _this4.renderNavItem(navItem, isOffscreen);
-        });
-        items.push(this.renderCollapsedNavItem(this.collapsedNavItems));
-        return items;
-      }
-
-      return navItems.map(function (navItem) {
-        return _this4.renderNavItem(navItem, isOffscreen);
+    })));
+  };
+
+  var renderNavItem = function renderNavItem(navItem, isItemOffscreen) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: navItem.key,
+      className: "submodule ".concat(isItemOffscreen ? 'offscreen' : ''),
+      "data-nav-item-key": navItem.key
+    }, navItem.route);
+  };
+
+  var renderNavItems = function renderNavItems() {
+    if (!isOffscreen.current && !(0, _isEmpty.default)(collapsedNavItems)) {
+      var visibleItems = visibleNavItems.map(function (navItem) {
+        return renderNavItem(navItem, isOffscreen.current);
       });
+      return [].concat((0, _toConsumableArray2.default)(visibleItems), [renderCollapsedNavItem(collapsedNavItems)]);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-
-      // As all navItems need to be added to the DOM first in order to get their real size
-      // the computation wheather a navItem need to be shown under the collapsed dropdown or not
-      // needs to be done after the component did mount to the DOM.
-      var classes = (0, _classnames.default)('SubmoduleNavigation', 'NavItems', 'nav', 'navbar-nav');
-      return /*#__PURE__*/_react.default.createElement("ul", {
-        className: classes,
-        ref: function ref(node) {
-          return _this5.navigationRef = node;
-        }
-      }, this.renderNavItems());
-    }
-  }]);
-  return NavItems;
-}(_react.Component);
 
-exports.NavItems = NavItems;
+    return externalNavItems.map(function (navItem) {
+      return renderNavItem(navItem, isOffscreen.current);
+    });
+  }; // As all navItems need to be added to the DOM first in order to get their real size
+  // the computation wheather a navItem need to be shown under the collapsed dropdown or not
+  // needs to be done after the component did mount to the DOM.
 
-var _default = (0, _reactOnclickoutside.default)(NavItems);
 
+  var classes = (0, _classnames.default)('SubmoduleNavigation', 'nav');
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: classes,
+    ref: navigationRef
+  }, renderNavItems());
+};
+
+exports.NavItems = NavItems;
+var _default = NavItems;
 exports.default = _default;
 NavItems.defaultProps = {
   navItems: [],
@@ -333,5 +225,6 @@ NavItems.defaultProps = {
 };
 NavItems.propTypes = {
   navItems: _propTypes.default.arrayOf(_modulePropTypes.default),
-  containerWidth: _propTypes.default.number.isRequired
+  containerWidth: _propTypes.default.number.isRequired,
+  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.node)
 };

package/lib/components/applicationLayout/ApplicationLayoutBody.js

@@ -19,8 +19,6 @@ var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ApplicationLayoutBodyBottomBar = require("./ApplicationLayoutBodyBottomBar");
-
 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; }
@@ -71,7 +69,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "module-content-wrapper"
-  }, banner && banner, navigation && navigation, /*#__PURE__*/_react.default.createElement("div", {
+  }, navigation && navigation, banner && banner, /*#__PURE__*/_react.default.createElement("div", {
     className: innerClasses,
     onScroll: handleScroll,
     ref: moduleContentRef

package/lib/components/applicationLayout/SubNavigation.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SubNavigation = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "navItems", "right"];
+
+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; }
+
+var SubNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      navItems = props.navItems,
+      right = props.right,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var navigationClasses = (0, _classnames.default)('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref
+  }, remainingProps, {
+    className: navigationClasses
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "SubmoduleNavigation nav"
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "submodule",
+      key: navItem.key,
+      "data-nav-item-key": navItem.key
+    }, navItem.route);
+  })));
+});
+exports.SubNavigation = SubNavigation;
+SubNavigation.defaultProps = {
+  navItems: []
+};
+SubNavigation.propTypes = {
+  navItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    route: _propTypes.default.node.isRequired
+  })),
+  className: _propTypes.default.string
+};
+var _default = SubNavigation;
+exports.default = _default;

package/lib/components/assetTree/AssetTree.js

@@ -21,8 +21,6 @@ var _head = _interopRequireDefault(require("lodash/fp/head"));
 
 var _isArray = _interopRequireDefault(require("lodash/fp/isArray"));
 
-var _deviceUtils = require("../../utils/deviceUtils");
-
 var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
 
 var _TreeSidebar = _interopRequireDefault(require("./TreeSidebar"));
@@ -112,7 +110,7 @@ var AssetTree = /*#__PURE__*/(0, _react.memo)(function (props) {
   (0, _react.useEffect)(function () {
     return setSidebarMode(getSidebarMode(fly));
   }, [fly]);
-  var classes = (0, _classnames.default)('AssetTree', className, !isOpen && 'closed', !isOpen && _deviceUtils.isMobile && 'width-0 border-none position-absolute', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+  var classes = (0, _classnames.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
   var resizeLimitClasses = (0, _classnames.default)('AssetTreeResizeLimit', isResize && 'display-block');
   var resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
   var resizeLimitStyle = {
@@ -179,14 +177,13 @@ var AssetTree = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: resizeLimitClasses,
     style: resizeLimitStyle
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "AssetTreeContent"
+    className: 'AssetTreeContent'
   }, /*#__PURE__*/_react.default.createElement(_TreeSidebar.default, {
     onSelectCategory: handleSelectCategory,
     currentCategoryId: currentCategoryId,
-    onClick: handleToggleTreeContent,
-    isOpen: isOpen
+    onClick: handleToggleTreeContent
   }, (0, _isArray.default)(children) ? children : [children]), /*#__PURE__*/_react.default.createElement("div", {
-    className: "AssetTreeBody"
+    className: 'AssetTreeBody'
   }, useOffscreen ? renderTreesOffscreen(children, categoryId) : category)), resizable && isOpen && /*#__PURE__*/_react.default.createElement(_Resizer.default, {
     onResizeStart: handleResizeStart,
     onResize: handleResize,