fix(Table): disabled state incorrectly modified by checkAll

packages/components/table/BaseTable.tsx

@@ -54,9 +54,8 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
   const bottomContentRef = useRef<HTMLDivElement>(null);
   const [tableFootHeight, setTableFootHeight] = useState(0);
 
-  const allTableClasses = useClassName();
   const { classPrefix, virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses } =
-    allTableClasses;
+    useClassName();
   // 表格基础样式类
   const { tableClasses, sizeClassNames, tableContentStyles, tableElementStyles } = useStyle(props);
   const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
@@ -489,7 +488,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     tableContentRef,
     tableWidth,
     isWidthOverflow,
-    allTableClasses,
     rowKey,
     scroll: props.scroll,
     cellEmptyContent: props.cellEmptyContent,
@@ -537,7 +535,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
           ),
           // eslint-disable-next-line
           [
-            allTableClasses,
             tableBodyProps.ellipsisOverlayClassName,
             tableBodyProps.rowAndColFixedPosition,
             tableBodyProps.showColumnShadow,

packages/components/table/Cell.tsx

@@ -1,14 +1,16 @@
 import React, { MouseEvent, MutableRefObject, ReactNode } from 'react';
 import classNames from 'classnames';
-import { isFunction, get } from 'lodash-es';
+import { get, isFunction } from 'lodash-es';
+
 import TEllipsis from './Ellipsis';
-import { BaseTableCellParams, RowspanColspan, TableRowData, TdBaseTableProps } from './type';
-import { RowAndColFixedPosition } from './interface';
+import useClassName from './hooks/useClassName';
 import { getColumnFixedStyles } from './hooks/useFixed';
-import { TableClassName } from './hooks/useClassName';
 import { formatClassNames } from './utils';
-import { TooltipProps } from '../tooltip';
-import { PaginationProps } from '../pagination';
+
+import type { PaginationProps } from '../pagination';
+import type { TooltipProps } from '../tooltip';
+import type { RowAndColFixedPosition } from './interface';
+import type { BaseTableCellParams, RowspanColspan, TableRowData, TdBaseTableProps } from './type';
 
 export interface RenderEllipsisCellParams {
   cellNode: ReactNode;
@@ -25,7 +27,6 @@ export interface CellProps {
   dataLength: number;
   cellSpans: RowspanColspan;
   cellEmptyContent: TdBaseTableProps['cellEmptyContent'];
-  tableClassNames: TableClassName;
   tableRef?: MutableRefObject<HTMLDivElement>;
   classPrefix?: string;
   overlayClassName?: string;
@@ -94,11 +95,11 @@ function renderEllipsisCell(cellParams: BaseTableCellParams<TableRowData>, param
 }
 
 const Cell = (props: CellProps) => {
-  const { cellParams, tableClassNames, tableRef, columnLength, classPrefix, overlayClassName, pagination } = props;
+  const { cellParams, tableRef, columnLength, classPrefix, overlayClassName, pagination } = props;
   const { col, colIndex, rowIndex } = cellParams;
   const { cellSpans, dataLength, rowAndColFixedPosition, cellEmptyContent, rowspanAndColspan, onClick } = props;
   const { tableColFixedClasses, tdEllipsisClass, tableBaseClass, tdAlignClasses, tableDraggableClasses } =
-    tableClassNames;
+    useClassName();
 
   const cellNode = renderCell(cellParams, { cellEmptyContent, pagination });
   const tdStyles = getColumnFixedStyles(col, colIndex, rowAndColFixedPosition, tableColFixedClasses);

packages/components/table/TBody.tsx

@@ -2,8 +2,9 @@
 import React, { type CSSProperties, type MutableRefObject, type ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 import { camelCase, get, pick } from 'lodash-es';
+
 import { useLocaleReceiver } from '../locale/LocalReceiver';
-import { TableClassName } from './hooks/useClassName';
+import useClassName from './hooks/useClassName';
 import useRowspanAndColspan from './hooks/useRowspanAndColspan';
 import TR, { ROW_LISTENERS, TABLE_PROPS, type TrProps } from './TR';
 
@@ -25,7 +26,6 @@ export interface TableBodyProps extends BaseTableProps {
   isWidthOverflow?: boolean;
   virtualConfig: VirtualScrollConfig;
   pagination?: PaginationProps;
-  allTableClasses?: TableClassName;
   handleRowMounted?: (params: RowMountedParams) => void;
 }
 
@@ -74,7 +74,7 @@ const trProperties = [
 
 export default function TBody(props: TableBodyProps) {
   // 如果不是变量复用，没必要对每一个参数进行解构（解构过程需要单独的内存空间存储临时变量）
-  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig, allTableClasses } = props;
+  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig } = props;
 
   const { isVirtualScroll } = virtualConfig;
   const renderData = isVirtualScroll ? virtualConfig.visibleData : data;
@@ -84,7 +84,7 @@ export default function TBody(props: TableBodyProps) {
   const { skipSpansMap } = useRowspanAndColspan(data, columns, rowKey, props.rowspanAndColspan);
   const isSkipSnapsMapNotFinish = Boolean(props.rowspanAndColspan && !skipSpansMap.size);
 
-  const { tableFullRowClasses, tableBaseClass } = allTableClasses;
+  const { tableFullRowClasses, tableBaseClass } = useClassName();
   const tbodyClasses = useMemo(() => [tableBaseClass.body], [tableBaseClass.body]);
   const hasFullRowConfig = useMemo(() => firstFullRow || lastFullRow, [firstFullRow, lastFullRow]);
 
@@ -217,7 +217,7 @@ export default function TBody(props: TableBodyProps) {
 
   // 垫上隐藏的 tr 元素高度
   const translate = `translateY(${virtualConfig.translateY}px)`;
-  const posStyle: CSSProperties = isVirtualScroll
+  const posStyle = isVirtualScroll
     ? ({
         transform: translate,
         msTransform: translate,

packages/components/table/TR.tsx

@@ -87,7 +87,7 @@ export default function TR(props: TrProps) {
   const classNames = useClassName();
 
   const trStyles = getRowFixedStyles(
-    get(row, rowKey || 'id'),
+    get(row, rowKey),
     rowIndex,
     dataLength,
     fixedRows,
@@ -102,7 +102,7 @@ export default function TR(props: TrProps) {
   );
 
   const classes = useMemo(() => {
-    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey || 'id');
+    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey);
     return [trStyles?.classes, customClasses];
   }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 
@@ -151,7 +151,6 @@ export default function TR(props: TrProps) {
         columnLength={props.columns.length}
         cellSpans={cellSpans}
         cellEmptyContent={props.cellEmptyContent}
-        tableClassNames={classNames}
         rowspanAndColspan={props.rowspanAndColspan}
         onClick={onClick}
         tableRef={props.tableRef}

packages/components/table/_example/pagination-ajax.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
 import { Table, Tag } from 'tdesign-react';
-import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
 
 import type { PrimaryTableProps, TableProps } from 'tdesign-react';
 
@@ -81,7 +81,7 @@ export default function TableBasic() {
       const { current, pageSize } = pageInfo;
       // 请求可能存在跨域问题
       const url = new URL('https://randomuser.me/api');
-      const params = { page: current, results: pageSize };
+      const params = { page: current, results: pageSize, seed: 'tdesign' };
       Object.keys(params).forEach((key) => url.searchParams.append(key, params[key]));
       const response = await fetch(url.toString()).then((x) => x.json());
       setData(response.results);

packages/components/table/_example/pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Table, Space, Radio, Tag } from 'tdesign-react';
-import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
+import { Radio, Space, Table, Tag } from 'tdesign-react';
 
 import type { TableProps } from 'tdesign-react';
 
@@ -10,11 +10,11 @@ const statusNameListMap = {
   2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
 };
 
+const TOTAL = 60;
 const data: TableProps['data'] = [];
-const total = 59;
-for (let i = 0; i < total; i++) {
+for (let i = 0; i < TOTAL; i++) {
   data.push({
-    index: i,
+    index: i + 1,
     applicant: ['贾明', '张三', '王芳'][i % 3],
     status: i % 3,
     channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
@@ -28,6 +28,12 @@ for (let i = 0; i < total; i++) {
 }
 
 const columns: TableProps['columns'] = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 46,
+    disabled: ({ row }) => row.index % 4 === 0,
+  },
   { colKey: 'serial-number', width: 80, title: '序号' },
   { colKey: 'applicant', title: '申请人', width: '100' },
   {
@@ -51,12 +57,14 @@ const columns: TableProps['columns'] = [
   { colKey: 'channel', title: '签署方式', width: '120' },
   // { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
   { colKey: 'createTime', title: '申请时间' },
-  { colKey: 'row-select', type: 'multiple', width: 46 },
 ];
 
 export default function TableBasic() {
   const [reserveSelectedRowOnPaginate, setReserveSelectedRowOnPaginate] = useState(true);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState(
+    Array.from({ length: TOTAL }, (_, i) => i + 1).filter((n) => n % 8 === 0),
+  );
+
   // const [current, setCurrent] = useState(2);
   // const [pageSize, setPageSize] = useState(5);
 
@@ -82,7 +90,7 @@ export default function TableBasic() {
         pagination={{
           defaultCurrent: 2,
           defaultPageSize: 5,
-          total,
+          total: TOTAL,
           showJumper: true,
           onChange(pageInfo) {
             console.log(pageInfo, 'onChange pageInfo');
@@ -123,8 +131,8 @@ export default function TableBasic() {
         }}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={(val, context) => {
-          setSelectedRowKeys(val);
-          console.log(val, context);
+          setSelectedRowKeys(val as number[]);
+          console.log('onSelectChange', val, context);
         }}
         reserveSelectedRowOnPaginate={reserveSelectedRowOnPaginate}
       />

packages/components/table/_example/select-multiple.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
 import { Table, Tag } from 'tdesign-react';
-import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
 
 import type { TableProps } from 'tdesign-react';
 
@@ -48,7 +48,7 @@ const columns: TableProps['columns'] = [
 const initData: TableProps['data'] = [];
 for (let i = 0; i < 5; i++) {
   initData.push({
-    index: i + 100,
+    index: i + 1,
     applicant: ['贾明', '张三', '王芳'][i % 3],
     status: i % 3,
     channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
@@ -63,11 +63,11 @@ for (let i = 0; i < 5; i++) {
 
 export default function TableSingleSort() {
   const [data] = useState([...initData]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([4]);
 
   const onSelectChange: TableProps['onSelectChange'] = (value, { selectedRowData }) => {
     console.log(value, selectedRowData);
-    setSelectedRowKeys(value);
+    setSelectedRowKeys(value as number[]);
   };
 
   return (

packages/components/table/hooks/useDragSort.ts

@@ -1,16 +1,20 @@
 // 表格 行拖拽 + 列拖拽功能
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
-import Sortable, { SortableEvent, SortableOptions, MoveEvent } from 'sortablejs';
 import { get } from 'lodash-es';
+import Sortable, { MoveEvent, SortableEvent, SortableOptions } from 'sortablejs';
+
+
 import log from '@tdesign/common-js/log/index';
-import swapDragArrayElement from '@tdesign/common-js/utils/swapDragArrayElement';
 import { getColumnDataByKey, getColumnIndexByKey } from '@tdesign/common-js/table/utils';
-import { PaginationProps } from '../../pagination';
-import { TableRowData, TdPrimaryTableProps, DragSortContext } from '../type';
-import useClassName from './useClassName';
+import swapDragArrayElement from '@tdesign/common-js/utils/swapDragArrayElement';
 import { hasClass } from '../../_util/style';
 import useLatest from '../../hooks/useLatest';
-import { BaseTableColumns } from '../interface';
+import useClassName from './useClassName';
+import { DEFAULT_CURRENT, DEFAULT_PAGE_SIZE } from './usePagination';
+
+import type { PaginationProps } from '../../pagination';
+import type { BaseTableColumns } from '../interface';
+import type { DragSortContext, TableRowData, TdPrimaryTableProps } from '../type';
 
 export default function useDragSort(
   props: TdPrimaryTableProps,
@@ -68,8 +72,8 @@ export default function useDragSort(
 
   // 本地分页的表格，index 不同，需加上分页计数
   function getDataPageIndex(index: number, pagination: PaginationProps) {
-    const current = pagination.current ?? pagination.defaultCurrent;
-    const pageSize = pagination.pageSize ?? pagination.defaultPageSize;
+    const current = pagination.current || pagination.defaultCurrent || DEFAULT_CURRENT;
+    const pageSize = pagination.pageSize || pagination.defaultPageSize || DEFAULT_PAGE_SIZE;
     // 开启本地分页的场景
     if (!props.disableDataPage && pagination && data.length > pageSize) {
       return pageSize * (current - 1) + index;

packages/components/table/hooks/usePagination.tsx

@@ -3,6 +3,9 @@ import useConfig from '../../hooks/useConfig';
 import Pagination, { PageInfo, PaginationProps } from '../../pagination';
 import type { TableRowData, TdBaseTableProps } from '../type';
 
+export const DEFAULT_CURRENT = 1;
+export const DEFAULT_PAGE_SIZE = 10;
+
 // 分页功能包含：远程数据排序受控、远程数据排序非受控、本地数据排序受控、本地数据排序非受控 等 4 类功能
 export default function usePagination(props: TdBaseTableProps, tableContentRef: React.RefObject<HTMLDivElement>) {
   const { pagination, data, disableDataPage } = props;
@@ -15,7 +18,7 @@ export default function usePagination(props: TdBaseTableProps, tableContentRef:
   const isControlled = pagination?.current !== undefined;
 
   const calculatePaginatedData = useCallback(
-    (current = 1, pageSize = 10) => {
+    (current = DEFAULT_CURRENT, pageSize = DEFAULT_PAGE_SIZE) => {
       // data 数据数量超出分页大小时，则自动启动本地数据分页
       const shouldPaginate = Boolean(!disableDataPage && data.length > pageSize);
       let newData: TableRowData[] = [];
@@ -32,7 +35,7 @@ export default function usePagination(props: TdBaseTableProps, tableContentRef:
   );
 
   const updateDataSourceAndPaginate = useCallback(
-    (current = 1, pageSize = 10) => {
+    (current = DEFAULT_CURRENT, pageSize = DEFAULT_PAGE_SIZE) => {
       const { newData, shouldPaginate } = calculatePaginatedData(current, pageSize);
       setIsPaginateData(shouldPaginate);
       setDataSource(newData);
@@ -50,15 +53,18 @@ export default function usePagination(props: TdBaseTableProps, tableContentRef:
   // 受控情况
   useEffect(() => {
     if (!pagination || !isControlled) return;
-    const [current, pageSize] = [pagination?.current || 1, pagination?.pageSize ?? 10];
+    const [current, pageSize] = [pagination?.current || DEFAULT_CURRENT, pagination?.pageSize || DEFAULT_PAGE_SIZE];
     updateDataSourceAndPaginate(current, pageSize);
     setInnerPagination({ current, pageSize });
   }, [pagination, isControlled, updateDataSourceAndPaginate]);
 
   // 非受控情况
   useEffect(() => {
     if (!pagination || isControlled) return;
-    const [current, pageSize] = [pagination?.defaultCurrent || 1, pagination?.defaultPageSize ?? 10];
+    const [current, pageSize] = [
+      pagination?.defaultCurrent || DEFAULT_CURRENT,
+      pagination?.defaultPageSize || DEFAULT_PAGE_SIZE,
+    ];
     updateDataSourceAndPaginate(current, pageSize);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isControlled, updateDataSourceAndPaginate]);