@arim-aisdc/public-components 2.3.16 → 2.3.18

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

@@ -42,6 +42,7 @@ table {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    height: 100%;
 
     .cell-left-header {
       display: -webkit-box;
@@ -76,6 +77,14 @@ table {
     display: inline-block;
     // opacity: 1;
   }
+  &:hover {
+    .sort-flag {
+      display: flex;
+    }
+    .filter-icon {
+      display: inline-block;
+    }
+  }
 
   .cell-resize-handler {
     position: absolute;
@@ -95,22 +104,29 @@ table {
       top: 0%;
       height: 100%;
       z-index: 99999;
+      cursor: ew-resize;
     }
   }
 
+  .cell-resize-handler::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: ew-resize;
+  }
+
   .column-resizer.column-is-resizing {
     height: 60%;
     top: 20%;
   }
 
-  &:hover {
-    .sort-flag {
-      display: flex;
-    }
-    .filter-icon {
-      display: inline-block;
-    }
-  }
+
+
+  
+
 }
 
 .table-thead-tr:nth-last-child(2) {
@@ -227,3 +243,10 @@ table {
   // background-color: #000;
   background-color: green;
 }
+.column-resizing-divide-line {
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  contain: strict;
+  cursor: ew-resize;
+}

package/dist/components/TableMax/TableMax.js

@@ -26,7 +26,7 @@ import dayjs from 'dayjs';
 import { cloneDeep, debounce } from 'lodash';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useConfig } from "../ConfigProvider";
-import TableBody from "./TableBody";
+import TableBody, { MemoizedTableBody } from "./TableBody";
 import TableHeader from "./TableHeader";
 import { InputType } from "./components/ColumnEdit";
 import { setDefaultFilterFn } from "./components/ColumnFilterV2";
@@ -140,7 +140,7 @@ var TableMax = function TableMax(_ref) {
     getCellProps = _ref.getCellProps,
     getHeaderCellProps = _ref.getHeaderCellProps,
     _ref$rowHeight = _ref.rowHeight,
-    rowHeight = _ref$rowHeight === void 0 ? 32 : _ref$rowHeight,
+    rowHeight = _ref$rowHeight === void 0 ? 42 : _ref$rowHeight,
     _ref$defaultColumnFil = _ref.defaultColumnFilters,
     defaultColumnFilters = _ref$defaultColumnFil === void 0 ? [] : _ref$defaultColumnFil,
     getColumnFiltersData = _ref.getColumnFiltersData,
@@ -185,7 +185,9 @@ var TableMax = function TableMax(_ref) {
     _ref$disableColumnDra = _ref.disableColumnDrag,
     disableColumnDrag = _ref$disableColumnDra === void 0 ? false : _ref$disableColumnDra,
     request = _ref.request,
-    onEditValueChange = _ref.onEditValueChange;
+    onEditValueChange = _ref.onEditValueChange,
+    hasTotalRow = _ref.hasTotalRow,
+    totalDatas = _ref.totalDatas;
   var tableMaxRef = useRef(null);
   // 表格元素
   var tableContentRef = useRef(null);
@@ -965,10 +967,6 @@ var TableMax = function TableMax(_ref) {
     getPinShadowInfo();
   }, [getPinShadowInfo]);
 
-  // useEffect(() => {
-  //   console.log(table.getState().columnSizing, 111);
-  // }, [table.getState().columnSizing]);
-
   // 获取展示阴影的列
   var shadowColumnInfo = useMemo(function () {
     var _pop, _shift;
@@ -1046,7 +1044,9 @@ var TableMax = function TableMax(_ref) {
     getRowHoverTipConfig: getRowHoverTipConfig,
     tableTooltip: tableTooltip,
     compactMode: compactMode,
-    onEditValueChange: onEditValueChange
+    onEditValueChange: onEditValueChange,
+    hasTotalRow: hasTotalRow,
+    totalDatas: totalDatas
   };
   var changeCompactMode = function changeCompactMode() {
     setCompactMode(!compactMode);
@@ -1198,7 +1198,7 @@ var TableMax = function TableMax(_ref) {
             style: {
               width: "100%"
             },
-            children: /*#__PURE__*/_jsx(TableBody, _objectSpread({}, tableBodyProps))
+            children: table.getState().columnSizingInfo.isResizingColumn ? /*#__PURE__*/_jsx(MemoizedTableBody, _objectSpread({}, tableBodyProps)) : /*#__PURE__*/_jsx(TableBody, _objectSpread({}, tableBodyProps))
           })]
         })
       }), pagination && /*#__PURE__*/_jsx("div", {

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

@@ -1,13 +1,13 @@
 import { TableMaxColumnType } from "../../type";
-export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
 declare const customSortFns: {
-    numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-    stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-    timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
-    numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+    numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+    stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+    timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+    numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
 };
 export default customSortFns;
 export type SortFnType = keyof typeof customSortFns | undefined;

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

@@ -0,0 +1,9 @@
+import { Header, Table } from '@tanstack/react-table';
+export declare const useColumnResize: <T>({ header, table, tableContentRef, rootContainer }: {
+    header: Header<T, unknown>;
+    table: Table<T>;
+    tableContentRef: React.RefObject<HTMLDivElement>;
+    rootContainer?: string;
+}) => {
+    handleResizeStart: (e: React.MouseEvent) => void;
+};

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

@@ -0,0 +1,162 @@
+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); }
+// hooks/useColumnResize.ts
+import { useEffect, useRef, useCallback } from 'react';
+export var useColumnResize = function useColumnResize(_ref) {
+  var header = _ref.header,
+    table = _ref.table,
+    tableContentRef = _ref.tableContentRef,
+    rootContainer = _ref.rootContainer;
+  // DOM元素引用
+  var resizeLineRef = useRef(null);
+  var overlayRef = useRef(null);
+
+  // 状态和位置引用
+  var isResizingRef = useRef(false);
+  var startXRef = useRef(0);
+  var startWidthRef = useRef(0);
+  var containerHeightRef = useRef(0);
+  var rafIdRef = useRef(0);
+  var lastClientXRef = useRef(0); // 新增：记录最后的位置
+
+  // 初始化创建DOM元素
+  useEffect(function () {
+    var container = rootContainer ? document.querySelector(rootContainer) : document.body;
+    if (!container) return;
+
+    // 创建分割线
+    var resizeLine = document.createElement('div');
+    resizeLine.className = 'column-resizing-divide-line';
+    Object.assign(resizeLine.style, {
+      position: 'fixed',
+      pointerEvents: 'none',
+      zIndex: '1000',
+      display: 'none',
+      width: '1px',
+      backgroundColor: '#1890ff',
+      willChange: 'transform',
+      transition: 'none',
+      top: '0',
+      height: '0',
+      transform: 'translate3d(0,0,0)'
+    });
+
+    // 创建遮罩层
+    var overlay = document.createElement('div');
+    overlay.className = 'column-resize-overlay';
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100vw',
+      height: '100vh',
+      zIndex: '9998',
+      cursor: 'ew-resize',
+      display: 'none',
+      pointerEvents: 'auto',
+      backgroundColor: 'transparent'
+    });
+    container.appendChild(resizeLine);
+    container.appendChild(overlay);
+    resizeLineRef.current = resizeLine;
+    overlayRef.current = overlay;
+    return function () {
+      cancelAnimationFrame(rafIdRef.current);
+      if (resizeLine.parentNode) container.removeChild(resizeLine);
+      if (overlay.parentNode) container.removeChild(overlay);
+    };
+  }, [rootContainer]);
+
+  // 更新分割线位置
+  var updateResizeLinePosition = useCallback(function (x, height) {
+    if (!resizeLineRef.current) return;
+    lastClientXRef.current = x; // 更新最后的位置
+    resizeLineRef.current.style.transform = "translate3d(".concat(x, "px, 0, 0)");
+    resizeLineRef.current.style.height = "".concat(height, "px");
+  }, []);
+
+  // 处理拖动开始
+  var handleResizeStart = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var elem = tableContentRef.current;
+    var clientRect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect();
+    var containerTop = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) || 0;
+    var containerHeight = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.height) || 0;
+
+    // 设置初始状态
+    isResizingRef.current = true;
+    startXRef.current = e.clientX;
+    startWidthRef.current = header.column.getSize();
+    containerHeightRef.current = containerHeight;
+    lastClientXRef.current = e.clientX;
+
+    // 显示并定位元素
+    if (resizeLineRef.current) {
+      resizeLineRef.current.style.top = "".concat(containerTop, "px");
+      resizeLineRef.current.style.display = 'block';
+      updateResizeLinePosition(e.clientX, containerHeight);
+    }
+    if (overlayRef.current) {
+      overlayRef.current.style.display = 'block';
+    }
+
+    // 设置全局样式
+    document.body.classList.add('column-resizing');
+    document.body.style.cursor = 'ew-resize';
+    document.body.style.userSelect = 'none';
+
+    // 移动处理函数
+    var onMove = function onMove(moveEvent) {
+      if (!isResizingRef.current) return;
+      rafIdRef.current = requestAnimationFrame(function () {
+        updateResizeLinePosition(moveEvent.clientX, containerHeight);
+      });
+    };
+
+    // 结束处理函数
+    var onEnd = function onEnd() {
+      if (!isResizingRef.current) return;
+      cancelAnimationFrame(rafIdRef.current);
+
+      // 立即更新列宽（关键修改点）
+      var finalDelta = lastClientXRef.current - startXRef.current;
+      var newWidth = Math.max(20, startWidthRef.current + finalDelta);
+      table.setColumnSizing(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, _defineProperty({}, header.column.id, newWidth));
+      });
+
+      // 隐藏元素
+      if (resizeLineRef.current) {
+        resizeLineRef.current.style.display = 'none';
+      }
+      if (overlayRef.current) {
+        overlayRef.current.style.display = 'none';
+      }
+
+      // 恢复全局样式
+      document.body.classList.remove('column-resizing');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      isResizingRef.current = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onEnd);
+    };
+    document.addEventListener('mousemove', onMove, {
+      passive: true
+    });
+    document.addEventListener('mouseup', onEnd, {
+      once: true
+    });
+
+    // 调用原始处理程序
+    header.getResizeHandler()(e);
+  }, [header, table, tableContentRef, updateResizeLinePosition]);
+  return {
+    handleResizeStart: handleResizeStart
+  };
+};

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

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