@hi-ui/table 5.0.0 → 5.0.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hi-ui/table
 
+## 5.0.1-alpha.0
+
+### Patch Changes
+
+- [`e0d1077c1`](https://github.com/XiaoMi/hiui/commit/e0d1077c11a2bd2419e0888b2d0f28f3e8a93e3d) - fix: 修复虚拟列表勾选行后已调整列宽被重置的问题
+
 ## 5.0.0
 
 ### Major Changes

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

@@ -22,6 +22,28 @@ function _interopDefaultCompat(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var getVirtualColWidths = function getVirtualColWidths(columns, containerWidth, currentWidths) {
+  if (currentWidths === void 0) {
+    currentWidths = [];
+  }
+  var columnDefaultWidth = 200;
+  var hasCurrentWidths = currentWidths.length === columns.length && currentWidths.every(function (width) {
+    return width > 0;
+  });
+  var baseWidths = hasCurrentWidths ? currentWidths : columns.map(function (columnItem) {
+    return columnItem.width || columnDefaultWidth;
+  });
+  var totalWidth = baseWidths.reduce(function (total, width) {
+    return total + width;
+  }, 0);
+  if (totalWidth > 0 && totalWidth < containerWidth) {
+    // 容器宽度大于设置的宽度总和时，col宽度等比分配占满容器。
+    return baseWidths.map(function (width) {
+      return width * containerWidth / totalWidth;
+    });
+  }
+  return baseWidths;
+};
 var useColWidth = function useColWidth(_ref) {
   var resizable = _ref.resizable,
     tableWidthAdjustOnResize = _ref.tableWidthAdjustOnResize,
@@ -36,6 +58,10 @@ var useColWidth = function useColWidth(_ref) {
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
+  var colWidthsRef = React__default["default"].useRef(colWidths);
+  React__default["default"].useEffect(function () {
+    colWidthsRef.current = colWidths;
+  }, [colWidths]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
    * 如果实际总宽度大于设置的宽度，则将多余的宽度平分到没有设置 fixed 的列上
@@ -87,24 +113,7 @@ var useColWidth = function useColWidth(_ref) {
       return index.getGroupItemWidth(columns).colWidths;
     }
     /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
-    var columnDefaultWidth = 200;
-    var containerWidth = measureRowElement.clientWidth;
-    var totalWidth = 0;
-    /** 虚拟滚动，需要根据collist的虚拟宽度来计算宽度 */
-    columns.forEach(function (columnItem) {
-      totalWidth += columnItem.width || columnDefaultWidth;
-    });
-    if (totalWidth < containerWidth) {
-      // 容器宽度大于设置的宽度总和时，col宽度等比分分配占满容器。
-      return columns.map(function (columnItem) {
-        return (columnItem.width || columnDefaultWidth) * containerWidth / totalWidth;
-      });
-    } else {
-      // 容器宽度小于设置的宽度总和时，col宽度等于设置/默认宽度。
-      return columns.map(function (columnItem) {
-        return columnItem.width || columnDefaultWidth;
-      });
-    }
+    return getVirtualColWidths(columns, measureRowElement.clientWidth, colWidthsRef.current);
   }, [columns]);
   // 记录上一轮的列，用于判断列是否发生变化，只有发生变化时才重新计算列宽
   var prevColumnsRef = React__default["default"].useRef(columns);
@@ -260,4 +269,5 @@ var useColWidth = function useColWidth(_ref) {
     colWidths: colWidths
   };
 };
+exports.getVirtualColWidths = getVirtualColWidths;
 exports.useColWidth = useColWidth;

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

@@ -10,6 +10,28 @@
 import React__default, { useCallback } from 'react';
 import { getGroupItemWidth } from '../utils/index.js';
 import { useUpdateEffect } from '@hi-ui/use-update-effect';
+var getVirtualColWidths = function getVirtualColWidths(columns, containerWidth, currentWidths) {
+  if (currentWidths === void 0) {
+    currentWidths = [];
+  }
+  var columnDefaultWidth = 200;
+  var hasCurrentWidths = currentWidths.length === columns.length && currentWidths.every(function (width) {
+    return width > 0;
+  });
+  var baseWidths = hasCurrentWidths ? currentWidths : columns.map(function (columnItem) {
+    return columnItem.width || columnDefaultWidth;
+  });
+  var totalWidth = baseWidths.reduce(function (total, width) {
+    return total + width;
+  }, 0);
+  if (totalWidth > 0 && totalWidth < containerWidth) {
+    // 容器宽度大于设置的宽度总和时，col宽度等比分配占满容器。
+    return baseWidths.map(function (width) {
+      return width * containerWidth / totalWidth;
+    });
+  }
+  return baseWidths;
+};
 var useColWidth = function useColWidth(_ref) {
   var resizable = _ref.resizable,
     tableWidthAdjustOnResize = _ref.tableWidthAdjustOnResize,
@@ -24,6 +46,10 @@ var useColWidth = function useColWidth(_ref) {
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
+  var colWidthsRef = React__default.useRef(colWidths);
+  React__default.useEffect(function () {
+    colWidthsRef.current = colWidths;
+  }, [colWidths]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
    * 如果实际总宽度大于设置的宽度，则将多余的宽度平分到没有设置 fixed 的列上
@@ -75,24 +101,7 @@ var useColWidth = function useColWidth(_ref) {
       return getGroupItemWidth(columns).colWidths;
     }
     /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
-    var columnDefaultWidth = 200;
-    var containerWidth = measureRowElement.clientWidth;
-    var totalWidth = 0;
-    /** 虚拟滚动，需要根据collist的虚拟宽度来计算宽度 */
-    columns.forEach(function (columnItem) {
-      totalWidth += columnItem.width || columnDefaultWidth;
-    });
-    if (totalWidth < containerWidth) {
-      // 容器宽度大于设置的宽度总和时，col宽度等比分分配占满容器。
-      return columns.map(function (columnItem) {
-        return (columnItem.width || columnDefaultWidth) * containerWidth / totalWidth;
-      });
-    } else {
-      // 容器宽度小于设置的宽度总和时，col宽度等于设置/默认宽度。
-      return columns.map(function (columnItem) {
-        return columnItem.width || columnDefaultWidth;
-      });
-    }
+    return getVirtualColWidths(columns, measureRowElement.clientWidth, colWidthsRef.current);
   }, [columns]);
   // 记录上一轮的列，用于判断列是否发生变化，只有发生变化时才重新计算列宽
   var prevColumnsRef = React__default.useRef(columns);
@@ -248,4 +257,4 @@ var useColWidth = function useColWidth(_ref) {
     colWidths: colWidths
   };
 };
-export { useColWidth };
+export { getVirtualColWidths, useColWidth };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FlattedTableColumnItemData, TableColumnItem, TableRowRecord } from '../types';
+export declare const getVirtualColWidths: (columns: TableColumnItem[], containerWidth: number, currentWidths?: number[]) => number[];
 export declare const useColWidth: ({ resizable, tableWidthAdjustOnResize, data, columns, virtual, scrollBodyElementRef, }: {
     resizable: boolean;
     tableWidthAdjustOnResize: boolean;

package/package.json

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