feat: Add Dropdown component. (#47)

* feat: Add Dropdown component.

* Add doc.

* Add author.

* Update dropdown.

* Update author.

* Dropdown children not need required.

docs/content/components/dropdown.mdx

@@ -0,0 +1,20 @@
+---
+title: Dropdown 下拉框
+date: 2019-08-13
+author: lijianxin1202
+---
+在用户点击标题后展示详细内容供用户操作
+
+## 使用方式
+点击标题后弹出详细内容，再次点击隐藏详细内容
+
+## 基本用法
+点击标题后弹出内容：
+```tsx
+<Dropdown title="标题" children={<div style={{ padding: '5px 10px' }}>内容</div>} id="dropdown" />
+```
+
+## API
+```jsx previewOnly
+<PropTable of="dropdown" />
+```

src/components/Dropdown/index.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Dropdown from './index';
+import { mount } from 'enzyme';
+
+describe('Dropdown', () => {
+  it('render simple dropdown', () => {
+    const dropdown = mount(<Dropdown title="title" children="text" />);
+    const title = dropdown.find('button');
+    expect(dropdown.find('div.dropdown').length).toBe(1);
+    title.simulate('click');
+    expect(dropdown.find('div.dropdown.open').length).toBe(1);
+  });
+});

src/components/Dropdown/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown as BootstrapDropdown } from 'react-bootstrap';
+import { DropdownProps, DropdownDefaultProps } from '../../interface';
+
+const defaultProps: DropdownDefaultProps = {
+  id: 'CustomDropdown'
+}
+
+const Dropdown = (props: DropdownProps) => {
+  const { className, id, title, children } = props;
+  return (
+    <BootstrapDropdown id={id} className={className}>
+      <BootstrapDropdown.Toggle>{title}</BootstrapDropdown.Toggle>
+      <BootstrapDropdown.Menu>{children}</BootstrapDropdown.Menu>
+    </BootstrapDropdown>
+  );
+}
+
+Dropdown.propTypes = {
+  /**
+   * 元素 class 名称 string
+   **/
+  className: PropTypes.string,
+  /**
+   * 下拉框收起时展示内容 string
+   **/
+  title: PropTypes.string,
+  /**
+   * 元素 id，默认为 CustomDropdown string
+   **/
+  id: PropTypes.string,
+  /**
+   * 下拉框展开时详细内容 React.ReactNode
+   **/
+  children: PropTypes.node,
+};
+
+Dropdown.defaultProps = defaultProps;
+
+export default Dropdown;

src/components/index.tsx

@@ -1,4 +1,5 @@
 import Badge from './Badge';
+import Dropdown from './Dropdown';
 import Icon from './Icon';
 import Tooltip from './Tooltip';
 import UsageBar from './UsageBar';
@@ -17,6 +18,7 @@ import { Well } from 'react-bootstrap';
 
 export {
   Badge,
+  Dropdown,
   Icon,
   Tooltip,
   UsageBar,

src/interface.tsx

@@ -181,3 +181,13 @@ export interface RangePickerState {
   value: Moment[] | string[];
   open: boolean;
 }
+
+export interface DropdownDefaultProps {
+  id: string;
+}
+
+export interface DropdownProps extends DropdownDefaultProps {
+  className?: string;
+  title?: string;
+  children?: React.ReactNode;
+}

stories/Dropdown.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Dropdown } from '../src';
+
+storiesOf('Dropdown', module)
+  .add('default', () => (
+    <Dropdown title="标题" children={<div style={{ padding: '5px 10px' }}>内容</div>} id="dropdown" />
+  ))