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

package/table/_story/VritualizedDataSelected/index.js

@@ -0,0 +1,273 @@
+import { Table, Checkbox, SideSheet, Button } from '@douyinfe/semi-ui';
+import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import * as _ from 'lodash';
+import { IconEdit } from '@douyinfe/semi-icons';
+import testJson from '../data/big2.json';
+
+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 authPoint = 'auth_point_list';
+    const checkName = 'role_perm';
+    const isZh = true;
+    const [expandedRowKeys, setExpandedRowKeys] = useState(['0', '1']);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [allKeys, setAllKeys] = useState([]);
+    const [visible, setVisible] = useState(false);
+    const tableRef = useRef();
+    const getRecordKey = useCallback(record => getKey(record, rowKey), [rowKey]);
+    const disabledRecord = useCallback(
+        record => {
+            // const children = _.get(record, childrenRecordName);
+            // return !(Array.isArray(children) && children.length);
+            return false;
+        },
+        [childrenRecordName]
+    );
+    const [data, setData] = useState([]);
+
+    const getTableData = () => {
+        const tableData = _.cloneDeep(testJson.data);
+        const allKeys = [];
+        for (let i = 0, len = tableData.length; i < len; ++i) {
+            const key = `${i}`;
+            tableData[i][rowKey] = key;
+            allKeys.push(key);
+        }
+        const queue = [...tableData];
+        while (queue.length) {
+            const curNode = queue.shift();
+            const someSelected = curNode[authPoint].some(item => item[checkName]);
+            const everySelected = curNode[authPoint].every(item => item[checkName]);
+            curNode.checkAll = {
+                checked: curNode[authPoint] && curNode[authPoint].length && everySelected,
+                indeterminate: someSelected,
+            };
+            const parentKey = curNode[rowKey];
+            if (curNode.children.length) {
+                for (let i = 0, len = curNode.children.length; i < len; ++i) {
+                    const key = `${parentKey}.${childrenRecordName}.${i}`;
+                    curNode.children[i][rowKey] = key;
+                    allKeys.push(key);
+                }
+                queue.push(...curNode.children);
+            }
+        }
+
+        setData(tableData);
+        setAllKeys(allKeys);
+        setExpandedRowKeys([...allKeys]);
+    };
+
+    const keysMap = useMemo(() => storeKeys(null, data, {}, rowKey, childrenRecordName), [
+        data,
+        rowKey,
+        childrenRecordName,
+    ]);
+
+    const getCheckboxProps = record => {
+        const children = _.get(record, childrenRecordName);
+        const recordKey = getRecordKey(record);
+        const checkboxProps = {};
+        if (Array.isArray(children) && children.length) {
+            const allChildrenKeys = children.map(getRecordKey);
+            const someSelected = allChildrenKeys.some(key => selectedRowKeys.includes(key));
+            if (someSelected && !selectedRowKeys.includes(recordKey)) {
+                checkboxProps.indeterminate = true;
+            }
+        }
+        return checkboxProps;
+    };
+
+    const getSet = (record, set, selected) => {
+        const queue = [record];
+        while (queue.length) {
+            const curNode = queue.shift();
+            const key = getRecordKey(curNode);
+            // onChangeAll(key, {
+            //     target: {
+            //         checked: selected,
+            //     },
+            // });
+            if (selected) {
+                set.add(key);
+            } else {
+                set.delete(key);
+            }
+            if (curNode.children.length) {
+                queue.push(...curNode.children);
+            }
+        }
+    };
+
+    const doSelect = (record, selected) => {
+        const set = new Set([...selectedRowKeys]);
+        getSet(record, set, selected);
+        setSelectedRowKeys(Array.from(set));
+        setExpandedRowKeys(Array.from(new Set([...expandedRowKeys, ...set])));
+    };
+
+    const doSelectAll = (selected, selectedRows, changedRows) => {
+        setSelectedRowKeys(selected ? [...allKeys] : []);
+        setExpandedRowKeys([...allKeys]);
+        for (const key of allKeys) {
+            // onChangeAll(key, {
+            //     target: {
+            //         checked: selected,
+            //     },
+            // });
+        }
+    };
+
+    const onChangeOne = (recordKey, text, e) => {
+        const tableData = _.cloneDeep(data);
+        // const tableData = data;
+        const findRecord = _.get(tableData, recordKey);
+        const findCheckBox = _.find(findRecord[authPoint], item => {
+            return item.code === text;
+        });
+        findCheckBox[checkName] = e.target.checked;
+        const someSelected = findRecord[authPoint].some(item => item[checkName]);
+        const everySelected = findRecord[authPoint].every(item => item[checkName]);
+        findRecord.checkAll = {
+            checked: everySelected,
+            indeterminate: someSelected,
+        };
+        setData(tableData);
+        // setData(_.cloneDeep(tableData));
+    };
+
+    const onChangeAll = (recordKey, e) => {
+        const tableData = _.cloneDeep(data);
+        const findRecord = _.get(tableData, recordKey);
+        findRecord.checkAll = {
+            checked: findRecord[authPoint] && findRecord[authPoint].length && e.target.checked,
+        };
+        for (const item of findRecord[authPoint]) {
+            item[checkName] = e.target.checked;
+        }
+        setData(tableData);
+    };
+
+    const rowSelection = useMemo(
+        () => ({
+            fixed: true,
+            getCheckboxProps,
+            selectedRowKeys,
+            onSelect: doSelect,
+            onSelectAll: doSelectAll,
+        }),
+        [selectedRowKeys, getCheckboxProps, doSelect, doSelectAll]
+    );
+
+    const columns = [
+        {
+            title: 'authSideSheetTitle',
+            dataIndex: 'name',
+            key: 'name',
+            width: 300,
+            fixed: true,
+            render: (text, record) => {
+                return isZh ? record.name : record.en_name;
+            },
+        },
+        {
+            title: 'authSideSheetCheckAll',
+            dataIndex: 'checkAll',
+            key: 'checkAll',
+            width: 100,
+            fixed: true,
+            render: (text, record) => {
+                return <Checkbox {...text} onChange={(...args) => onChangeAll(record.key, ...args)} />;
+            },
+        },
+        {
+            title: 'authSideSheetAuthPoint',
+            dataIndex: authPoint,
+            key: authPoint,
+            render: (text, record) => {
+                return record[authPoint].map(item => {
+                    return (
+                        <Checkbox
+                            style={{ display: 'inline-flex', marginRight: 20 }}
+                            key={item.code}
+                            checked={item.role_perm}
+                            onChange={(...args) => onChangeOne(record.key, item.code, ...args)}
+                        >
+                            {isZh ? item.name : item.en_name}
+                        </Checkbox>
+                    );
+                });
+            },
+        },
+        {
+            title: `Operations`,
+            width: 120,
+            key: 'Operations',
+            render: () => <Button icon={<IconEdit />} />,
+            fixed: 'right',
+        },
+    ];
+
+    useEffect(() => {
+        getTableData();
+    }, []);
+
+    return (
+        <div>
+            <Button onClick={() => setVisible(true)}>切换显示侧边栏</Button>
+            <Button onClick={() => console.log(tableRef.current && tableRef.current.getCurrentPageData())}>
+                打印当前页数据
+            </Button>
+            {/* <SideSheet visible={visible} style={{ width: 600 }}> */}
+            <div>
+                <Button onClick={() => setVisible(false)}>关闭浮层</Button>
+                <Table
+                    scroll={{ y: 600, x: 1200 }}
+                    style={{ width: 800 }}
+                    columns={columns}
+                    rowKey={rowKey}
+                    childrenRecordName={childrenRecordName}
+                    // defaultExpandAllRows
+                    expandedRowKeys={expandedRowKeys}
+                    onExpandedRowsChange={rows => setExpandedRowKeys(rows.map(item => item[rowKey]))}
+                    rowSelection={rowSelection}
+                    // hideExpandedColumn={false}
+                    expandCellFixed={true}
+                    dataSource={data}
+                    pagination={false}
+                    virtualized={{ itemSize: () => 54 }}
+                    ref={tableRef}
+                />
+            </div>
+            {/* </SideSheet> */}
+        </div>
+    );
+}
+
+export default ChildrenDataSelectedDemo;

package/table/_story/WarnColumnWithoutDataIndex.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Table, Tooltip, Tag  } from '../../index';
+
+function App() {
+    const columns = [
+        {
+            title: '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',
+            fixed: true,
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            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 = 40 + (Math.random() > 0.5 ? 1 : -1) * (i % 9);
+        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 tableProps = {
+        pagination: false,
+        columns,
+        dataSource: data,
+    };
+
+    return (
+        <Table
+            {...tableProps}
+        />
+    );
+}
+
+export default App;

package/table/_story/WithSideSheet/index.js

@@ -0,0 +1,82 @@
+import { SideSheet, Table, Dropdown, Tag } from '@douyinfe/semi-ui';
+import React, { useMemo, useState, useCallback } from 'react';
+
+export default function Demo(props = {}) {
+    const [visible, setVisible] = useState(false);
+    const dropdown = useMemo(
+        () => (
+            <Dropdown
+                clickToHide
+                render={(
+                    <Dropdown.Menu>
+                        <Dropdown.Item onClick={() => setVisible(true)}>Show SideSheet</Dropdown.Item>
+                    </Dropdown.Menu>
+                )}
+            >
+                <Tag>Hover Me</Tag>
+            </Dropdown>
+        ),
+        []
+    );
+    const getContainer = useCallback(() => document.querySelector('.sidesheet-container'), []);
+    const sideSheet = useMemo(
+        () => (
+            // eslint-disable-next-line max-len
+            <SideSheet style={{ zIndex: 2 }} maskStyle={{ zIndex: 2 }} getPopupContainer={getContainer} title="自定义尺寸的侧边栏" visible={visible} onCancel={() => setVisible(false)}>
+                <p>This is the content of a basic sidesheet.</p>
+                <p>Here is more content...</p>
+            </SideSheet>
+        ),
+        [visible]
+    );
+
+    const columns = useMemo(() => [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            render: text => <a>{text}</a>,
+            width: 200,
+            fixed: 'left',
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+        {
+            render: () => <div>{dropdown}</div>,
+            width: 200,
+            fixed: 'right',
+        },
+    ]);
+    const dataTotalSize = 46;
+    const data = useMemo(() => {
+        const _data = [];
+        for (let i = 0; i < dataTotalSize; i++) {
+            let age = (i * 1000) % 149 ;
+            let name = `Edward King ${i}`;
+            _data.push({
+                key: `${ i}`,
+                name,
+                age,
+                address: `London, Park Lane no. ${i} Lake Park`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+        return _data;
+    }, [dataTotalSize]);
+
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    return (
+        <>
+            <div className="sidesheet-container" style={{ position: 'relative', height: 500 }}>
+                <Table columns={columns} dataSource={data} scroll={scroll} />
+            </div>
+            {sideSheet}
+        </>
+    );
+}