@arim-aisdc/public-components 2.3.17 → 2.3.18

package/dist/components/TableMax/hooks/useColumnWidth copy.js

@@ -0,0 +1,369 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getSizeInfo } from "../utils";
+import { debounce } from 'lodash';
+var CACHE_MAX_AGE = 1 * 60 * 60 * 1000; // 1小时
+var defaultMinSize = 120;
+var defaultMaxSize = 240;
+export var useColumnWidth = function useColumnWidth(_ref) {
+  var tableContentRef = _ref.tableContentRef,
+    tableId = _ref.tableId,
+    tableKeyPrefixCls = _ref.tableKeyPrefixCls,
+    _ref$columnVisibleCon = _ref.columnVisibleConfig,
+    columnVisibleConfig = _ref$columnVisibleCon === void 0 ? {} : _ref$columnVisibleCon,
+    tableKey = _ref.tableKey;
+  var _useState = useState({
+      columnSizing: {},
+      //显示列的列宽
+      allColumnSizing: {},
+      //所有列的列宽
+      allColumnCount: 0,
+      tableContainerWidth: undefined,
+      initColumnsSizeMap: {}
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var getTableWidth = useCallback(function () {
+    var _tableContentRef$curr;
+    var width = (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.getBoundingClientRect().width;
+    var style = window.getComputedStyle(tableContentRef.current);
+    var horizontalBorderWidth = parseFloat(style.getPropertyValue('border-left-width')) + parseFloat(style.getPropertyValue('border-right-width'));
+    return Math.floor(width - horizontalBorderWidth);
+  }, [tableContentRef]);
+
+  /**
+  * 处理容器宽度变化的逻辑
+  * 1.容器变小:
+  * 找到原始columns设置列宽度的第一列
+  * 如果当前列的宽度大于初始宽度，则按照容器变化的总宽度，除选择列和展开列外，其他列平分容器减小的宽度
+  * 如果当前列的宽度小于等于初始宽度，则列宽均不变
+  * 2.容器变大：
+  * 列宽之和大于容器宽度，不重新计算
+  * 列宽之和小于容器宽度，除选择列和展开列外，其他列平分 列宽之和与容器宽度的差值
+  */
+  var handleResize = useCallback(function () {
+    if (!tableContentRef.current) return;
+    var newWidth = getTableWidth();
+    if (!newWidth) return;
+    setState(function (prevState) {
+      // 计算可见列，排除特定列
+      var visibleColumns = Object.keys(prevState.columnSizing).filter(function (key) {
+        return columnVisibleConfig[key] !== false && key !== 'expander' && key !== 'selection-column';
+      });
+      var totalVisibleWidth = Object.keys(prevState.columnSizing).filter(function (key) {
+        return columnVisibleConfig[key] !== false;
+      }).reduce(function (sum, key) {
+        return sum + (prevState.columnSizing[key] || 120);
+      }, 0);
+
+      // 容器变大时的逻辑
+      if (prevState.tableContainerWidth > 0 && newWidth > prevState.tableContainerWidth) {
+        if (totalVisibleWidth < newWidth) {
+          // 计算剩余宽度
+          var remainWidth = newWidth - totalVisibleWidth - 10;
+          var unselectedCount = visibleColumns.length;
+
+          // 如果有未排除的列，均匀分配剩余宽度
+          if (unselectedCount > 0) {
+            var averageWidth = remainWidth / unselectedCount;
+            var newVisibleColumnsSizing = _objectSpread({}, prevState.columnSizing);
+            visibleColumns.forEach(function (key) {
+              newVisibleColumnsSizing[key] = (newVisibleColumnsSizing[key] || 0) + averageWidth;
+            });
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              columnSizing: newVisibleColumnsSizing,
+              allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing || {}), newVisibleColumnsSizing),
+              tableContainerWidth: newWidth
+            });
+          }
+        }
+      } else if (prevState.tableContainerWidth > 0 && newWidth < prevState.tableContainerWidth && JSON.stringify(prevState.initColumnsSizeMap) !== '{}') {
+        // 容器变小时，重新计算
+        var reducedWidth = newWidth - totalVisibleWidth - 10;
+        var _unselectedCount = visibleColumns.length;
+        if (_unselectedCount > 0) {
+          var _averageWidth = reducedWidth / _unselectedCount;
+          var _newVisibleColumnsSizing = _objectSpread({}, prevState.columnSizing);
+          visibleColumns.forEach(function (key) {
+            _newVisibleColumnsSizing[key] = Math.max((_newVisibleColumnsSizing[key] || 0) + _averageWidth, Math.max(state.initColumnsSizeMap[visibleColumns[0]], defaultMinSize));
+          });
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            columnSizing: _newVisibleColumnsSizing,
+            allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing || {}), _newVisibleColumnsSizing),
+            tableContainerWidth: newWidth
+          });
+        }
+      }
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        tableContainerWidth: newWidth
+      });
+    });
+  }, [tableContentRef.current]);
+
+  // 使用防抖处理容器宽度变化
+  var debouncedHandleResize = useMemo(function () {
+    return debounce(handleResize, 200);
+  }, [handleResize]);
+  useEffect(function () {
+    if (!tableContentRef.current) return;
+    var resizeObserver = new ResizeObserver(debouncedHandleResize);
+    resizeObserver.observe(tableContentRef.current);
+    return function () {
+      resizeObserver.disconnect();
+      debouncedHandleResize.cancel(); // 清理防抖
+    };
+  }, [tableContentRef.current, debouncedHandleResize]);
+
+  /**
+  * 列显示隐藏后调整列宽
+  * @param key 
+  * @param value 
+  * 增加列，其余列宽度不变
+  * 减少列，列宽之和大于容器宽度，其余列宽不变
+  * 列宽之和小于容器宽度，除展开列和勾选列外，其余列平分列宽之和与容器宽度的差值
+  */
+
+  var handleVisibleConfigChange = function handleVisibleConfigChange(key, value) {
+    setState(function (prevState) {
+      //列宽增加
+      if (value) {
+        // console.log(prevState.allColumnSizing[key], prevState.allColumnSizing, 'prevState.allColumnSizing[key]')
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          columnSizing: _objectSpread(_objectSpread({}, prevState.columnSizing), {}, {
+            key: prevState.allColumnSizing[key]
+          }),
+          allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing), {}, {
+            key: prevState.allColumnSizing[key] || 120
+          })
+        });
+      } else {
+        //列宽减少
+        var newVisibleColumnsSizing = prevState.columnSizing;
+        delete newVisibleColumnsSizing[key];
+        var containerWidth = getTableWidth() - 10 || 0;
+        // 计算当前总宽度
+        var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
+          return Number(sum || 0) + Number(width || 0);
+        }, 0);
+        if (containerWidth < totalWidth) {
+          // 容器宽度小于增加列后的列总和，其他列宽度不变
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            columnSizing: newVisibleColumnsSizing
+          });
+        } else {
+          // 容器宽度大于增加列后的列总和，其他列宽度平分差值
+          var widthDifference = containerWidth - totalWidth; // 计算差值
+          var joinCalculateColumns = Object.keys(prevState.columnSizing).filter(function (key) {
+            return key !== 'expander' && key !== 'selection-column';
+          });
+          var averageWidthIncrease = widthDifference / (joinCalculateColumns === null || joinCalculateColumns === void 0 ? void 0 : joinCalculateColumns.length);
+          joinCalculateColumns === null || joinCalculateColumns === void 0 || joinCalculateColumns.forEach(function (key) {
+            newVisibleColumnsSizing[key] = (newVisibleColumnsSizing[key] || 0) + averageWidthIncrease;
+          });
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            columnSizing: newVisibleColumnsSizing,
+            allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing), newVisibleColumnsSizing)
+          });
+        }
+      }
+    });
+  };
+
+  /**
+   * 初始化时计算列宽
+   * 未设置宽度的列，容器剩余宽度存在，平分剩余宽度，最大不超过240；容器剩余宽度不存在，默认120
+   * 平分后还存在剩余宽度，除展开列和勾选列外的其他列平分剩余宽度
+   * */
+  var calculateColumnSizing = useCallback(function (columnsSizeMap, allColumnCount, containerWidth) {
+    var _Object$keys$filter;
+    if (!tableContentRef.current || !columnsSizeMap) return {};
+    var currentWidth = containerWidth || state.tableContainerWidth || getTableWidth();
+    var hasColumnCount = ((_Object$keys$filter = Object.keys(columnsSizeMap).filter(function (item) {
+      return !!columnsSizeMap[item];
+    })) === null || _Object$keys$filter === void 0 ? void 0 : _Object$keys$filter.length) || 0;
+    var remainColumnCount = allColumnCount - hasColumnCount;
+    var allColumnWidth = Object.values(columnsSizeMap).reduce(function (sum, width) {
+      return sum + Number(width || 0);
+    }, 0);
+    var remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+    var newColumnSizeMap = _objectSpread({}, columnsSizeMap);
+
+    // 处理未设置宽度的列
+    if (remainColumnCount > 0) {
+      var averageSize = Math.max(Math.min(remainTableContainerWidth / remainColumnCount, defaultMaxSize), defaultMinSize);
+      Object.keys(columnsSizeMap).forEach(function (key) {
+        if (!newColumnSizeMap[key]) {
+          newColumnSizeMap[key] = averageSize;
+        }
+      });
+      allColumnWidth = Object.values(newColumnSizeMap).reduce(function (sum, width) {
+        return sum + Number(width || 0);
+      }, 0);
+      remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+    }
+
+    // 分配剩余宽度
+    if (remainTableContainerWidth > 0) {
+      var excludeColumns = ['expander', 'selection-column'].filter(Boolean);
+      var adjustableColumns = Object.keys(newColumnSizeMap).filter(function (key) {
+        return !excludeColumns.includes(key);
+      });
+      if (adjustableColumns.length > 0) {
+        var averageExtra = remainTableContainerWidth / adjustableColumns.length;
+        adjustableColumns.forEach(function (key) {
+          newColumnSizeMap[key] += averageExtra;
+        });
+      }
+    }
+    return newColumnSizeMap;
+  }, [state.allColumnCount, state.tableContainerWidth]);
+
+  // 初始化列宽信息
+  var initializeColumnSizing = useCallback(function (columns) {
+    var _localStorage$getItem;
+    if (!Array.isArray(columns) || columns.length === 0) {
+      return;
+    }
+    var cache = JSON.parse((_localStorage$getItem = localStorage.getItem("".concat(tableKey))) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
+    var _getSizeInfo = getSizeInfo(columns),
+      allCount = _getSizeInfo.allCount,
+      columnSizeMap = _getSizeInfo.columnSizeMap;
+    if (cache && cache !== null && cache !== void 0 && cache.editTime && +new Date() - cache.editTime > CACHE_MAX_AGE) {
+      var _initColumnsSizeMap = _objectSpread({}, columnSizeMap);
+      var _visibleColumnsSizeMap = {};
+      var _notVisibleColumns = Object.keys(columnVisibleConfig).filter(function (key) {
+        return !columnVisibleConfig[key];
+      });
+      var _newAllColumnCount = allCount - _notVisibleColumns.length;
+      Object.keys(_initColumnsSizeMap).forEach(function (key) {
+        if (!_notVisibleColumns.includes(key)) {
+          _visibleColumnsSizeMap[key] = _initColumnsSizeMap[key];
+        }
+      });
+      setState(function (prevState) {
+        var columnSizing = calculateColumnSizing(_visibleColumnsSizeMap, _newAllColumnCount, prevState.tableContainerWidth);
+        return {
+          columnSizing: columnSizing,
+          allColumnCount: _newAllColumnCount,
+          allColumnSizing: _objectSpread(_objectSpread({}, _initColumnsSizeMap), columnSizing),
+          tableContainerWidth: prevState.tableContainerWidth,
+          initColumnsSizeMap: columnSizeMap
+        };
+      });
+      return;
+    }
+    var cacheColumnSizing = cache.columnSizing,
+      cacheColumnVisibility = cache.columnVisibility;
+    var initColumnsSizeMap = _objectSpread(_objectSpread({}, columnSizeMap), cacheColumnSizing);
+    var initColumnsVisibility = _objectSpread(_objectSpread({}, columnVisibleConfig), cacheColumnVisibility);
+    var visibleColumnsSizeMap = {};
+    var notVisibleColumns = Object.keys(initColumnsVisibility).filter(function (key) {
+      return !initColumnsVisibility[key];
+    });
+    var newAllColumnCount = allCount - notVisibleColumns.length;
+    Object.keys(initColumnsSizeMap).forEach(function (key) {
+      if (!notVisibleColumns.includes(key)) {
+        visibleColumnsSizeMap[key] = initColumnsSizeMap[key];
+      }
+    });
+    setState(function (prevState) {
+      var columnSizing = calculateColumnSizing(visibleColumnsSizeMap, newAllColumnCount, prevState.tableContainerWidth);
+      return {
+        columnSizing: columnSizing,
+        allColumnSizing: _objectSpread(_objectSpread({}, initColumnsSizeMap), columnSizing),
+        allColumnCount: newAllColumnCount,
+        tableContainerWidth: prevState.tableContainerWidth,
+        initColumnsSizeMap: columnSizeMap
+      };
+    });
+  }, [columnVisibleConfig, tableId, tableKey, tableKeyPrefixCls, calculateColumnSizing]);
+
+  /**
+   * 列宽变化
+   * 1。列宽增加，不重新计算其他列
+   * 2.列宽减小：
+   * 列宽之和大于容器宽度，不重新计算
+   * 列宽之和小于容器宽度，当前列的下一列/上一列，增加列宽之与大于容器宽度差值
+   */
+  var handleColumnSizingChange = useCallback(function (data) {
+    if (!data) return;
+    var changedColumn = data();
+    if (!changedColumn) return;
+    setState(function (prevState) {
+      var changedColumnKey = Object.keys(changedColumn)[0];
+      if (!changedColumnKey) return prevState;
+      var oldWidth = prevState.columnSizing[changedColumnKey] || 0;
+      var newWidth = changedColumn[changedColumnKey] || 0;
+      var widthDiff = newWidth - oldWidth; // 计算宽度变化
+
+      // 创建新的列宽映射
+      var newVisibleColumnsSizing = _objectSpread(_objectSpread({}, prevState.columnSizing), changedColumn);
+
+      // 计算当前总宽度
+      var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
+        return Number(sum || 0) + Number(width || 0);
+      }, 0);
+      var containerWidth = getTableWidth() - 10 || 0;
+
+      // 处理列宽变大
+      if (widthDiff > 0) {
+        // 只更新变大的列的宽度
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing || {}), newVisibleColumnsSizing),
+          columnSizing: newVisibleColumnsSizing
+        });
+      }
+
+      // 处理列宽缩小
+      if (widthDiff < 0) {
+        // 如果缩小后总列宽小于容器宽度
+        if (totalWidth < containerWidth) {
+          var widthDifference = containerWidth - totalWidth; // 计算差值
+
+          // 找到当前列的索引
+          var columns = Object.keys(prevState.columnSizing);
+          var currentIndex = columns.indexOf(changedColumnKey);
+          var targetColumnKey;
+
+          // 如果当前列是最后一列，处理前一列
+          if (currentIndex === columns.length - 1) {
+            targetColumnKey = columns[currentIndex - 1]; // 前一列
+          } else {
+            targetColumnKey = columns[currentIndex + 1]; // 下一列
+          }
+          // 增加目标列的宽度
+          if (targetColumnKey) {
+            newVisibleColumnsSizing[targetColumnKey] = (newVisibleColumnsSizing[targetColumnKey] || 0) + widthDifference;
+          }
+        }
+
+        // 更新当前列的宽度
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing || {}), newVisibleColumnsSizing),
+          columnSizing: newVisibleColumnsSizing
+        });
+      }
+      return prevState; // 如果没有变化，返回原状态
+    });
+  }, [tableId, tableKeyPrefixCls]);
+  return {
+    columnSizing: state.columnSizing,
+    allColumnCount: state.allColumnCount,
+    onColumnSizingChange: handleColumnSizingChange,
+    tableContainerWidth: state.tableContainerWidth,
+    initializeColumnSizing: initializeColumnSizing,
+    handleVisibleConfigChange: handleVisibleConfigChange
+  };
+};

package/dist/components/TableMax/hooks/useColumnWidth.d.ts

@@ -6,13 +6,17 @@ interface UseColumnWidthProps {
     tableKeyPrefixCls: string;
     columnVisibleConfig?: Record<string, boolean>;
     tableKey: string;
+    cacheMaxAge?: number;
 }
-export declare const useColumnWidth: ({ tableContentRef, tableId, tableKeyPrefixCls, columnVisibleConfig, tableKey, }: UseColumnWidthProps) => {
+/**
+ * 自定义Hook：表格列宽计算和管理
+ */
+export declare const useColumnWidth: ({ tableContentRef, tableId, tableKeyPrefixCls, columnVisibleConfig, tableKey, cacheMaxAge, }: UseColumnWidthProps) => {
     columnSizing: ColumnSizing;
     allColumnCount: number;
-    onColumnSizingChange: (data: any) => void;
+    onColumnSizingChange: (updater: any) => void;
     tableContainerWidth: number;
     initializeColumnSizing: (columns: any) => void;
-    handleVisibleConfigChange: (key: any, value: any) => void;
+    handleVisibleConfigChange: (key: string, value: boolean) => void;
 };
 export {};