@douyinfe/semi-ui 2.1.2 → 2.1.5

package/dropdown/__test__/dropdown.test.js

@@ -0,0 +1,308 @@
+import { Icon, Dropdown, Tag } from '../../index';
+import { string } from 'prop-types';
+import { noop, drop } from 'lodash';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const defaultItems = [{ children: 'Menu Item 1' }, { children: 'Menu Item 2' }, { children: 'Menu Item 3' }];
+
+function getSubMenu(items = defaultItems) {
+    let dropdownItems = items.map(item => <Dropdown.Item {...item} />);
+    return <Dropdown.Menu>{dropdownItems}</Dropdown.Menu>;
+}
+
+function getDD(props) {
+    let bcProps = {
+        // Dropdown use Popup Layer to show candidate option,
+        // but all Popup Layer which extends from Tooltip (eg Popover, Dropdown) have animation and delay.
+        // Turn off animation and delay during testing, to avoid wating (something like setTimeOut/balabala...) in the test code
+        motion: false,
+        mouseEnterDelay: 0,
+        mouseLeaveDelay: 0,
+        render: getSubMenu(),
+        children: <Tag>semi dropdown</Tag>,
+        ...props,
+    };
+    return mount(<Dropdown {...bcProps}></Dropdown>, {
+        attachTo: document.getElementById('container'),
+    });
+}
+
+let el_portal_inner = `.${BASE_CLASS_PREFIX}-portal-inner`;
+let el_item = `.${BASE_CLASS_PREFIX}-dropdown-item`;
+
+describe('Dropdown', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        // 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);
+        }
+    });
+
+    it('Dropdown-custom className & style', () => {
+        let props = {
+            visible: true,
+            trigger: 'custom',
+            className: 'test',
+            style: {
+                color: 'red',
+            },
+        };
+        const dropdown = getDD(props);
+        expect(dropdown.exists(`.${BASE_CLASS_PREFIX}-dropdown-wrapper.test`)).toEqual(true);
+        expect(dropdown.find(`.${BASE_CLASS_PREFIX}-dropdown`)).toHaveStyle('color', 'red');
+    });
+
+    // Dropdown can't find `.${BASE_CLASS_PREFIX}-portal` (can confirm it't existence through documenty.body.innerHTML)
+    // but find `.${BASE_CLASS_PREFIX}-portal-inner`
+
+    // 由于.${BASE_CLASS_PREFIX}-portal 不是有dropdown或其子元素的render函数渲染出来的dom，而是portal在constructore阶段通过createElement/appendChild 插入的，所以无法使用find来找
+    // 只能通过document.querySelector来获取
+    it('Dropdown-zIndex', () => {
+        let zIndex = 2000;
+        let props = {
+            visible: true,
+            trigger: 'custom',
+            zIndex: zIndex,
+        };
+        const dropdown = getDD(props);
+        expect(Number(document.querySelector(`.${BASE_CLASS_PREFIX}-portal`).style.zIndex)).toEqual(zIndex);
+    });
+
+    it('Dropdown-trigger-hover', () => {
+        let props = {
+            trigger: 'hover',
+        };
+        const dropdown = getDD(props);
+        // Before hover, dropdown is not displayed
+        expect(dropdown.exists(el_portal_inner)).toEqual(false);
+        // After trigger, dropdown content will show
+        dropdown.find(`.${BASE_CLASS_PREFIX}-tag`).simulate('mouseEnter', {});
+        expect(dropdown.exists(el_portal_inner)).toEqual(true);
+        expect(dropdown.find(el_item)).toHaveLength(3);
+        // auto hide
+        dropdown.find(`.${BASE_CLASS_PREFIX}-tag`).simulate('mouseLeave', {});
+        expect(dropdown.exists(el_portal_inner)).toEqual(false);
+        expect(dropdown.find(el_item)).toHaveLength(0);
+    });
+
+    it('Dropdown-trigger-click', () => {
+        let props = {
+            trigger: 'click',
+        };
+        const dropdown = getDD(props);
+        // Before click
+        expect(dropdown.exists(el_portal_inner)).toEqual(false);
+        expect(dropdown.exists(el_item)).toEqual(false);
+        // After click
+        dropdown.find(`.${BASE_CLASS_PREFIX}-tag`).simulate('click', {});
+        expect(dropdown.exists(el_portal_inner)).toEqual(true);
+        expect(dropdown.find(el_item)).toHaveLength(3);
+    });
+
+    it('Dropdown-contentClassName', () => {
+        let props = {
+            contentClassName: 'test',
+            trigger: 'custom',
+            visible: true,
+        };
+        const dd = getDD(props);
+        expect(dd.exists(`.${BASE_CLASS_PREFIX}-dropdown.test`)).toEqual(true);
+    });
+
+    // TODO ??? visibleChange在Jest中没有被触发，实际上代码是work的
+    // it('Dropdown-onVisibleChange', () => {
+    //     let onVisibleChange = visible => {
+    //         debugger;
+    //     };
+    //     // let spyVisibleChange = sinon.spy(onVisibleChange);
+    //     let props = {
+    //         trigger: 'hover',
+    //         onVisibleChange: onVisibleChange,
+    //     };
+    //     const dropdown = getDD(props);
+    //     dropdown.find(`.${BASE_CLASS_PREFIX}-tag`).simulate('mouseEnter', {});
+    //     expect(spyVisibleChange.calledOnce).toBe(true);
+    //     expect(spyVisibleChange.calledWithMatch(true)).toBe(true);
+    //     dropdown.find(`.${BASE_CLASS_PREFIX}-tag`).simulate('mouseLeave', {});
+    //     expect(spyVisibleChange.calledWithMatch(false)).toBe(true);
+    // });
+
+    // it('Dropdown-clickToHide', () => {
+    //     let props = {
+    //         clickToHide: true,
+    //     };
+    // });
+
+    it('Dropdown-showTick', () => {
+        let items = [{ children: 'Item 1' }, { active: true, children: 'Item 2' }, { children: 'Item 3' }];
+        let props = {
+            showTick: true,
+            render: getSubMenu(items),
+            visible: true,
+            trigger: 'custom',
+        };
+        let DD = getDD(props);
+        expect(DD.find(`.${BASE_CLASS_PREFIX}-dropdown-item-withTick.${BASE_CLASS_PREFIX}-dropdown-item-active`).text()).toEqual('Item 2');
+    });
+
+    it('Dropdown.Item active', () => {
+        let items = [{ children: 'Item 1' }, { active: true, children: 'Item 2' }, { children: 'Item 3' }];
+        let props = {
+            render: getSubMenu(items),
+            visible: true,
+            trigger: 'custom',
+        };
+        let DD = getDD(props);
+        expect(DD.find(`.${BASE_CLASS_PREFIX}-dropdown-item-active`).text()).toEqual('Item 2');
+    });
+
+    it('Dropdown.Item type', () => {
+        let types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
+        let items = types.map(type => {
+            return { type, children: `${type}Item` };
+        });
+        let props = {
+            render: getSubMenu(items),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        items.forEach(item => {
+            expect(DD.find(`.${BASE_CLASS_PREFIX}-dropdown-item-${item.type}`).text()).toEqual(`${item.children}`);
+        });
+    });
+
+    it('Dropdown.Item className & style', () => {
+        let items = [
+            { type: 'primary', children: 'primaryItem', className: 'primary-test', style: { color: 'red' } },
+            { type: 'secondary', children: 'secondaryItem' },
+        ];
+        let props = {
+            render: getSubMenu(items),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        expect(DD.find('li.primary-test')).toHaveStyle('color', 'red');
+    });
+
+    it('Dropdown.Item disabled', () => {
+        let items = [
+            { disabled: true, children: 'Item 1' },
+            { disabled: false, children: 'Item 2' },
+        ];
+        let props = {
+            render: getSubMenu(items),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        expect(DD.find(`.${BASE_CLASS_PREFIX}-dropdown-item-disabled`).text()).toEqual('Item 1');
+    });
+
+    it('Dropdown.Item onClick', () => {
+        let onClick = event => {};
+        let spyItemCLick = sinon.spy(onClick);
+        let items = [{ children: 'A' }, { children: 'B', onClick: spyItemCLick, className: 'test' }];
+        let props = {
+            render: getSubMenu(items),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        let targetItem = DD.find('li.test');
+        let event = {
+            target: {
+                value: 'B1',
+            },
+        };
+        targetItem.simulate('click', event);
+        expect(spyItemCLick.calledOnce).toEqual(true);
+        expect(spyItemCLick.calledWithMatch(event)).toEqual(true);
+    });
+
+    it('Dropdown.Item onMouseEnter/onMouseLeave', () => {
+        let onMouseEnter = e => {};
+        let spyItemMouseEnter = sinon.spy(onMouseEnter);
+        let spyItemMouseLeave = sinon.spy(e => {});
+        let items = [
+            { children: 'A' },
+            { children: 'B', onMouseEnter: spyItemMouseEnter, onMouseLeave: spyItemMouseLeave, className: 'test' },
+        ];
+        let props = {
+            render: getSubMenu(items),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        let targetItem = DD.find('li.test');
+        let event = {
+            target: {
+                value: 'B1',
+            },
+        };
+        targetItem.simulate('mouseEnter', event);
+        expect(spyItemMouseEnter.calledOnce).toEqual(true);
+        expect(spyItemMouseEnter.calledWithMatch(event)).toEqual(true);
+        targetItem.simulate('mouseLeave', event);
+        expect(spyItemMouseLeave.calledOnce).toEqual(true);
+        expect(spyItemMouseLeave.calledWithMatch(event)).toEqual(true);
+    });
+
+    it('Dropdown.Title className & style', () => {
+        let props = {
+            render: (
+                <Dropdown.Menu>
+                    <Dropdown.Title className="test" style={{ margin: 5 }}>
+                        分组1
+                    </Dropdown.Title>
+                    <Dropdown.Item>primary</Dropdown.Item>
+                    <Dropdown.Item type="secondary">secondary</Dropdown.Item>
+                    <Dropdown.Divider />
+                    <Dropdown.Title>分组2</Dropdown.Title>
+                    <Dropdown.Item type="danger">danger</Dropdown.Item>
+                </Dropdown.Menu>
+            ),
+            trigger: 'custom',
+            visible: true,
+        };
+        let DD = getDD(props);
+        expect(DD.find('div.test')).toHaveStyle('margin', 5);
+    });
+
+
+    it('Dropdown array menu', () => {
+        const menu = [
+            { node: 'title', name: '分组1' },
+            { node: 'item', name: 'primary1', type: 'primary', onClick: () => console.log('click primary') },
+            { node: 'item', name: 'secondary', type: 'secondary' },
+            { node: 'divider', },
+            { node: 'title', name: '分组2' },
+            { node: 'item', name: 'tertiary', type: 'tertiary' },
+            { node: 'item', name: 'warning', type: 'warning', active: true },
+            { node: 'item', name: 'danger', type: 'danger' },
+        ];
+        let DD = mount(<Dropdown menu={menu} trigger="custom" visible ></Dropdown>, {
+            attachTo: document.getElementById('container'),
+        });
+        expect(DD.find('.semi-dropdown-menu').children().length).toEqual(menu.length);
+        const menu2 = [
+            { node: 'title', name: '分组1', iconType: 'menu' },
+            { node: 'item', name: 'secondary', type: 'secondary' },
+            { node: 'divider', },
+            { node: 'title', name: '分组2' },
+            { node: 'invalid node', name: '分组2' },
+        ];
+        DD.setProps({ menu: menu2 })
+        DD.update()
+        expect(DD.find('.semi-dropdown-menu').children().length).toEqual(menu2.length - 1);
+    });
+});

package/dropdown/_story/AutoClose/index.js

@@ -0,0 +1,120 @@
+import { Dropdown, Tag, Switch } from '@douyinfe/semi-ui';
+import React, { useState } from 'react';
+
+const log = console.log;
+
+function Demo() {
+    const [clickToHide, setClickToHide] = useState(true);
+    const [dropdownVisible, setDropdownVisible] = useState(false);
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div style={{ margin: 50 }}>
+            <div>
+                <div>
+                    <label>点击后是否自动关闭</label>
+                    <Switch
+                        checked={clickToHide}
+                        onChange={v => {
+                            setClickToHide(v);
+                        }}
+                    />
+                </div>
+                <Dropdown
+                    clickToHide={clickToHide}
+                    onVisibleChange={v => {
+                        log('dropdown1 visible changed to: ', v);
+                    }}
+                    position={'bottomLeft'}
+                    trigger="click"
+                    render={
+                        <Dropdown.Menu>
+                            {[1, 2, 3].map(index => (
+                                <Dropdown.Item key={index} onClick={() => log('Dropdown.Item closed: ', index)}>
+                                    Menu Item {index}
+                                </Dropdown.Item>
+                            ))}
+                        </Dropdown.Menu>
+                    }
+                >
+                    <Tag>Click Me</Tag>
+                </Dropdown>
+            </div>
+            <div>
+                <div>
+                    <label>手动控制点击选项后关闭</label>
+                </div>
+                <Dropdown
+                    position={'bottomLeft'}
+                    trigger="click"
+                    visible={dropdownVisible}
+                    onVisibleChange={v => {
+                        log('dropdown2 visible changed to: ', v);
+                        setDropdownVisible(v);
+                    }}
+                    render={
+                        <Dropdown.Menu>
+                            {[1, 2, 3].map(index => (
+                                <Dropdown.Item key={index} onClick={() => setDropdownVisible(false)}>
+                                    Menu Item {index}
+                                </Dropdown.Item>
+                            ))}
+                        </Dropdown.Menu>
+                    }
+                >
+                    <Tag>Click Me</Tag>
+                </Dropdown>
+            </div>
+            <div>
+                <div>
+                    <label>完全控制浮层显隐</label>
+                </div>
+                <Dropdown
+                    position={'bottomLeft'}
+                    trigger="custom"
+                    visible={visible}
+                    onVisibleChange={v => {
+                        log('dropdown3 visible changed to: ', v);
+                        // setVisible(v);
+                    }}
+                    render={
+                        <Dropdown.Menu>
+                            {[1, 2, 3].map(index => (
+                                <Dropdown.Item key={index} onClick={() => setVisible(false)}>
+                                    Menu Item {index}
+                                </Dropdown.Item>
+                            ))}
+                        </Dropdown.Menu>
+                    }
+                >
+                    <Tag onClick={() => setVisible(!visible)}>Click Me</Tag>
+                </Dropdown>
+            </div>
+            <div>
+                <div>
+                    <label>hover展示+选择选项后自动关闭</label>
+                </div>
+                <Dropdown
+                    clickToHide
+                    position={'bottomLeft'}
+                    trigger="hover"
+                    onVisibleChange={v => {
+                        log('dropdown3 visible changed to: ', v);
+                        // setVisible(v);
+                    }}
+                    render={
+                        <Dropdown.Menu>
+                            {[1, 2, 3].map(index => (
+                                <Dropdown.Item key={index}>Menu Item {index}</Dropdown.Item>
+                            ))}
+                        </Dropdown.Menu>
+                    }
+                >
+                    <Tag>Hover Me</Tag>
+                </Dropdown>
+            </div>
+        </div>
+    );
+}
+
+export default Demo;

package/dropdown/_story/DisabledItem/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Dropdown } from '@douyinfe/semi-ui/';
+
+const Demo = () => {
+    const events = {
+        onClick: console.log,
+        onMouseEnter: console.log,
+        onMouseLeave: console.log,
+    };
+    return (
+        <Dropdown
+            trigger="click"
+            render={
+                <Dropdown.Menu>
+                    <Dropdown.Item disabled {...events}>
+                        1111
+                    </Dropdown.Item>
+                    <Dropdown.Divider />
+                    <Dropdown.Item selected={true} {...events}>
+                        2222 What if the text is super long? Longer than whatever you have known
+                    </Dropdown.Item>
+                    <Dropdown.Item>It looks OK</Dropdown.Item>
+                </Dropdown.Menu>
+            }
+        >
+            <div>分割线</div>
+        </Dropdown>
+    );
+};
+
+export default Demo;

package/dropdown/_story/InHoverElements/index.js

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { Dropdown } from '@douyinfe/semi-ui';
+import { IconEdit } from '@douyinfe/semi-icons';
+
+import '@douyinfe/semi-foundation/dropdown/dropdown.scss';
+
+export default function Demo() {
+    const ref = useRef();
+
+    return (
+        <div className={'demo-in-hover-elements'} ref={ref}>
+            <span className={'content'}>ABCDEFG</span>
+            <span className={'action'}>
+                <Dropdown
+                    position={'bottomLeft'}
+                    getPopupContainer={() => ref.current}
+                    render={<article>I&apos;m Dropdown content.</article>}
+                >
+                    {/* <Button>Hover Me</Button> */}
+                    <IconEdit size={'extra-large'} />
+                </Dropdown>
+            </span>
+        </div>
+    );
+}

package/dropdown/_story/InHoverElements/index.scss

@@ -0,0 +1,16 @@
+.demo-in-hover-elements {
+    width: 200px;
+    height: 100px;
+    background-color: var(--semi-color-primary-light-default);
+    padding: 20px;
+
+    .action {
+        display: none;
+    }
+
+    &:hover {
+        .action {
+            display: block;
+        }
+    }
+}

package/dropdown/_story/MultiDropdown/index.js

@@ -0,0 +1,34 @@
+import { Dropdown, Tag } from '@douyinfe/semi-ui';
+import React, { useMemo } from 'react';
+
+function Demo() {
+    const subDropdown = useMemo(() => (
+        <Dropdown.Menu>
+            <Dropdown.Item>Menu Item 1</Dropdown.Item>
+            <Dropdown.Item>Menu Item 2</Dropdown.Item>
+            <Dropdown.Item>Menu Item 3</Dropdown.Item>
+        </Dropdown.Menu>
+    ));
+
+    return (
+        <div style={{ margin: 100 }}>
+            <Dropdown
+                render={
+                    <Dropdown.Menu>
+                        <Dropdown position={'rightTop'} render={subDropdown} spacing={20}>
+                            <Dropdown.Item>Menu Item 1</Dropdown.Item>
+                        </Dropdown>
+                        <Dropdown position={'leftTop'} render={subDropdown}>
+                            <Dropdown.Item>Menu Item 2</Dropdown.Item>
+                        </Dropdown>
+                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
+                    </Dropdown.Menu>
+                }
+            >
+                <Tag>Hover Me</Tag>
+            </Dropdown>
+        </div>
+    );
+}
+
+export default Demo;

package/dropdown/_story/WrapAvatar/index.jsx

@@ -0,0 +1,10 @@
+import { Dropdown, Avatar } from '../../..';
+import React from 'react';
+
+export default function Demo() {
+    return (
+        <Dropdown render={<article>hhihhihihiiihi</article>}>
+            <Avatar>头像</Avatar>
+        </Dropdown>
+    );
+}