From cdc607ba075e724c2b946840d4e1eb53ee440030 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Mon, 13 Mar 2017 16:15:28 +0800
Subject: [PATCH] add:ui-components

---
 src/components/ui/dropOption.js | 23 +++++++++
 src/components/ui/index.js      |  3 +-
 src/components/users/list.js    | 13 ++---
 src/router.js                   |  8 +++
 src/routes/ui/dropOption.js     | 91 +++++++++++++++++++++++++++++++++
 src/routes/ui/search.less       |  0
 src/utils/menu.js               |  4 ++
 7 files changed, 131 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ui/dropOption.js
 create mode 100644 src/routes/ui/dropOption.js
 delete mode 100644 src/routes/ui/search.less

diff --git a/src/components/ui/dropOption.js b/src/components/ui/dropOption.js
new file mode 100644
index 0000000..319d222
--- /dev/null
+++ b/src/components/ui/dropOption.js
@@ -0,0 +1,23 @@
+import React, {PropTypes} from 'react'
+import {Dropdown, Button, Icon, Menu} from 'antd'
+
+const DropOption = ({onMenuClick, menuOptions = [], buttonStyle, dropdownProps}) => {
+  const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)
+  return <Dropdown overlay={<Menu onClick={onMenuClick} {...dropdownProps}>
+    {menu}
+  </Menu>}>
+    <Button style={{ border: 'none', ...buttonStyle}}>
+      <Icon style={{ marginRight: 2 }} type='bars' />
+      <Icon type='down' />
+    </Button>
+  </Dropdown>
+}
+
+DropOption.propTypes = {
+  onMenuClick: PropTypes.func,
+  menuOptions: PropTypes.array.isRequired,
+  buttonStyle: PropTypes.object,
+  dropdownProps: PropTypes.object
+}
+
+export default DropOption
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index aeda1d2..f9b4763 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -1,4 +1,5 @@
 import Ico from './ico.js'
 import Search from './search.js'
+import DropOption from './dropOption.js'
 
-export { Ico, Search }
+export { Ico, Search, DropOption }
diff --git a/src/components/users/list.js b/src/components/users/list.js
index 8f65297..2a15c67 100644
--- a/src/components/users/list.js
+++ b/src/components/users/list.js
@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react'
-import {Table, Dropdown, Button, Menu, Icon, Modal} from 'antd'
+import {Table, Modal} from 'antd'
 import styles from './list.less'
 import classnames from 'classnames'
 import TableBodyWrapper from '../common/TableBodyWrapper'
+import {DropOption} from '../ui/index'
 
 const confirm = Modal.confirm
 
@@ -69,15 +70,7 @@ function list ({ loading, dataSource, pagination, onPageChange, onDeleteItem, on
       key: 'operation',
       width: 100,
       render: (text, record) => {
-        return (<Dropdown overlay={<Menu onClick={(e) => handleMenuClick(record, e)}>
-          <Menu.Item key='1'>编辑</Menu.Item>
-          <Menu.Item key='2'>删除</Menu.Item>
-        </Menu>}>
-          <Button style={{ border: 'none' }}>
-            <Icon style={{ marginRight: 2 }} type='bars' />
-            <Icon type='down' />
-          </Button>
-        </Dropdown>)
+        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{key: '1', name: '编辑'}, {key: '2', name: '删除'}]} />
       }
     }
   ]
diff --git a/src/router.js b/src/router.js
index 730a1bf..ff3d226 100644
--- a/src/router.js
+++ b/src/router.js
@@ -56,6 +56,14 @@ export default function ({history, app}) {
               cb(null, require('./routes/ui/search'))
             }, 'ui-search')
           }
+        }, {
+          path: 'ui/dropOption',
+          name: 'ui/dropOption',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              cb(null, require('./routes/ui/dropOption'))
+            }, 'ui-dropOption')
+          }
         }, {
           path: '*',
           name: 'error',
diff --git a/src/routes/ui/dropOption.js b/src/routes/ui/dropOption.js
new file mode 100644
index 0000000..f3e6171
--- /dev/null
+++ b/src/routes/ui/dropOption.js
@@ -0,0 +1,91 @@
+import React from 'react'
+import { DropOption } from '../../components/ui'
+import { Table, Row, Col, Card, message } from 'antd'
+
+const DropOptionPage = () => <div className='content-inner'>
+  <Row gutter={32}>
+    <Col lg={8} md={12}>
+      <Card title='默认'>
+        <DropOption menuOptions={[{key: '1', name: '编辑'}, {key: '2', name: '删除'}]} />
+      </Card>
+    </Col>
+    <Col lg={8} md={12}>
+      <Card title='样式'>
+        <DropOption menuOptions={[{key: '1', name: '编辑'}, {key: '2', name: '删除'}]} buttonStyle={{border: 'solid 1px #eee', width: 60}} />
+      </Card>
+    </Col>
+    <Col lg={8} md={12}>
+      <Card title='事件'>
+        <DropOption
+          menuOptions={[{key: '1', name: '编辑'}, {key: '2', name: '删除'}]}
+          buttonStyle={{border: 'solid 1px #eee', width: 60}}
+          onMenuClick={({key}) => {
+            switch (key) {
+              case '1':
+                message.success('点击了编辑')
+                break
+              case '2':
+                message.success('点击了删除')
+                break
+            }
+          }}
+          />
+      </Card>
+    </Col>
+  </Row>
+  <h2 style={{margin: '16px 0'}}>Props</h2>
+  <Row>
+    <Col lg={18} md={24}>
+      <Table rowKey={(record, key) => key}
+        pagination={false}
+        bordered
+        scroll={{ x: 800 }}
+        columns={[
+          {
+            title: '参数',
+            dataIndex: 'props'
+          },
+          {
+            title: '说明',
+            dataIndex: 'desciption'
+          },
+          {
+            title: '类型',
+            dataIndex: 'type'
+          },
+          {
+            title: '默认值',
+            dataIndex: 'default'
+          }
+        ]}
+        dataSource={[
+          {
+            props: 'menuOptions',
+            desciption: '下拉操作的选项，格式为[{name:string,key:string}]',
+            type: 'Array',
+            default: '必选'
+          },
+          {
+            props: 'onMenuClick',
+            desciption: '点击 menuitem 调用此函数，参数为 {item, key, keyPath}',
+            type: 'Function',
+            default: '-'
+          },
+          {
+            props: 'buttonStyle',
+            desciption: '按钮的样式',
+            type: 'Object',
+            default: '-'
+          },
+          {
+            props: 'dropdownProps',
+            desciption: '下拉菜单的参数，可参考antd的【Dropdown】组件',
+            type: 'Object',
+            default: '-'
+          }
+        ]} />
+    </Col>
+  </Row>
+</div>
+
+export default DropOptionPage
diff --git a/src/routes/ui/search.less b/src/routes/ui/search.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/utils/menu.js b/src/utils/menu.js
index c00ed96..4959e41 100644
--- a/src/utils/menu.js
+++ b/src/utils/menu.js
@@ -22,6 +22,10 @@ module.exports = [
       {
         key: 'search',
         name: 'Search 搜索'
+      },
+      {
+        key: 'dropOption',
+        name: 'DropOption 下拉操作'
       }
     ]
   },