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

package/table/_story/GroupedColsFixedJSX/index.jsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { Table } from '../../../index';
+
+export default function Demo() {
+    const data = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < 100; i++) {
+            let age = (i * 1000) % 149 ;
+            let name = `Edward King ${i}`;
+            data.push({
+                key: '' + i,
+                company: {
+                    name: 'ByteDance',
+                    address: 'No. 48, Zhichun Road',
+                },
+                name,
+                age,
+                address: `No ${i + 1}, Zhongguancun Street`,
+                description: `My name is ${name}, I am ${age} years old, living in No ${i + 1}, Zhongguancun Street`,
+            });
+        }
+        return data;
+    }, []);
+
+    const columns = useMemo(
+        () => [
+            {
+                title: 'Base Information',
+                fixed: 'left',
+                children: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        fixed: 'left',
+                        width: 200,
+                        filters: [
+                            {
+                                text: 'Code 45',
+                                value: '45',
+                            },
+                            {
+                                text: 'King 4',
+                                value: 'King 4',
+                            },
+                        ],
+                        onFilter: (value, record) => record.name.includes(value),
+                    },
+                    {
+                        title: 'Age',
+                        dataIndex: 'age',
+                        fixed: 'left',
+                        width: 100,
+                        sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+                    },
+                ],
+            },
+            {
+                title: 'Company Information',
+                children: [
+                    {
+                        title: 'Company Name',
+                        dataIndex: 'company.name',
+                    },
+                    {
+                        title: 'Company Address',
+                        dataIndex: 'company.address',
+                    },
+                ],
+            },
+            {
+                title: 'Address',
+                width: 250,
+                dataIndex: 'address',
+                fixed: 'right',
+            },
+        ],
+        []
+    );
+
+    return (
+        <Table
+            rowSelection={{ fixed: true }}
+            expandedRowRender={record => <article>{record.description}</article>}
+            dataSource={data}
+            scroll={{ x: '120%', y: 400 }}
+            onChange={(...args) => console.log(...args)}
+            columns={columns}
+        >
+            {/* <Table.Column title={'Base Information'} fixed>
+                <Table.Column
+                    title={'Name'}
+                    dataIndex={'name'}
+                    fixed
+                    width={200}
+                    filters={[
+                        {
+                            text: 'Code 45',
+                            value: '45',
+                        },
+                        {
+                            text: 'King 4',
+                            value: 'King 4',
+                        },
+                    ]}
+                    onFilter={(value, record) => record.name.includes(value)}
+                />
+                <Table.Column
+                    title={'Age'}
+                    dataIndex={'age'}
+                    fixed
+                    width={100}
+                    sorter={(a, b) => (a.age - b.age > 0 ? 1 : -1)}
+                />
+            </Table.Column>
+            <Table.Column title={'Company Information'}>
+                <Table.Column title={'Company Name'} dataIndex={'company.name'} />
+                <Table.Column title={'Company Address'} dataIndex={'company.address'} />
+            </Table.Column>
+            <Table.Column title={'Address'} width={250} fixed={'right'} dataIndex={'address'} /> */}
+        </Table>
+    );
+}

package/table/_story/GroupedColsFixedVirtualized/index.jsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { Table } from '../../../index';
+
+export default function Demo() {
+    const columns = [
+        {
+            title: 'Base Information',
+            fixed: 'left',
+            children: [
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    fixed: 'left',
+                    width: 200,
+                    filters: [
+                        {
+                            text: '',
+                            value: '',
+                        },
+                        {
+                            text: 'Code 45',
+                            value: '45',
+                        },
+                        {
+                            text: 'King 4',
+                            value: 'King 4',
+                        },
+                    ],
+                    onFilter: (value, record) => record.name.includes(value),
+                },
+                {
+                    title: 'Age',
+                    dataIndex: 'age',
+                    fixed: 'left',
+                    width: 100,
+                    sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+                },
+            ],
+        },
+        {
+            title: 'Company Information',
+            children: [
+                {
+                    title: 'Company Name',
+                    dataIndex: 'company.name',
+                    width: 200,
+                },
+                {
+                    title: 'Company Address',
+                    dataIndex: 'company.address',
+                },
+            ],
+        },
+        {
+            title: 'Address',
+            width: 250,
+            dataIndex: 'address',
+            fixed: 'right',
+        },
+    ];
+
+    const total = 100000;
+    const data = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < total; i++) {
+            let age = (i * 1000) % 149 ;
+            let name = `Edward King ${i}`;
+            data.push({
+                key: '' + i,
+                company: {
+                    name: 'ByteDance',
+                    address: 'No. 48, Zhichun Road',
+                },
+                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.`,
+            });
+        }
+        return data;
+    }, [total]);
+
+    return (
+        <Table
+            resizable={{
+                onResize: (...args) => console.log(...args),
+            }}
+            rowSelection={{ fixed: true }}
+            expandedRowRender={record => (
+                <article>
+                    {record.description}
+                    {record.description}
+                    {record.description}
+                    {record.description}
+                    {record.description}
+                </article>
+            )}
+            columns={columns}
+            dataSource={data}
+            style={{ width: 800 }}
+            scroll={{ x: '150%', y: 600 }}
+            onChange={(...args) => console.log(...args)}
+            virtualized
+            pagination={false}
+        />
+    );
+}

package/table/_story/GroupedColsFixedVirtualizedGroups/index.jsx

@@ -0,0 +1,110 @@
+import React, { useMemo } from 'react';
+import { Table } from '../../../index';
+
+export default function Demo() {
+    const columns = [
+        {
+            title: 'Base Information',
+            fixed: 'left',
+            children: [
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    fixed: 'left',
+                    width: 200,
+                    filters: [
+                        {
+                            text: '',
+                            value: '',
+                        },
+                        {
+                            text: 'Code 45',
+                            value: '45',
+                        },
+                        {
+                            text: 'King 4',
+                            value: 'King 4',
+                        },
+                    ],
+                    onFilter: (value, record) => record.name.includes(value),
+                },
+                {
+                    title: 'Age',
+                    dataIndex: 'age',
+                    fixed: 'left',
+                    width: 100,
+                    sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+                },
+            ],
+        },
+        {
+            title: 'Company Information',
+            children: [
+                {
+                    title: 'Company Name',
+                    dataIndex: 'company.name',
+                    width: 200,
+                },
+                {
+                    title: 'Company Address',
+                    dataIndex: 'company.address',
+                },
+            ],
+        },
+        {
+            title: 'Address',
+            width: 250,
+            dataIndex: 'address',
+            fixed: 'right',
+        },
+    ];
+
+    const total = 1000;
+    const data = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < total; i++) {
+            let age = (i * 1000) % 149 ;
+            let name = `Edward King ${i}`;
+            data.push({
+                key: 'row' + i,
+                company: {
+                    name: 'ByteDance',
+                    address: 'No. 48, Zhichun Road',
+                },
+                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.`,
+            });
+        }
+        return data;
+    }, [total]);
+
+    return (
+        <Table
+            // resizable={{
+            //     onResize: (...args) => console.log(...args),
+            // }}
+            rowSelection={{ fixed: true }}
+            // expandedRowRender={record => (
+            //     <article>
+            //         {record.description}
+            //         {record.description}
+            //         {record.description}
+            //         {record.description}
+            //         {record.description}
+            //     </article>
+            // )}
+            columns={columns}
+            dataSource={data}
+            groupBy={'age'}
+            renderGroupSection={(groupKey, group) => <span>Age: {groupKey}</span>}
+            clickGroupedRowToExpand
+            style={{ width: 800 }}
+            scroll={{ x: '150%', y: 600 }}
+            onChange={(...args) => console.log(...args)}
+            virtualized
+            pagination={false}
+        />
+    );
+}

package/table/_story/GroupedRows/index.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, Button } from '../../../index';
+
+function Demo() {
+    const rowKey = record => `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+    const tableRef = useRef();
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        /**
+         * FE => frontend engineer
+         * BE => backend engineer
+         * Andoird => android engineer
+         * IOS => ios engineer
+         * SE => software engineer
+         */
+        const data = [
+            { city: 'Beijing', job: 'FE', department: 'IES' },
+            { city: 'Beijing', job: 'BE', department: 'IES' },
+            { city: 'Shanghai', job: 'Android', department: 'IES' },
+            { city: 'Tokyo', job: 'Android', department: 'IES' },
+            { city: 'Shanghai', job: 'IOS', department: 'EE' },
+            { city: 'LA', job: 'SE', department: 'EE' },
+            { city: 'Beijing', job: 'Android', department: 'EE' },
+            { city: 'Tokyo', job: 'IOS', department: 'EE' },
+            { city: 'Tokyo', job: 'SE', department: 'DATA' },
+            { city: 'Shanghai', job: 'BE', department: 'DATA' },
+            { city: 'LA', job: 'Android', department: 'DATA' },
+            { city: 'LA', job: 'IOS', department: 'DATA' },
+        ];
+        setData(data);
+    }, []);
+
+    const columns = [
+        { dataIndex: 'city', title: 'City', width: 400, sorter: (a, b) => (a.city > b.city ? 1 : -1) },
+        {
+            dataIndex: 'job',
+            title: 'Job',
+            width: 200,
+            filters: [{ text: 'IOS', value: 'IOS' }, { text: 'Android', value: 'Android' }],
+            onFilter: (value, record) => record.job && record.job.indexOf(value) === 0,
+        },
+        { dataIndex: 'department', title: 'Department' },
+    ];
+
+    return (
+        <div style={{ padding: '20px 0px' }}>
+            <div>
+                <Button onClick={() => console.log(tableRef.current && tableRef.current.getCurrentPageData())}>
+                    打印当前页数据
+                </Button>
+            </div>
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                onGroupedRow={(group, index) => {
+                    return {
+                        // onMouseEnter: () => {
+                        //     console.log(`Grouped row mouse enter: `, group, index);
+                        // },
+                        // onMouseLeave: () => {
+                        //     console.log(`Grouped row mouse leave: `, group, index);
+                        // },
+                        onClick: () => {
+                            console.log(`Grouped row mouse click: `, group, index);
+                        },
+                    };
+                }}
+                defaultExpandAllRows
+                clickGroupedRowToExpand
+                onExpand={(...args) => console.log('onExpand', args)}
+                onExpandedRowsChange={(...args) => console.log('onExpandedRowsChange', args)}
+                scroll={{ y: 480 }}
+                ref={tableRef}
+            />
+        </div>
+    );
+}
+
+export default Demo;

package/table/_story/GroupedRowsFixed/index.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, Button } from '../../../index';
+
+function Demo() {
+    const rowKey = record => `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+    const tableRef = useRef();
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        /**
+         * FE => frontend engineer
+         * BE => backend engineer
+         * Andoird => android engineer
+         * IOS => ios engineer
+         * SE => software engineer
+         */
+        const data = [
+            { city: 'Beijing', job: 'FE', department: 'IES' },
+            { city: 'Beijing', job: 'BE', department: 'IES' },
+            { city: 'Shanghai', job: 'Android', department: 'IES' },
+            { city: 'Tokyo', job: 'Android', department: 'IES' },
+            { city: 'Shanghai', job: 'IOS', department: 'EE' },
+            { city: 'LA', job: 'SE', department: 'EE' },
+            { city: 'Beijing', job: 'Android', department: 'EE' },
+            { city: 'Tokyo', job: 'IOS', department: 'EE' },
+            { city: 'Tokyo', job: 'SE', department: 'DATA' },
+            { city: 'Shanghai', job: 'BE', department: 'DATA' },
+            { city: 'LA', job: 'Android', department: 'DATA' },
+            { city: 'LA', job: 'IOS', department: 'DATA' },
+        ];
+        setData(data);
+    }, []);
+
+    const columns = [
+        { dataIndex: 'city', title: 'City', width: 400, sorter: (a, b) => (a.city > b.city ? 1 : -1), fixed: 'left' },
+        {
+            dataIndex: 'job',
+            title: 'Job',
+            width: 200,
+            filters: [{ text: 'IOS', value: 'IOS' }, { text: 'Android', value: 'Android' }],
+            onFilter: (value, record) => record.job && record.job.indexOf(value) === 0,
+        },
+        { dataIndex: 'department', title: 'Department' },
+    ];
+
+    return (
+        <div style={{ padding: '20px 0px' }}>
+            <div>
+                <Button onClick={() => console.log(tableRef.current && tableRef.current.getCurrentPageData())}>
+                    打印当前页数据
+                </Button>
+            </div>
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                onGroupedRow={(group, index) => {
+                    return {
+                        // onMouseEnter: () => {
+                        //     console.log(`Grouped row mouse enter: `, group, index);
+                        // },
+                        // onMouseLeave: () => {
+                        //     console.log(`Grouped row mouse leave: `, group, index);
+                        // },
+                        onClick: () => {
+                            console.log(`Grouped row mouse click: `, group, index);
+                        },
+                    };
+                }}
+                defaultExpandAllRows
+                clickGroupedRowToExpand
+                scroll={{ y: 480, x: '120%' }}
+                ref={tableRef}
+            />
+        </div>
+    );
+}
+
+export default Demo;

package/table/_story/InSideSheet/index.jsx

@@ -0,0 +1,90 @@
+import { SideSheet, Table, Dropdown, Tag, Button } from '../../..';
+import React, { useMemo, useState, useEffect } 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 columns = useMemo(() => [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            render: text => <a>{text}</a>,
+            fixed: 'left',
+            width: 150,
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+        {
+            render: () => <div>{dropdown}</div>,
+            fixed: 'right',
+            width: 150,
+        },
+    ]);
+    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 sideSheet = useMemo(
+        () => (
+            <SideSheet
+                title="自定义尺寸的侧边栏"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                width={'50vw'}
+                height={'100vh'}
+                style={{ overflow: 'auto' }}
+            >
+                <Table
+                    columns={columns}
+                    dataSource={data}
+                    scroll={{ x: '150%', y: 400 }}
+                    rowSelection={{ fixed: true }}
+                />
+            </SideSheet>
+        ),
+        [visible]
+    );
+
+    return (
+        <div>
+            <div>
+                <Button onClick={() => setVisible(true)}>Show side sheet</Button>
+            </div>
+            {sideSheet}
+        </div>
+    );
+}