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

package/table/_story/Demos/rowSelection.jsx

@@ -1,130 +0,0 @@
-import React from 'react';
-import { Table, Avatar } from '@douyinfe/semi-ui';
-import { IconMore } from '@douyinfe/semi-icons';
-
-function App() {
-    const columns = [
-        {
-            title: '标题',
-            dataIndex: 'name',
-            width: 400,
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
-                        {text}
-                    </div>
-                );
-            }
-        },
-        {
-            title: '大小',
-            dataIndex: 'size',
-        },
-        {
-            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',
-        },
-        {
-            title: '',
-            dataIndex: 'operate',
-            render: () => {
-                return <IconMore />;
-            }
-        },
-    ];
-    const data = [
-        {
-            key: '1',
-            name: 'Semi Design 设计稿.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 设计稿.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: '5',
-            name: 'Semi Pro 分享演示文稿',
-            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: '6',
-            name: 'Semi Pro 设计文档',
-            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'
-        },
-    ];
-    const rowSelection = {
-        getCheckboxProps: record => ({
-            disabled: record.name === '设计文档', // Column configuration not to be checked
-            name: record.name,
-        }),
-        onSelect: (record, selected) => {
-            console.log(`select row: ${selected}`, record);
-        },
-        onSelectAll: (selected, selectedRows) => {
-            console.log(`select all rows: ${selected}`, selectedRows);
-        },
-        onChange: (selectedRowKeys, selectedRows) => {
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-        },
-    };
-
-    const pagination = useMemo(() => ({
-        pageSize: 3
-    }), []);
-
-    return <Table columns={columns} dataSource={data} rowSelection={rowSelection} pagination={pagination} />;
-}
-
-render(App);

package/table/_story/Demos/sortTree.jsx

@@ -1,218 +0,0 @@
-import React, { useState } from 'react';
-import { Table, Button } from '@douyinfe/semi-ui';
-import { IconArrowUp, IconArrowDown } from '@douyinfe/semi-icons';
-
-const raw = [
-    {
-        key: 1,
-        dataKey: 'videos_info',
-        name: '视频信息',
-        type: 'Object 对象',
-        description: '视频的元信息',
-        default: '无',
-        children: [
-            {
-                key: 11,
-                dataKey: 'status',
-                name: '视频状态',
-                type: 'Enum <Integer> 枚举',
-                description: '视频的可见、推荐状态',
-                default: '1',
-            },
-            {
-                key: 12,
-                dataKey: 'vid',
-                name: '视频 ID',
-                type: 'String 字符串',
-                description: '标识视频的唯一 ID',
-                default: '无',
-                children: [
-                    {
-                        dataKey: 'video_url',
-                        name: '视频地址',
-                        type: 'String 字符串',
-                        description: '视频的唯一链接',
-                        default: '无',
-                    },
-                ],
-            }
-        ],
-    },
-    {
-        key: 2,
-        dataKey: 'text_info',
-        name: '文本信息',
-        type: 'Object 对象',
-        description: '视频的元信息',
-        default: '无',
-        children: [
-            {
-                key: 21,
-                dataKey: 'title',
-                name: '视频标题',
-                type: 'String 字符串',
-                description: '视频的标题',
-                default: '无',
-            },
-            {
-                key: 22,
-                dataKey: 'video_description',
-                name: '视频描述',
-                type: 'String 字符串',
-                description: '视频的描述',
-                default: '无',
-            }
-        ],
-    },
-];
-
-const rowKey= 'key';
-const childrenRecordName= 'children';
-
-function App() {
-    const [expandedRowKeys, setExpandedRowKeys] = useState([1, 2]);
-    const [data, setData] = useState(raw);
-
-    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: 'Key',
-            dataIndex: 'dataKey',
-            key: 'dataKey',
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            width: 200,
-        },
-        {
-            title: '数据类型',
-            dataIndex: 'type',
-            key: 'type',
-        },
-        {
-            title: '描述',
-            dataIndex: 'description',
-            key: 'description',
-        },
-        {
-            title: '默认值',
-            dataIndex: 'default',
-            key: 'default',
-            width: 100,
-        },
-        {
-            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}
-            dataSource={data}
-            rowKey={rowKey}
-            childrenRecordName={childrenRecordName}
-            expandedRowKeys={expandedRowKeys}
-            onExpandedRowsChange={rows => setExpandedRowKeys(rows.map(item => item[rowKey]))}
-        />
-    );
-};
-
-render(App);

package/table/_story/Demos/sortable.jsx

@@ -1,183 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Table, Avatar } from '@douyinfe/semi-ui';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-
-let draggingIndex = -1;
-const PAGE_SIZE = 5;
-const DAY = 24 * 60 * 60 * 1000;
-const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
-
-function BodyRow(props) {
-    const { isOver, connectDragSource, connectDropTarget, moveRow, currentPage, ...restProps } = props;
-    const style = { ...restProps.style, cursor: 'move' };
-
-    let { className } = restProps;
-    if (isOver) {
-        console.log('true');
-        if (restProps.index > draggingIndex) {
-            className += ' drop-over-downward';
-        }
-        if (restProps.index < draggingIndex) {
-            className += ' drop-over-upward';
-        }
-    }
-
-    return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
-}
-
-const rowSource = {
-    beginDrag(props) {
-        draggingIndex = props.index;
-        return {
-            index: props.index,
-        };
-    },
-};
-
-const rowTarget = {
-    drop(props, monitor) {
-        const dragIndex = monitor.getItem().index;
-        const hoverIndex = props.index;
-
-        if (dragIndex === hoverIndex) {
-            return;
-        }
-
-        props.moveRow(dragIndex, hoverIndex);
-
-        monitor.getItem().index = hoverIndex;
-    },
-};
-
-const DraggableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-}))(
-    DragSource('row', rowSource, connect => ({
-        connectDragSource: connect.dragSource(),
-    }))(BodyRow)
-);
-
-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',
-        width: 200,
-        sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
-        render: (text) => `${text} KB`
-    },
-    {
-        title: '所有者',
-        width: 200,
-        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 initData = [];
-for (let i = 0; i < 46; i++) {
-    const isSemiDesign = i % 2 === 0;
-    const randomNumber = (i * 1000) % 199;
-    initData.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'
-    });
-}
-
-function DragSortingTableDemo(props) {
-    const [data, setData] = useState([...initData]);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [pageData, setPageData] = useState(data.slice(0, PAGE_SIZE));
-
-    const components = useMemo(() => ({
-        body: {
-            row: DraggableBodyRow,
-        },
-    }), []);
-
-    const moveRow = (dragIndex, hoverIndex) => {
-        const totalDragIndex = (currentPage - 1) * PAGE_SIZE + dragIndex;
-        const totalHoverIndex = (currentPage - 1) * PAGE_SIZE + hoverIndex;
-        const dragRow = data[totalDragIndex];
-        const newData = [...data];
-        newData.splice(totalDragIndex, 1);
-        newData.splice(totalHoverIndex, 0, dragRow);
-        setData(newData);
-        setPageData(newData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE));
-    };
-
-    const handlePageChange = (pageNum) => {
-        console.log(pageNum);
-        setCurrentPage(pageNum);
-        setPageData(data.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE));
-    };
-
-    return (
-        <div id="components-table-demo-drag-sorting">
-            <DndProvider backend={HTML5Backend}>
-                <Table
-                    columns={columns}
-                    dataSource={pageData}
-                    pagination={{
-                        pageSize: PAGE_SIZE,
-                        total: data.length,
-                        currentPage,
-                        onPageChange: handlePageChange
-                    }}
-                    components={components}
-                    onRow={(record, index) => ({
-                        index,
-                        moveRow,
-                    })}
-                />
-            </DndProvider>
-        </div>
-    );
-}
-
-render(DragSortingTableDemo);

package/table/_story/Demos/span.jsx

@@ -1,155 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Table, Avatar } from '@douyinfe/semi-ui';
-import * as dateFns from 'date-fns';
-
-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) => {
-            const renderObject = {};
-            const children = (
-                <div>
-                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
-                    {text}
-                </div>
-            );
-            renderObject.children = children;
-            if (index === 0) {
-                renderObject.props = {
-                    colSpan: 4,
-                };
-            }
-            if (index === 1) {
-                renderObject.props = {
-                    rowSpan: 2,
-                };
-            }
-            if (index === 2) {
-                renderObject.props = {
-                    rowSpan: 0,
-                };
-            }
-            return renderObject;
-        },
-    },
-    {
-        title: '大小',
-        dataIndex: 'size',
-        render: (text, record, index) => {
-            if (index === 0) {
-                return {
-                    children: `${text} KB`,
-                    props: {
-                        colSpan: 0,
-                    }
-                };
-            }
-            if (index === 1) {
-                return {
-                    children: `${text} KB`,
-                    props: {
-                        rowSpan: 2,
-                    }
-                };
-            }
-            if (index === 2) {
-                return {
-                    children: `${text} KB`,
-                    props: {
-                        rowSpan: 0,
-                    }
-                };
-            }
-            return `${text} KB`;
-        }
-    },
-    {
-        title: '所有者',
-        dataIndex: 'owner',
-        render: (text, record, index) => {
-            const children = (
-                <div>
-                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
-                    {text}
-                </div>
-            );
-            if (index === 0) {
-                return {
-                    children,
-                    props: {
-                        colSpan: 0,
-                    }
-                };
-            }
-            return children;
-        }
-    },
-    {
-        title: '更新日期',
-        dataIndex: 'updateTime',
-        sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
-        render: (value, record, index) => {
-            const children = dateFns.format(new Date(value), 'yyyy-MM-dd');
-            if (index === 0) {
-                return {
-                    children,
-                    props: {
-                        colSpan: 0
-                    }
-                };
-            }
-            if (index === 1) {
-                return {
-                    children,
-                    props: {
-                        rowSpan: 2
-                    }
-                };
-            }
-            if (index === 2) {
-                return {
-                    children,
-                    props: {
-                        rowSpan: 0
-                    }
-                };
-            }
-            return children;
-        }
-    }
-];
-
-const DAY = 24 * 60 * 60 * 1000;
-
-function App() {
-    const [dataSource, setData] = useState([]);
-
-    const getData = (total) => {
-        const data = [];
-        for (let i = 0; i < total; 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(5);
-        setData(data);
-    }, []);
-
-    return <Table columns={columns} dataSource={dataSource} pagination={false} />;
-}
-
-render(App);