@douyinfe/semi-ui 2.1.2 → 2.1.5

package/tree/__test__/treeNodeProps.test.js

@@ -0,0 +1,192 @@
+import { Tree, Button } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { IconMapPin } from '@douyinfe/semi-icons';
+
+
+const treeChildren = [
+    {
+        label: '北京',
+        value: 'beijing',
+        key: 'beijing',
+    },
+    {
+        label: '上海',
+        value: 'shanghai',
+        key: 'shanghai',
+    },
+];
+
+const treeDataDisabled = [
+    {
+        label: '亚洲',
+        value: 'Yazhou',
+        key: 'yazhou',
+        children: [
+            {
+                label: '中国',
+                value: 'Zhongguo',
+                key: 'zhongguo',
+                disabled: true,
+                children: treeChildren,
+            },
+            {
+                label: '日本',
+                value: 'Riben',
+                key: 'riben',
+            },
+        ],
+    }
+];
+
+const treeDataIcon = [
+    {
+        label: '亚洲',
+        value: 'Yazhou',
+        key: 'yazhou',
+        children: [
+            {
+                label: '中国',
+                value: 'Zhongguo',
+                key: 'zhongguo',
+                icon: (<IconMapPin />),
+                children: treeChildren,
+            },
+            {
+                label: '日本',
+                value: 'Riben',
+                key: 'riben',
+            },
+        ],
+    }
+];
+
+const treeDataExtra = [
+    {
+        label: '亚洲',
+        value: 'Yazhou',
+        key: 'yazhou',
+        children: [
+            {
+                label: '中国',
+                value: 'Zhongguo',
+                key: 'zhongguo',
+                info: 'extra',
+                children: treeChildren,
+            },
+            {
+                label: '日本',
+                value: 'Riben',
+                key: 'riben',
+            },
+        ],
+    }
+];
+
+function getTree(props) {
+    return mount(
+        <Tree
+            defaultExpandAll
+            // multiple
+            {...props}
+        />,
+        {
+            attachTo: document.getElementById('container')
+        }
+    );
+}
+
+describe('Tree', () => {
+
+    beforeEach(() => {
+        // Avoid `attachTo: document.body` Warning
+        const div = document.createElement('div');
+        div.setAttribute('id', 'container');
+        document.body.appendChild(div);
+    });
+
+    afterEach(() => {
+        const div = document.getElementById('container');
+        if (div) {
+            document.body.removeChild(div);
+        }
+        document.body.innerHTML = '';
+    });
+
+    it('disable', () => {
+        let spyOnChange = sinon.spy(() => { });
+        let tree = getTree({
+            treeData: treeDataDisabled,
+            onChange: spyOnChange,
+        });
+        let node = tree.find(`.${BASE_CLASS_PREFIX}-tree-option-disabled`);
+        expect(node.instance().textContent).toEqual('中国');
+        node.simulate('click');
+        expect(spyOnChange.notCalled).toBe(true);
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-tree-option-selected`).exists()).toEqual(false);
+    });
+
+    it('disable + multiple', () => {
+        let spyOnChange = sinon.spy(() => { });
+        let tree = getTree({
+            treeData: treeDataDisabled,
+            onChange: spyOnChange,
+            multiple: true
+        });
+        let node = tree.find(`.${BASE_CLASS_PREFIX}-tree-option-disabled`);
+        expect(node.instance().textContent).toEqual('中国');
+        node.simulate('click');
+        expect(spyOnChange.notCalled).toBe(true);
+        expect(node.find(`.${BASE_CLASS_PREFIX}-checkbox-disabled`).exists()).toEqual(true);
+    });
+
+    it('custom icon', () => {
+        let props = {
+            treeData: treeDataIcon,
+        };
+        let tree = getTree(props);
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-icon-map_pin`).length).toEqual(1);
+    });
+
+    it('custom props + onChangeWithObject', () => {
+        let spyOnChange = sinon.spy(() => { });
+        let tree = getTree({
+            treeData: treeDataExtra,
+            onChangeWithObject: true,
+            onChange: spyOnChange,
+        });
+        // zhongguo
+        let node = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`).at(0);
+        node.simulate('click');
+        // onSelect & onChange
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(spyOnChange.calledWithMatch({ info: "extra" })).toEqual(true);
+    })
+
+    it('ReactNode label', () => {
+        let spyOnClick = sinon.spy(() => { });
+        const treeData = [
+            {
+                label: (
+                    <span>
+                        <span style={{ marginRight: 30 }}>亚洲</span>
+                        <Button
+                            style={{ zIndex: 2 }}
+                            onClick={e => { spyOnClick(); e.stopPropagation() }}
+                        >
+                            Click
+                        </Button>
+                    </span>
+                ),
+                value: 'yazhou',
+                key: 'yazhou',
+            }
+        ];
+        let tree = getTree({ treeData });
+        let button = tree.find(`.${BASE_CLASS_PREFIX}-button`);
+        button.simulate('click');
+        expect(button.exists()).toEqual(true);
+        expect(spyOnClick.calledOnce).toBe(true);
+        // event stopPropagation 
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-tree-option-selected`).exists()).toEqual(false);
+    });
+})

package/tree/_story/BigData.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Tree from '../index';
+import Gen from './bigDataGen';
+
+class Demo extends React.Component {
+    state = {
+        gData: [],
+    };
+
+    // componentWillUpdate(nextProps, nextState) {
+    //   // invoked immediately before rendering with new props or state, not for initial 'render'
+    //   // see componentWillReceiveProps if you need to call setState
+    //   // console.log(nextState.gData === this.state.gData);
+    //   if (nextState.gData === this.state.gData) {
+    //     this.notReRender = true;
+    //   } else {
+    //     this.notReRender = false;
+    //   }
+    // }
+
+    onGen = data => {
+        this.setState({
+            gData: data,
+        });
+    };
+
+    render() {
+        return (
+            <div style={{ padding: '0 20px' }}>
+                <Gen onGen={this.onGen} />
+                {this.state.gData.length ? (
+                    <Tree
+                        treeData={this.state.gData}
+                        filterTreeNode
+                        style={{
+                            height: 500,
+                            display: 'flex',
+                            'flexDirection': 'column',
+                        }}
+                        debounceWait={1200}
+                        multiple
+                        virtualize={{
+                            height: 300,
+                            itemSize: 28,
+                            // height: '100%', 
+
+                        }}
+                    // onExpand={(e, {expanded, node}) => console.log('expand', e, expanded, node)}
+                    // onSelect={(e, bool) => console.log('select', e, bool)}
+                    // onChange={e => console.log('change', e)}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+}
+
+export default Demo;

package/tree/_story/Demo.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import Tree from '../index';
+
+const Demo = () => {
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
+    const style = {
+        width: 260,
+        height: 420,
+        border: '1px solid var(--semi-color-border)'
+    }
+    return (
+        <div>
+            <Tree filterTreeNode treeData={ treeData } style={ style } onChange={ (ev: any) => { console.log(ev) } } />
+        </div>
+    );
+}
+
+export default Demo

package/tree/_story/bigDataGen.jsx

@@ -0,0 +1,98 @@
+/* eslint react/no-string-refs:0 */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from '../../index';
+
+function generateData(x = 3, y = 2, z = 1, gData = []) {
+    // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
+    function _loop(_level, _preKey, _tns) {
+        const preKey = _preKey || '0';
+        const tns = _tns || gData;
+
+        const children = [];
+        for (let i = 0; i < x; i++) {
+            const key = `${preKey}-${i}`;
+            tns.push({ label: `${key}-标签`, key: `${key}-key`, value: `${key}-value` });
+            if (i < y) {
+                children.push(key);
+            }
+        }
+        if (_level < 0) {
+            return tns;
+        }
+        const __level = _level - 1;
+        children.forEach((key, index) => {
+            tns[index].children = [];
+            return _loop(__level, key, tns[index].children);
+        });
+
+        return null;
+    }
+    _loop(z);
+    return gData;
+}
+
+function calcTotal(x = 3, y = 2, z = 1) {
+    const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
+    return rec(z + 1);
+}
+
+class Gen extends React.Component {
+    static propTypes = {
+        onGen: PropTypes.func,
+        // x: PropTypes.number,
+        // y: PropTypes.number,
+        // z: PropTypes.number,
+    };
+
+    static defaultProps = {
+        onGen: () => { },
+        // x: 20,
+        // y: 18,
+        // z: 1,
+    };
+
+    state = {
+        nums: '',
+    };
+
+    componentDidMount() {
+        // const vals = this.getVals();
+        // this.props.onGen(generateData(vals.x, vals.y, vals.z));
+    }
+
+    onGen = (val) => {
+        const {x, y, z} = this.getVals( val.x, val.y, val.z );
+        this.props.onGen(generateData(x, y, z));
+        const total = calcTotal(x, y, z);
+        this.setState({
+            nums: total,
+        });
+        console.log('总节点', total);
+    };
+
+    getVals(x, y, z) {
+        return {
+            x: parseInt(x, 10),
+            y: parseInt(y, 10),
+            z: parseInt(z, 10),
+        };
+    }
+
+    render() {
+        return (
+            <div style={{ padding: '0 20px' }}>
+                <h2>big data generator</h2>
+                <p>节点总数：{this.state.nums}</p>
+                <Form onSubmit={(values) => this.onGen(values)} labelPosition='left' style={{ width: 500 }}>
+                    <Form.InputNumber field='x' label='x：每一级下的节点总数'/>
+                    <Form.InputNumber field='y' label='y：每级节点里有y个节点、存在子节点'/>
+                    <Form.InputNumber field='z' label='z：树的level层级数（0表示一级）'/>
+                    <Button htmlType='submit'>提交</Button>
+                </Form>
+            </div>
+        );
+    }
+}
+export default Gen;

package/tree/_story/data.js

@@ -0,0 +1,3 @@
+// for test purpose only
+const data = [];
+export default data;