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

package/divider/index.tsx

@@ -1,76 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import cls from 'classnames';
-import { cssClasses } from '@douyinfe/semi-foundation/divider/constants';
-import '@douyinfe/semi-foundation/divider/divider.scss';
-
-
-const prefixCls = cssClasses.PREFIX;
-
-export interface DividerProps {
-    /** The position of title inside divider */
-    align?: 'left' | 'right' | 'center';
-    /** space between divider and surroundings **/
-    margin?: number | string
-    /** The wrapped title */
-    children?: ReactNode;
-    /** Style class name */
-    className?: string;
-    /** Whether line is dashed  */
-    dashed?: boolean;
-    /** The direction type of divider */
-    layout?: 'horizontal' | 'vertical';
-    /** Divider inline style */
-    style?: CSSProperties;
-}
-
-const Divider: React.FC<DividerProps> = props => {
-    const {
-        layout = 'horizontal',
-        dashed,
-        align = 'center',
-        className,
-        margin,
-        style,
-        children,
-        ...rest
-    } = props;
-
-    const dividerClassNames = cls(`${prefixCls}-divider`, className, {
-        [`${prefixCls}-divider-horizontal`]: layout === 'horizontal',
-        [`${prefixCls}-divider-vertical`]: layout === 'vertical',
-        [`${prefixCls}-divider-dashed`]: !!dashed,
-        [`${prefixCls}-divider-with-text`]: children && layout === 'horizontal',
-        [`${prefixCls}-divider-with-text-${align}`]: children && layout === 'horizontal',
-    });
-
-    let overrideDefaultStyle: CSSProperties = {};
-    if (margin !== undefined) {
-        if (layout === 'vertical') {
-            overrideDefaultStyle = {
-                'marginLeft': margin,
-                'marginRight': margin
-            };
-        } else if (layout === 'horizontal') {
-            overrideDefaultStyle = {
-                'marginTop': margin,
-                'marginBottom': margin,
-            };
-        }
-    }
-
-    return (
-        <div {...rest} className={dividerClassNames} style={{ ...overrideDefaultStyle, ...style }}>
-            {children && layout === 'horizontal' ? (
-                typeof children === 'string' ? (
-                    <span className={`${prefixCls}-divider_inner-text`} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : (
-                    children
-                )
-            ) : null}
-        </div>
-    );
-};
-
-export default Divider;

package/dropdown/__test__/dropdown.test.js

@@ -1,308 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,16 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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

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