text: import React from 'react'
  import { DropOption } from 'components'
  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
                default:
                  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
  