@hi-ui/table 5.0.0-canary.7 → 5.0.0-canary.9

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hi-ui/table
 
+## 5.0.0-canary.9
+
+### Patch Changes
+
+- fix(table): 修复 resizable 模式下列宽计算问题 (5.0)
+- Updated dependencies [bf65028e6]
+  - @hi-ui/button@5.0.0-canary.7
+  - @hi-ui/popper@5.0.0-canary.4
+
+## 5.0.0-canary.8
+
+### Minor Changes
+
+- ca7a945fe: feat(table): TableColumnItem 类型增加 minWidth 参数 (#3216)
+
+### Patch Changes
+
+- Updated dependencies [756473045]
+- Updated dependencies [b4cecde83]
+  - @hi-ui/scrollbar@5.0.0-canary.3
+  - @hi-ui/button@5.0.0-canary.6
+
 ## 5.0.0-canary.7
 
 ### Patch Changes

package/lib/cjs/hooks/use-col-width.js

@@ -31,7 +31,7 @@ var useColWidth = function useColWidth(_ref) {
   // 是否重新设置过表格每列宽度
   var hasResetWidths = React__default["default"].useRef(false);
   var _React$useState = React__default["default"].useState(function () {
-      return index.getGroupItemWidth(columns);
+      return index.getGroupItemWidth(columns).colWidths;
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
@@ -39,12 +39,12 @@ var useColWidth = function useColWidth(_ref) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
       var exceedWidth = 0;
-      var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
+      var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index$1) {
         var _a;
-        var realWidth = node.getBoundingClientRect().width || 0;
-        var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
-          width = _ref2.width,
+        var realWidth = node.getBoundingClientRect().width || 60;
+        var _ref2 = (_a = columns[index$1]) !== null && _a !== void 0 ? _a : {},
           fixed = _ref2.fixed;
+        var width = index.getGroupItemWidth(columns).colWidths[index$1];
         // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
         if (fixed && width && width < realWidth) {
           exceedWidth += realWidth - width;
@@ -71,12 +71,12 @@ var useColWidth = function useColWidth(_ref) {
         return _realColumnsWidth;
       }
     }
-    return index.getGroupItemWidth(columns);
+    return index.getGroupItemWidth(columns).colWidths;
   }, [columns]);
   var getVirtualWidths = React.useCallback(function () {
     var measureRowElement = measureRowElementRef.current;
     if (!measureRowElement) {
-      return index.getGroupItemWidth(columns);
+      return index.getGroupItemWidth(columns).colWidths;
     }
     /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
     var columnDefaultWidth = 200;
@@ -105,7 +105,7 @@ var useColWidth = function useColWidth(_ref) {
     }
   }, [getVirtualWidths, virtual]);
   useUpdateEffect.useUpdateEffect(function () {
-    setColWidths(index.getGroupItemWidth(columns));
+    setColWidths(index.getGroupItemWidth(columns).colWidths);
     // setColWidths((prev) => {
     //   // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
     //   // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
@@ -147,33 +147,35 @@ var useColWidth = function useColWidth(_ref) {
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
   var _React$useState3 = React__default["default"].useState([]),
-    minColWidth = _React$useState3[0],
-    setMinColWidth = _React$useState3[1];
-  // 当列变化时同步更新 minColWidth
+    minColWidths = _React$useState3[0],
+    setMinColWidths = _React$useState3[1];
+  // 当列变化时同步更新 minColWidths
   React__default["default"].useEffect(function () {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
         var resizableHandlerWidth = 4;
-        var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
+        var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index$1) {
+          var minColWidth = index.getGroupItemWidth(columns).minColWidths[index$1];
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
           var childNodes = Array.from(th.childNodes);
-          return childNodes.map(function (child) {
+          var childNodesWidth = childNodes.map(function (child) {
             return child.offsetWidth;
           }).reduce(function (prev, next) {
             return prev + next;
           }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
+          return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
         });
-        setMinColWidth(_minColWidth);
+        setMinColWidths(calcMinColWidths);
       });
       resizeObserver.observe(headerTableElement);
     } else {
-      setMinColWidth(Array(columns.length).fill(0));
+      setMinColWidths(Array(columns.length).fill(0));
     }
     return function () {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
-  }, [columns.length, headerTableElement, resizable]);
+  }, [columns, columns.length, headerTableElement, resizable]);
   /**
    *  控制列最小可调整宽度
    */
@@ -198,8 +200,8 @@ var useColWidth = function useColWidth(_ref) {
    */
   var onColumnResizable = React__default["default"].useCallback(function (evt, _ref3, index) {
     var size = _ref3.size;
-    var minWidth = minColWidth[index];
-    var anotherMinWidth = minColWidth[index + 1];
+    var minWidth = minColWidths[index];
+    var anotherMinWidth = minColWidths[index + 1];
     var nextWidth = size.width > minWidth ? size.width : minWidth;
     setColWidths(function (prev) {
       var nextColWidths = [].concat(prev);
@@ -216,18 +218,18 @@ var useColWidth = function useColWidth(_ref) {
       nextColWidths[index + 1] = anotherWidth;
       return nextColWidths;
     });
-  }, [minColWidth, tableWidthAdjustOnResize]);
+  }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default["default"].useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
+    var minWidth = minColWidths[index] || undefined;
     return {
       style: {
         width: width,
-        // TODO（疑惑）: minWidth 所要解决的问题
-        minWidth: width
+        minWidth: minWidth || width
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths]);
+  }, [colWidths, minColWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/cjs/utils/index.js

@@ -66,22 +66,29 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
  * 如果是多级表头，将会递归 children 得到叶子结点层每项的宽度
  */
 var getGroupItemWidth = function getGroupItemWidth(columns) {
-  var baseColWidths = [];
+  var colWidths = [];
+  var minColWidths = [];
   var dig = function dig(column) {
     column.forEach(function (_ref) {
       var children = _ref.children,
-        width = _ref.width;
+        width = _ref.width,
+        minWidth = _ref.minWidth;
       if (Array.isArray(children)) {
         dig(children);
         return;
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = typeAssertion.isNumeric(width) ? Number(width) : 0;
-      baseColWidths.push(colWidth);
+      var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
+      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      minColWidths.push(minColWidth);
     });
   };
   dig(columns);
-  return baseColWidths;
+  return {
+    colWidths: colWidths,
+    minColWidths: minColWidths
+  };
 };
 var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
   if (parentStickyWidth === void 0) {

package/lib/esm/hooks/use-col-width.js

@@ -19,7 +19,7 @@ var useColWidth = function useColWidth(_ref) {
   // 是否重新设置过表格每列宽度
   var hasResetWidths = React__default.useRef(false);
   var _React$useState = React__default.useState(function () {
-      return getGroupItemWidth(columns);
+      return getGroupItemWidth(columns).colWidths;
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
@@ -29,10 +29,10 @@ var useColWidth = function useColWidth(_ref) {
       var exceedWidth = 0;
       var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
         var _a;
-        var realWidth = node.getBoundingClientRect().width || 0;
+        var realWidth = node.getBoundingClientRect().width || 60;
         var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
-          width = _ref2.width,
           fixed = _ref2.fixed;
+        var width = getGroupItemWidth(columns).colWidths[index];
         // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
         if (fixed && width && width < realWidth) {
           exceedWidth += realWidth - width;
@@ -59,12 +59,12 @@ var useColWidth = function useColWidth(_ref) {
         return _realColumnsWidth;
       }
     }
-    return getGroupItemWidth(columns);
+    return getGroupItemWidth(columns).colWidths;
   }, [columns]);
   var getVirtualWidths = useCallback(function () {
     var measureRowElement = measureRowElementRef.current;
     if (!measureRowElement) {
-      return getGroupItemWidth(columns);
+      return getGroupItemWidth(columns).colWidths;
     }
     /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
     var columnDefaultWidth = 200;
@@ -93,7 +93,7 @@ var useColWidth = function useColWidth(_ref) {
     }
   }, [getVirtualWidths, virtual]);
   useUpdateEffect(function () {
-    setColWidths(getGroupItemWidth(columns));
+    setColWidths(getGroupItemWidth(columns).colWidths);
     // setColWidths((prev) => {
     //   // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
     //   // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
@@ -135,33 +135,35 @@ var useColWidth = function useColWidth(_ref) {
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
   var _React$useState3 = React__default.useState([]),
-    minColWidth = _React$useState3[0],
-    setMinColWidth = _React$useState3[1];
-  // 当列变化时同步更新 minColWidth
+    minColWidths = _React$useState3[0],
+    setMinColWidths = _React$useState3[1];
+  // 当列变化时同步更新 minColWidths
   React__default.useEffect(function () {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
         var resizableHandlerWidth = 4;
-        var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
+        var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index) {
+          var minColWidth = getGroupItemWidth(columns).minColWidths[index];
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
           var childNodes = Array.from(th.childNodes);
-          return childNodes.map(function (child) {
+          var childNodesWidth = childNodes.map(function (child) {
             return child.offsetWidth;
           }).reduce(function (prev, next) {
             return prev + next;
           }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
+          return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
         });
-        setMinColWidth(_minColWidth);
+        setMinColWidths(calcMinColWidths);
       });
       resizeObserver.observe(headerTableElement);
     } else {
-      setMinColWidth(Array(columns.length).fill(0));
+      setMinColWidths(Array(columns.length).fill(0));
     }
     return function () {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
-  }, [columns.length, headerTableElement, resizable]);
+  }, [columns, columns.length, headerTableElement, resizable]);
   /**
    *  控制列最小可调整宽度
    */
@@ -186,8 +188,8 @@ var useColWidth = function useColWidth(_ref) {
    */
   var onColumnResizable = React__default.useCallback(function (evt, _ref3, index) {
     var size = _ref3.size;
-    var minWidth = minColWidth[index];
-    var anotherMinWidth = minColWidth[index + 1];
+    var minWidth = minColWidths[index];
+    var anotherMinWidth = minColWidths[index + 1];
     var nextWidth = size.width > minWidth ? size.width : minWidth;
     setColWidths(function (prev) {
       var nextColWidths = [].concat(prev);
@@ -204,18 +206,18 @@ var useColWidth = function useColWidth(_ref) {
       nextColWidths[index + 1] = anotherWidth;
       return nextColWidths;
     });
-  }, [minColWidth, tableWidthAdjustOnResize]);
+  }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default.useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
+    var minWidth = minColWidths[index] || undefined;
     return {
       style: {
         width: width,
-        // TODO（疑惑）: minWidth 所要解决的问题
-        minWidth: width
+        minWidth: minWidth || width
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths]);
+  }, [colWidths, minColWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/esm/utils/index.js

@@ -61,22 +61,29 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
  * 如果是多级表头，将会递归 children 得到叶子结点层每项的宽度
  */
 var getGroupItemWidth = function getGroupItemWidth(columns) {
-  var baseColWidths = [];
+  var colWidths = [];
+  var minColWidths = [];
   var dig = function dig(column) {
     column.forEach(function (_ref) {
       var children = _ref.children,
-        width = _ref.width;
+        width = _ref.width,
+        minWidth = _ref.minWidth;
       if (Array.isArray(children)) {
         dig(children);
         return;
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = isNumeric(width) ? Number(width) : 0;
-      baseColWidths.push(colWidth);
+      var minColWidth = isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
+      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      minColWidths.push(minColWidth);
     });
   };
   dig(columns);
-  return baseColWidths;
+  return {
+    colWidths: colWidths,
+    minColWidths: minColWidths
+  };
 };
 var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
   if (parentStickyWidth === void 0) {

package/lib/types/types.d.ts

@@ -95,7 +95,11 @@ export declare type TableColumnItem = {
      */
     width?: number;
     /**
-     * 是否固定列宽，使用场景：设置 width 后，当所有列宽总和小于表格宽度时，多的宽度会分摊到每一列上，设置 fixed 后该列不会参与多余宽度均分。
+     * 该列最小宽度
+     */
+    minWidth?: number;
+    /**
+     * 是否固定列宽，使用场景：设置 width 后，当所有列宽总和小于表格宽度时，多的宽度会分摊到每一列上，设置 fixed 后该列不会参与多余宽度分摊。
      */
     fixed?: boolean;
     /**

package/lib/types/utils/index.d.ts

@@ -6,7 +6,10 @@ export declare const setColumnsDefaultWidth: (columns: any, defaultWidth: any) =
  * 获取每个 Column 的真实列宽度（排除合并列头）
  * 如果是多级表头，将会递归 children 得到叶子结点层每项的宽度
  */
-export declare const getGroupItemWidth: (columns: TableColumnItem[]) => number[];
+export declare const getGroupItemWidth: (columns: TableColumnItem[]) => {
+    colWidths: number[];
+    minColWidths: number[];
+};
 export declare const getMaskItemsWIdth: (columns: TableColumnItem[]) => number;
 export declare const parseFixedColumns: (item: any, index: number, columns: any[], arr: any[], key: string, parentStickyWidth?: number) => any;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "5.0.0-canary.7",
+  "version": "5.0.0-canary.9",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^5.0.0-canary.2",
-    "@hi-ui/button": "^5.0.0-canary.5",
+    "@hi-ui/button": "^5.0.0-canary.7",
     "@hi-ui/checkbox": "^5.0.0-canary.2",
     "@hi-ui/classname": "^5.0.0-canary.2",
     "@hi-ui/dom-utils": "^5.0.0-canary.2",
@@ -58,9 +58,9 @@
     "@hi-ui/loading": "^5.0.0-canary.2",
     "@hi-ui/object-utils": "^5.0.0-canary.2",
     "@hi-ui/pagination": "^5.0.0-canary.4",
-    "@hi-ui/popper": "^5.0.0-canary.3",
+    "@hi-ui/popper": "^5.0.0-canary.4",
     "@hi-ui/react-utils": "^5.0.0-canary.2",
-    "@hi-ui/scrollbar": "^5.0.0-canary.2",
+    "@hi-ui/scrollbar": "^5.0.0-canary.3",
     "@hi-ui/select": "^5.0.0-canary.7",
     "@hi-ui/spinner": "^5.0.0-canary.2",
     "@hi-ui/times": "^5.0.0-canary.2",