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

package/navigation/_story/WithChildren/index.js

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

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

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

@@ -1,101 +0,0 @@
-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 />;
-});