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

package/table/_story/BetterScrollbar.tsx

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

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

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