fix(Table): disabled state incorrectly modified by checkAll

Author: RylanBot

packages/components/table/EnhancedTable.tsx

@@ -1,13 +1,14 @@
 import React, { RefAttributes, forwardRef, useImperativeHandle, useRef } from 'react';
 import { get } from 'lodash-es';
-import PrimaryTable from './PrimaryTable';
-import { PrimaryTableCol, TableRowData, DragSortContext, TdPrimaryTableProps } from './type';
+
+import useConfig from '../hooks/useConfig';
 import useTreeData from './hooks/useTreeData';
 import useTreeSelect from './hooks/useTreeSelect';
-import { EnhancedTableProps, EnhancedTableRef, PrimaryTableProps } from './interface';
-import useConfig from '../hooks/useConfig';
+import PrimaryTable, { type InternalPrimaryTableProps } from './PrimaryTable';
 
-import { StyledProps } from '../common';
+import type { StyledProps } from '../common';
+import type { EnhancedTableProps, EnhancedTableRef } from './interface';
+import type { DragSortContext, PrimaryTableCol, TableRowData, TdPrimaryTableProps } from './type';
 
 export interface TEnhancedTableProps extends EnhancedTableProps, StyledProps {}
 
@@ -78,14 +79,17 @@ const EnhancedTable = forwardRef<EnhancedTableRef, TEnhancedTableProps>((props,
     props.onDragSort?.(params);
   };
 
-  const primaryTableProps: PrimaryTableProps = {
+  const isTreeData = Boolean(tree && Object.keys(tree).length);
+  const primaryTableProps: InternalPrimaryTableProps = {
     ...props,
     data: dataSource,
     columns: tColumns,
     // 半选状态节点
     indeterminateSelectedRowKeys: tIndeterminateSelectedRowKeys,
     // 树形结构不允许本地数据分页
-    disableDataPage: Boolean(tree && Object.keys(tree).length),
+    disableDataPage: isTreeData,
+    reserveSelectedRowOnPaginate: isTreeData ? true : props.reserveSelectedRowOnPaginate,
+    treeDataMap: isTreeData ? treeDataMap : undefined,
     onSelectChange: onInnerSelectChange,
     onDragSort: onDragSortChange,
     rowClassName: ({ row }) => {

packages/components/table/PrimaryTable.tsx

@@ -1,34 +1,41 @@
-import React, { useRef, forwardRef, useImperativeHandle, ReactNode, RefAttributes } from 'react';
-import { get } from 'lodash-es';
+import React, { forwardRef, ReactNode, RefAttributes, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
+import { get } from 'lodash-es';
+
+
+import { TableTreeDataMap } from '@tdesign/common-js/table/tree-store';
+import { CheckboxGroupValue } from '../checkbox';
+import { StyledProps } from '../common';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { PageInfo, PaginationProps } from '../pagination';
 import BaseTable from './BaseTable';
+import { primaryTableDefaultProps } from './defaultProps';
+import EditableCell, { type EditableCellProps } from './EditableCell';
+import useAsyncLoading from './hooks/useAsyncLoading';
+import useClassName from './hooks/useClassName';
 import useColumnController from './hooks/useColumnController';
+import useDragSort from './hooks/useDragSort';
+import { useEditableRow } from './hooks/useEditableRow';
+import useFilter from './hooks/useFilter';
 import useRowExpand from './hooks/useRowExpand';
-import useTableHeader, { renderTitle } from './hooks/useTableHeader';
 import useRowSelect from './hooks/useRowSelect';
-import { TdPrimaryTableProps, PrimaryTableCol, TableRowData, PrimaryTableCellParams } from './type';
 import useSorter from './hooks/useSorter';
-import useFilter from './hooks/useFilter';
-import useDragSort from './hooks/useDragSort';
-import useAsyncLoading from './hooks/useAsyncLoading';
-import { PageInfo, PaginationProps } from '../pagination';
-import useClassName from './hooks/useClassName';
 import useStyle from './hooks/useStyle';
-import { BaseTableProps, PrimaryTableProps, PrimaryTableRef } from './interface';
-import EditableCell, { EditableCellProps } from './EditableCell';
-import { StyledProps } from '../common';
-import { useEditableRow } from './hooks/useEditableRow';
-import { primaryTableDefaultProps } from './defaultProps';
-import { CheckboxGroupValue } from '../checkbox';
-import useDefaultProps from '../hooks/useDefaultProps';
+import useTableHeader, { renderTitle } from './hooks/useTableHeader';
+
+import type { BaseTableProps, PrimaryTableProps, PrimaryTableRef } from './interface';
+import type { PrimaryTableCellParams, PrimaryTableCol, TableRowData, TdPrimaryTableProps } from './type';
 
 export { BASE_TABLE_ALL_EVENTS } from './BaseTable';
 
-export interface TPrimaryTableProps extends PrimaryTableProps, StyledProps {}
+export interface InternalPrimaryTableProps extends PrimaryTableProps, StyledProps {
+  treeDataMap?: TableTreeDataMap;
+}
 
-const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalProps, ref) => {
-  const props = useDefaultProps<TPrimaryTableProps>(originalProps, primaryTableDefaultProps);
+const PrimaryTable = forwardRef<PrimaryTableRef, InternalPrimaryTableProps>((originalProps, ref) => {
+  const props = useDefaultProps<InternalPrimaryTableProps>(originalProps, primaryTableDefaultProps);
   const { columns, columnController, editableRowKeys, style, className } = props;
+  
   const primaryTableRef = useRef(null);
   const innerPagination = useRef<PaginationProps>(props.pagination);
   const { classPrefix, tableDraggableClasses, tableBaseClass, tableSelectedClasses, tableSortClasses } = useClassName();

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);
 
@@ -72,17 +80,14 @@ export default function TableBasic() {
       </Radio.Group>
 
       <Table
-        // todo(type): fix id props
-        // @ts-ignore
-        id="pagination-table"
         data={data}
         columns={columns}
         rowKey="index"
         // 非受控写法
         pagination={{
           defaultCurrent: 2,
           defaultPageSize: 5,
-          total,
+          total: TOTAL,
           showJumper: true,
           onChange(pageInfo) {
             console.log(pageInfo, 'onChange pageInfo');
@@ -97,7 +102,6 @@ export default function TableBasic() {
           },
           selectProps: {
             popupProps: {
-              attach: () => document.getElementById('pagination-table'),
               overlayInnerStyle: { fontWeight: 'normal' },
               overlayStyle: { fontWeight: 'normal' },
               overlayClassName: 'table-pagination-custom-overlay-class',
@@ -123,8 +127,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

@@ -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/_example/tree-select.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { EnhancedTable, Radio, Space, Button, MessagePlugin, Tag } from 'tdesign-react';
+import React, { useEffect, useRef, useState } from 'react';
 import { cloneDeep } from 'lodash-es';
-import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
+
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
+import { Button, EnhancedTable, MessagePlugin, Radio, Space, Tag } from 'tdesign-react';
+
 import type { EnhancedTableProps, TableProps } from 'tdesign-react';
 
 const statusNameListMap = {
@@ -15,7 +17,7 @@ const CHILDREN_KEY = 'childrenList';
 const initData: EnhancedTableProps['data'] = [];
 for (let i = 0; i < 500; i++) {
   const obj = {
-    key: `first_level_${i}`,
+    key: `${i + 1}`,
     applicant: ['贾明', '张三', '王芳'][i % 3],
     status: i % 3,
     channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
@@ -25,42 +27,41 @@ for (let i = 0; i < 500; i++) {
     createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
     childrenList: [],
   };
-  obj.childrenList = new Array(5).fill(null).map((t, j) => {
-    const secondIndex = 100 * j + (i + 1) * 10;
+
+  obj.childrenList = new Array(5).fill(null).map((_, j) => {
     const secondObj = {
       ...obj,
-      status: secondIndex % 3,
-      key: `second_level_${secondIndex}`,
-      applicant: ['贾明', '张三', '王芳'][secondIndex % 3],
+      status: (i + j) % 3,
+      key: `${i + 1}-${j + 1}`, // 第二层：1-1, 1-2, 1-3...
+      applicant: ['贾明', '张三', '王芳'][(i + j) % 3],
+      childrenList: [],
     };
-    secondObj.childrenList = new Array(3).fill(null).map((m, n) => {
-      const thirdIndex = secondIndex * 1000 + 100 * m + (n + 1) * 10;
-      return {
-        ...obj,
-        status: thirdIndex % 3,
-        key: `third_level_${thirdIndex}`,
-        applicant: ['贾明', '张三', '王芳'][thirdIndex % 3],
-      };
-    });
+
+    secondObj.childrenList = new Array(3).fill(null).map((_, n) => ({
+      ...obj,
+      status: (i + j + n) % 3,
+      key: `${i + 1}-${j + 1}-${n + 1}`,
+      applicant: ['贾明', '张三', '王芳'][(i + j + n) % 3],
+    }));
     return secondObj;
   });
   initData.push(obj);
 }
+
 const columns: TableProps['columns'] = [
   {
     colKey: 'row-select',
     type: 'multiple',
     // 禁用行选中方式一：使用 disabled 禁用行（示例代码有效，勿删）。disabled 参数：{row: RowData; rowIndex: number })
     // 这种方式禁用行选中，当前行会添加行类名 t-table__row--disabled，禁用行文字变灰
-    // disabled: ({ rowIndex }) => rowIndex === 1 || rowIndex === 3,
-
+    disabled: ({ row }) => row.status === 1,
     // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
     // 这种方式禁用行选中，行文本不会变灰
-    checkProps: ({ row }) => ({ disabled: !row.childrenList && row.status !== 0 }),
+    // checkProps: ({ row }) => ({ disabled: row.status === 1 }),
     // 自由调整宽度，如果发现元素看不见，请加大宽度
     width: 50,
   },
-  { colKey: 'serial-number', title: '序号' },
+  { colKey: 'key', title: '编号' },
   { colKey: 'applicant', title: '申请人' },
   {
     colKey: 'status',
@@ -77,27 +78,22 @@ const columns: TableProps['columns'] = [
     ),
   },
   { colKey: 'matters', title: '申请事项' },
-  // { colKey: 'email', title: '邮箱地址' },
 ];
 
-const defaultSelectedRowKeys: EnhancedTableProps['selectedRowKeys'] = [];
+const defaultSelectedRowKeys: EnhancedTableProps['selectedRowKeys'] = ['2-1-1', '5-2-1'];
 
 export default function TableSingleSort() {
+  // treeTableRef.current 包含各类树形操作方法
+  const treeTableRef = useRef(null);
+
   const [data, setData] = useState([...initData]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<EnhancedTableProps['selectedRowKeys']>(defaultSelectedRowKeys);
   const [checkStrictly, setCheckStrictly] = useState(false);
-  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
-  const treeTableRef = useRef(null);
-
-  useEffect(() => {
-    // 包含 treeDataMap 及各类树形操作方法
-    console.log(treeTableRef.current);
-  }, []);
 
   useEffect(
     () => {
       setSelectedRowKeys(defaultSelectedRowKeys);
-      setData(cloneDeep(data));
+      setData(cloneDeep(initData));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [checkStrictly],
@@ -109,10 +105,6 @@ export default function TableSingleSort() {
     setSelectedRowKeys(value);
   };
 
-  const onExpandChange: EnhancedTableProps['onExpandChange'] = (val) => {
-    setExpandedRowKeys(val);
-  };
-
   const getTreeExpandedRow = () => {
     const treeExpandedRowKeys = treeTableRef.current.getTreeExpandedRow('unique');
     console.log('行唯一标识值：', treeExpandedRowKeys);
@@ -126,10 +118,6 @@ export default function TableSingleSort() {
     MessagePlugin.success('获取成功，请打开控制台查看');
   };
 
-  const onRowClick: EnhancedTableProps['onRowClick'] = (data) => {
-    console.log(data);
-  };
-
   const scrollToElement = () => {
     const treeNodeData = treeTableRef.current.getData('first_level_150');
     console.log(treeNodeData);
@@ -144,15 +132,12 @@ export default function TableSingleSort() {
     });
   };
 
-  // 树节点展开，受控示例
-  // const [expandedTreeNodes, setExpandedTreeNodes] = useState(['first_level_0']);
-
   return (
     <Space direction="vertical">
       <Space>
         <Radio.Group value={checkStrictly} onChange={(val: boolean) => setCheckStrictly(val)} variant="default-filled">
-          <Radio.Button value={true}>父子行选中独立</Radio.Button>
           <Radio.Button value={false}>父子行选中关联</Radio.Button>
+          <Radio.Button value={true}>父子行选中独立</Radio.Button>
         </Radio.Group>
         <Button onClick={getTreeExpandedRow}>获取树形结构展开的节点</Button>
         <Button onClick={scrollToElement}>滚动到指定元素</Button>
@@ -163,7 +148,6 @@ export default function TableSingleSort() {
         rowKey="key"
         data={data}
         columns={columns}
-        // indeterminateSelectedRowKeys={[1]}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={onSelectChange}
         tree={{
@@ -174,13 +158,7 @@ export default function TableSingleSort() {
         }}
         height={300}
         scroll={{ type: 'virtual' }}
-        expandedRow={({ row }) => <div>这是展开项数据，我是 {row.key} 号</div>}
-        expandedRowKeys={expandedRowKeys}
-        onExpandChange={onExpandChange}
-        onRowClick={onRowClick}
         lazyLoad
-        // expandedTreeNodes={expandedTreeNodes}
-        // onExpandedTreeNodesChange={setExpandedTreeNodes}
       />
     </Space>
   );

packages/components/table/defaultProps.ts

@@ -48,4 +48,4 @@ export const primaryTableDefaultProps: Pick<
   sortOnRowDraggable: false,
 };
 
-export const enhancedTableDefaultProps: TdEnhancedTableProps = { defaultExpandedTreeNodes: [], rowKey: undefined };
+export const enhancedTableDefaultProps: TdEnhancedTableProps = { defaultExpandedTreeNodes: [], rowKey: 'id' };