fix demo bug

tinper-bee · Jan 5, 2017 · 22239bf · 22239bf
2 parents b7ed7bd + 7beb3bf
commit 22239bf
Show file tree

Hide file tree

Showing 14 changed files with 749 additions and 813 deletions.
diff --git a/demo/DropdownDemo.js b/demo/DropdownDemo.js
diff --git a/demo/DropdownDemo.scss b/demo/DropdownDemo.scss
@@ -2,10 +2,14 @@
 @import "../node_modules/bee-layout/src/Layout.scss";
 @import "../node_modules/bee-panel/src/Panel.scss";
 @import "../node_modules/bee-button/src/Button.scss";
+
+@import "../node_modules/bee-menus/src/Menus.scss";
 @import "../src/Dropdown.scss";
 
+
+
 .demoPadding{
     button{
-        padding: 10px 30px;
+        margin: 10px;
     }
 }
diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js
@@ -1,23 +1,70 @@
 /**
  *
- * @title 默认下拉菜单
- * @description
+ * @title 基础下拉菜单
+ * @description 下拉菜单提供click，hover和focus事件触发。
  *
  */
 
+ function onSelect({ key }) {
+   console.log(`${key} selected`);
+
+ }
+
+ function onVisibleChange(visible) {
+   console.log(visible);
+ }
+
 class Demo1 extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false
+        };
+
+    }
     render () {
+
+        const menu1 = (
+              <Menu
+                multiple
+                onSelect={onSelect}>
+                <MenuItem key="1">借款合同</MenuItem>
+                <MenuItem key="2">抵/质押合同</MenuItem>
+                <MenuItem key="3">担保合同</MenuItem>
+                <MenuItem key="4">联保合同</MenuItem>
+                <MenuItem key="5">合同审批</MenuItem>
+                <MenuItem key="6">抵/质押合同跟踪</MenuItem>
+              </Menu>
+          );
+          const menu2 = (
+                <Menu
+                  multiple
+                  onSelect={onSelect}>
+                      <MenuItem key="1"><Icon type='uf-listsearch' />借款合同</MenuItem>
+                      <MenuItem key="2"><Icon type='uf-listsearch' />抵/质押合同</MenuItem>
+                      <MenuItem key="3"><Icon type='uf-listsearch' />担保合同</MenuItem>
+                      <MenuItem key="4"><Icon type='uf-listsearch' />联保合同</MenuItem>
+                     <MenuItem key="5"><Icon type='uf-seal' />合同审批</MenuItem>
+                     <MenuItem key="6"><Icon type='uf-bullseye' />抵/质押合同跟踪</MenuItem>
+                </Menu>
+            );
         return (
-            <Dropdown title="默认下拉" activeKey="B">
-            <Dropdown.Item eventKey="A">下拉一</Dropdown.Item>
-            <Dropdown.Item eventKey="B">下拉2</Dropdown.Item>
-            <Dropdown.Item eventKey="C">下拉3</Dropdown.Item>
-            <Dropdown.Item eventKey="D">下拉4</Dropdown.Item>
-            <Dropdown.Item divider>分割线</Dropdown.Item>
-            <Dropdown.Item eventKey="A" disabled>不可点击</Dropdown.Item>
-            <Dropdown.Item eventKey="B">活跃的</Dropdown.Item>
-            <Dropdown.Item href="https://www.tinper.org">锚点</Dropdown.Item>
-            </Dropdown>
+            <div className="demoPadding">
+                <Dropdown
+                    trigger={['click']}
+                    overlay={menu1}
+                    animation="slide-up"
+                    onVisibleChange={onVisibleChange}>
+                    <Button colors='primary'>点击显示</Button>
+                  </Dropdown>
+                  <Dropdown
+                      trigger={['hover']}
+                      overlay={menu2}
+                      animation="slide-up"
+                      onVisibleChange={onVisibleChange}>
+                      <Button colors='primary'>鼠标滑过显示</Button>
+                    </Dropdown>
+            </div>
         )
     }
 }
diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js
@@ -1,31 +1,107 @@
 /**
  *
- * @title 不同颜色的下拉
- * @description 通过`colors`属性控制按钮颜色
+ * @title 不同样子的下拉菜单
+ * @description 通过不同的子组件搭配，组成不同形式的菜单
  *
  */
- const COLORS = ['success', 'warning', 'danger', 'info'];
-
- function renderButtonGroup(color,index){
-     return (
-         <Col sm={2}>
-             <Dropdown colors={color}  title={color} key={index}>
-                 <Dropdown.Item eventKey="A" >Default Item</Dropdown.Item>
-                 <Dropdown.Item eventKey="B" active>Active Item</Dropdown.Item>
-                 <Dropdown.Item eventKey="C" disabled>Disabled Item</Dropdown.Item>
-                 <Dropdown.Item divider></Dropdown.Item>
-                 <Dropdown.Item href="http://www.pagurian.com">Link Item</Dropdown.Item>
-             </Dropdown>
-         </Col>
-     );
+
+
+ function onSelect({ key }) {
+   console.log(`${key} selected`);
+
+ }
+
+ function onVisibleChange(visible) {
+   console.log(visible);
  }
 
+ const menu1 = (
+     <Menu
+       multiple
+       onSelect={onSelect}>
+       <MenuItem key="1">借款合同</MenuItem>
+       <MenuItem key="2">抵/质押合同</MenuItem>
+       <MenuItem key="3">担保合同</MenuItem>
+       <MenuItem key="4">联保合同</MenuItem>
+       <Divider />
+       <MenuItem key="5">合同审批</MenuItem>
+       <MenuItem key="6">抵/质押合同跟踪</MenuItem>
+     </Menu>
+ );
+
+ const menu2 = (
+     <Menu
+       multiple
+       onSelect={onSelect}>
+       <MenuItemGroup title="合同类别">
+       <MenuItem key="1">借款合同</MenuItem>
+       <MenuItem key="2">抵/质押合同</MenuItem>
+       <MenuItem key="3">担保合同</MenuItem>
+       <MenuItem key="4">联保合同</MenuItem>
+        </MenuItemGroup>
+        <MenuItemGroup title="合同操作">
+            <MenuItem key="5">合同审批</MenuItem>
+            <MenuItem key="6">抵/质押合同跟踪</MenuItem>
+        </MenuItemGroup>
+     </Menu>
+ );
+ const menu3 = (
+     <Menu
+       vertical
+       onSelect={onSelect}>
+       <SubMenu key="sub1" title={<span><span>Navigation One</span></span>}>
+			      <MenuItemGroup title="合同类别">
+                      <MenuItem key="1">借款合同</MenuItem>
+                      <MenuItem key="2">抵/质押合同</MenuItem>
+                      <MenuItem key="3">担保合同</MenuItem>
+                      <MenuItem key="4">联保合同</MenuItem>
+			      </MenuItemGroup>
+			      <MenuItemGroup title="合同操作">
+                      <MenuItem key="5">合同审批</MenuItem>
+                      <MenuItem key="6">抵/质押合同跟踪</MenuItem>
+			      </MenuItemGroup>
+			</SubMenu>
+			<SubMenu key="sub2" title=''>
+            <MenuItem key="7">合同审批</MenuItem>
+            <MenuItem key="8">抵/质押合同跟踪</MenuItem>
+			      <SubMenu key="sub3" title="Submenu质押合同跟踪质押合同跟踪">
+                  <MenuItem key="9">合同审批</MenuItem>
+                  <MenuItem key="10">抵/质押合同跟踪</MenuItem>
+			      </SubMenu>
+			</SubMenu>
+     </Menu>
+ );
 class Demo2 extends Component {
     render () {
         return (
-            <Row>
-                {COLORS.map(renderButtonGroup)}
-            </Row>
+            <div className="demoPadding">
+
+                 <Dropdown
+                   trigger={['click']}
+                   overlay={menu1}
+                   animation="slide-up"
+                   onVisibleChange={onVisibleChange}
+                 >
+                   <Button colors='primary'>带有分割线的下拉</Button>
+                 </Dropdown>
+
+                 <Dropdown
+                   trigger={['click']}
+                   overlay={menu2}
+                   animation="slide-up"
+                   onVisibleChange={onVisibleChange}
+                 >
+                   <Button colors='primary'>带有小标题的下拉</Button>
+                 </Dropdown>
+                 <Dropdown
+                   trigger={['click']}
+                   overlay={menu3}
+                   animation="slide-up"
+                   onVisibleChange={onVisibleChange}
+                 >
+                   <Button colors='primary'>多级下拉</Button>
+                 </Dropdown>
+             </div>
         )
     }
 }
diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js
diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js
@@ -5,7 +5,8 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Button from 'bee-button';
 import Dropdown from '../src';
-
+import Menu, { Item as MenuItem, Divider, SubMenu, MenuItemGroup } from 'bee-menus';
+import Icon from 'bee-icon';
 
 const CARET = <i className="uf uf-chevronarrowdown"></i>;
 
@@ -38,7 +39,7 @@ class Demo extends Component {
             </Button>
         );
 
-    
+
         return (
             <Col md={12} >
                 <h3>{ title }</h3>