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

package/table/_story/CustomExpandIcons/index.js

@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { Table } from '../../../index';
+
+const Demo = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 250,
+            key: 'name',
+        },
+        { title: 'Age', dataIndex: 'age', key: 'age', width: 200 },
+        { title: 'Address', dataIndex: 'address', key: 'address' },
+    ];
+    const childrenRecordName = 'children';
+    const [data, setData] = useState([
+        {
+            key: 1,
+            name: 'John Brown',
+            age: 32,
+            address: 'New York No. 1 Lake Park',
+            description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
+            [childrenRecordName]: [],
+        },
+        {
+            key: 2,
+            name: 'Jim Green',
+            age: 42,
+            address: 'London No. 1 Lake Park',
+            // description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
+        },
+        {
+            key: 3,
+            name: 'Joe Black',
+            age: 32,
+            address: 'Sidney No. 1 Lake Park',
+            description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
+        },
+    ]);
+    const [loading, setLoading] = useState();
+
+    const fetchChildrenData = useCallback(
+        async key => {
+            setLoading(true);
+            await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    setLoading(false);
+                    const newData = [...data];
+                    const objRecord = newData.find(item => item.key);
+                    if (objRecord) {
+                        objRecord.children = [
+                            {
+                                key: 11,
+                                name: 'Jr. John Brown',
+                                age: 32,
+                                address: 'New York No. 11 Lake Park',
+                                description:
+                                    'My name is John Brown, I am 32 years old, living in New York No. 11 Lake Park.',
+                            },
+                        ];
+                        setData(newData);
+                    }
+                }, 2000);
+            });
+        },
+        [data]
+    );
+
+    return (
+        <Table
+            loading={loading}
+            childrenRecordName={childrenRecordName}
+            columns={columns}
+            onExpand={(expanded, record, domEvent) => {
+                domEvent && domEvent.stopPropagation();
+                console.log(`onExpand: `, expanded, record, domEvent);
+                if (expanded && Array.isArray(record.children) && !record.children.length) {
+                    fetchChildrenData(record.key);
+                }
+            }}
+            onExpandedRowsChange={rows => {
+                console.log(`onExpandedRowsChange: `, rows);
+            }}
+            onRow={(record, index) => {
+                return {
+                    onClick: () => {
+                        console.log(`onRow clicked, index: ${index} , record: `, record);
+                    },
+                };
+            }}
+            rowExpandable={record => Array.isArray(record.children)}
+            dataSource={data}
+        />
+    );
+};
+
+export default Demo;

package/table/_story/CustomFilterDropdownItem/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Table, Tag, Tooltip, Dropdown } from '../../../index';
+
+export default class CustomDropdownItem extends React.Component {
+    constructor(props = {}) {
+        super(props);
+
+        this.columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                fixed: true,
+                filterMultiple: false,
+                filters: [
+                    {
+                        text: 'Code 45',
+                        value: '45',
+                    },
+                    {
+                        text: 'King 4',
+                        value: 'King 4',
+                    },
+                ],
+                onFilter: (value, record) => record.name.includes(value),
+                renderFilterDropdownItem: ({ text, checked, onChange }) => (
+                    <Dropdown.Item onClick={onChange} active={checked}>
+                        {text}
+                    </Dropdown.Item>
+                ),
+                filterDropdownProps: {
+                    showTick: true,
+                },
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+            },
+            {
+                title: 'Address',
+                width: 200,
+                dataIndex: 'address',
+            },
+            {
+                title: 'Description',
+                dataIndex: 'description',
+            },
+            {
+                fixed: 'right',
+                width: 250,
+                render: (text, record) => (
+                    <Tooltip content={record.description}>
+                        <Tag color="green">Show Info</Tag>
+                    </Tooltip>
+                ),
+            },
+        ];
+
+        this.data = [];
+
+        this.rowSelection = {
+            onChange: (selectedRowKeys, selectedRows) => {
+                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            },
+            getCheckboxProps: record => ({
+                disabled: record.name === 'Disabled User', // Column configuration not to be checked
+                name: record.name,
+            }),
+        };
+
+        for (let i = 0; i < 46; i++) {
+            let age = (i * 1000) % 149 ;
+            let name = `Edward King ${i}`;
+            this.data.push({
+                key: '' + i,
+                name,
+                age,
+                address: `London, Park Lane no. ${i}`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+
+        this.scroll = { y: 400, x: '150%' };
+    }
+
+    render() {
+        return (
+            <Table
+                columns={this.columns}
+                dataSource={this.data}
+                scroll={this.scroll}
+                pagination={{ defaultCurrentPage: 2 }}
+            />
+        );
+    }
+}

package/table/_story/DefaultSortOrder.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Table, Button } from '../../index';
+import { ColumnProps } from '../interface';
+
+interface Record {
+    title?: string;
+    age?: number;
+    address?: string;
+    name?: string;
+}
+
+const columns: ColumnProps<Record>[] = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        sorter: (a: Record, b: Record): number => a.name.length - b.name.length,
+        defaultSortOrder: 'descend',
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+        sorter: (a: Record, b: Record): number => (a.age - b.age > 0 ? 1 : -1),
+        defaultSortOrder: 'ascend',
+    },
+    {
+        title: 'Address',
+        dataIndex: 'address',
+        sorter: (a: Record, b: Record): number => a.address.length - b.address.length,
+        defaultSortOrder: false,
+    },
+];
+
+const data1 = [
+    {
+        key: '1',
+        name: 'John Brown',
+        age: 32,
+        address: 'New York No. 1 Lake Park',
+    },
+    {
+        key: '2',
+        name: 'Jim Green',
+        age: 42,
+        address: 'London No. 1 Lake Park',
+    },
+    {
+        key: '3',
+        name: 'Joe Black',
+        age: 32,
+        address: 'Sidney No. 1 Lake Park',
+    },
+    {
+        key: '4',
+        name: 'Jim Red',
+        age: 32,
+        address: 'London No. 2 Lake Park',
+    },
+];
+
+const data2 = [
+    {
+        key: '1',
+        name: 'John Brown',
+        age: 1,
+        address: 'New York No. 1 Lake Park',
+    },
+    {
+        key: '2',
+        name: 'Jim Green',
+        age: 2,
+        address: 'London No. 1 Lake Park',
+    },
+    {
+        key: '3',
+        name: 'Joe Black',
+        age: 4,
+        address: 'Sidney No. 1 Lake Park',
+    },
+    {
+        key: '4',
+        name: 'Jim Red',
+        age: 3,
+        address: 'London No. 2 Lake Park',
+    },
+];
+
+interface OnChangeArgs {
+    filters?: unknown[];
+    sorter?: unknown;
+    extra?: unknown;
+}
+
+function App(): React.ReactElement {
+    const [data, setData] = useState(data1);
+    const [flag, setFlag] = useState(false);
+    const handleChange = ({ sorter }: OnChangeArgs): void => {
+        console.log('table sorter changed to', sorter);
+    };
+
+    const handleClick = (): void => {
+        const newData = flag ? data1 : data2;
+        setData(newData);
+        setFlag(!flag);
+    };
+
+    const currentData = flag ? 'data2' : ' data1';
+
+    return (
+        <div>
+            <div>
+                <label>defaultSortOrder=ascend</label>
+                <Table columns={columns} dataSource={data} onChange={handleChange} />
+            </div>
+            <Button onClick={handleClick}>update data</Button>
+            <div>{currentData}</div>
+        </div>
+    );
+}
+
+export default App;

package/table/_story/Demos/columnRender.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Table, Avatar, Button, Empty, Typography } from '@douyinfe/semi-ui';
+import { IconDelete } from '@douyinfe/semi-icons';
+import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
+const { Text } = Typography;
+
+const raw = [
+    {
+        key: '1',
+        name: 'Semi Design 设计稿标题可能有点长这时候应该显示 Tooltip.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 Pro 设计文档可能也有点长所以也会显示Tooltip',
+        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+        size: '34KB',
+        owner: '姜琪',
+        updateTime: '2020-01-26 11:01',
+        avatarBg: 'green'
+    }
+];
+
+function App() {
+    const [dataSource, setData] = useState(raw);
+
+    const removeRecord = (key) => {
+        let newDataSource = [...dataSource];
+        if (key != null) {
+            let idx = newDataSource.findIndex(data => data.key === key);
+
+            if (idx > -1) {
+                newDataSource.splice(idx, 1);
+                setData(newDataSource);
+            }
+        }
+    };
+    const resetData = () => {
+        const newDataSource = [...raw];
+        setData(newDataSource);
+    };
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <span style={{ display: 'flex', alignItems: 'center' }}>
+                        <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                        {/* 宽度计算方式为单元格设置宽度 - 非文本内容宽度 */}
+                        <Text heading={5} ellipsis={{ showTooltip: true }} style={{ width: 'calc(400px - 76px)' }}>
+                            {text}
+                        </Text>
+                    </span>
+                );
+            }
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            width: 150,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            width: 300,
+            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,
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: (text, record) => <Button icon={<IconDelete />} theme='borderless' onClick={() => removeRecord(record.key)} />
+        },
+    ];
+
+    const empty = (
+        <Empty
+            image={<IllustrationNoResult />}
+            darkModeImage={<IllustrationNoResultDark />}
+            description={'搜索无结果'}
+        />
+    );
+
+
+    return (
+        <>
+            <Button onClick={resetData} style={{ marginBottom: 10 }}>重置</Button>
+            <Table style={{ minHeight: 350 }} columns={columns} dataSource={dataSource} pagination={false} empty={empty} />
+        </>
+    );
+}
+
+render(App);

package/table/_story/Demos/controlledPagination.jsx

@@ -0,0 +1,125 @@
+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 pageSize = 5;
+
+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) % 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;
+};
+
+const data = getData();
+
+function App() {
+    const [dataSource, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [currentPage, setPage] = useState(1);
+
+    const fetchData = (currentPage = 1) => {
+        setLoading(true);
+        setPage(currentPage);
+        return new Promise((res, rej) => {
+            setTimeout(() => {
+                const data = getData();
+                let dataSource = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+                res(dataSource);
+            }, 300);
+        }).then(dataSource => {
+            setLoading(false);
+            setData(dataSource);
+        });
+    };
+
+    const handlePageChange = page => {
+        fetchData(page);
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+                currentPage,
+                pageSize: 5,
+                total: data.length,
+                onPageChange: handlePageChange
+            }}
+            loading={loading}
+        />
+    );
+}
+
+render(App);

package/table/_story/Demos/customFilter.jsx

@@ -0,0 +1,110 @@
+import React, { useState, useMemo } from 'react';
+import { Table, Avatar, Dropdown } 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),
+        renderFilterDropdownItem: ({ text, checked, onChange }) => (
+            <Dropdown.Item onClick={onChange} active={checked}>
+                {text}
+            </Dropdown.Item>
+        ),
+        filterDropdownProps: {
+            showTick: true,
+        },
+        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);