placement add top and bottom

components/drawer/__tests__/Drawer.test.js

@@ -16,6 +16,20 @@ describe('Drawer', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('render top drawer', () => {
+    const wrapper = render(
+      <Drawer
+        visible
+        height={400}
+        placement="top"
+        getContainer={false}
+      >
+        Here is content of Drawer
+      </Drawer>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('have a title', () => {
     const wrapper = render(
       <Drawer

components/drawer/__tests__/MultiDrawer.test.js

@@ -105,7 +105,7 @@ describe('Drawer', () => {
     expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
   });
 
-  it('render right MultiDrawer', () => {
+  it('render left MultiDrawer', () => {
     const wrapper = mount(<MultiDrawer placement="left" />);
     wrapper.find('button#open_drawer').simulate('click');
     wrapper.find('button#open_two_drawer').simulate('click');

components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -205,3 +205,43 @@ exports[`Drawer render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Drawer render top drawer 1`] = `
+<div
+  class=""
+>
+  <div
+    class="ant-drawer ant-drawer-top"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="transform:translateY(-100%);-ms-transform:translateY(-100%);height:400px"
+    >
+      <div
+        class="ant-drawer-content"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+          >
+            <span
+              class="ant-drawer-close-x"
+            />
+          </button>
+          <div
+            class="ant-drawer-body"
+          >
+            Here is content of Drawer
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Drawer render correctly 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-clicked"
     type="button"
   >
     <span>

components/drawer/demo/basic-left.md

@@ -1,57 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 左侧滑出
-  en-US: Left Slider
----
-
-## zh-CN
-
-基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
-
-## en-US
-
-Basic drawer.
-
-```jsx
-import { Drawer, Button } from 'antd';
-
-class App extends React.Component {
-  state = { visible: false };
-
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="left"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-```

components/drawer/demo/placement.md

@@ -0,0 +1,75 @@
+---
+order: 1
+title:
+  zh-CN: 自定义位置
+  en-US: Custom Placement
+---
+
+## zh-CN
+
+自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
+
+## en-US
+
+Basic drawer.
+
+```jsx
+import { Drawer, Button, Radio } from 'antd';
+
+const RadioGroup = Radio.Group;
+
+class App extends React.Component {
+  state = { visible: false, placement: 'left' };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  onChange = (e) => {
+    this.setState({
+      placement: e.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <RadioGroup
+          style={{ marginRight: 8 }}
+          defaultValue={this.state.placement}
+          onChange={this.onChange}
+        >
+          <Radio value="top">top</Radio>
+          <Radio value="right">right</Radio>
+          <Radio value="bottom">bottom</Radio>
+          <Radio value="left">left</Radio>
+        </RadioGroup>
+        <Button type="primary" onClick={this.showDrawer}>
+          Open
+        </Button>
+        <Drawer
+          title="Basic Drawer"
+          placement={this.state.placement}
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```

components/drawer/index.en-US.md

@@ -27,9 +27,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | title | The title for Drawer. | string\|ReactNode | - |
 | visible | Whether the Drawer dialog is visible or not. | boolean | false |
 | width | Width of the Drawer dialog. | string\|number | 256 |
+| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
 | className | The class name of the container of the Drawer dialog. | string | - |
 | zIndex | The `z-index` of the Drawer. | Number | 1000 |
-| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
+| placement | The placement of the Drawer. | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right' |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
 
 <style>

components/drawer/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import RcDrawer from 'rc-drawer';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import createReactContext, { Context } from 'create-react-context';
 import warning from 'warning';
 import classNames from 'classnames';
@@ -24,12 +24,13 @@ export interface DrawerProps {
   title?: React.ReactNode;
   visible?: boolean;
   width?: number | string;
+  height?: number | string;
   /* deprecated, use className instead */
   wrapClassName?: string;
   zIndex?: number;
   prefixCls?: string;
   push?: boolean;
-  placement?: 'left' | 'right';
+  placement?: 'top' | 'right' | 'bottom' | 'left';
   onClose?: (e: EventType) => void;
   className?: string;
 }
@@ -65,6 +66,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
   static defaultProps = {
     prefixCls: 'ant-drawer',
     width: 256,
+    height: 256,
     closable: true,
     placement: 'right',
     maskClosable: true,
@@ -179,7 +181,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     );
   }
   renderProvider = (value: Drawer) => {
-    let { zIndex, style, placement, className, wrapClassName, ...rest } = this.props;
+    let { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
     warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
     const RcDrawerStyle = this.state.push
       ? {
@@ -188,10 +190,17 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       }
       : { zIndex };
     this.praentDrawer = value;
+    const offsetStyle: any = {};
+    if (placement === 'left' || placement === 'right') {
+      offsetStyle.width = width;
+    } else {
+      offsetStyle.height = height;
+    }
     return (
       <DrawerContext.Provider value={this}>
         <RcDrawer
           {...rest}
+          {...offsetStyle}
           handler={false}
           open={this.props.visible}
           onMaskClick={this.onMaskClick}

components/drawer/index.zh-CN.md

@@ -28,9 +28,10 @@ title: Drawer
 | title | 标题 | string \| ReactNode | - |
 | visible | Drawer 是否可见 | boolean | - |
 | width | 宽度 | string \| number | 256 |
+| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
 | className | 对话框外层容器的类名 | string | - |
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
-| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
+| placement | 抽屉的方向 | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right'
 | onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
 
 <style>