chore: update Table getCheckboxProps and rowSelection typings #2234 (#2321)

Co-authored-by: shijia.me <[email protected]>
Co-authored-by: pointhalo <[email protected]>

cypress/e2e/table.spec.js

@@ -302,4 +302,10 @@ describe('table', () => {
         cy.visit('http://localhost:6006/iframe.html?id=table--fixed-on-grouped-row-class-name&viewMode=story');
         cy.get('tbody .semi-table-row-section').eq(0).should('have.class', 'test-group');
     });
+
+    it('test rowSelection onCell and onHeaderCell', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=table--row-selection-on-cell&viewMode=story');
+        cy.get('.test-th').should('have.attr', 'style').should('contain', 'background: blue');
+        cy.get('.test-td').should('have.attr', 'style').should('contain', 'background: red');
+    });
 });

packages/semi-ui/table/_story/table.stories.jsx

@@ -116,7 +116,8 @@ export {
     FixedDefaultExpandedGroupedRows,
     FixedRowSelectionEmpty,
     DndKitDrag,
-    FixedOnGroupedRowClassName
+    FixedOnGroupedRowClassName,
+    RowSelectionOnCell
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

packages/semi-ui/table/_story/v2/RowSelectionOnCell/index.tsx

@@ -0,0 +1,137 @@
+import React, { useMemo, useState } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+import { RowSelection } from '../../../interface';
+
+/**
+ * test with cypress
+ */
+export default function App() {
+    const columns = useMemo(() => [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar
+                            size="small"
+                            shape="square"
+                            src={record.nameIconSrc}
+                            style={{ marginRight: 12 }}
+                        ></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+        },
+    ], []);
+
+    const data = useMemo(() => [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+        {
+            key: '4',
+            name: 'Semi D2C 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '5',
+            name: 'Semi D2C 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '6',
+            name: 'Semi D2C 设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ], []);
+
+    const rowSelection: RowSelection<typeof data[number]> = {
+        getCheckboxProps: record => ({
+            disabled: record.name === '设计文档', // Column configuration not to be checked
+            name: record.name,
+        }),
+        onCell: () => ({
+            style: {
+                background: 'red',
+            },
+            className: 'test-td'
+        }),
+        onHeaderCell: () => ({
+            style: {
+                background: 'blue',
+            },
+            className: 'test-th'
+        }),
+    };
+
+    return <Table columns={columns} dataSource={data} rowSelection={rowSelection} />;
+}

packages/semi-ui/table/_story/v2/index.js

@@ -36,3 +36,4 @@ export { default as FixedDefaultExpandedGroupedRows } from './FixedExpandGroupRo
 export { default as FixedRowSelectionEmpty } from './FixedRowSelectionEmpty';
 export { default as DndKitDrag } from './DndKitDrag';
 export { default as FixedOnGroupedRowClassName } from './FixedOnGroupedRowClassName';
+export { default as RowSelectionOnCell } from './RowSelectionOnCell';

packages/semi-ui/table/interface.ts

@@ -248,6 +248,8 @@ export interface RowSelectionProps<RecordType> {
     onChange?: RowSelectionOnChange<RecordType>;
     onSelect?: RowSelectionOnSelect<RecordType>;
     onSelectAll?: RowSelectionOnSelectAll<RecordType>;
+    onCell?: ColumnProps['onCell'];
+    onHeaderCell?: ColumnProps['onHeaderCell'];
     renderCell?: RowSelectionRenderCell<RecordType>
 }
 
@@ -262,7 +264,7 @@ export type RowSelectionRenderCell<RecordType> = (renderCellArgs: {
     selectRow?: (selected: boolean, e: Event) => void;
     selectAll?: (selected: boolean, e: Event) => void
 }) => ReactNode;
-export type GetCheckboxProps<RecordType> = (record: RecordType) => CheckboxProps;
+export type GetCheckboxProps<RecordType> = (record: RecordType) => Omit<CheckboxProps, 'defaultChecked' | 'checked' | 'indeterminate' | 'onChange'>;
 export type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export type RowSelectionOnSelect<RecordType> = (
     record?: RecordType,