@douyinfe/semi-ui 2.6.0-beta.0 → 2.7.0

package/table/__test__/table.test.js

@@ -1930,4 +1930,22 @@ describe(`Table`, () => {
         expect(newExpandedRows.length).toEqual(1);
         expect(table.state(`expandedRowKeys`)).toEqual(['1']);
     });
+
+    it(`test expanded row re-render`, () => {
+        const expandedRowRender = sinon.spy(() => <div>Semi Design</div>);
+        const demo = mount(
+            <Table
+                columns={columns}
+                dataSource={data}
+                expandedRowRender={expandedRowRender}
+            />
+        );
+
+        const table = demo.find(BaseTable);
+
+        const expandIcons = demo.find(`.semi-table-tbody .semi-table-row .semi-table-expand-icon`);
+        expandIcons.at(0).simulate('click');
+        expandIcons.at(1).simulate('click');
+        expect(expandedRowRender.calledTwice).toBeTruthy();
+    });
 });

package/table/_story/v2/FixedExpandedRow/index.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const columns = [
+    {
+        title: '标题',
+        width: 500,
+        dataIndex: 'name',
+        render: (text, record, index) => {
+            return (
+                <span>
+                    <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </span>
+            );
+        },
+    },
+    {
+        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 = [
+    {
+        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',
+    },
+];
+
+export default function App() {
+    const expandRowRender = (record, index) => {
+        console.log('render', index);
+        return <div>semi design</div>;
+    };
+
+    return (
+        <Table
+            rowKey="name"
+            columns={columns}
+            dataSource={data}
+            expandedRowRender={expandRowRender}
+            pagination={false}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -2,4 +2,5 @@ export { default as DefaultFilteredValue } from './defaultFilteredValue';
 export { default as FixedColumnsChange } from './FixedColumnsChange';
 export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
-export { default as FixedResizable } from './FixedResizable';
+export { default as FixedResizable } from './FixedResizable';
+export { default as FixedExpandedRow } from './FixedExpandedRow';

package/tag/group.tsx

@@ -14,12 +14,13 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
-    mode?: string; // TODO: This API is not in the check file
+    mode?: string;
 }
 
 export default class TagGroup extends PureComponent<TagGroupProps> {
@@ -35,6 +36,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         maxTagCount: PropTypes.number,
+        restCount: PropTypes.number,
         tagList: PropTypes.array,
         size: PropTypes.oneOf(tagSize),
         mode: PropTypes.string,
@@ -77,8 +79,8 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
     }
 
     renderMergeTags(tags: (Tag | React.ReactNode)[]) {
-        const { maxTagCount, tagList } = this.props;
-        const n = tagList.length - maxTagCount;
+        const { maxTagCount, tagList, restCount } = this.props;
+        const n = restCount ? restCount : tagList.length - maxTagCount;
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);