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

package/navigation/__test__/navigation.test.js

@@ -0,0 +1,274 @@
+import Nav from '../index';
+import { clear } from 'jest-date-mock';
+import { genBeforeEach, genAfterEach, mount } from '@douyinfe/semi-ui/_test_/utils/tooltip';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { noop } from 'lodash';
+
+describe(`Navigation`, () => {
+    beforeEach(() => {
+        clear();
+        genBeforeEach()();
+    });
+
+    afterEach(genAfterEach());
+
+    it(`test appearance`, async () => {
+        const items = [
+            { itemKey: 'user', text: '用户管理' },
+            { itemKey: 'union', text: '公会中心' },
+            {
+                itemKey: 'union-management',
+                text: '公会管理',
+                items: ['公告设置', '公会查询', '信息录入'],
+            },
+            {
+                text: '任务平台',
+                itemKey: 'job',
+                items: ['任务管理', '用户任务查询'],
+            },
+        ];
+
+        const nav = mount(
+            <Nav
+                defaultOpenKeys={['job']}
+                bodyStyle={{ height: 320 }}
+                items={items}
+                onSelect={key => console.log(key)}
+                header={{
+                    logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
+                    text: 'Semi 运营后台',
+                }}
+                footer={{
+                    collapseButton: true,
+                }}
+            />
+        );
+
+        // check if has header logo
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-logo`).length > 0).toBeTruthy();
+        // check if has header text
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-text`).length > 0).toBeTruthy();
+        // check if has opened sub navigation
+        expect(
+            document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-item-sub .${BASE_CLASS_PREFIX}-navigation-sub-open`).length > 0
+        ).toBeTruthy();
+        // check if has correct navigation items
+        expect(
+            document.querySelector(`.${BASE_CLASS_PREFIX}-navigation .${BASE_CLASS_PREFIX}-navigation-list`).children.length === items.length
+        ).toBeTruthy();
+        // check if has correct collapsed button
+        expect(
+            document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-footer .${BASE_CLASS_PREFIX}-navigation-collapse-btn`).length > 0
+        ).toBeTruthy();
+    });
+
+    it(`test appearance with jsx definitions`, async () => {
+        const defaultOpenKeys = ['user'];
+        const nav = mount(
+            <Nav
+                bodyStyle={{ height: 320 }}
+                defaultOpenKeys={defaultOpenKeys}
+                onSelect={data => console.log('trigger onSelect: ', data)}
+                onClick={data => console.log('trigger onClick: ', data)}
+            >
+                <Nav.Header logo={'bytedance_logo'} text={'Semi 运营后台'} />
+                <Nav.Item itemKey={'union'} text={'公会中心'} icon={'star'} />
+                <Nav.Sub itemKey={'user'} text="用户管理" icon="user">
+                    <Nav.Item itemKey={'golder'} text={'金主管理'} />
+                    <Nav.Item itemKey={'ban'} text={'用户封禁'} />
+                </Nav.Sub>
+                <Nav.Sub itemKey={'union-management'} text="公会管理" icon="user_group">
+                    <Nav.Item itemKey={'notice'} text={'公告设置'} />
+                    <Nav.Item itemKey={'query'} text={'公会查询'} />
+                    <Nav.Item itemKey={'info'} text={'信息录入'} />
+                </Nav.Sub>
+                <Nav.Footer collapseButton={true} />
+            </Nav>
+        );
+
+        // check if has header logo
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-logo`).length > 0).toBeTruthy();
+        // check if has header text
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-text`).length > 0).toBeTruthy();
+        // check if has opened sub navigation
+        expect(
+            document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-item-sub .${BASE_CLASS_PREFIX}-navigation-sub-open`).length > 0
+        ).toBeTruthy();
+        // check if has correct navigation items
+        expect(document.querySelector(`.${BASE_CLASS_PREFIX}-navigation .${BASE_CLASS_PREFIX}-navigation-list`).children.length === 3).toBeTruthy();
+        // check if has correct collapsed button
+        expect(
+            document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-footer .${BASE_CLASS_PREFIX}-navigation-collapse-btn`).length > 0
+        ).toBeTruthy();
+    });
+
+    it(`test horizontal nav appearance`, async () => {
+        const onSelect = sinon.spy();
+        const onClick = sinon.spy();
+        const items = [
+            { itemKey: 'user', text: '用户管理' },
+            { itemKey: 'union', text: '公会中心' },
+            {
+                itemKey: 'approve-management',
+                text: '审批管理',
+                items: [
+                    '入驻审核',
+                    {
+                        itemKey: 'operation-management',
+                        text: '运营管理',
+                        items: ['人员管理', '人员变更'],
+                    },
+                ],
+            },
+            {
+                text: '任务平台',
+                itemKey: 'job',
+                items: ['任务管理', '用户任务查询'],
+            },
+        ];
+
+        const nav = mount(
+            <Nav
+                mode={'horizontal'}
+                onSelect={onSelect}
+                onClick={onClick}
+                items={items}
+                header={{
+                    logo: 'bytedance_logo',
+                    text: 'Semi 运营后台',
+                }}
+                footer={{ collapseButton: true }}
+            />
+        );
+
+        // check if has header logo
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-logo`).length > 0).toBeTruthy();
+        // check if has header text
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-header-text`).length > 0).toBeTruthy();
+        // check if has opened sub navigation
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-item-sub`).length > 0).toBeTruthy();
+        // check if has correct navigation items
+        expect(
+            document.querySelector(`.${BASE_CLASS_PREFIX}-navigation .${BASE_CLASS_PREFIX}-navigation-list`).children.length === items.length
+        ).toBeTruthy();
+        // check if has correct collapsed button
+        expect(
+            document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-footer .${BASE_CLASS_PREFIX}-navigation-collapse-btn`).length === 0
+        ).toBeTruthy();
+    });
+
+    it(`test controlled selected and open`, async () => {
+        const items = [
+            { itemKey: 'user', text: '用户管理', icon: 'user' },
+            { itemKey: 'union', text: '公会中心', icon: 'star' },
+            {
+                itemKey: 'union-management',
+                text: '公会管理',
+                icon: 'user_group',
+                items: ['公告设置', '公会查询', '信息录入'],
+            },
+            {
+                text: '任务平台',
+                icon: 'setting',
+                itemKey: 'job',
+                items: ['任务管理', '用户任务查询'],
+            },
+        ];
+
+        const openKeys = ['union-management', 'job'];
+        const selectedKeys = ['用户任务查询'];
+        const isCollapsed = false;
+
+        const onSelect = sinon.spy(({ selectedKeys }) =>
+            nav.setProps({
+                selectedKeys,
+            })
+        );
+        const onOpenChange = sinon.spy(({ openKeys }) => nav.setProps({ openKeys }));
+        const onCollapseChange = sinon.spy(isCollapsed => nav.setProps({ isCollapsed }));
+        const onClick = sinon.spy(() => {});
+
+        const nav = mount(
+            <Nav
+                openKeys={openKeys}
+                bodyStyle={{ height: 320 }}
+                items={items}
+                onOpenChange={onOpenChange}
+                selectedKeys={selectedKeys}
+                onSelect={onSelect}
+                isCollapsed={isCollapsed}
+                onCollapseChange={onCollapseChange}
+                onClick={onClick}
+                header={{
+                    logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
+                    text: 'Semi 运营后台',
+                }}
+                footer={{
+                    collapseButton: true,
+                }}
+            />
+        );
+
+        // close first opened navigation list
+        document.querySelector(`.${BASE_CLASS_PREFIX}-navigation-sub-title`).click();
+        expect(onOpenChange.called).toBeTruthy();
+        expect(nav.prop('openKeys').length === openKeys.length - 1).toBeTruthy();
+
+        // select first opened sub menu list's first item
+        document.querySelector(`.${BASE_CLASS_PREFIX}-navigation-sub-open`).children[0].click();
+        expect(onSelect.called).toBeTruthy();
+        expect(nav.prop('selectedKeys').length === 1).toBeTruthy();
+
+        // click collpase button
+        document.querySelector(`.${BASE_CLASS_PREFIX}-navigation-collapse-btn button`).click();
+        expect(onCollapseChange.called).toBeTruthy();
+        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-navigation-collapsed`).length === 1).toBeTruthy();
+    });
+
+    it(`test function call parameter`, async () => {
+        const onSelect = sinon.spy(noop);
+        const onOpenChange = sinon.spy(noop);
+        const onCollapseChange = sinon.spy(noop);
+        const onClick = sinon.spy(noop);
+
+        const nav = mount(
+            <Nav
+                bodyStyle={{ height: 320 }}
+                items={[
+                    { itemKey: 'user', text: '用户管理', icon: 'user' },
+                    { itemKey: 'union', text: '公会中心', icon: 'star' },
+                    {
+                        text: '任务平台',
+                        icon: 'setting',
+                        itemKey: 'job',
+                        items: ['任务管理', '用户任务查询'],
+                    },
+                ]}
+                onSelect={onSelect}
+                onOpenChange={onOpenChange}
+                onCollapseChange={onCollapseChange}
+                onClick={onClick}
+                footer={{
+                    collapseButton: true,
+                }}
+            />
+        );
+
+        const subTitle = nav.find(`.${BASE_CLASS_PREFIX}-navigation-sub-title`);
+        subTitle.simulate('click');
+        expect(onClick.called).toBeTruthy();
+        expect(onOpenChange.called).toBeTruthy();
+        expect(onClick.getCall(0).args[0].itemKey).toEqual('job');
+        expect(onOpenChange.getCall(0).args[0].itemKey).toEqual('job');
+
+        const firstItem = nav.find(`.${BASE_CLASS_PREFIX}-navigation-item`).at(0);
+        firstItem.simulate('click');
+        expect(onSelect.called).toBeTruthy();
+        expect(onSelect.getCall(0).args[0].itemKey).toEqual('user');
+
+        const collpaseBtn = nav.find(`.${BASE_CLASS_PREFIX}-navigation-collapse-btn button`).at(0);
+        collpaseBtn.simulate('click');
+        expect(onCollapseChange.called).toBeTruthy();
+        expect(onCollapseChange.getCall(0).args[0]).toEqual(true);
+    });
+});

package/navigation/_story/AutoOpen/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Nav } from '../../../index';
+import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } from '@douyinfe/semi-icons';
+
+const Demo = (props = {}) => {
+    const superLargeSubs = [];
+    const superLen = 120;
+
+    for (let i = 0; i < superLen; i++) {
+        superLargeSubs.push(`Item ${i}`);
+    }
+
+    return (
+        <div style={{ width: '100%', height: '100vh' }}>
+            <Nav
+                defaultSelectedKeys={['人员管理']}
+                style={{ height: '100%' }}
+                bodyStyle={{ height: 480 }}
+                items={[
+                    { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
+                    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                    {
+                        itemKey: 'union-management',
+                        text: '公会管理',
+                        icon: <IconUserGroup />,
+                        items: ['公告设置', '公会查询', '信息录入'],
+                    },
+                    {
+                        itemKey: 'approve-management',
+                        text: '审批管理',
+                        icon: <IconEdit />,
+                        items: [
+                            '入驻审核',
+                            {
+                                itemKey: 'operation-management',
+                                text: '运营管理',
+                                items: ['人员管理', '人员变更'],
+                            },
+                        ],
+                    },
+                    {
+                        text: '超长导航列表',
+                        icon: <IconApps />,
+                        itemKey: 'long-list',
+                        maxHeight: 9999,
+                        items: superLargeSubs,
+                    },
+                    {
+                        text: '任务平台',
+                        icon: <IconSetting />,
+                        itemKey: 'job',
+                        items: ['任务管理', '用户任务查询'],
+                    },
+                ]}
+                onSelect={key => console.log(key)}
+                header={{
+                    logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
+                    text: 'Semi运营后台',
+                }}
+                footer={{
+                    collapseButton: true,
+                    collapseText: isCollapsed => <span>{isCollapsed ? '展开' : '收起'}</span>,
+                }}
+            />
+        </div>
+    );
+};
+
+export default Demo;

package/navigation/_story/ControlledSelectedKeys/index.js

@@ -0,0 +1,78 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } from '@douyinfe/semi-icons';
+import { Nav, Button } from '../../../index';
+
+export default function Demo() {
+    const [selectedKeys, setSelectedKeys] = useState(['入驻审核']);
+    const navItems = useMemo(
+        () => [
+            { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
+            { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+            {
+                itemKey: 'union-management',
+                text: '公会管理',
+                icon: <IconUserGroup />,
+                items: ['公告设置', '公会查询', '信息录入'],
+            },
+            {
+                itemKey: 'approve-management',
+                text: '审批管理',
+                icon: <IconEdit />,
+                items: [
+                    '入驻审核',
+                    {
+                        itemKey: 'operation-management',
+                        text: '运营管理',
+                        items: ['人员管理', '人员变更'],
+                    },
+                ],
+            },
+            {
+                text: '任务平台',
+                icon: <IconSetting />,
+                itemKey: 'job',
+                items: ['任务管理', '用户任务查询'],
+            },
+        ],
+        []
+    );
+    const navItemKeys = useMemo(
+        () =>
+            navItems.reduce((prev, item) => {
+                const que = [item];
+                while (que.length) {
+                    const cur = que.pop();
+                    if (cur) {
+                        if (typeof cur === 'object') {
+                            if (Array.isArray(cur.items) && cur.items.length) {
+                                que.push(...cur.items);
+                            } else if (cur.itemKey) {
+                                prev.push(cur.itemKey);
+                            }
+                        } else {
+                            prev.push(cur);
+                        }
+                    }
+                }
+                return prev;
+            }, []),
+        [navItems]
+    );
+
+    const randomSelect = useCallback(() => {
+        const randomIndex = Math.floor(Math.random() * navItemKeys.length);
+        setSelectedKeys([navItemKeys[randomIndex]]);
+    }, [navItemKeys]);
+
+    const handleSelect = (...args) => {
+        console.log(...args);
+        setSelectedKeys(args[0].selectedKeys);
+    };
+
+    return (
+        <div style={{ height: '100vh', display: 'inline-block' }}>
+            <Button onClick={randomSelect}>随机选中</Button>
+            <Nav onSelect={handleSelect} selectedKeys={selectedKeys} items={navItems} />
+        </div>
+    );
+}

package/navigation/_story/DisabledNav/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Nav } from '@douyinfe/semi-ui';
+import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } from '@douyinfe/semi-icons';
+
+export default function DisabledNav() {
+    const items = [
+        { itemKey: 'user', text: '用户管理', icon: <IconUser />, disabled: true },
+        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+        {
+            text: '任务平台',
+            icon: <IconSetting />,
+            itemKey: 'job',
+            disabled: true,
+            items: [{ itemKey: 'job_manage', text: '任务管理', disabled: true }, '用户任务查询'],
+        },
+        {
+            text: '收藏夹',
+            icon: <IconStar />,
+            itemKey: 'star',
+            items: [{ itemKey: 'like', text: '我的喜欢', disabled: true }, '点赞'],
+        },
+    ];
+
+    return (
+        <div>
+            <Nav
+                bodyStyle={{ height: 520 }}
+                items={items}
+                defaultOpenKeys={['job', 'star']}
+                defaultSelectedKeys={['user']}
+                onSelect={data => console.log('trigger onSelect: ', data)}
+                onClick={data => console.log('trigger onClick: ', data)}
+                footer={{
+                    collapseButton: true,
+                }}
+            />
+            <Nav
+                mode="horizontal"
+                bodyStyle={{ width: '100%' }}
+                items={items}
+                onSelect={data => console.log('trigger onSelect: ', data)}
+                onClick={data => console.log('trigger onClick: ', data)}
+            />
+        </div>
+    );
+}

package/navigation/_story/ItemsChange/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Nav, Button } from '@douyinfe/semi-ui';
+import {IconStar, IconSetting,IconUser} from '@douyinfe/semi-icons';
+
+const items2 = [
+    { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+    { text: '任务平台', icon: <IconSetting />, itemKey: 'job', items: ['任务管理', '用户任务查询'] },
+];
+
+class NavApp extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            items: [
+                { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
+                { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                { itemKey: 'job', text: '任务平台', icon: <IconSetting />, items: ['任务管理', '用户任务查询'] },
+            ],
+        };
+        this.change = this.change.bind(this);
+    }
+    change() {
+        if (this.state.items.length === 3) {
+            this.setState({ items: items2 });
+        } else {
+            this.setState({ items: [] });
+        }
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.change}>change items</Button>
+                <br />
+                <br />
+                <Nav bodyStyle={{ height: 150 }} items={this.state.items} />
+            </>
+        );
+    }
+}
+
+export default NavApp;

package/navigation/_story/LinkNav/index.jsx

@@ -0,0 +1,90 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } from '@douyinfe/semi-icons';
+import { Nav, Button } from '../../../index';
+
+export default function Demo() {
+    const [selectedKeys, setSelectedKeys] = useState(['人员管理']);
+    const navItems = useMemo(
+        () => [
+            { itemKey: 'user', text: '用户管理', icon: <IconUser />, link: '#' },
+            { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+            {
+                itemKey: 'union-management',
+                link: '#',
+                text: '公会管理',
+                icon: <IconUserGroup />,
+                items: ['公告设置', '公会查询', '信息录入'],
+            },
+            {
+                itemKey: 'approve-management',
+                text: '审批管理',
+                icon: <IconEdit />,
+                items: [
+                    '入驻审核',
+                    {
+                        itemKey: 'operation-management',
+                        text: '运营管理',
+                        items: ['人员管理', '人员变更'],
+                    },
+                ],
+            },
+            {
+                text: '任务平台',
+                icon: <IconSetting />,
+                itemKey: 'job',
+                items: ['任务管理', '用户任务查询'],
+            },
+        ],
+        []
+    );
+    const navItemKeys = useMemo(
+        () =>
+            navItems.reduce((prev, item) => {
+                const que = [item];
+                while (que.length) {
+                    const cur = que.pop();
+                    if (cur) {
+                        if (typeof cur === 'object') {
+                            if (Array.isArray(cur.items) && cur.items.length) {
+                                que.push(...cur.items);
+                            } else if (cur.itemKey) {
+                                prev.push(cur.itemKey);
+                            }
+                        } else {
+                            prev.push(cur);
+                        }
+                    }
+                }
+                return prev;
+            }, []),
+        [navItems]
+    );
+
+    const randomSelect = useCallback(() => {
+        const randomIndex = Math.floor(Math.random() * navItemKeys.length);
+        setSelectedKeys([navItemKeys[randomIndex]]);
+    }, [navItemKeys]);
+
+    return (
+        <div style={{ height: '100vh', display: 'inline-block' }}>
+            <Button onClick={randomSelect}>随机选中</Button>
+            <div>
+                <Nav
+                    style={{ height: 800 }}
+                    header={{
+                        logo: 'bytedance_logo',
+                        text: 'Bytedance',
+                        link: '#',
+                        linkOptions: {
+                            target: '__blank',
+                        },
+                    }}
+                    onSelect={(...args) => console.log(...args)}
+                    defaultSelectedKeys={selectedKeys}
+                    items={navItems}
+                    footer={{ collapseButton: true }}
+                />
+            </div>
+        </div>
+    );
+}

package/navigation/_story/MountUnmount/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Nav, Button } from '@douyinfe/semi-ui';
+import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } from '@douyinfe/semi-icons';
+
+function AppNav({ shouldRender = true }) {
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const navItems = [
+        { itemKey: 'user', text: '用户管理', icon:  <IconUser /> },
+        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+        {
+            itemKey: 'union-management',
+            text: '公会管理',
+            icon: <IconUserGroup />,
+            items: ['公告设置', '公会查询', '信息录入'],
+        },
+        {
+            itemKey: 'approve-management',
+            text: '审批管理',
+            icon: <IconEdit />,
+            items: [
+                '入驻审核',
+                {
+                    itemKey: 'operation-management',
+                    text: '运营管理',
+                    items: ['人员管理', '人员变更'],
+                },
+            ],
+        },
+        {
+            text: '任务平台',
+            icon: <IconSetting />,
+            itemKey: 'job',
+            items: ['任务管理', '用户任务查询'],
+        },
+    ];
+
+    const onSelect = ({ itemKey }) => {
+        setSelectedKeys([itemKey]);
+    };
+
+    return shouldRender ? <Nav items={navItems} selectedKeys={selectedKeys} onSelect={onSelect} /> : null;
+}
+
+function Demo() {
+    const [shouldRender, setShouldRender] = useState(true);
+
+    return (
+        <div>
+            <div>
+                <Button onClick={() => setShouldRender(!shouldRender)}>Rerender</Button>
+            </div>
+            <AppNav shouldRender={shouldRender} />
+        </div>
+    );
+}
+
+export default Demo;