@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/table/_story/Demos/expand.jsx

@@ -1,114 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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);