@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/table/_story/Demos/expand.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Table, Avatar, Descriptions, Tag } 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'
+    },
+];
+
+const expandData = [
+    { key: '实际用户数量', value: '1,480,000' },
+    { key: '7天留存', value: '98%' },
+    { key: '安全等级', value: '3级' },
+    { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
+    { key: '认证状态', value: '未认证' },
+];
+
+function App() {
+
+    const expandRowRender = (record, index) => {
+        return <Descriptions align="justify" data={expandData} />;
+    };
+
+    const rowSelection = {
+        getCheckboxProps: record => ({
+            disabled: record.name === '设计文档', // Column configuration not to be checked
+            name: record.name,
+        }),
+        onSelect: (record, selected) => {
+            console.log(`select row: ${selected}`, record);
+        },
+        onSelectAll: (selected, selectedRows) => {
+            console.log(`select all rows: ${selected}`, selectedRows);
+        },
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+    };
+
+    return <Table rowKey="name" columns={columns} dataSource={data} expandedRowRender={expandRowRender} rowSelection={rowSelection} pagination={false} />;
+}
+
+render(App);

package/table/_story/Demos/filterAndSorter.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useMemo } 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';
+
+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 Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
+    },
+    {
+        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');
+        }
+    }
+];
+
+function App() {
+    const [dataSource, setData] = useState([]);
+
+    const rowSelection = useMemo(() => ({
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+    }), []);
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;
+}
+
+render(App);

package/table/_story/Demos/fixed.jsx

@@ -0,0 +1,117 @@
+import React, { useState, useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+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';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        fixed: true,
+        width: 250,
+        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 Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        width: 200,
+        sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+        render: (text) => `${text} KB`
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        width: 200,
+        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',
+        width: 200,
+        sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+        render: (value) => {
+            return dateFns.format(new Date(value), 'yyyy-MM-dd');
+        }
+    },
+    {
+        title: '',
+        dataIndex: 'operate',
+        fixed: 'right',
+        align: 'center',
+        width: 100,
+        render: () => {
+            return <IconMore />;
+        }
+    },
+];
+
+function App() {
+    const [dataSource, setData] = useState([]);
+
+    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);
+    const rowSelection = useMemo(() => ({
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+        fixed: true,
+    }), []);
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;
+}
+
+render(App);

package/table/_story/Demos/fullRender.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const columns = [
+    {
+        title: ({ sorter, filter, selection }) => (
+            <span style={{ display: 'inline-flex', alignItems: 'center', paddingLeft: 20 }}>
+                {selection}
+                <span style={{ marginLeft: 8 }}>Name</span>
+                {sorter}
+                {filter}
+            </span>
+        ),
+        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 Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
+        useFullRender: true,
+        // 此处从render的第四个形参中解构出 展开按钮、选择按钮、文本等内容
+        render: (text, record, index, { expandIcon, selection, indentText }) => {
+            return (
+                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+                    {indentText}
+                    {expandIcon}
+                    {selection}
+                    <span style={{ marginLeft: 8 }}>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </span>
+                </span>
+            );
+        },
+    },
+    {
+        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 getData = (total) => {
+    const data = [];
+    for (let i = 0; i < total; i++) {
+        const isSemiDesign = i % 2 === 0;
+        const randomNumber = (i * 1000) % 199;
+        data.push({
+            key: '' + i,
+            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date().valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red'
+        });
+    }
+    return data;
+};
+
+function Demo() {
+    const [dataSource, setDataSource] = useState([]);
+    const total = 46;
+    const pagination = useMemo(() => ({
+        pageSize: 12,
+    }), []);
+
+    const rowSelection = useMemo(() => {
+        return {
+            hidden: true,
+            fixed: 'left',
+        };
+    }, []);
+
+    useEffect(() => {
+        const data = getData(total);
+        setDataSource(data);
+    }, [total]);
+
+    return (
+        <Table
+            pagination={pagination}
+            rowSelection={rowSelection}
+            columns={columns}
+            dataSource={dataSource}
+            onChange={(...args) => console.log(...args)}
+            expandedRowRender={record => <article>{record.name}</article>}
+        />
+    );
+}
+
+render(Demo);

package/table/_story/Demos/group.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+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 Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        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 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 Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date().valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red',
+        });
+    }
+    return data;
+};
+
+const data = getData();
+
+function Demo() {
+    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 {
+                        // onMouseEnter: () => {
+                        //     console.log(`Grouped row mouse enter: `, group, index);
+                        // },
+                        // onMouseLeave: () => {
+                        //     console.log(`Grouped row mouse leave: `, group, index);
+                        // },
+                        onClick: e => { console.log(`Grouped row clicked: `, group, index); }
+                    };
+                }}
+                clickGroupedRowToExpand // if you want to click the entire row to expand
+                scroll={{ y: 480 }}
+            />
+        </div>
+    );
+}
+
+render(Demo);

package/table/_story/Demos/headerMerge.jsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const columns = [
+    {
+        title: '基本信息',
+        fixed: 'left',
+        children: [
+            {
+                title: '标题',
+                dataIndex: 'name',
+                width: 300,
+                fixed: true,
+                render: (text, record, index) => {
+                    return (
+                        <span>
+                            <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                            {text}
+                        </span>
+                    );
+                },
+                filters: [
+                    {
+                        text: 'Semi Design 设计稿',
+                        value: 'Semi Design 设计稿',
+                    },
+                    {
+                        text: 'Semi Pro 设计稿',
+                        value: 'Semi Pro 设计稿',
+                    },
+                ],
+                onFilter: (value, record) => record.name.includes(value),
+            },
+            {
+                title: '大小',
+                dataIndex: 'size',
+                width: 100,
+                fixed: true,
+                sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+                render: (text) => `${text} KB`
+            },
+        ]
+    },
+    {
+        title: '其他信息',
+        children: [
+            {
+                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');
+                }
+            }
+        ]
+    },
+    {
+        title: '更多',
+        fixed: 'right',
+        width: 100,
+        align: 'center',
+        dataIndex: 'operate',
+        render: () => {
+            return <IconMore />;
+        }
+    },
+];
+
+const getData = (total) => {
+    const data = [];
+    for (let i = 0; i < total; i++) {
+        const isSemiDesign = i % 2 === 0;
+        const randomNumber = (i * 1000) % 199;
+        data.push({
+            key: '' + i,
+            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date().valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red'
+        });
+    }
+    return data;
+};
+
+function Demo() {
+    const data = useMemo(() => {
+        const _data = getData(46);
+        return _data;
+    }, []);
+
+    return (
+        <Table
+            rowSelection={{ fixed: true }}
+            expandedRowRender={record => <article>{record.name}</article>}
+            dataSource={data}
+            scroll={{ y: 400 }}
+            onChange={(...args) => console.log(...args)}
+            columns={columns}
+        />
+    );
+}
+
+render(Demo);