@arim-aisdc/public-components 2.1.2 → 2.1.3

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

@@ -0,0 +1,351 @@
+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小时
+
+export var useColumnWidth = function useColumnWidth(_ref) {
+  var tableMaxRef = _ref.tableMaxRef,
+    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
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+
+  /**
+  * 处理容器宽度变化的逻辑
+  * 1.容器变小，不重新计算其他列
+  * 2.容器变大：
+  * 列宽之和大于容器宽度，不重新计算
+  * 列宽之和小于容器宽度，除选择列和展开列外，其他列平分 列宽之和与容器宽度的差值
+  */
+  var handleResize = useCallback(function () {
+    if (!tableMaxRef.current) return;
+    var newWidth = Math.floor(tableMaxRef.current.clientWidth);
+    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 (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;
+            });
+            console.log(newVisibleColumnsSizing, 'newVisibleColumnsSizing');
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              columnSizing: newVisibleColumnsSizing,
+              allColumnSizing: _objectSpread(_objectSpread({}, prevState.allColumnSizing || {}), newVisibleColumnsSizing),
+              tableContainerWidth: newWidth
+            });
+          }
+        }
+      }
+      // 容器变小时，列宽保持不变
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        tableContainerWidth: newWidth
+      });
+    });
+  }, [tableMaxRef.current]);
+
+  // 使用防抖处理容器宽度变化
+  var debouncedHandleResize = useMemo(function () {
+    return debounce(handleResize, 200);
+  }, [handleResize]);
+  useEffect(function () {
+    if (!tableMaxRef.current) return;
+    var resizeObserver = new ResizeObserver(debouncedHandleResize);
+    resizeObserver.observe(tableMaxRef.current);
+    return function () {
+      resizeObserver.disconnect();
+      debouncedHandleResize.cancel(); // 清理防抖
+    };
+  }, [tableMaxRef.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 _tableMaxRef$current;
+        //列宽减少
+        var newVisibleColumnsSizing = prevState.columnSizing;
+        delete newVisibleColumnsSizing[key];
+        var containerWidth = ((_tableMaxRef$current = tableMaxRef.current) === null || _tableMaxRef$current === void 0 ? void 0 : _tableMaxRef$current.clientWidth) - 10 || 0;
+        // 计算当前总宽度
+        var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
+          return Number(sum || 0) + Number(width || 0);
+        }, 0);
+        console.log(newVisibleColumnsSizing, totalWidth, containerWidth, 'newVisibleColumnsSizing');
+        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;
+          });
+          console.log(newVisibleColumnsSizing, joinCalculateColumns, 'newVisibleColumnsSizing', 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 (!tableMaxRef.current || !columnsSizeMap) return {};
+    var currentWidth = containerWidth || state.tableContainerWidth || tableMaxRef.current.clientWidth;
+    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);
+    console.log(remainColumnCount, 'remainColumnCount');
+
+    // 处理未设置宽度的列
+    if (remainColumnCount > 0) {
+      var defaultMinSize = 120;
+      var defaultMaxSize = 240;
+      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
+        };
+      });
+      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);
+      console.log(columnSizing, _objectSpread(_objectSpread({}, initColumnsSizeMap), columnSizing), 'columnSizing11');
+      return {
+        columnSizing: columnSizing,
+        allColumnSizing: _objectSpread(_objectSpread({}, initColumnsSizeMap), columnSizing),
+        allColumnCount: newAllColumnCount,
+        tableContainerWidth: prevState.tableContainerWidth
+      };
+    });
+  }, [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 _tableMaxRef$current2;
+      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);
+      console.log(newVisibleColumnsSizing, 'newVisibleColumnsSizing');
+
+      // 计算当前总宽度
+      var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
+        return Number(sum || 0) + Number(width || 0);
+      }, 0);
+      var containerWidth = ((_tableMaxRef$current2 = tableMaxRef.current) === null || _tableMaxRef$current2 === void 0 ? void 0 : _tableMaxRef$current2.clientWidth) - 10 || 0;
+      console.log(widthDiff, newWidth, oldWidth, changedColumnKey, prevState, 3344);
+
+      // 处理列宽变大
+      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]; // 下一列
+          }
+          console.log(widthDifference, newVisibleColumnsSizing[targetColumnKey], 'newVisibleColumnsSizing');
+          // 增加目标列的宽度
+          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/type.d.ts

@@ -30,6 +30,10 @@ export type DownloadProps = {
     title: string;
     method?: string;
 };
+export type IGetOptionType = (inputValue: string) => Promise<{
+    label: any;
+    value: any;
+}[]>;
 export type OnSelectChangeType = (row: any, original: any, selected: boolean, event: any) => void;
 export type IMenuOptionsType = {
     label: string;
@@ -303,6 +307,8 @@ export type TableMaxProps = {
     compactMode?: boolean;
     /**request函数 用于下载*/
     request?: (...params: any[]) => Promise<Blob>;
+    /**编辑时修改组件值时触发的事件 */
+    onEditValueChange?: (field: string, value: any, extra?: any) => void;
 };
 export interface TableMaxColumnType {
     /**每一列的id是唯一的 */
@@ -330,10 +336,7 @@ export interface TableMaxColumnType {
         label: any;
     }[];
     /**通过该函数获取可选项 */
-    getFilterOptionsFn?: (inputValue: string) => Promise<{
-        label: any;
-        value: any;
-    }[]>;
+    getFilterOptionsFn?: IGetOptionType;
     /**列筛选时 使用的过滤函数 */
     filterFn?: FilterFnType | ((row: any, columnId: any, filterValue: any) => boolean);
     /**筛选组件属性配置 */
@@ -352,11 +355,15 @@ export interface TableMaxColumnType {
     editable?: boolean;
     /**编辑时使用的编辑组件类型，默认为Input组件 */
     editComType?: InputType;
+    /**编辑时使用的编辑组件disabled属性，默认false(可编辑) */
+    editComDisabled?: boolean;
     /**使用select选择框编辑时的可选项 */
     editOptions?: {
         value: any;
         label: any;
     }[];
+    /**使用select选择框编辑时远程搜索函数（输入时触发搜索，已添加节流） */
+    getEditOptionsFn?: IGetOptionType;
     /** @deprecated 已废弃，使用tooltip替代；表格单元格超出部分省略号展示
      * 是否显示tooltip
      */
@@ -373,4 +380,6 @@ export interface TableMaxColumnType {
     sortingKey?: string;
     /** 编辑时该列是否必填 */
     required?: boolean;
+    /**是否可调整列宽大小 */
+    enableResizing?: boolean;
 }

package/dist/components/TableMax/utils.d.ts

@@ -32,3 +32,4 @@ export declare const downloadExcel: ({ url, data, title, setDownLoading, method,
     method?: string;
     request?: (...params: any[]) => Promise<Blob>;
 }) => void;
+export declare const filterOptions: (inputValue: any, option: any) => boolean;

package/dist/components/TableMax/utils.js

@@ -186,4 +186,11 @@ export var downloadExcel = function downloadExcel(_ref6) {
     btn = null;
   });
   setDownLoading(false);
+};
+export var filterOptions = function filterOptions(inputValue, option) {
+  var _option$label;
+  // console.log('inputValue', inputValue, option);
+  var input = (inputValue !== null && inputValue !== void 0 ? inputValue : '').toUpperCase().trim();
+  var optionFilterString = ('' + ((_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.children)).toUpperCase().trim();
+  return optionFilterString.indexOf(input) !== -1;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",