@hi-ui/table 4.12.2 → 4.12.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hi-ui/table
 
+## 4.12.3
+
+### Patch Changes
+
+- [#3426](https://github.com/XiaoMi/hiui/pull/3426) [`a8cc00c`](https://github.com/XiaoMi/hiui/commit/a8cc00cc9c5591309049c25a458ffcd41e292eba) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复设置 minWidth 无效的问题 (#3425)
+
 ## 4.12.2
 
 ### Patch Changes

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

@@ -126,7 +126,7 @@ var useColWidth = function useColWidth(_ref) {
         if (virtual) {
           setColWidths(getVirtualWidths());
         } else {
-          // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
+          // 当第一行有内容时并且没有重新设置列宽时，再去设置列宽
           // Warning hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
           if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
             hasResetWidths.current = true;
@@ -145,7 +145,7 @@ var useColWidth = function useColWidth(_ref) {
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
-  var _React$useState3 = React__default["default"].useState([]),
+  var _React$useState3 = React__default["default"].useState(index.getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
   // 当列变化时同步更新 minColWidths
@@ -153,17 +153,16 @@ var useColWidth = function useColWidth(_ref) {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
-        var resizableHandlerWidth = 4;
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index$1) {
           var minColWidth = index.getGroupItemWidth(columns).minColWidths[index$1];
+          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          if (minColWidth !== undefined && minColWidth !== 0) {
+            return minColWidth;
+          }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-          var childNodes = Array.from(th.childNodes);
-          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;
+          var childNode = Array.from(th.childNodes)[0];
+          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
       });
@@ -220,15 +219,15 @@ var useColWidth = function useColWidth(_ref) {
   }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default["default"].useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
-    var minWidth = minColWidths[index] || undefined;
+    // const minWidth = minColWidths[index] || undefined
     return {
       style: {
-        width: width,
-        minWidth: minWidth || width
+        width: width
+        // minWidth: minWidth || width,
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths, minColWidths]);
+  }, [colWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/cjs/utils/index.js

@@ -79,8 +79,8 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = typeAssertion.isNumeric(width) ? Number(width) : 0;
-      var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
-      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : 0;
+      colWidths.push(colWidth);
       minColWidths.push(minColWidth);
     });
   };

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

@@ -114,7 +114,7 @@ var useColWidth = function useColWidth(_ref) {
         if (virtual) {
           setColWidths(getVirtualWidths());
         } else {
-          // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
+          // 当第一行有内容时并且没有重新设置列宽时，再去设置列宽
           // Warning hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
           if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
             hasResetWidths.current = true;
@@ -133,7 +133,7 @@ var useColWidth = function useColWidth(_ref) {
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
-  var _React$useState3 = React__default.useState([]),
+  var _React$useState3 = React__default.useState(getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
   // 当列变化时同步更新 minColWidths
@@ -141,17 +141,16 @@ var useColWidth = function useColWidth(_ref) {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
-        var resizableHandlerWidth = 4;
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index) {
           var minColWidth = getGroupItemWidth(columns).minColWidths[index];
+          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          if (minColWidth !== undefined && minColWidth !== 0) {
+            return minColWidth;
+          }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-          var childNodes = Array.from(th.childNodes);
-          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;
+          var childNode = Array.from(th.childNodes)[0];
+          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
       });
@@ -208,15 +207,15 @@ var useColWidth = function useColWidth(_ref) {
   }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default.useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
-    var minWidth = minColWidths[index] || undefined;
+    // const minWidth = minColWidths[index] || undefined
     return {
       style: {
-        width: width,
-        minWidth: minWidth || width
+        width: width
+        // minWidth: minWidth || width,
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths, minColWidths]);
+  }, [colWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/esm/utils/index.js

@@ -74,8 +74,8 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = isNumeric(width) ? Number(width) : 0;
-      var minColWidth = isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
-      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      var minColWidth = isNumeric(minWidth) ? Number(minWidth) : 0;
+      colWidths.push(colWidth);
       minColWidths.push(minColWidth);
     });
   };

package/lib/types/context.d.ts

@@ -5,7 +5,6 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {
@@ -137,7 +136,6 @@ export declare const useTableContext: () => Omit<{
     getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {

package/lib/types/hooks/use-col-width.d.ts

@@ -12,7 +12,6 @@ export declare const useColWidth: ({ resizable, tableWidthAdjustOnResize, data,
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;

package/lib/types/use-table.d.ts

@@ -7,7 +7,6 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",