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

package/table/_story/BetterScrollbar.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Table, Tooltip, Tag, Space, Typography, Switch } from '../../index';
+import RTLWrapper from '../../configProvider/_story/RTLDirection/RTLWrapper';
+
+function App() {
+    const [bordered, setBordered] = React.useState(true);
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'Code 45',
+                    value: '45',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            fixed: true,
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            width: 200,
+            dataIndex: 'address',
+        },
+        // {
+        //     title: 'Address2',
+        //     width: 200,
+        //     dataIndex: 'address',
+        // },
+        // {
+        //     title: 'Address3',
+        //     width: 200,
+        //     dataIndex: 'address',
+        // },
+        // {
+        //     title: 'Address4',
+        //     width: 200,
+        //     dataIndex: 'address',
+        // },
+        // {
+        //     title: 'Address5',
+        //     width: 200,
+        //     dataIndex: 'address',
+        // },
+        {
+            fixed: 'right' as const,
+            width: 250,
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+        },
+    ];
+    
+    const data = [];
+    
+    for (let i = 0; i < 10; i++) {
+        const age = (i * 1000) % 149 ;
+        const name = `Edward King ${i}`;
+        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.`,
+        });
+    }
+    
+    const allColumnsWidth = columns.reduce((count, column) => count + column.width, 0);
+
+    const tableProps = {
+        pagination: false,
+        columns,
+        bordered,
+        dataSource: data,
+    };
+
+    return (
+        <RTLWrapper>
+            <div style={{ textAlign: 'left', marginBottom: 12 }}>
+                <Space>
+                    <Typography.Title heading={6}>边框</Typography.Title>
+                    <Switch onChange={() => setBordered(!bordered)} checked={bordered} />
+                </Space>
+            </div>
+            <Table
+                {...tableProps}
+                scroll={{ y: 400 }}
+            />
+            <br />
+            <Table
+                {...tableProps}
+                title="虚拟化表格"
+                scroll={{ y: 400, x: allColumnsWidth }}
+                style={{ width: allColumnsWidth }}
+                virtualized
+            />
+        </RTLWrapper>
+    );
+}
+
+export default App;

package/table/_story/ChildrenData/index.js

@@ -0,0 +1,251 @@
+import React, {useState} from 'react';
+import {Button, Table} from '@douyinfe/semi-ui/';
+import {IconArrowDown, IconArrowUp} from '@douyinfe/semi-icons';
+
+/**
+ * Aligned to Ant Design APIs for migration, see [antd-demo](https://codesandbox.io/s/great-mcclintock-14fl7).
+ */
+const Demo = () => {
+    const childrenRecordName = 'children';
+    const rowKey = 'key';
+    const [expandedRowKeys, setExpandedRowKeys] = useState([1]);
+    const [data, setData] = useState([
+        {
+            key: 1,
+            name: 'ZhangSan',
+            age: 30,
+            address: 'bytedance 1',
+            children: [
+                {
+                    key: 11,
+                    name: 'LiSi',
+                    age: 40,
+                    address: 'bytedance 2',
+                },
+                {
+                    key: 12,
+                    name: 'WangWu',
+                    age: 30,
+                    address: 'bytedance 2',
+                    children: [
+                        {
+                            key: 121,
+                            name: 'XiaoMing',
+                            age: 50,
+                            address: 'bytedance 3',
+                        },
+                    ],
+                },
+                {
+                    key: 13,
+                    name: 'XiaoZhang',
+                    age: 60,
+                    address: 'bytedance 4',
+                    children: [
+                        {
+                            key: 131,
+                            name: 'XiaoLi',
+                            age: 50,
+                            address: 'bytedance 5',
+                            children: [
+                                {
+                                    key: 1311,
+                                    name: 'XiaoGuo',
+                                    age: 40,
+                                    address: 'bytedance 6',
+                                },
+                                {
+                                    key: 1312,
+                                    name: 'XiaoHong',
+                                    age: 30,
+                                    address: 'bytedance 7',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: 2,
+            name: 'XiaoGang',
+            age: 80,
+            address: 'bytedance 8',
+        },
+    ]);
+
+    const switchRecord = (key1, key2) => {
+        const newData = [...data];
+
+        if (key1 != null && key2 != null) {
+            const item1 = findRecordByKey(key1, newData);
+            const item2 = findRecordByKey(key2, newData);
+
+            // you have to copy item1 and item2 first
+            const copiedItem1 = {...item1};
+            const copiedItem2 = {...item2};
+
+            coverRecord(item1, copiedItem2);
+            coverRecord(item2, copiedItem1);
+
+            setData(newData);
+        }
+    };
+
+    const findRecordByKey = (key, data) => {
+        if (Array.isArray(data) && data.length && key != null) {
+            for (let item of data) {
+                if (item[rowKey] === key) {
+                    return item;
+                }
+
+                const children = item[childrenRecordName];
+                if (Array.isArray(children) && children.length) {
+                    const item = findRecordByKey(key, children);
+
+                    if (item != null) {
+                        return item;
+                    }
+                }
+            }
+        }
+    };
+
+    const coverRecord = (obj, srcObj) => {
+        if (obj && typeof obj === 'object' && srcObj && typeof srcObj === 'object') {
+            const srcKeys = Object.keys(srcObj);
+            const copied = {...srcObj};
+
+            Object.assign(obj, copied);
+
+            Object.keys(obj).forEach(key => {
+                if (!srcKeys.includes(key)) {
+                    delete obj[key];
+                }
+            });
+        }
+
+        return obj;
+    };
+
+    const getSameLevelRecords = (key, data = []) => {
+        if (key != null && Array.isArray(data) && data.length) {
+            if (data.find(item => item[rowKey] === key)) {
+                return data;
+            }
+            for (let item of data) {
+                const records = getSameLevelRecords(key, item[childrenRecordName]);
+
+                if (records.length) {
+                    return records;
+                }
+            }
+        }
+        return [];
+    };
+
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            width: 300,
+            fixed: 'left',
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            width: 150,
+            filterChildrenRecord: true,
+            filters: [
+                {text: 'age < 30', value: 30},
+                {text: 'age < 20', value: 20},
+                {text: 'age < 10', value: 10},
+            ],
+            onFilter: (filteredValue, record) => {
+                // console.log(`filteredValue: `, filteredValue, ` record: `, record);
+                return record.age < filteredValue;
+            },
+            sorter: (v1, v2) => {
+                return v1.age < v2.age ? -1 : 1;
+            },
+            sortChildrenRecord: true,
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+            key: 'address',
+            width: 300,
+        },
+        {
+            key: 'operation',
+            render: record => {
+                const records = getSameLevelRecords(record[rowKey], data);
+                const index = records.findIndex(item => item[rowKey] === record[rowKey]);
+                const upProps = {};
+                const downProps = {};
+
+                if (index > 0) {
+                    const upRow = records[index - 1];
+                    upProps.onClick = () => switchRecord(record[rowKey], upRow[rowKey]);
+                } else {
+                    upProps.disabled = true;
+                }
+
+                if (index < records.length - 1) {
+                    const downRow = records[index + 1];
+                    downProps.onClick = () => switchRecord(record[rowKey], downRow[rowKey]);
+                } else {
+                    downProps.disabled = true;
+                }
+
+                return (
+                    <>
+                        <Button icon={<IconArrowUp/>} {...upProps} />
+                        <Button icon={<IconArrowDown/>} {...downProps} />
+                    </>
+                );
+            },
+        },
+    ];
+
+    return (
+        <Table
+            columns={columns}
+            rowKey={rowKey}
+            childrenRecordName={childrenRecordName}
+            expandedRowKeys={expandedRowKeys}
+            onExpand={(expanded, row, event) => {
+                console.log([expanded, row, event]);
+
+                if (event) {
+                    event.stopPropagation();
+                }
+            }}
+            onRow={(record, index) => {
+                return {
+                    onClick: () => {
+                        console.log(`Clicked row ${index}: `, record);
+                    },
+                };
+            }}
+            onExpandedRowsChange={rows => setExpandedRowKeys(rows.map(item => item[rowKey]))}
+            rowSelection={{
+                getCheckboxProps: record => ({
+                    disabled: record.name && record.name.includes('Jimmy'), // Column configuration not to be checked
+                }),
+                fixed: 'left',
+            }}
+            dataSource={data}
+            // indentSize={0}
+            // expandIcon={false}
+            scroll={{
+                x: '160%',
+                y: 480,
+            }}
+        />
+    );
+};
+
+export default Demo;

package/table/_story/ChildrenDataInnerSelected/index.js

@@ -0,0 +1,221 @@
+import {Checkbox, Table} from '@douyinfe/semi-ui';
+import React, {useCallback, useMemo, useState} from 'react';
+import * as _ from 'lodash';
+
+const getKey = (record, rowKey) => (typeof rowKey === 'function' ? rowKey(rowKey) : _.get(record, rowKey));
+
+const storeKeys = (parent = null, dataSource = [], map = {}, rowKey = 'key', childrenRecordName = 'children') => {
+    if (Array.isArray(dataSource) && dataSource.length) {
+        dataSource.forEach(record => {
+            const key = getKey(record, rowKey);
+            const children = _.get(record, childrenRecordName);
+
+            if (Array.isArray(children) && children.length) {
+                storeKeys(record, children, map, rowKey, childrenRecordName);
+            }
+
+            if (parent) {
+                if (Array.isArray(map[key])) {
+                    map[key].push(parent);
+                } else {
+                    map[key] = [parent];
+                }
+            }
+        });
+    }
+
+    return map;
+};
+
+function ChildrenDataSelectedDemo(props = {}) {
+    const childrenRecordName = 'children';
+    const rowKey = 'key';
+    const [expandedRowKeys, setExpandedRowKeys] = useState([1, 2]);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const getRecordKey = useCallback(record => getKey(record, rowKey), [rowKey]);
+    const disabledRecord = useCallback(
+        record => {
+            const children = _.get(record, childrenRecordName);
+            return !(Array.isArray(children) && children.length);
+        },
+        [childrenRecordName]
+    );
+
+    const data = useMemo(
+        () => [
+            {
+                key: 1,
+                name: 'ZhangSan',
+                age: 30,
+                address: 'bytedance 1',
+                children: [
+                    {
+                        key: 11,
+                        name: 'LiSi',
+                        age: 40,
+                        address: 'bytedance 2',
+                    },
+                    {
+                        key: 12,
+                        name: 'WangWu',
+                        age: 30,
+                        address: 'bytedance 2',
+                        children: [
+                            {
+                                key: 121,
+                                name: 'XiaoMing',
+                                age: 50,
+                                address: 'bytedance 3',
+                            },
+                        ],
+                    },
+                    {
+                        key: 13,
+                        name: 'XiaoZhang',
+                        age: 60,
+                        address: 'bytedance 4',
+                        children: [
+                            {
+                                key: 131,
+                                name: 'XiaoLi',
+                                age: 50,
+                                address: 'bytedance 5',
+                                children: [
+                                    {
+                                        key: 1311,
+                                        name: 'XiaoGuo',
+                                        age: 40,
+                                        address: 'bytedance 6',
+                                    },
+                                    {
+                                        key: 1312,
+                                        name: 'XiaoHong',
+                                        age: 30,
+                                        address: 'bytedance 7',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                key: 2,
+                name: 'XiaoGang',
+                age: 80,
+                address: 'bytedance 8',
+            },
+        ],
+        []
+    );
+    const keysMap = useMemo(() => storeKeys(null, data, {}, rowKey, childrenRecordName), [
+        data,
+        rowKey,
+        childrenRecordName,
+    ]);
+
+    const doSelect = (record, selected) => {
+        const key = getRecordKey(record, rowKey);
+
+        const children = _.get(record, childrenRecordName, []);
+        const parents = _.get(keysMap, key);
+        const set = new Set([...selectedRowKeys]);
+
+        if (selected) {
+            set.add(key);
+        } else {
+            set.delete(key);
+        }
+
+        const selectChildren = (selected = false, children = []) => {
+            if (typeof disabledRecord === 'function') {
+                children = _.filter(children, child => !disabledRecord(child));
+            }
+            if (Array.isArray(children) && children.length) {
+                _.each(children, child => {
+                    const key = getKey(child, rowKey);
+                    const curChildren = _.get(child, childrenRecordName);
+
+                    if (selected) {
+                        set.add(key);
+                    } else {
+                        set.delete(key);
+                    }
+                    selectChildren(selected, curChildren);
+                });
+            }
+        };
+
+        selectChildren(selected, children);
+
+        _.each(parents, parent => {
+            const childrenKeys = _.get(parent, childrenRecordName, [])
+                .filter(parentChild => !disabledRecord(parentChild))
+                .map(getRecordKey);
+
+            const allSelected = childrenKeys.length && childrenKeys.every(key => set.has(key));
+            const parentKey = getRecordKey(parent);
+
+            if (allSelected) {
+                set.add(parentKey);
+            } else {
+                set.delete(parentKey);
+            }
+            return false;
+        });
+
+        setSelectedRowKeys(Array.from(set));
+    };
+
+    const doSelectAll = useCallback((selected, selectedRows) => {
+        const keys = selected ? _.map(selectedRows, row => getRecordKey(row, rowKey)) : [];
+        setSelectedRowKeys(keys);
+    }, []);
+
+    const columns = useMemo(
+        () => [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+                width: 300,
+                render: (text, record) => (
+                    <span style={{display: 'inline-flex', alignItems: 'center'}}>
+                        {_.size(_.get(record, childrenRecordName)) ? (
+                            <Checkbox
+                                checked={selectedRowKeys.includes(_.get(record, rowKey))}
+                                onChange={e => doSelect(record, e.target.checked)}
+                                style={{display: 'inline-flex', marginRight: 5}}
+                            />
+                        ) : null}
+                        {text}
+                    </span>
+                ),
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+                width: 150,
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+                key: 'address',
+            },
+        ],
+        [selectedRowKeys]
+    );
+    return (
+        <Table
+            columns={columns}
+            rowKey={rowKey}
+            childrenRecordName={childrenRecordName}
+            expandedRowKeys={expandedRowKeys}
+            onExpandedRowsChange={rows => setExpandedRowKeys(rows.map(item => item[rowKey]))}
+            dataSource={data}
+        />
+    );
+}
+
+export default ChildrenDataSelectedDemo;