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

package/navigation/_story/WithChildren/index.js

@@ -0,0 +1,119 @@
+import React, { useState, useCallback } from 'react';
+import { Nav, Button } from '@douyinfe/semi-ui';
+import {IconAppCenter, IconArticle, IconFolder, IconPhoneStroke, IconSetting} from '@douyinfe/semi-icons';
+
+const defaultItems = [
+    {
+        title: '应用管理',
+        key: 'app',
+        icon: <IconAppCenter />,
+        children: [
+            { title: '应用控制台', key: '/app/perm', children: [] },
+            { title: '查看应用', key: '/app/list', children: [] },
+            { title: '创建应用', key: '/app/create', children: [] },
+            { title: '应用鉴权', key: '/app/auth', children: [] },
+        ],
+    },
+    {
+        title: '版本管理',
+        key: 'version',
+        icon: <IconArticle />,
+        children: [
+            { title: '版本发布', key: '/version/release', children: [] },
+            { title: '产品功能发布', key: '/feature/release', children: [] },
+            { title: '发版记录', key: '/version/releases', children: [] },
+            { title: '开发文档', key: '/version/doc', children: [] },
+            { title: 'VESDK介绍', key: '/version/sdkinfo', children: [] },
+        ],
+    },
+    {
+        title: '模块化打包',
+        key: 'module',
+        icon: <IconFolder />,
+        children: [
+            // { title: 'CI打包配置', key: '/module/ciconfig', children: [] },
+            { title: '业务打包配置', key: '/module/cilist', children: [] },
+            { title: '宏模块管理', key: '/module/group', children: [] },
+            { title: '宏参数管理', key: '/module/param', children: [] },
+            { title: '分支管理', key: '/module/branch', children: [] },
+        ],
+    },
+    {
+        title: '机型打分',
+        key: 'device',
+        icon: <IconPhoneStroke />,
+        children: [
+            { title: '机型性能查询', key: '/benchmark/performance', children: [] },
+            { title: '生成黑白名单', key: '/benchmark/list', children: [] },
+            { title: '黑白名单管理', key: '/benchmark/manage', children: [] },
+            { title: '机型查询', key: '/benchmark/model', children: [] },
+            { title: '元数据管理', key: '/benchmark/data', children: [] },
+            { title: '场景打分管理', key: '/benchmark/scene', children: [] },
+        ],
+    },
+    {
+        title: 'VESDK数据',
+        key: 'vesdk',
+        icon: <IconPhoneStroke />,
+        children: [
+            { title: 'VESDK DAU趋势', key: '/trend/dau', children: [] },
+            { title: 'VESDK API趋势', key: '/trend/api', children: [] },
+        ],
+    },
+    {
+        title: '工具能力',
+        key: 'setting',
+        icon: <IconSetting />,
+        children: [
+            { title: '群消息发送', key: '/setting/msg', children: [] },
+            { title: '群标签管理', key: '/setting/tag', children: [] },
+            { title: '上传文件', key: '/setting/upload', children: [] },
+        ],
+    },
+];
+
+const normalize = ({ title: text, key: itemKey, children: items, ...rest } = {}) => ({
+    ...rest,
+    text,
+    itemKey,
+    items: Array.isArray(items) && items.length ? items.map(normalize) : undefined,
+});
+
+const Demo = (props = {}) => {
+    const [items, setItems] = useState(() => defaultItems.map(normalize));
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [openKeys, setOpenKeys] = useState([]);
+
+    const onSelect = useCallback(item => {
+        console.log(item);
+        setSelectedKeys([item.itemKey]);
+    }, []);
+    const onOpenChange = useCallback(item => {
+        console.log('onOpenChange: ', item);
+        setOpenKeys([...item.openKeys]);
+    });
+
+    return (
+        <div style={{ width: '100%', height: '100vh' }}>
+            <Button onClick={() => setItems(defaultItems.map(normalize))}>重置导航</Button>
+            <Nav
+                defaultSelectedKeys={selectedKeys}
+                openKeys={openKeys}
+                style={{ height: '100%' }}
+                bodyStyle={{ height: 480 }}
+                items={items}
+                onSelect={onSelect}
+                onOpenChange={onOpenChange}
+                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,
+                }}
+            />
+        </div>
+    );
+};
+
+export default Demo;

package/navigation/_story/WithRouter/index.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import * as _ from 'lodash';
+import { Nav } from '../../../index';
+
+const navList = [
+    {
+        path: 'components',
+        title: '所有组件',
+    },
+    {
+        path: 'demo',
+        title: '主题样例',
+        children: [
+            {
+                path: 'demo_workstation',
+                title: '工作台',
+            },
+        ],
+    },
+];
+
+const searchToJson = (search = '') => {
+    const pairs = search.substring(1).split('&');
+    const obj = {};
+    let pair;
+    let i;
+
+    for (i in pairs) {
+        if (pairs[i] === '') continue;
+
+        pair = pairs[i].split('=');
+        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+    }
+
+    return obj;
+};
+
+const jsonToSearch = (json = {}) => {
+    return Object.entries(json)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+};
+
+export class Navbar extends Component {
+    static defaultProps = {
+        notifyNavChange: path => {
+            const json = searchToJson(window.location.search);
+            json.itemKey = path;
+            window.location.search = jsonToSearch(json);
+        },
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedKeys: ['components'],
+        };
+    }
+
+    componentDidMount() {
+        this.setKey();
+    }
+
+    componentDidUpdate() {
+        this.setKey();
+    }
+
+    setKey(key) {
+        // const pathname = window.location.hash;
+        key = key || searchToJson()['itemKey'];
+        const { selectedKeys } = this.state;
+        if (key && key !== selectedKeys[0]) {
+            this.setState({ selectedKeys: [key] });
+        }
+    }
+
+    setActive = (key, path) => {
+        if (key !== this.state.selectedKeys[0]) {
+            // 通知父组件变更路由，之后会触发didUpdate
+            this.props.notifyNavChange(path);
+            this.setState({});
+        }
+    };
+
+    renderNavItem = config => {
+        const { path, title, children } = config;
+        let props = {
+            itemKey: path,
+            text: title,
+            key: path,
+        };
+        if (children) {
+            return <Nav.Sub {...props}>{children.map(sub => this.renderNavItem(sub))}</Nav.Sub>;
+        }
+
+        return <Nav.Item {...props} onClick={() => this.setActive(path, path)} />;
+    };
+
+    render() {
+        let { selectedKeys } = this.state;
+
+        return (
+            <Nav className="page-nav" defaultOpenKeys={[navList[1].path]} selectedKeys={selectedKeys}>
+                {navList.map(item => this.renderNavItem(item))}
+                <Nav.Footer collapseButton={true} />
+            </Nav>
+        );
+    }
+}
+
+export default Navbar;

package/navigation/_story/navigation.stories.js

@@ -0,0 +1,330 @@
+import React from 'react';
+
+import Nav from '..';
+import Switch from '../../switch';
+import AutoOpenDemo from './AutoOpen';
+import ControlledSelectedKeys from './ControlledSelectedKeys';
+import LinkNavDemo from './LinkNav';
+import MountUnmount from './MountUnmount';
+import WithRouter from './WithRouter';
+import WithChildren from './WithChildren';
+import ItemsChange from './ItemsChange';
+import DisabledNav from './DisabledNav';
+import Button from '../../button';
+
+import {
+  IconMail,
+  IconFolder,
+  IconGift,
+  IconList,
+  IconFlag,
+  IconStar,
+  IconCloud,
+  IconEdit,
+  IconFile,
+  IconCamera,
+  IconArticle,
+  IconUser,
+  IconAscend,
+  IconDescend,
+  IconSetting,
+  IconUserGroup,
+} from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Navigation'
+}
+
+export const Default = () => {
+  return (
+    <div style={{ height: '100vh', display: 'inline-block' }}>
+      <Nav onSelect={(...args) => console.log(...args)}>
+        <Nav.Item itemKey={'1'} text={'Option 1'} icon={<IconMail />} />
+        <Nav.Sub text={'Group 2'} icon={<IconFolder />} stayWhenClick={true} itemKey={'2'}>
+          {['2-1', '2-2'].map(k => (
+            <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+          ))}
+          <Nav.Item itemKey={'2-3'} text={'Option 2-3'} />
+          <Nav.Sub text={'Group 2-4'} itemKey={'2-4'}>
+            <Nav.Item itemKey={'2-4-1'} text={'Option 2-3-1'} />
+            <Nav.Item itemKey={'2-4-2'} text={'Option 2-3-2'} />
+          </Nav.Sub>
+        </Nav.Sub>
+        <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon={<IconGift />} />
+        <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon={<IconList />} />
+        <Nav.Sub text={'Group 5'} icon={<IconFlag />} stayWhenClick={true} itemKey={'5'}>
+          {['5-1', '5-2'].map(k => (
+            <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+          ))}
+        </Nav.Sub>
+        <Nav.Item itemKey={'6'} text={'Option 6 (with link)'} icon={<IconStar />} link="/star" />
+        <Nav.Sub text={'Group 7'} icon={<IconFolder />} stayWhenClick={true} itemKey={'7'}>
+          {['7-1', '7-2'].map(k => (
+            <Nav.Item
+              key={k}
+              itemKey={String(k)}
+              text={'Option ' + k + ' (with link)'}
+              link={`folder/${k}`}
+            />
+          ))}
+          <Nav.Item itemKey={'7-3'} text={'Option 7-3'} />
+        </Nav.Sub>
+      </Nav>
+    </div>
+  );
+};
+
+Default.story = {
+  name: 'default',
+};
+
+class NavApp extends React.Component {
+  state = {
+    isCollapsed: true,
+  };
+
+  updateCollapsed = isCollapsed => {
+    this.setState({ isCollapsed });
+  };
+
+  render() {
+    let { isCollapsed } = this.state;
+    return (
+      <div style={{ height: '100vh', display: 'inline-block' }}>
+        <div>
+          {'收起到左侧'}
+          <Switch defaultChecked={isCollapsed} onChange={v => this.updateCollapsed(v)} />
+        </div>
+        <Nav isCollapsed={isCollapsed}>
+          <Nav.Item itemKey={'1'} text={'Option 1'} icon={<IconCloud />} />
+          <Nav.Sub text={'Group 2'} icon={<IconEdit />} stayWhenClick={true}>
+            {['2-1', '2-2'].map(k => (
+              <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+            ))}
+            <Nav.Sub text={'Group 2-3'} icon={<IconFile />}>
+              <Nav.Item itemKey={'2-3-1'} text={'Option 2-3-1'} />
+              <Nav.Item itemKey={'2-3-2'} text={'Option 2-3-2'} />
+            </Nav.Sub>
+          </Nav.Sub>
+          <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon={<IconCamera />} />
+          <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon={<IconArticle />} />
+          <Nav.Sub text={'Group 5'} stayWhenClick={true} icon={<IconFolder />}>
+            {['5-1', '5-2'].map(k => (
+              <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+            ))}
+          </Nav.Sub>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+export const CollapseExpand = () => <NavApp />;
+
+CollapseExpand.story = {
+  name: 'collapse/expand',
+};
+
+export const ConfigItems = () => (
+  <div style={{ border: '1px solid black', height: '100vh', display: 'inline-block' }}>
+    <Nav
+      items={[
+        { itemKey: 'user', text: '用户管理', icon: <IconUser />, link: '/user' },
+        { itemKey: 'union', text: '公会中心', icon: <IconUser />, link: '/star' },
+        {
+          text: '任务平台',
+          icon: <IconSetting />,
+          itemKey: 'job',
+          items: ['任务管理', '用户任务查询'],
+        },
+      ]}
+      onSelect={key => console.log(key)}
+    />
+  </div>
+);
+
+ConfigItems.story = {
+  name: 'config items',
+};
+
+export const Horizontal = () => (
+  <div>
+    <Nav
+      mode="horizontal"
+      items={[
+        '1',
+        { itemKey: '2', text: 'Option 2 Option 2 Option 2 Option 2', icon: <IconCamera /> },
+        {
+          text: 'Group 3',
+          itemKey: '3',
+          icon: <IconFile />,
+          items: ['3-1', '3-2', { text: 'Group 3-3', items: ['3-3-1', '3-3-2'] }],
+        },
+      ]}
+      onSelect={key => console.log(key)}
+    />
+  </div>
+);
+
+Horizontal.story = {
+  name: 'horizontal',
+};
+
+class Demo extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      isCollapsed: false,
+      defaultOpenKeys: ['2', '2-3'],
+      mode: 'vertical',
+      navHeight: '100vh',
+    };
+  }
+
+  updateCollapsed(isCollapsed) {
+    this.setState({ isCollapsed });
+  }
+
+  render() {
+    let { isCollapsed, defaultOpenKeys, mode, navHeight } = this.state;
+    let logo = '//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/logo_huoshan.png';
+    let testIcon = '//lf1-cdn-tos.bytescm.com/obj/mosaic-legacy/da9d0015af0f09667998';
+    let vigoIcon = '//lf1-cdn-tos.bytescm.com/obj/mosaic-legacy/504100070cbe0498d66f';
+    return (
+      <div>
+        <Nav
+          isCollapsed={isCollapsed}
+          defaultOpenKeys={defaultOpenKeys}
+          style={{ height: navHeight }}
+          mode={mode}
+        >
+          <Nav.Header logo={<img src={logo} />} text="互娱运营" />
+          <Nav.Item
+            itemKey={'1'}
+            text={<strong>火山运营</strong>}
+            icon={<img width="20" height="20" src={vigoIcon} />}
+          />
+          <Nav.Sub
+            itemKey={'2'}
+            text={<span>抖音运营</span>}
+            icon={<img width="20" height="20" src={testIcon} />}
+            stayWhenClick={true}
+          >
+            {['2-1', '2-2'].map(k => (
+              <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+            ))}
+          </Nav.Sub>
+          <Nav.Footer>
+            <Button
+              title="展开/收起切换"
+              icon={isCollapsed ? <IconAscend /> : <IconDescend />}
+              onClick={() => this.updateCollapsed(!isCollapsed)}
+            />
+          </Nav.Footer>
+        </Nav>
+      </div>
+    );
+  }
+}
+export const ExpandCollapseWithLogo = () => <Demo />;
+
+ExpandCollapseWithLogo.story = {
+  name: 'expand collapse with logo',
+};
+
+class HorizontalDemo extends React.Component {
+  render() {
+    return (
+      <div style={{ width: '100%' }}>
+        <Nav
+          bodyStyle={{ height: 320 }}
+          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: <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,
+          }}
+        />
+      </div>
+    );
+  }
+}
+export const HorizontalWithLogo = () => <HorizontalDemo />;
+
+HorizontalWithLogo.story = {
+  name: 'horizontal with logo',
+};
+
+export const AutoOpen = () => <AutoOpenDemo />;
+
+AutoOpen.story = {
+  name: 'auto open',
+};
+
+export const LinkNav = () => <LinkNavDemo />;
+LinkNav.story = {
+  name: 'link nav',
+}
+
+export const MountUnmountDemo = () => <MountUnmount />;
+MountUnmountDemo.story = {
+  name: 'mount unmount'
+}
+
+export const ControlledSelectedKeysDemo = () => <ControlledSelectedKeys />;
+ControlledSelectedKeysDemo.story = {
+  name: 'controlled selected keys'
+};
+
+export const WithRouterDemo = () => <WithRouter />;
+WithRouter.story = {
+  name: 'with router'
+};
+
+export const WithChildrenDemo = () => <WithChildren />;
+WithChildrenDemo.story = {
+  name: 'with children'
+}
+
+export const ItemsChangeDemo = () => <ItemsChange />;
+ItemsChangeDemo.story = {
+  name: 'nav cannot set item to 0 dynamically'
+};
+
+export const DisabledNavDemo = () => <DisabledNav />;
+DisabledNavDemo.story = {
+  name: 'disabled nav'
+}

package/navigation/_story/navigation.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar, IconUserGroup } from '@douyinfe/semi-icons';
+
+import Nav from '..';
+
+const stories = storiesOf('Navigation', module);
+
+stories.add(`default`, () => {
+    const Demo = () => {
+        let logo = '//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/logo_huoshan.png';
+
+        return (
+            <div style={{ height: '100vh', display: 'inline-block' }}>
+                <Nav onSelect={(...args: any[]) => console.log(...args)}>
+                    <Nav.Header logo={<img src={logo} />} text={'火山运营'} />
+                    <Nav.Item itemKey={'1'} text={'Option 1'} icon="mail" link="/mail" />
+                    <Nav.Sub text={'Group 2'} icon="folder" itemKey={'2'}>
+                        {['2-1', '2-2'].map(k => (
+                            <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} link={`folder/${k}`} />
+                        ))}
+                        <Nav.Item itemKey={'2-3'} text={'Option 2-3'} />
+                        <Nav.Sub text={'Group 2-4'} itemKey={'2-4'}>
+                            <Nav.Item itemKey={'2-4-1'} text={'Option 2-3-1'} />
+                            <Nav.Item itemKey={'2-4-2'} text={'Option 2-3-2'} />
+                        </Nav.Sub>
+                    </Nav.Sub>
+                    <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon="gift" />
+                    <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon="list" />
+                    <Nav.Sub text={'Group 5'} icon="flag" itemKey={'5'}>
+                        {['5-1', '5-2'].map(k => (
+                            <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
+                        ))}
+                    </Nav.Sub>
+                    <Nav.Footer collapseButton  />
+                </Nav>
+            </div>
+        );
+    };
+
+    return <Demo />;
+});
+
+
+stories.add(`fix 35`, () => {
+    const Demo = () => {
+        return (
+            <>
+                <Nav
+                    style={{ maxWidth: 220, height: '100%' }}
+                    defaultSelectedKeys={['Home']}
+                    items={[
+                        { itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },
+                        { itemKey: 'Histogram', text: '基础数据', icon: <IconHistogram size="large" /> },
+                        { itemKey: 'Live', text: '测试功能', icon: <IconLive size="large" /> },
+                        { itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },
+                    ]}
+                    footer={{
+                        collapseButton: true,
+                    }}
+                />
+                <Nav
+                    bodyStyle={{ height: 320 }}
+                    items={[
+                        { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
+                        { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
+                        {
+                            text: '任务平台',
+                            icon: <IconSetting />,
+                            itemKey: 'job',
+                            items: ['任务管理', '用户任务查询'],
+                        },
+                    ]}
+                    onSelect={data => console.log('trigger onSelect: ', data)}
+                    onClick={data => console.log('trigger onClick: ', data)}
+                />
+                <Nav
+                    bodyStyle={{ height: 320 }}
+                    defaultOpenKeys={['user', 'union']}
+                    onSelect={data => console.log('trigger onSelect: ', data)}
+                    onClick={data => console.log('trigger onClick: ', data)}
+                >
+                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
+                    <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
+                    <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
+                        <Nav.Item itemKey={'golder'} text={'金主管理'} />
+                        <Nav.Item itemKey={'ban'} text={'用户封禁'} />
+                    </Nav.Sub>
+                    <Nav.Sub itemKey={'union-management'} text="公会管理" icon={<IconUserGroup />}>
+                        <Nav.Item itemKey={'notice'} text={'公告设置'} />
+                        <Nav.Item itemKey={'query'} text={'公会查询'} />
+                        <Nav.Item itemKey={'info'} text={'信息录入'} />
+                    </Nav.Sub>
+                    <Nav.Footer collapseButton={true} />
+                </Nav>
+            </>
+        );
+    };
+
+    return <Demo />;
+});