@arim-aisdc/public-components 2.3.5 → 2.3.7

package/dist/components/BaseInfo/BaseInfo.d.ts

@@ -17,7 +17,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
     value: any;
     field: string;
     label?: string;
-    text: string | JSX.Element | Element;
+    text: string | Element | JSX.Element;
     units?: string;
     width?: string;
     labelWidth?: string;

package/dist/components/TableMax/TableHeader/Cell.js

@@ -135,7 +135,8 @@ var Cell = function Cell(_ref) {
       }), !cannotDragColumn.includes(header.column.id) ? /*#__PURE__*/_jsxs("div", {
         className: "cell-right",
         children: [canSorting && header.column.getCanSort() ? /*#__PURE__*/_jsx(Sort, {
-          sort: header.column.getIsSorted()
+          sort: header.column.getIsSorted(),
+          onClick: header.column.getToggleSortingHandler()
         }) : null, canFilter && columnDef.enableColumnFilter !== false ? /*#__PURE__*/_jsx(ColumnFilter, {
           column: header.column,
           manualFiltering: manualFiltering

package/dist/components/TableMax/TableHeader/index.less

@@ -102,6 +102,15 @@ table {
     height: 60%;
     top: 20%;
   }
+
+  &:hover {
+    .sort-flag {
+      display: inline-block;
+    }
+    .filter-icon {
+      display: inline-block;
+    }
+  }
 }
 
 .table-thead-tr:nth-last-child(2) {

package/dist/components/TableMax/TableMax.js

@@ -54,7 +54,7 @@ var getCurrentRouterName = function getCurrentRouterName() {
   return window.location.pathname.slice(1);
 };
 var TableMax = function TableMax(_ref) {
-  var _JSON$parse, _tableContentRef$curr;
+  var _JSON$parse, _tableContentRef$curr, _tableContentRef$curr2;
   var tableId = _ref.tableId,
     originColumns = _ref.columns,
     _ref$datas = _ref.datas,
@@ -187,6 +187,10 @@ var TableMax = function TableMax(_ref) {
     request = _ref.request,
     onEditValueChange = _ref.onEditValueChange;
   var tableMaxRef = useRef(null);
+  // 表格元素
+  var tableContentRef = useRef(null);
+  var tableHeaderRef = useRef(null);
+  var tableBodyRef = useRef(null);
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
@@ -283,7 +287,7 @@ var TableMax = function TableMax(_ref) {
     columnPinning = _useState20[0],
     setColumnPinning = _useState20[1];
   var _useColumnWidth = useColumnWidth({
-      tableMaxRef: tableMaxRef,
+      tableContentRef: tableContentRef,
       tableId: tableId,
       tableKeyPrefixCls: tableKeyPrefixCls,
       columnVisibleConfig: columnVisibleConfig,
@@ -294,6 +298,7 @@ var TableMax = function TableMax(_ref) {
     onColumnSizingChange = _useColumnWidth.onColumnSizingChange,
     tableContainerWidth = _useColumnWidth.tableContainerWidth,
     handleVisibleConfigChange = _useColumnWidth.handleVisibleConfigChange;
+  console.log('columnSizing', columnSizing, tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.getBoundingClientRect().width, tableContainerWidth);
 
   /**列筛选 */
   var _useState21 = useState(defaultColumnFilters),
@@ -426,10 +431,6 @@ var TableMax = function TableMax(_ref) {
     onExpandedChange: setExpanded,
     sortDescFirst: true // 首次排序为递减排序，不加这个属性的话，有些列的排序会有问题
   });
-  // 表格元素
-  var tableContentRef = useRef(null);
-  var tableHeaderRef = useRef(null);
-  var tableBodyRef = useRef(null);
 
   // 暴露给外部的api
   useImperativeHandle(refInstance, function () {
@@ -952,7 +953,7 @@ var TableMax = function TableMax(_ref) {
   useEffect(function () {
     // 表格宽度变化时（比如调整页面宽度大小），重新计算是否展示阴影
     getPinShadowInfo();
-  }, [tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth, table.getState().columnSizing]);
+  }, [tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.clientWidth, table.getState().columnSizing]);
   var scrollHandler = useCallback(function (event) {
     if (!event.currentTarget) return;
     tableHeaderRef.current.scrollLeft = event.currentTarget.scrollLeft / event.currentTarget.scrollWidth * (tableHeaderRef === null || tableHeaderRef === void 0 ? void 0 : tableHeaderRef.current.scrollWidth);

package/dist/components/TableMax/components/ColumnFilterV2/DateRange/index.js

@@ -4,11 +4,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useTranslation } from "../../../../../hooks/useTranslation";
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import { defaultDateFormat } from "../index";
 import "./index.less";
-import { useTranslation } from "../../../../../hooks/useTranslation";
 import { jsx as _jsx } from "react/jsx-runtime";
 var defaultRangePresets = [{
   label: '最近7天',

package/dist/components/TableMax/components/ColumnFilterV2/index.js

@@ -129,6 +129,7 @@ export function ColumnFilter(_ref) {
     setFilterPanelVisible(false);
   }, []);
   return /*#__PURE__*/_jsxs("div", {
+    className: "filter-icon-wrapper",
     children: [/*#__PURE__*/_jsx("i", {
       className: "iconfont-table icon-table-filter filter-icon ".concat(!!column.getFilterValue() ? 'height-light-filter' : ''),
       onClick: onFilterIconClick

package/dist/components/TableMax/components/ColumnFilterV2/index.less

@@ -1,9 +1,11 @@
 .filter-icon {
   cursor: pointer;
+  display: none;
 }
 
 .height-light-filter {
   color: @global-primary-color;
+  display: inline-block !important;
 }
 
 .filter-panel-wrapper {
@@ -21,3 +23,8 @@
   padding: 8px 12px;
   border-radius: 2px;
 }
+
+.filter-icon-wrapper {
+  line-height: 32px;
+  height: 32px;
+}

package/dist/components/TableMax/components/ColumnSort/index.d.ts

@@ -1,5 +1,6 @@
 import './index.less';
-declare const Sort: ({ sort }: {
+declare const Sort: ({ sort, onClick }: {
     sort: string | boolean;
+    onClick: (e: any) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Sort;

package/dist/components/TableMax/components/ColumnSort/index.js

@@ -2,10 +2,12 @@ import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Sort = function Sort(_ref) {
-  var sort = _ref.sort;
+  var sort = _ref.sort,
+    onClick = _ref.onClick;
   if (sort === 'asc') {
     return /*#__PURE__*/_jsxs("span", {
-      className: "sort-flag",
+      className: "sort-flag show-sort-flag",
+      onClick: onClick,
       children: [/*#__PURE__*/_jsx("i", {
         className: "triangle-up triangle-up-red"
       }), /*#__PURE__*/_jsx("i", {
@@ -14,7 +16,8 @@ var Sort = function Sort(_ref) {
     });
   } else if (sort === 'desc') {
     return /*#__PURE__*/_jsxs("span", {
-      className: "sort-flag",
+      className: "sort-flag show-sort-flag",
+      onClick: onClick,
       children: [/*#__PURE__*/_jsx("i", {
         className: "triangle-up"
       }), /*#__PURE__*/_jsx("i", {
@@ -24,6 +27,7 @@ var Sort = function Sort(_ref) {
   }
   return /*#__PURE__*/_jsxs("span", {
     className: "sort-flag",
+    onClick: onClick,
     children: [/*#__PURE__*/_jsx("i", {
       className: "triangle-up"
     }), /*#__PURE__*/_jsx("i", {

package/dist/components/TableMax/components/ColumnSort/index.less

@@ -5,6 +5,7 @@
   flex-direction: column;
   width: 16px;
   cursor: pointer;
+  display: none;
 
   .triangle-up {
     display: block;
@@ -33,3 +34,7 @@
     }
   }
 }
+
+.show-sort-flag {
+  display: inline-block !important;
+}

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { ColumnSizing } from '../TableMax';
 interface UseColumnWidthProps {
-    tableMaxRef: React.RefObject<HTMLDivElement>;
+    tableContentRef: React.RefObject<HTMLDivElement>;
     tableId: string;
     tableKeyPrefixCls: string;
     columnVisibleConfig?: Record<string, boolean>;
     tableKey: string;
 }
-export declare const useColumnWidth: ({ tableMaxRef, tableId, tableKeyPrefixCls, columnVisibleConfig, tableKey, }: UseColumnWidthProps) => {
+export declare const useColumnWidth: ({ tableContentRef, tableId, tableKeyPrefixCls, columnVisibleConfig, tableKey, }: UseColumnWidthProps) => {
     columnSizing: ColumnSizing;
     allColumnCount: number;
     onColumnSizingChange: (data: any) => void;

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

@@ -14,9 +14,10 @@ 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 tableMaxRef = _ref.tableMaxRef,
+  var tableContentRef = _ref.tableContentRef,
     tableId = _ref.tableId,
     tableKeyPrefixCls = _ref.tableKeyPrefixCls,
     _ref$columnVisibleCon = _ref.columnVisibleConfig,
@@ -28,22 +29,33 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       allColumnSizing: {},
       //所有列的列宽
       allColumnCount: 0,
-      tableContainerWidth: undefined
+      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.容器变小，不重新计算其他列
+  * 1.容器变小:
+  * 找到原始columns设置列宽度的第一列
+  * 如果当前列的宽度大于初始宽度，则按照容器变化的总宽度，除选择列和展开列外，其他列平分容器减小的宽度
+  * 如果当前列的宽度小于等于初始宽度，则列宽均不变
   * 2.容器变大：
   * 列宽之和大于容器宽度，不重新计算
   * 列宽之和小于容器宽度，除选择列和展开列外，其他列平分 列宽之和与容器宽度的差值
   */
   var handleResize = useCallback(function () {
-    if (!tableMaxRef.current) return;
-    var newWidth = Math.floor(tableMaxRef.current.clientWidth);
+    if (!tableContentRef.current) return;
+    var newWidth = getTableWidth();
     setState(function (prevState) {
       // 计算可见列，排除特定列
       var visibleColumns = Object.keys(prevState.columnSizing).filter(function (key) {
@@ -56,7 +68,7 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       }, 0);
 
       // 容器变大时的逻辑
-      if (newWidth > prevState.tableContainerWidth) {
+      if (prevState.tableContainerWidth > 0 && newWidth > prevState.tableContainerWidth) {
         if (totalVisibleWidth < newWidth) {
           // 计算剩余宽度
           var remainWidth = newWidth - totalVisibleWidth - 10;
@@ -77,27 +89,42 @@ export var useColumnWidth = function useColumnWidth(_ref) {
             });
           }
         }
+      } else if (prevState.tableContainerWidth > 0 && 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
       });
     });
-  }, [tableMaxRef.current]);
+  }, [tableContentRef.current]);
 
   // 使用防抖处理容器宽度变化
   var debouncedHandleResize = useMemo(function () {
     return debounce(handleResize, 200);
   }, [handleResize]);
   useEffect(function () {
-    if (!tableMaxRef.current) return;
+    if (!tableContentRef.current) return;
     var resizeObserver = new ResizeObserver(debouncedHandleResize);
-    resizeObserver.observe(tableMaxRef.current);
+    resizeObserver.observe(tableContentRef.current);
     return function () {
       resizeObserver.disconnect();
       debouncedHandleResize.cancel(); // 清理防抖
     };
-  }, [tableMaxRef.current, debouncedHandleResize]);
+  }, [tableContentRef.current, debouncedHandleResize]);
 
   /**
   * 列显示隐藏后调整列宽
@@ -122,11 +149,10 @@ export var useColumnWidth = function useColumnWidth(_ref) {
           })
         });
       } 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 containerWidth = getTableWidth() - 10 || 0;
         // 计算当前总宽度
         var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
           return Number(sum || 0) + Number(width || 0);
@@ -164,8 +190,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
    * */
   var calculateColumnSizing = useCallback(function (columnsSizeMap, allColumnCount, containerWidth) {
     var _Object$keys$filter;
-    if (!tableMaxRef.current || !columnsSizeMap) return {};
-    var currentWidth = containerWidth || state.tableContainerWidth || tableMaxRef.current.clientWidth;
+    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;
@@ -179,8 +205,6 @@ export var useColumnWidth = function useColumnWidth(_ref) {
 
     // 处理未设置宽度的列
     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]) {
@@ -237,7 +261,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
           columnSizing: columnSizing,
           allColumnCount: _newAllColumnCount,
           allColumnSizing: _objectSpread(_objectSpread({}, _initColumnsSizeMap), columnSizing),
-          tableContainerWidth: prevState.tableContainerWidth
+          tableContainerWidth: prevState.tableContainerWidth,
+          initColumnsSizeMap: columnSizeMap
         };
       });
       return;
@@ -263,7 +288,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
         columnSizing: columnSizing,
         allColumnSizing: _objectSpread(_objectSpread({}, initColumnsSizeMap), columnSizing),
         allColumnCount: newAllColumnCount,
-        tableContainerWidth: prevState.tableContainerWidth
+        tableContainerWidth: prevState.tableContainerWidth,
+        initColumnsSizeMap: columnSizeMap
       };
     });
   }, [columnVisibleConfig, tableId, tableKey, tableKeyPrefixCls, calculateColumnSizing]);
@@ -280,7 +306,6 @@ export var useColumnWidth = function useColumnWidth(_ref) {
     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;
@@ -295,7 +320,7 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       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;
+      var containerWidth = getTableWidth() - 10 || 0;
       console.log(widthDiff, newWidth, oldWidth, changedColumnKey, prevState, 3344);
 
       // 处理列宽变大

package/dist/components/TableMax/tableMax.less

@@ -5,6 +5,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   // justify-content: center;
   // align-items: center;
 
@@ -119,7 +120,6 @@
       overflow-y: hidden !important;
       display: flex;
       flex-direction: column;
-
       border: @global-table-max-border;
       border-bottom: @global-table-max-center-border-bottom;
       border-radius: @global-table-max-center-border-radius;
@@ -146,7 +146,7 @@
 
       .table-body {
         flex: 1;
-        overflow: auto scroll;
+        overflow: scroll scroll;
         font-weight: @global-table-max-body-font-weight;
         // background: @tableColor2;
         .tbody-tr-td {

package/dist/hooks/useTranslation.js

@@ -10,6 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import * as React from 'react';
 import { FormItemType } from "../components/QueryFilter";
 import { useConfig } from "../components/ConfigProvider";
+import dayjs from 'dayjs';
 function deepMerge(obj1, obj2) {
   // 创建一个新对象，避免直接修改原始对象
   var result = _objectSpread({}, obj1);
@@ -96,7 +97,7 @@ export var useTranslation = function useTranslation(locales) {
         groupPrefix = _options$groupPrefix === void 0 ? "" : _options$groupPrefix;
       var processArray = function processArray(array) {
         return array.map(function (item) {
-          if (_typeof(item) === "object" && !Array.isArray(item)) {
+          if (_typeof(item) === "object" && !(item instanceof Date) && !(item instanceof dayjs) && !Array.isArray(item)) {
             var newItem = _objectSpread({}, item);
             if (fieldKey in newItem) {
               // 如果有分组前缀，动态拼接键

package/package.json

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