bee-menus - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

build/Divider.js

@@ -0,0 +0,0 @@ 'use strict';

build/DOMWrap.js

@@ -0,0 +0,0 @@ 'use strict';

build/Menu.js

@@ -0,0 +0,0 @@ 'use strict';

build/MenuItem.js

@@ -0,0 +0,0 @@ 'use strict';

build/MenuItemGroup.js

@@ -0,0 +0,0 @@ 'use strict';

build/MenuToggle.js

@@ -0,0 +0,0 @@ 'use strict';

build/placements.js

@@ -0,0 +0,0 @@ 'use strict';

build/SubMenu.js

@@ -0,0 +0,0 @@ 'use strict';

build/SubPopupMenu.js

@@ -0,0 +0,0 @@ 'use strict';

build/util.js

@@ -0,0 +0,0 @@ 'use strict';

CHANGELOG.md

@@ -1,3 +0,3 @@
-<a name="1.0.11"></a>
-## [1.0.11](https://github.com/tinper-bee/bee-menus/compare/v2.0.1...v1.0.11) (2019-02-21)
+<a name="2.0.3"></a>
+## [2.0.3](https://github.com/tinper-bee/bee-menus/compare/v2.0.1...v2.0.3) (2019-03-18)
 
@@ -4,0 +4,0 @@

demo/demolist/Demo1.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo2.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo3.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo4.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo5.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo6.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo7.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo8.js

@@ -0,0 +0,0 @@ /**

demo/index-demo-base.js

@@ -0,0 +0,0 @@ import {Col, Row} from 'bee-layout';

demo/index.js

@@ -13,3 +13,3 @@ import {Col, Row} from 'bee-layout';
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var DemoArray = [{"example":<Demo1 />,"title":" 横向Menu纯菜单导航","code":"/**\n * @title 横向Menu纯菜单导航\n * @description 更简洁，更方便\n */\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\nclass Demo1 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            current: 'mail'\n        }\n    }\n\n    handleClick = (e) => {\n        this.setState({\n            current: e.key,\n        });\n    }\n\n    render() {\n        return (\n            <Menu onClick={this.handleClick}\n                  selectedKeys={[this.state.current]}\n                  mode=\"horizontal\"\n                >\n                <Menu.Item key=\"mail\" attribute={{'type': 'mail'}}>\n                    组织 1\n                </Menu.Item>\n                <Menu.Item key=\"app\" disabled>\n                    组织 2\n                </Menu.Item>\n                <SubMenu title={<span>组织 1 - 子</span>}>\n                    <MenuItemGroup title=\"组 1\">\n                        <Menu.Item key=\"setting:1\">选项 1</Menu.Item>\n                        <Menu.Item key=\"setting:2\">选项 2</Menu.Item>\n                    </MenuItemGroup>\n                    <MenuItemGroup title=\"组 2\">\n                        <Menu.Item key=\"setting:3\">选项 3</Menu.Item>\n                        <Menu.Item key=\"setting:4\">选项 4</Menu.Item>\n                    </MenuItemGroup>\n                </SubMenu>\n            </Menu>\n        )\n    }\n}\n\n","desc":" 更简洁，更方便"},{"example":<Demo2 />,"title":" 竖向Menu基础样式","code":"/**\n * @title 竖向Menu基础样式\n * @description 子菜单竖向显示，可折叠。\n */\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\nclass Demo2 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            current: 1\n        }\n    }\n\n    handleClick = (e) => {\n\n        this.setState({\n            current: e.key,\n        });\n    }\n\n    render() {\n        return (\n            <Menu theme=\"dark\" tabIndex='5' onClick={this.handleClick} style={{ width: 240 }} defaultOpenKeys={['demo3sub1']} selectedKeys={[this.state.current]} mode=\"inline\">\n                <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\n                    <MenuItemGroup title=\"组 1\">\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    </MenuItemGroup>\n                    <MenuItemGroup title=\"组 2\">\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\n                    </MenuItemGroup>\n                </SubMenu>\n                <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"demo3sub3\" title=\"子项\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n        )\n    }\n}\n\n","desc":" 子菜单竖向显示，可折叠。"},{"example":<Demo3 />,"title":" 竖向手风琴Menu","code":"/**\n * @title 竖向手风琴Menu\n * @description 菜单展开是手风琴形式。\n */\n\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\n\n\nclass Demo3 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            current: '1',\n            openKeys: []\n        }\n    }\n    handleClick = (e) => {\n        console.log('Clicked: ', e);\n        this.setState({current: e.key});\n    }\n    onOpenChange = (openKeys) => {\n        const state = this.state;\n\n        const latestOpenKey = this.myfilter(openKeys,state.openKeys);\n        const latestCloseKey = this.myfilter(state.openKeys,openKeys);\n\n        let nextOpenKeys = [];\n        if (latestOpenKey) {\n            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);\n        }\n        if (latestCloseKey) {\n            nextOpenKeys = this.getAncestorKeys(latestCloseKey);\n        }\n        this.setState({openKeys: nextOpenKeys});\n    }\n\n    //IE下 array.find（）方法不可用\n    myfilter = (arr1,arr2) => {\n        if(arr2.length === 0 || !arr2) {\n            return arr1[0];\n        }\n\n        for(var i=0;i<arr1.length;i++)\n        {\n          if(arr2.indexOf(arr1[i].toString()) === -1)\n          {\n                return arr1[i];\n          }      \n        }\n        return false;\n    }\n\n    getAncestorKeys = (key) => {\n        const map = {\n            sub3: ['sub2'],\n        };\n        return map[key] || [];\n    }\n\n    render() {\n        return (\n            <Menu\n                mode=\"inline\"\n                openKeys={this.state.openKeys}\n                selectedKeys={[this.state.current]}\n                style={{ width: 240 }}\n                onOpenChange={this.onOpenChange}\n                onClick={this.handleClick}>\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n                    <Menu.Item key=\"1\">选项 1</Menu.Item>\n                    <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    <Menu.Item key=\"3\">选项 3</Menu.Item>\n                    <Menu.Item key=\"4\">选项 4</Menu.Item>\n                </SubMenu>\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"sub3\" title=\"子项\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n        )\n    }\n}\n\n","desc":" 菜单展开是手风琴形式。"},{"example":<Demo4 />,"title":" 子菜单呼出形式Menu","code":"/**\n * @title 子菜单呼出形式Menu\n * @description 子菜单在右侧呼出形式显示。\n */\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\n\nclass Demo4 extends Component {\n\n    handleClick = (e) => {\n        console.log('click', e);\n    }\n    render() {\n        return (\n            <Menu onClick={this.handleClick} style={{ width: 240 }} mode=\"vertical\">\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n                    <MenuItemGroup title=\"Item 1\">\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    </MenuItemGroup>\n                    <MenuItemGroup title=\"Iteom 2\">\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\n                    </MenuItemGroup>\n                </SubMenu>\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"sub3\" title=\"Submenu\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n        )\n    }\n}\n\n","desc":" 子菜单在右侧呼出形式显示。"},{"example":<Demo5 />,"title":" Navbar和Menus的组合","code":"/**\n * @title Navbar和Menus的组合\n * @description 示例采取navbar与menus的组合，达到一种PC端常用的复合导航菜单。导航添加了常用的搜索表单消息提醒等组件。\n *\n */\n\nimport React, { Component } from 'react';\nimport { Menu, Navbar, Icon, Badge, FormControl } from 'tinper-bee';\n\n\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\nconst MenuToggle = Menu.MenuToggle;\nconst SideContainer = Menu.SideContainer;\n\nconst NavItem = Navbar.NavItem;\nconst Header = Navbar.Header;\nconst Brand = Navbar.Brand;\nconst Nav = Navbar.Nav;\n\n\nclass Demo5 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            expanded: false,\n            current: 1,\n            searchValue:\"Search\"\n        }\n    }\n\n    onToggle = (value) => {\n        this.setState({expanded: value});\n    }\n\n    handleClick = (e) => {\n        console.log('click ', e);\n        this.setState({\n            current: e.key\n        });\n    }\n\n    onChange = (e) => {\n        this.setState({searchValue:e});\n    }\n\n    render() {\n        return (\n            <div id=\"demo5\">\n                <Navbar expanded={this.state.expanded} onToggle={this.onToggle}>\n                    <MenuToggle show/>\n                    <Header>\n                        <Brand>\n                            <a href=\"#\"><img style={{width:140}} src=\"http://design.yyuap.com/logos/logox.png\"/></a>\n                        </Brand>\n                    </Header>\n\n                    <Nav pullRight>\n                        <NavItem eventKey={1}>\n                            <FormControl\n                                type=\"text\"\n                                placeholder=\"Search\"\n                                onChange={this.onChange}\n                                value={this.state.searchValue}\n                            />\n                        </NavItem>\n                        <NavItem eventKey={2}>\n                            <Badge dataBadge=\"4\" colors=\"warning\">\n                                <Icon\n                                    type=\"uf-bell\"\n                                />\n                            </Badge>\n                        </NavItem>\n                        <NavItem eventKey={3}>\n                            <Icon type=\"uf-bubble-o\" />\n                        </NavItem>\n                        <Menu mode=\"horizontal\" className=\"dropdown\">\n                            <SubMenu title={<span>刘认华<Icon type=\"uf-triangle-down\" /></span>}>\n                                <Menu.Item key=\"setting:1\">选项 1</Menu.Item>\n                                <Menu.Item key=\"setting:2\">选项 2</Menu.Item>\n                                <Menu.Item key=\"setting:3\">选项 3</Menu.Item>\n                                <Menu.Item key=\"setting:4\">选项 4</Menu.Item>\n                            </SubMenu>\n                        </Menu>\n                    </Nav>\n                </Navbar>\n                <SideContainer\n                    onToggle={this.onToggle}\n                    expanded={this.state.expanded}>\n                    <Menu onClick={this.handleClick}\n                          style={{ width: 240 }}\n                          defaultOpenKeys={['demo3sub1']}\n                          selectedKeys={[this.state.current]}\n                          mode=\"inline\"\n                        >\n                        <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\n                            <MenuItemGroup title=\"组 1\">\n                                <Menu.Item key=\"1\">选项 1</Menu.Item>\n                                <Menu.Item key=\"2\">选项 2</Menu.Item>\n                            </MenuItemGroup>\n                            <MenuItemGroup title=\"组 2\">\n                                <Menu.Item key=\"3\">选项 3</Menu.Item>\n                                <Menu.Item key=\"4\">选项 4</Menu.Item>\n                            </MenuItemGroup>\n                        </SubMenu>\n                        <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\n                            <Menu.Item key=\"5\">选项 5</Menu.Item>\n                            <Menu.Item key=\"6\">选项 6</Menu.Item>\n                            <SubMenu key=\"demo3sub3\" title=\"子项\">\n                                <Menu.Item key=\"7\">选项 7</Menu.Item>\n                                <Menu.Item key=\"8\">选项 8</Menu.Item>\n                            </SubMenu>\n                        </SubMenu>\n                        <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\n                            <Menu.Item key=\"9\">选项 9</Menu.Item>\n                            <Menu.Item key=\"10\">选项 10</Menu.Item>\n                            <Menu.Item key=\"11\">选项 11</Menu.Item>\n                            <Menu.Item key=\"12\">选项 12</Menu.Item>\n                        </SubMenu>\n                    </Menu>\n                </SideContainer>\n            </div>\n        )\n    }\n}\n\n","desc":" 示例采取navbar与menus的组合，达到一种PC端常用的复合导航菜单。导航添加了常用的搜索表单消息提醒等组件。"},{"example":<Demo6 />,"title":" 基础下拉菜单","code":"/**\n * @title 基础下拉菜单\n * @description 如何获取选中对象自定义对象和数据\n *\n */\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nclass Demo6 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            current: 1\n        }\n    }\n\n    handleClick = (e) => {\n\n        this.setState({\n            current: e.key,\n        });\n    }\n    \n    /**\n     * 获取当前选中行的item对象。\n     * @param {*} value \n     */\n    onSelect({item,key,selectedKeys}){ \n        console.log(`${key} selected`); //获取key\n        let currentObject = {};\n        currentObject.value = item.props.children; //获取选中对象的数据\n        currentObject.key = item.props.eventKey;\n        console.log(currentObject); \n    }\n\n    render() {\n        return (\n            <Menu theme=\"dark\" onClick={this.handleClick} style={{ width: 240 }} defaultOpenKeys={['demo3sub1']} selectedKeys={[this.state.current]} mode=\"inline\" onSelect={this.onSelect.bind(this)}>\n                <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\n                    <MenuItemGroup title=\"组 1\">\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    </MenuItemGroup>\n                    <MenuItemGroup title=\"组 2\">\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\n                    </MenuItemGroup>\n                </SubMenu>\n                <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"demo3sub3\" title=\"子项\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n        )\n    }\n}\n\n","desc":" 如何获取选中对象自定义对象和数据"},{"example":<Demo7 />,"title":" 键盘操作示例一：子菜单在右侧呼出形式显示","code":"/**\n * @title 键盘操作示例一：子菜单在右侧呼出形式显示\n * @description 子菜单在右侧呼出形式显示。\n */\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\n\nclass Demo4 extends Component {\n\n    handleClick = (e) => {\n        console.log('click', e);\n    }\n    render() {\n        return (\n            <div>\n                <input style={{'marginBottom':'10px'}} placeholder=\"我是为了获得焦点\"/>\n                <Menu onClick={this.handleClick} keyboard={true} style={{ width: 240 }} mode=\"vertical\">\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n                    <MenuItemGroup title=\"Item 1\">\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    </MenuItemGroup>\n                    <MenuItemGroup title=\"Iteom 2\">\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\n                    </MenuItemGroup>\n                </SubMenu>\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"sub3\" title=\"Submenu\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n            </div>\n            \n        )\n    }\n}\n\n","desc":" 子菜单在右侧呼出形式显示。"},{"example":<Demo8 />,"title":" 键盘操作示例二：竖向手风琴Menu","code":"/**\n * @title 键盘操作示例二：竖向手风琴Menu\n * @description 菜单展开是手风琴形式。\n */\n\n\nimport React, { Component } from 'react';\nimport { Menu } from 'tinper-bee';\n\nconst SubMenu = Menu.SubMenu;\n\n\nclass Demo3 extends Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            current: '1',\n            openKeys: []\n        }\n    }\n    handleClick = (e) => {\n        console.log('Clicked: ', e);\n        this.setState({current: e.key});\n    }\n    onOpenChange = (openKeys) => {\n        const state = this.state;\n\n        const latestOpenKey = this.myfilter(openKeys,state.openKeys);\n        const latestCloseKey = this.myfilter(state.openKeys,openKeys);\n\n        let nextOpenKeys = [];\n        if (latestOpenKey) {\n            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);\n        }\n        if (latestCloseKey) {\n            nextOpenKeys = this.getAncestorKeys(latestCloseKey);\n        }\n        this.setState({openKeys: nextOpenKeys});\n    }\n\n    //IE下 array.find（）方法不可用\n    myfilter = (arr1,arr2) => {\n        if(arr2.length === 0 || !arr2) {\n            return arr1[0];\n        }\n\n        for(var i=0;i<arr1.length;i++)\n        {\n          if(arr2.indexOf(arr1[i].toString()) === -1)\n          {\n                return arr1[i];\n          }      \n        }\n        return false;\n    }\n\n    getAncestorKeys = (key) => {\n        const map = {\n            sub3: ['sub2'],\n        };\n        return map[key] || [];\n    }\n\n    render() {\n        return (\n            <div>\n                <input style={{'marginBottom':'10px'}} placeholder=\"我是为了获得焦点\"/>\n                <Menu\n                mode=\"inline\" keyboard={true}\n                openKeys={this.state.openKeys}\n                selectedKeys={[this.state.current]}\n                style={{ width: 240 }}\n                onOpenChange={this.onOpenChange}\n                onClick={this.handleClick}>\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n                    <Menu.Item key=\"1\">选项 1</Menu.Item>\n                    <Menu.Item key=\"2\">选项 2</Menu.Item>\n                    <Menu.Item key=\"3\">选项 3</Menu.Item>\n                    <Menu.Item key=\"4\">选项 4</Menu.Item>\n                </SubMenu>\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\n                    <SubMenu key=\"sub3\" title=\"子项\">\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\n                    </SubMenu>\n                </SubMenu>\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\n                </SubMenu>\n            </Menu>\n            </div>\n            \n        )\n    }\n}\n\n","desc":" 菜单展开是手风琴形式。"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var DemoArray = [{"example":<Demo1 />,"title":" 横向Menu纯菜单导航","code":"/**\r\n * @title 横向Menu纯菜单导航\r\n * @description 更简洁，更方便\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\n\r\nclass Demo1 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            current: 'mail'\r\n        }\r\n    }\r\n\r\n    handleClick = (e) => {\r\n        this.setState({\r\n            current: e.key,\r\n        });\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Menu onClick={this.handleClick}\r\n                  selectedKeys={[this.state.current]}\r\n                  mode=\"horizontal\"\r\n                >\r\n                <Menu.Item key=\"mail\" attribute={{'type': 'mail'}}>\r\n                    组织 1\r\n                </Menu.Item>\r\n                <Menu.Item key=\"app\" disabled>\r\n                    组织 2\r\n                </Menu.Item>\r\n                <SubMenu title={<span>组织 1 - 子</span>}>\r\n                    <MenuItemGroup title=\"组 1\">\r\n                        <Menu.Item key=\"setting:1\">选项 1</Menu.Item>\r\n                        <Menu.Item key=\"setting:2\">选项 2</Menu.Item>\r\n                    </MenuItemGroup>\r\n                    <MenuItemGroup title=\"组 2\">\r\n                        <Menu.Item key=\"setting:3\">选项 3</Menu.Item>\r\n                        <Menu.Item key=\"setting:4\">选项 4</Menu.Item>\r\n                    </MenuItemGroup>\r\n                </SubMenu>\r\n            </Menu>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 更简洁，更方便"},{"example":<Demo2 />,"title":" 竖向Menu基础样式","code":"/**\r\n * @title 竖向Menu基础样式\r\n * @description 子菜单竖向显示，可折叠。\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\n\r\nclass Demo2 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            current: 1\r\n        }\r\n    }\r\n\r\n    handleClick = (e) => {\r\n\r\n        this.setState({\r\n            current: e.key,\r\n        });\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Menu theme=\"dark\" tabIndex='5' onClick={this.handleClick} style={{ width: 240 }} defaultOpenKeys={['demo3sub1']} selectedKeys={[this.state.current]} mode=\"inline\">\r\n                <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <MenuItemGroup title=\"组 1\">\r\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    </MenuItemGroup>\r\n                    <MenuItemGroup title=\"组 2\">\r\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                    </MenuItemGroup>\r\n                </SubMenu>\r\n                <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"demo3sub3\" title=\"子项\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 子菜单竖向显示，可折叠。"},{"example":<Demo3 />,"title":" 竖向手风琴Menu","code":"/**\r\n * @title 竖向手风琴Menu\r\n * @description 菜单展开是手风琴形式。\r\n */\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\n\r\n\r\nclass Demo3 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            current: '1',\r\n            openKeys: []\r\n        }\r\n    }\r\n    handleClick = (e) => {\r\n        console.log('Clicked: ', e);\r\n        this.setState({current: e.key});\r\n    }\r\n    onOpenChange = (openKeys) => {\r\n        const state = this.state;\r\n\r\n        const latestOpenKey = this.myfilter(openKeys,state.openKeys);\r\n        const latestCloseKey = this.myfilter(state.openKeys,openKeys);\r\n\r\n        let nextOpenKeys = [];\r\n        if (latestOpenKey) {\r\n            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);\r\n        }\r\n        if (latestCloseKey) {\r\n            nextOpenKeys = this.getAncestorKeys(latestCloseKey);\r\n        }\r\n        this.setState({openKeys: nextOpenKeys});\r\n    }\r\n\r\n    //IE下 array.find（）方法不可用\r\n    myfilter = (arr1,arr2) => {\r\n        if(arr2.length === 0 || !arr2) {\r\n            return arr1[0];\r\n        }\r\n\r\n        for(var i=0;i<arr1.length;i++)\r\n        {\r\n          if(arr2.indexOf(arr1[i].toString()) === -1)\r\n          {\r\n                return arr1[i];\r\n          }      \r\n        }\r\n        return false;\r\n    }\r\n\r\n    getAncestorKeys = (key) => {\r\n        const map = {\r\n            sub3: ['sub2'],\r\n        };\r\n        return map[key] || [];\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Menu\r\n                mode=\"inline\"\r\n                openKeys={this.state.openKeys}\r\n                selectedKeys={[this.state.current]}\r\n                style={{ width: 240 }}\r\n                onOpenChange={this.onOpenChange}\r\n                onClick={this.handleClick}>\r\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                    <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                    <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"sub3\" title=\"子项\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 菜单展开是手风琴形式。"},{"example":<Demo4 />,"title":" 子菜单呼出形式Menu","code":"/**\r\n * @title 子菜单呼出形式Menu\r\n * @description 子菜单在右侧呼出形式显示。\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\n\r\n\r\nclass Demo4 extends Component {\r\n\r\n    handleClick = (e) => {\r\n        console.log('click', e);\r\n    }\r\n    render() {\r\n        return (\r\n            <Menu onClick={this.handleClick} style={{ width: 240 }} mode=\"vertical\">\r\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <MenuItemGroup title=\"Item 1\">\r\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    </MenuItemGroup>\r\n                    <MenuItemGroup title=\"Iteom 2\">\r\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                    </MenuItemGroup>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"sub3\" title=\"Submenu\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 子菜单在右侧呼出形式显示。"},{"example":<Demo5 />,"title":" Navbar和Menus的组合","code":"/**\r\n * @title Navbar和Menus的组合\r\n * @description 示例采取navbar与menus的组合，达到一种PC端常用的复合导航菜单。导航添加了常用的搜索表单消息提醒等组件。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu, Navbar, Icon, Badge, FormControl } from 'tinper-bee';\r\n\n\n\n\r\n\r\n\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\nconst MenuToggle = Menu.MenuToggle;\r\nconst SideContainer = Menu.SideContainer;\r\n\r\nconst NavItem = Navbar.NavItem;\r\nconst Header = Navbar.Header;\r\nconst Brand = Navbar.Brand;\r\nconst Nav = Navbar.Nav;\r\n\r\n\r\nclass Demo5 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            expanded: false,\r\n            current: 1,\r\n            searchValue:\"Search\"\r\n        }\r\n    }\r\n\r\n    onToggle = (value) => {\r\n        this.setState({expanded: value});\r\n    }\r\n\r\n    handleClick = (e) => {\r\n        console.log('click ', e);\r\n        this.setState({\r\n            current: e.key\r\n        });\r\n    }\r\n\r\n    onChange = (e) => {\r\n        this.setState({searchValue:e});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div id=\"demo5\">\r\n                <Navbar expanded={this.state.expanded} onToggle={this.onToggle}>\r\n                    <MenuToggle show/>\r\n                    <Header>\r\n                        <Brand>\r\n                            <a href=\"#\"><img style={{width:140}} src=\"http://design.yyuap.com/logos/logox.png\"/></a>\r\n                        </Brand>\r\n                    </Header>\r\n\r\n                    <Nav pullRight>\r\n                        <NavItem eventKey={1}>\r\n                            <FormControl\r\n                                type=\"text\"\r\n                                placeholder=\"Search\"\r\n                                onChange={this.onChange}\r\n                                value={this.state.searchValue}\r\n                            />\r\n                        </NavItem>\r\n                        <NavItem eventKey={2}>\r\n                            <Badge dataBadge=\"4\" colors=\"warning\">\r\n                                <Icon\r\n                                    type=\"uf-bell\"\r\n                                />\r\n                            </Badge>\r\n                        </NavItem>\r\n                        <NavItem eventKey={3}>\r\n                            <Icon type=\"uf-bubble-o\" />\r\n                        </NavItem>\r\n                        <Menu mode=\"horizontal\" className=\"dropdown\">\r\n                            <SubMenu title={<span>刘认华<Icon type=\"uf-triangle-down\" /></span>}>\r\n                                <Menu.Item key=\"setting:1\">选项 1</Menu.Item>\r\n                                <Menu.Item key=\"setting:2\">选项 2</Menu.Item>\r\n                                <Menu.Item key=\"setting:3\">选项 3</Menu.Item>\r\n                                <Menu.Item key=\"setting:4\">选项 4</Menu.Item>\r\n                            </SubMenu>\r\n                        </Menu>\r\n                    </Nav>\r\n                </Navbar>\r\n                <SideContainer\r\n                    onToggle={this.onToggle}\r\n                    expanded={this.state.expanded}>\r\n                    <Menu onClick={this.handleClick}\r\n                          style={{ width: 240 }}\r\n                          defaultOpenKeys={['demo3sub1']}\r\n                          selectedKeys={[this.state.current]}\r\n                          mode=\"inline\"\r\n                        >\r\n                        <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\r\n                            <MenuItemGroup title=\"组 1\">\r\n                                <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                                <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                            </MenuItemGroup>\r\n                            <MenuItemGroup title=\"组 2\">\r\n                                <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                                <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                            </MenuItemGroup>\r\n                        </SubMenu>\r\n                        <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\r\n                            <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                            <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                            <SubMenu key=\"demo3sub3\" title=\"子项\">\r\n                                <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                                <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                            </SubMenu>\r\n                        </SubMenu>\r\n                        <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\r\n                            <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                            <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                            <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                            <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                        </SubMenu>\r\n                    </Menu>\r\n                </SideContainer>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 示例采取navbar与menus的组合，达到一种PC端常用的复合导航菜单。导航添加了常用的搜索表单消息提醒等组件。"},{"example":<Demo6 />,"title":" 基础下拉菜单","code":"/**\r\n * @title 基础下拉菜单\r\n * @description 如何获取选中对象自定义对象和数据\r\n *\r\n */\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\nclass Demo6 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            current: 1\r\n        }\r\n    }\r\n\r\n    handleClick = (e) => {\r\n\r\n        this.setState({\r\n            current: e.key,\r\n        });\r\n    }\r\n    \r\n    /**\r\n     * 获取当前选中行的item对象。\r\n     * @param {*} value \r\n     */\r\n    onSelect({item,key,selectedKeys}){ \r\n        console.log(`${key} selected`); //获取key\r\n        let currentObject = {};\r\n        currentObject.value = item.props.children; //获取选中对象的数据\r\n        currentObject.key = item.props.eventKey;\r\n        console.log(currentObject); \r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Menu theme=\"dark\" onClick={this.handleClick} style={{ width: 240 }} defaultOpenKeys={['demo3sub1']} selectedKeys={[this.state.current]} mode=\"inline\" onSelect={this.onSelect.bind(this)}>\r\n                <SubMenu key=\"demo3sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <MenuItemGroup title=\"组 1\">\r\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    </MenuItemGroup>\r\n                    <MenuItemGroup title=\"组 2\">\r\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                    </MenuItemGroup>\r\n                </SubMenu>\r\n                <SubMenu key=\"demo3sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"demo3sub3\" title=\"子项\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"demo3sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 如何获取选中对象自定义对象和数据"},{"example":<Demo7 />,"title":" 键盘操作示例一：子菜单在右侧呼出形式显示","code":"/**\r\n * @title 键盘操作示例一：子菜单在右侧呼出形式显示\r\n * @description 子菜单在右侧呼出形式显示。\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\n\r\n\r\nclass Demo4 extends Component {\r\n\r\n    handleClick = (e) => {\r\n        console.log('click', e);\r\n    }\r\n    render() {\r\n        return (\r\n            <div>\r\n                <input style={{'marginBottom':'10px'}} placeholder=\"我是为了获得焦点\"/>\r\n                <Menu onClick={this.handleClick} keyboard={true} style={{ width: 240 }} mode=\"vertical\">\r\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <MenuItemGroup title=\"Item 1\">\r\n                        <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                        <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    </MenuItemGroup>\r\n                    <MenuItemGroup title=\"Iteom 2\">\r\n                        <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                        <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                    </MenuItemGroup>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"sub3\" title=\"Submenu\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n            </div>\r\n            \r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 子菜单在右侧呼出形式显示。"},{"example":<Demo8 />,"title":" 键盘操作示例二：竖向手风琴Menu","code":"/**\r\n * @title 键盘操作示例二：竖向手风琴Menu\r\n * @description 菜单展开是手风琴形式。\r\n */\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Menu } from 'tinper-bee';\r\n\r\nconst SubMenu = Menu.SubMenu;\r\n\r\n\r\nclass Demo3 extends Component {\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.state = {\r\n            current: '1',\r\n            openKeys: []\r\n        }\r\n    }\r\n    handleClick = (e) => {\r\n        console.log('Clicked: ', e);\r\n        this.setState({current: e.key});\r\n    }\r\n    onOpenChange = (openKeys) => {\r\n        const state = this.state;\r\n\r\n        const latestOpenKey = this.myfilter(openKeys,state.openKeys);\r\n        const latestCloseKey = this.myfilter(state.openKeys,openKeys);\r\n\r\n        let nextOpenKeys = [];\r\n        if (latestOpenKey) {\r\n            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);\r\n        }\r\n        if (latestCloseKey) {\r\n            nextOpenKeys = this.getAncestorKeys(latestCloseKey);\r\n        }\r\n        this.setState({openKeys: nextOpenKeys});\r\n    }\r\n\r\n    //IE下 array.find（）方法不可用\r\n    myfilter = (arr1,arr2) => {\r\n        if(arr2.length === 0 || !arr2) {\r\n            return arr1[0];\r\n        }\r\n\r\n        for(var i=0;i<arr1.length;i++)\r\n        {\r\n          if(arr2.indexOf(arr1[i].toString()) === -1)\r\n          {\r\n                return arr1[i];\r\n          }      \r\n        }\r\n        return false;\r\n    }\r\n\r\n    getAncestorKeys = (key) => {\r\n        const map = {\r\n            sub3: ['sub2'],\r\n        };\r\n        return map[key] || [];\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <input style={{'marginBottom':'10px'}} placeholder=\"我是为了获得焦点\"/>\r\n                <Menu\r\n                mode=\"inline\" keyboard={true}\r\n                openKeys={this.state.openKeys}\r\n                selectedKeys={[this.state.current]}\r\n                style={{ width: 240 }}\r\n                onOpenChange={this.onOpenChange}\r\n                onClick={this.handleClick}>\r\n                <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\r\n                    <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n                    <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n                    <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n                    <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub2\" title={<span><span>组织 2</span></span>}>\r\n                    <Menu.Item key=\"5\">选项 5</Menu.Item>\r\n                    <Menu.Item key=\"6\">选项 6</Menu.Item>\r\n                    <SubMenu key=\"sub3\" title=\"子项\">\r\n                        <Menu.Item key=\"7\">选项 7</Menu.Item>\r\n                        <Menu.Item key=\"8\">选项 8</Menu.Item>\r\n                    </SubMenu>\r\n                </SubMenu>\r\n                <SubMenu key=\"sub4\" title={<span><span>组织 3</span></span>}>\r\n                    <Menu.Item key=\"9\">选项 9</Menu.Item>\r\n                    <Menu.Item key=\"10\">选项 10</Menu.Item>\r\n                    <Menu.Item key=\"11\">选项 11</Menu.Item>\r\n                    <Menu.Item key=\"12\">选项 12</Menu.Item>\r\n                </SubMenu>\r\n            </Menu>\r\n            </div>\r\n            \r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 菜单展开是手风琴形式。"}]
 
@@ -16,0 +16,0 @@

demo/MenusDemo.js

@@ -0,0 +0,0 @@ import  Navbar from '../src';

docs/api_en.md

@@ -0,0 +0,0 @@ ## Tile

docs/api.md

@@ -1,11 +0,26 @@
-## Menus
+# Menus
 
 菜单对于网站来说很重要，它帮助用户快速地从一个站点跳转到另一个站点。侧导航提供网站的多层次结构。
 
+## 何时使用
+需要将数据作为菜单展示时
+
+## 如何使用
+
+```
+import { Menus } from 'tinper-bee';
+
+or
+
+import Menus from 'bee-menus';
+import bee-menus/build/Menus.css;
+
+```
+
 ## 代码演示
 
-### API
+## API
 
 
-## Menu
+### Menu
 
@@ -30,3 +45,3 @@ |参数|说明|类型|默认值|
 
-## Menu.Item
+### Menu.Item
 
@@ -39,3 +54,3 @@ |参数|说明|类型|默认值|
 
-## Menu.SubMenu
+### Menu.SubMenu
 
@@ -67,1 +82,6 @@ |参数|说明|类型|默认值|
 
+## 注意事项
+
+暂无
+
+## 更新日志

package.json

 {
  "name": "bee-menus",
- "version": "2.0.2",
+ "version": "2.0.3",
  "description": "menus ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

src/_util/openAnimation.js

@@ -0,0 +0,0 @@ import { cssAnimation } from 'tinper-bee-core';

src/_util/warning.js

@@ -0,0 +0,0 @@ import warning from 'warning';

src/Divider.js

@@ -0,0 +0,0 @@ /**

src/DOMWrap.js

@@ -0,0 +0,0 @@ /**

src/index.js

 import Menu from './VerticalMenu';
 
 export default Menu;

src/lib/keyDownMenu.js

@@ -0,0 +0,0 @@ import React, { Component } from "react";

src/Menu.js

@@ -0,0 +0,0 @@ /**

src/MenuItem.js

@@ -0,0 +0,0 @@ /**

src/MenuItemGroup.js

@@ -0,0 +0,0 @@ /**

src/MenuToggle.js

@@ -0,0 +0,0 @@ import classNames from 'classnames';

src/placements.js

@@ -0,0 +0,0 @@ /**

src/SideContainer.js

@@ -0,0 +0,0 @@ import classnames from 'classnames';

src/SubMenu.js

@@ -0,0 +0,0 @@ /**

src/SubPopupMenu.js

@@ -0,0 +0,0 @@ /**

src/util.js

@@ -0,0 +0,0 @@ /**

src/VerticalMenu.js

@@ -0,0 +0,0 @@ import React from 'react';

test/Menus.test.js

@@ -0,0 +0,0 @@ import React from 'react';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

64

increased by1.59%

Worsened metrics

Total package byte prevSize

2158912

decreased by-20.77%

Lines of code

25345

decreased by-18.16%

No dependency changes