@vitrosoftware/common-ui-ts 1.1.13 → 1.1.14

package/dist/index.modern.js

@@ -60071,6 +60071,23 @@ var LookupPicker = function LookupPicker(props) {
   }, [props.selectedValueList]);
   useEffect(function () {
     valueListVisible && inputRef && inputRef.current && inputRef.current.focus();
+    if (props.isReadOnly) {
+      if (props.valueList) {
+        updateFilteredValueList(props.valueList);
+      } else if (props.getAllValueList) {
+        setPending(true);
+        var requestToken = {
+          cancel: false
+        };
+        if (valueListRequestToken) {
+          valueListRequestToken.cancel = true;
+        }
+        setValueListRequestToken(requestToken);
+        props.getAllValueList().then(function (valueList) {
+          return onGetValueList(valueList, requestToken);
+        });
+      }
+    }
   }, [valueListVisible]);
   useEffect(function () {
     if (props.selectedValue) {
@@ -60235,14 +60252,14 @@ var LookupPicker = function LookupPicker(props) {
     onClick: onFocus,
     disabled: props.isDisabled,
     readOnly: props.isReadOnly
-  }), !props.isDisabled && !props.isReadOnly && props.children, React__default.createElement("div", {
+  }), !props.isDisabled && props.children, React__default.createElement("div", {
     className: styles$j['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
     className: styles$j['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
-  }), !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
+  }), !props.isDisabled && React__default.createElement("div", {
     onClick: function onClick() {
       return setValueListVisible(!valueListVisible);
     },
@@ -60250,7 +60267,7 @@ var LookupPicker = function LookupPicker(props) {
   }), props.isReadOnly ? React__default.createElement("span", {
     className: styles$j['vitro-button-copy'],
     onClick: copyValue
-  }) : null)), !props.isDisabled && !props.isReadOnly && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
+  }) : null)), !props.isDisabled && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
     inputValue: inputValue,
     list: filteredValueList,
@@ -62166,7 +62183,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$o = {"vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-icon":"_sidebar-item_vitro-icon_2B88tow"};
+var styles$o = {"vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
 
 var Item$1 = function Item(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, React__default.createElement(Icon, {
@@ -62188,6 +62205,8 @@ var TARGET;
 })(TARGET || (TARGET = {}));
 
 var w$6 = window;
+var PX_UNIT$3 = 'px';
+var WIDTH_AUTO = 'auto';
 var LinkItem$1 = function LinkItem(props) {
   var _useState = useState(false),
     isHover = _useState[0],
@@ -62199,7 +62218,11 @@ var LinkItem$1 = function LinkItem(props) {
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
-    }
+    },
+    style: {
+      width: props.linkItemWidth ? props.linkItemWidth + PX_UNIT$3 : WIDTH_AUTO
+    },
+    className: styles$o['vitro-item']
   }, props.link && React__default.createElement(Link, {
     to: props.link,
     className: isActive ? styles$o['vitro-active'] : CTRL.EMPTY
@@ -62211,18 +62234,19 @@ var LinkItem$1 = function LinkItem(props) {
     },
     className: isActive ? styles$o['vitro-active'] : CTRL.EMPTY
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive || isHover
+    isHover: isActive
   }))), props.href && React__default.createElement("a", {
     href: props.href,
     target: props.isExternal ? TARGET.BLANK : TARGET.SELF
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive || isHover
+    isHover: isActive
   }))));
 };
 
 var Section = function Section(props) {
   return React__default.createElement("li", null, props.text && React__default.createElement("span", null, props.text), React__default.createElement("ul", null, props.itemList && props.itemList.map(function (i) {
     return React__default.createElement(LinkItem$1, Object.assign({
+      linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
       key: i.text,
       currentUrl: props.currentUrl
@@ -62230,19 +62254,22 @@ var Section = function Section(props) {
   })));
 };
 
-var SectionList = function SectionList(props) {
+var SectionList = forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
     return null;
   }
-  return React__default.createElement("ul", null, props.itemList.map(function (section) {
+  return React__default.createElement("ul", {
+    ref: ref
+  }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
+      linkItemWidth: props.linkItemWidth,
       currentUrl: props.currentUrl,
       activeItem: props.activeItem
     }, section));
   }));
-};
+});
 
-var styles$p = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU"};
+var styles$p = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
 
 var Sidebar = function Sidebar(props) {
   var _useState = useState(props.history.location.pathname),
@@ -62251,21 +62278,75 @@ var Sidebar = function Sidebar(props) {
   var _useState2 = useState([]),
     itemList = _useState2[0],
     setItemList = _useState2[1];
+  var _useState3 = useState(false),
+    isMobileView = _useState3[0],
+    setIsMobileView = _useState3[1];
+  var _useState4 = useState(0),
+    translate = _useState4[0],
+    setTranslate = _useState4[1];
+  var _useState5 = useState(0),
+    linkItemWidth = _useState5[0],
+    setLinkItemWidth = _useState5[1];
+  var menuRef = useRef(null);
+  var scrollableListRef = useRef(null);
   props.history.listen(function (location) {
     setCurrentUrl(location.pathname);
   });
   useEffect(function () {
     if (props.sidebar === 1 && props.overflowItemList && props.overflowItemList.length > 0) {
       setItemList([].concat(props.topItemList, props.overflowItemList));
+    } else if (isMobileView) {
+      var list = props.bottomItemList ? [].concat(props.topItemList, props.bottomItemList) : props.topItemList;
+      setItemList(list);
     } else {
       setItemList(props.topItemList);
     }
-  }, [props.sidebar]);
-  var className = styles$p['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY);
+  }, [props.sidebar, isMobileView]);
+  useEffect(function () {
+    window.addEventListener(EVENT.RESIZE, handleResize);
+    handleResize();
+    return function () {
+      window.removeEventListener(EVENT.RESIZE, handleResize);
+    };
+  }, []);
+  useEffect(function () {
+    handleResize();
+  }, [window.innerWidth]);
+  var handleResize = function handleResize() {
+    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+    if (window.innerWidth < 800 && menuRef.current) {
+      var info = menuRef.current.getBoundingClientRect();
+      var width = info.right - info.left;
+      updateLinkItemWidth(width);
+    }
+  };
+  var scroll = function scroll() {
+    var container = menuRef.current;
+    var scrollableList = scrollableListRef.current;
+    if (container && scrollableList) {
+      var info = container.getBoundingClientRect();
+      var width = info.right - info.left;
+      var translateValue = translate;
+      if (container.scrollLeft + width >= container.scrollWidth) {
+        translateValue = 0;
+      } else {
+        translateValue += width;
+      }
+      setTranslate(translateValue);
+      scrollableList.style.transform = "translate(-" + translateValue + "px)";
+    }
+  };
+  var updateLinkItemWidth = function updateLinkItemWidth(containerWidth) {
+    var elemWidth = 76;
+    var count = Math.floor(containerWidth / elemWidth);
+    var width = containerWidth / count;
+    setLinkItemWidth(width);
+  };
+  var className = styles$p['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
-  }, React__default.createElement(SectionList, {
+  }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
     activeItem: props.activeItem
@@ -62273,7 +62354,19 @@ var Sidebar = function Sidebar(props) {
     itemList: props.bottomItemList,
     currentUrl: currentUrl,
     activeItem: props.activeItem
-  }));
+  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$p['vitro-scroll-container'],
+    ref: menuRef
+  }, React__default.createElement(SectionList, {
+    itemList: itemList,
+    currentUrl: currentUrl,
+    activeItem: props.activeItem,
+    ref: scrollableListRef,
+    linkItemWidth: linkItemWidth
+  })), React__default.createElement("button", {
+    onClick: scroll,
+    className: styles$p['vitro-button-more']
+  })));
 };
 
 var styles$q = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};