fix: fixed Table onGroupedRow return className not work bug #2185 (#2213

)

Co-authored-by: shijia.me <shijia.me@bytedance.com>

cypress/e2e/table.spec.js

@@ -297,4 +297,9 @@ describe('table', () => {
         cy.visit('http://localhost:6006/iframe.html?args=&id=table--fixed-row-selection-empty&viewMode=story');
         cy.get('.semi-table-thead .semi-checkbox-unChecked').should('exist');
     });
+
+    it('test onGroupedRow return object includes className', () => {
+        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');
+    });
 });

packages/semi-ui/table/Body/BaseRow.tsx

@@ -356,9 +356,9 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         const baseRowStyle = { ...style, ...customStyle };
 
         const rowCls =
-            typeof replaceClassName === 'string' && replaceClassName.length ?
-                replaceClassName :
-                classnames(
+            typeof replaceClassName === 'string' && replaceClassName.length
+                ? classnames(replaceClassName, customClassName)
+                : classnames(
                     className,
                     `${prefixCls}-row`,
                     {
@@ -405,4 +405,4 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
     }
 }
 
-export type RenderExpandIcon = (record: Record<string, any>, isNested: boolean) => ReactNode | null;
+export type RenderExpandIcon = (record: Record<string, any>, isNested: boolean) => ReactNode | null;

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

@@ -114,7 +114,8 @@ export {
     FixedRowSelectionHiddenResizable,
     FixedExpandGroupRow,
     FixedDefaultExpandedGroupedRows,
-    FixedRowSelectionEmpty
+    FixedRowSelectionEmpty,
+    FixedOnGroupedRowClassName
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+export default function App() {
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = ((i * 1000) % 19) + 100;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    const data = getData();
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+            render: text => `${text} KB`,
+        },
+        {
+            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',
+            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
+            render: value => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            },
+        },
+    ];
+    const rowKey = record =>
+        `${record.owner && record.owner.toLowerCase()}-${record.name && record.name.toLowerCase()}`;
+
+    return (
+        <div style={{ padding: '20px 0px' }}>
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'size'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>根据文件大小分组 {groupKey} KB</strong>}
+                onGroupedRow={(group, index) => {
+                    return {
+                        className: 'test-group',
+                        onClick: e => {
+                            console.log(`Grouped row clicked: `, group, index);
+                        },
+                    };
+                }}
+                clickGroupedRowToExpand // if you want to click the entire row to expand
+                scroll={{ y: 480 }}
+            />
+        </div>
+    );
+}

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

@@ -34,3 +34,4 @@ export { default as InputFilter } from './InputFilter';
 export { default as FixedExpandGroupRow } from './FixedExpandGroupRow';
 export { default as FixedDefaultExpandedGroupedRows } from './FixedExpandGroupRow/defaultExpandedGroupedRows';
 export { default as FixedRowSelectionEmpty } from './FixedRowSelectionEmpty';
+export { default as FixedOnGroupedRowClassName } from './FixedOnGroupedRowClassName';

packages/semi-ui/table/interface.ts

@@ -190,7 +190,7 @@ export interface OnRowReturnObject extends Omit<React.DetailedHTMLProps<React.HT
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void
 }
-export interface OnGroupedRowReturnObject extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className'> {
+export interface OnGroupedRowReturnObject extends React.HTMLAttributes<HTMLTableRowElement> {
     [x: string]: any;
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void