@vitrosoftware/common-ui-ts 1.1.242 → 1.1.243

package/dist/index.js

@@ -21442,6 +21442,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     this.visibleColumnList = [];
     this.disabledActionList = [];
     this.disabledColumnList = [];
+    this.isExpanding = false;
     this.grid = grid;
     this.id = grid.id;
     this.grid.Source.Upload.Format = this.gridChangesFormat;
@@ -61681,32 +61682,72 @@ var styles$v = {"vitro-tab-button-group":"_tab-button-group_vitro-tab-button-gro
 var CSS_CLASS_ACTIVE = 'active';
 var CSS_CLASS_TAB_BUTTON_GROUP = 'vitro-tab-button-group';
 var CSS_CLASS_TAB_BUTTON_GROUP_CONTENT = 'vitro-tab-button-group-content';
+var ELEMENT_CANVAS$1 = 'canvas';
+var CANVAS_CONTEXT$1 = '2d';
 var TabButtonGroup = function TabButtonGroup(props) {
   var _useState = React.useState([]),
     tabList = _useState[0],
     setTabList = _useState[1];
-  var _useState2 = React.useState(),
-    activeItem = _useState2[0],
-    setActiveItem = _useState2[1];
-  var _useState3 = React.useState(),
-    activeItemTabBtn = _useState3[0],
-    setActiveItemTabBtn = _useState3[1];
-  var _useState4 = React.useState(0),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState2 = React.useState(props.itemList.length),
+    overflowIndex = _useState2[0],
+    setOverflowIndex = _useState2[1];
+  var _useState3 = React.useState(props.activeItem || CTRL.EMPTY),
+    activeItem = _useState3[0],
+    setActiveItem = _useState3[1];
+  var _useState4 = React.useState(),
+    activeItemTabBtn = _useState4[0],
+    setActiveItemTabBtn = _useState4[1];
+  var _useState5 = React.useState(0),
+    width = _useState5[0],
+    setWidth = _useState5[1];
+  var resizeTimeout = React.useMemo(function () {
+    return {
+      id: null
+    };
+  }, []);
   var ref = React.useRef(null);
   var overflowTabList = [];
-  var tabMinWidth = 120;
   var resizeObserver = new window.ResizeObserver(function (entries) {
     for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
       var entry = _step.value;
       if (ref.current && entry.target === ref.current) {
-        if (!width || props.wrap) {
-          setWidth(ref.current.offsetWidth);
+        if (props.wrap) {
+          if (resizeTimeout.id) {
+            clearTimeout(resizeTimeout.id);
+          }
+          resizeTimeout.id = setTimeout(function () {
+            var _ref$current;
+            resizeTimeout.id = null;
+            setWidth(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0);
+          }, 200);
         }
       }
     }
   });
+  React.useEffect(function () {
+    if (width) {
+      setOverflowIndex(getOverflowIndex(width));
+    } else {
+      setOverflowIndex(tabList.length);
+    }
+  }, [width]);
+  var getOverflowIndex = function getOverflowIndex(width) {
+    var scrollWidth = (activeItemTabBtn === null || activeItemTabBtn === void 0 ? void 0 : activeItemTabBtn.width) || 0;
+    for (var _iterator2 = _createForOfIteratorHelperLoose(tabList.entries()), _step2; !(_step2 = _iterator2()).done;) {
+      var _step2$value = _step2.value,
+        index = _step2$value[0],
+        item = _step2$value[1];
+      if (item.id === (activeItemTabBtn === null || activeItemTabBtn === void 0 ? void 0 : activeItemTabBtn.id)) {
+        continue;
+      }
+      if (scrollWidth + item.width < width) {
+        scrollWidth += item.width;
+      } else {
+        return index;
+      }
+    }
+    return tabList.length;
+  };
   React.useEffect(function () {
     if (ref.current) {
       resizeObserver.observe(ref.current);
@@ -61719,62 +61760,35 @@ var TabButtonGroup = function TabButtonGroup(props) {
   }, []);
   React.useEffect(function () {
     if (props.itemList) {
-      var list = props.itemList.map(function (item, index) {
-        return _extends({}, item, {
-          index: index
-        });
-      });
-      var isActiveItemChanged = props.activeItem != activeItem;
-      setTabList(list);
-      setActiveItem(props.activeItem);
-      if (props.activeItem) {
-        var itemTabBtn = tabList.find(function (item) {
-          return item.id === props.activeItem;
-        });
-        if (itemTabBtn) {
-          if (isActiveItemChanged) {
-            var overflowItem = overflowTabList.find(function (item) {
-              return item.index === itemTabBtn.index;
-            });
-            if (overflowItem) {
-              setActiveItemTabBtn(overflowItem);
-            } else {
-              setActiveItemTabBtn(null);
-            }
-          }
-        } else {
-          setActiveItemTabBtn(null);
-        }
-      } else {
-        setActiveItemTabBtn(null);
-      }
+      setTabList(getItemList(props.itemList));
     }
   }, [props.itemList]);
   React.useEffect(function () {
-    var isActiveItemChanged = props.activeItem != activeItem;
-    setActiveItem(props.activeItem);
     if (props.activeItem) {
-      var itemTabBtn = tabList.find(function (item) {
-        return item.id === props.activeItem;
-      });
-      if (itemTabBtn) {
-        if (isActiveItemChanged) {
-          var overflowItem = overflowTabList.find(function (item) {
-            return item.index === itemTabBtn.index;
-          });
-          if (overflowItem) {
-            setActiveItemTabBtn(overflowItem);
-          } else {
-            setActiveItemTabBtn(null);
-          }
-        }
-      } else {
-        setActiveItemTabBtn(null);
-      }
-    } else {
-      setActiveItemTabBtn(null);
+      setActiveItem(props.activeItem);
     }
   }, [props.activeItem]);
+  var getItemList = function getItemList(itemList) {
+    if (ref.current) {
+      var canvas = document.createElement(ELEMENT_CANVAS$1);
+      var font = window.getComputedStyle(ref.current).font;
+      var newItemList = itemList.map(function (item, index) {
+        return _extends({}, item, {
+          width: getTextWidth(item.text, canvas, font),
+          index: index
+        });
+      });
+      return newItemList;
+    }
+    return itemList;
+  };
+  var getTextWidth = function getTextWidth(text, canvas, font) {
+    var context = canvas.getContext(CANVAS_CONTEXT$1);
+    context.font = font;
+    var _context$measureText = context.measureText(text),
+      width = _context$measureText.width;
+    return width + 24;
+  };
   var setButtonActive = function setButtonActive(index) {
     var overflowItem = overflowTabList.find(function (item) {
       return item.index === index;
@@ -61804,21 +61818,13 @@ var TabButtonGroup = function TabButtonGroup(props) {
       }
     });
   };
-  var getWidth = function getWidth() {
-    var count = tabList.length - overflowTabList.length;
-    var _width = width - count * 16;
-    return _width >= tabMinWidth ? _width : tabMinWidth;
-  };
   return React__default.createElement("div", {
     className: styles$v[CSS_CLASS_TAB_BUTTON_GROUP]
   }, React__default.createElement("div", {
     className: styles$v[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT],
     ref: ref
   }, tabList.map(function (item, index) {
-    if ((activeItemTabBtn ? index + 2 : index + 1) * tabMinWidth < getWidth() || !props.wrap) {
-      if (activeItemTabBtn && activeItemTabBtn.index === index) {
-        setActiveItemTabBtn(null);
-      }
+    if (index < overflowIndex || !props.wrap || activeItemTabBtn && activeItemTabBtn.index === index) {
       return getTabButton(item, index);
     }
     if (activeItemTabBtn && activeItemTabBtn.index === index) {
@@ -61826,15 +61832,9 @@ var TabButtonGroup = function TabButtonGroup(props) {
     }
     overflowTabList.push(item);
     return null;
-  }), activeItemTabBtn && React__default.createElement(Button$1, {
-    key: activeItemTabBtn.id,
-    className: styles$v[CSS_CLASS_ACTIVE],
-    text: activeItemTabBtn.text,
-    onClick: function onClick() {}
   }), tabList && props.wrap && React__default.createElement(OverflowButton, {
     list: overflowTabList,
     offset: tabList.length - overflowTabList.length,
-    width: width,
     onSelect: setButtonActive
   })));
 };
@@ -66969,7 +66969,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.242";
+var version$1 = "1.1.243";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";