feat: update drawer

components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle"><!----></i><span class="ant-calendar-picker-icon"></span></div></span>`;
+exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;

components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span>`;
+exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;

components/drawer/__tests__/Drawer.test.js

@@ -57,6 +57,25 @@ describe('Drawer', () => {
     })
   })
 
+  it('render top drawer', async () => {
+    const props = {
+      propsData: {
+        visible: true,
+        height: 400,
+        placement: 'top',
+        getContainer: false,
+      },
+      slots: {
+        default: 'Here is content of Drawer',
+      },
+      sync: false,
+    }
+    const wrapper = mount(Drawer, props)
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
   it('have a title', async () => {
     const props = {
       propsData: {

components/drawer/__tests__/MultiDrawer.test.js

@@ -2,7 +2,9 @@ import { mount } from '@vue/test-utils'
 import Drawer from '..'
 import Button from '../../button'
 import { asyncExpect } from '@/tests/utils'
-
+export function $$ (className) {
+  return document.body.querySelectorAll(className)
+}
 const MultiDrawer = {
   props: {
     placement: {
@@ -27,6 +29,7 @@ const MultiDrawer = {
       this.childrenDrawer = true
     },
     onChildrenDrawerClose () {
+      console.log('hello')
       this.childrenDrawer = false
     },
   },
@@ -35,7 +38,6 @@ const MultiDrawer = {
       props: {
         title: 'Multi-level drawer',
         width: 520,
-        closable: false,
         visible: this.visible,
         getContainer: false,
         wrapClassName: 'test_drawer',
@@ -49,7 +51,7 @@ const MultiDrawer = {
       props: {
         title: 'Two-level Drawer',
         width: 320,
-        closable: false,
+        wrapClassName: 'Two-level',
         visible: this.childrenDrawer,
         getContainer: false,
         placement: this.placement,
@@ -137,7 +139,7 @@ describe('Drawer', () => {
     }, 1000)
   })
 
-  it('render right MultiDrawer', async () => {
+  it('render left MultiDrawer', async () => {
     document.body.innerHTML = ''
     const wrapper = mount(MultiDrawer, {
       propsData: {
@@ -157,4 +159,24 @@ describe('Drawer', () => {
       expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
     }, 1000)
   })
+
+  it('render top MultiDrawer', async () => {
+    const wrapper = mount(MultiDrawer, {
+      propsData: {
+        placement: 'top',
+      },
+      sync: false,
+    })
+    await asyncExpect(() => {
+      wrapper.find('#open_drawer').trigger('click')
+    }, 0)
+    await asyncExpect(() => {
+      wrapper.find('#open_two_drawer').trigger('click')
+    }, 0)
+    await asyncExpect(() => {
+      const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
+      expect(translateY).toEqual('translateY(180px)')
+      expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
+    }, 1000)
+  })
 })

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

@@ -6,7 +6,7 @@ exports[`Drawer class is test_drawer 1`] = `
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
       <div class="ant-drawer-content">
-        <div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
+        <div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
       </div>
@@ -54,7 +54,7 @@ exports[`Drawer have a title 1`] = `
         <div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
           <div class="ant-drawer-header">
             <div class="ant-drawer-title">Test Title</div>
-          </div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
+          </div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
       </div>
@@ -69,7 +69,22 @@ exports[`Drawer render correctly 1`] = `
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
       <div class="ant-drawer-content">
-        <div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
+        <div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
+          <div class="ant-drawer-body">Here is content of Drawer</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Drawer render top drawer 1`] = `
+<div>
+  <div class="ant-drawer ant-drawer-top">
+    <div class="ant-drawer-mask"></div>
+    <div class="ant-drawer-content-wrapper" style="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"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
       </div>

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

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/drawer/demo/basic-left.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
-  <!---->
-</div>
-`;
-
 exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
   <!---->
@@ -18,6 +12,13 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
 </div>
 `;
 
+exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
+<div>
+  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div> <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
 <div>
   <div class="ant-list ant-list-split ant-list-bordered">

components/drawer/demo/basic-left.md

@@ -1,47 +0,0 @@
-<cn>
-#### 左侧滑出
-基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
-</cn>
-
-<us>
-#### Left Slider
-Basic drawer.
-</us>
-
-```html
-<template>
-  <div>
-    <a-button type="primary" @click="showDrawer">
-      Open
-    </a-button>
-    <a-drawer
-      placement="left"
-      :closable="false"
-      @close="onClose"
-      :visible="visible"
-    >
-      <span slot="title">Basic Drawer</span>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-    </a-drawer>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      visible: false,
-    }
-  },
-  methods: {
-    showDrawer() {
-      this.visible = true
-    },
-    onClose() {
-      this.visible = false
-    },
-  },
-}
-</script>
-```

components/drawer/demo/index.vue

@@ -1,6 +1,6 @@
 <script>
 import BasicRight from './basic-right'
-import BasicLeft from './basic-left'
+import Placement from './placement'
 import UserProfile from './user-profile'
 import MultiLevelDrawer from './multi-level-drawer'
 import FromDrawer from './from-drawer'
@@ -14,26 +14,34 @@ import '../style'
 
 const md = {
   cn: `# Drawer 抽屉
-        抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
+        屏幕边缘滑出的浮层面板。
-       ## 何时使用
+
+## 何时使用
+
+抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
+
+* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
+* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
 
-      * 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
-      * 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
        ## 代码演示
         `,
   us: `# Drawer
-        A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
+        Panel slides from screen edge.
-       ## When To Use
 
-      * Use a Form to create or edit a set of information.
+## When To Use
-      * Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
+
-      * When a same Form is needed in multiple places.
+A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
+
+* Use a Form to create or edit a set of information.
+* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
+* When a same Form is needed in multiple places.
        ## Examples
         `,
 }
 export default {
   category: 'Components',
   type: 'Feedback',
+  zhType: '反馈',
   title: 'Drawer',
   subtitle: '抽屉',
   render () {
@@ -41,7 +49,7 @@ export default {
       <div>
         <md cn={md.cn} us={md.us} />
         <BasicRight />
-        <BasicLeft />
+        <Placement />
         <FromDrawer />
         <UserProfile />
         <MultiLevelDrawer />

components/drawer/demo/placement.md

@@ -0,0 +1,61 @@
+<cn>
+#### 自定义位置
+自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
+</cn>
+
+<us>
+#### Custom Placement
+Basic drawer.
+</us>
+
+```html
+<template>
+  <div>
+    <a-radio-group
+      style="margin-right: 8px"
+      :defaultValue="placement"
+      @change="onChange"
+    >
+      <a-radio value="top">top</a-radio>
+      <a-radio value="right">right</a-radio>
+      <a-radio value="bottom">bottom</a-radio>
+      <a-radio value="left">left</a-radio>
+    </a-radio-group>
+    <a-button type="primary" @click="showDrawer">
+      Open
+    </a-button>
+    <a-drawer
+      title="Basic Drawer"
+      :placement="placement"
+      :closable="false"
+      @close="onClose"
+      :visible="visible"
+    >
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      placement: 'left'
+    }
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true
+    },
+    onClose() {
+      this.visible = false
+    },
+    onChange(e) {
+      this.placement = e.target.value
+    }
+  },
+}
+</script>
+```

components/drawer/index.en-US.md

@@ -12,10 +12,12 @@
 | maskStyle | Style for Drawer's mask element. | object | {} |
 | title | The title for Drawer. | string\|slot | - |
 | visible | Whether the Drawer dialog is visible or not. | boolean | false |
-| width | Width of the Drawer dialog. | string\|number | 256 |
 | wrapClassName | The class name of the container of the Drawer dialog. | string | - |
+| 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' |
 
 
 ## Methods

components/drawer/index.jsx

@@ -1,7 +1,10 @@
+import warning from 'warning'
+import classNames from 'classnames'
 import VcDrawer from '../vc-drawer/src'
 import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
-import { getComponentFromProp, getOptionProps } from '../_util/props-util'
+import Icon from '../icon'
+import { getComponentFromProp, getOptionProps, getClass } from '../_util/props-util'
 
 const Drawer = {
   name: 'ADrawer',
@@ -10,14 +13,15 @@ const Drawer = {
     destroyOnClose: PropTypes.bool,
     getContainer: PropTypes.any,
     maskClosable: PropTypes.bool.def(true),
-    mask: PropTypes.bool,
+    mask: PropTypes.bool.def(true),
     maskStyle: PropTypes.object,
     title: PropTypes.any,
     visible: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
     zIndex: PropTypes.number,
     prefixCls: PropTypes.string.def('ant-drawer'),
-    placement: PropTypes.string.def('right'),
+    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
     level: PropTypes.any.def(null),
     wrapClassName: PropTypes.string,
   },
@@ -88,7 +92,16 @@ const Drawer = {
     getDestoryOnClose () {
       return this.destroyOnClose && !this.visible
     },
-
+    // get drawar push width or height
+    getPushTransform (placement) {
+      if (placement === 'left' || placement === 'right') {
+        return `translateX(${placement === 'left' ? 180 : -180}px)`
+      }
+      if (placement === 'top' || placement === 'bottom') {
+        return `translateY(${placement === 'top' ? 180 : -180}px)`
+      }
+    },
+    // render drawer body dom
     renderBody () {
       if (this.destoryClose && !this.visible) {
         return null
@@ -110,6 +123,7 @@ const Drawer = {
       }
       const { prefixCls, closable } = this.$props
       const title = getComponentFromProp(this, 'title')
+      // is have header dom
       let header
       if (title) {
         header = (
@@ -118,6 +132,7 @@ const Drawer = {
           </div>
         )
       }
+      // is have closer button
       let closer
       if (closable) {
         closer = (
@@ -127,7 +142,9 @@ const Drawer = {
             aria-label='Close'
             class={`${prefixCls}-close`}
           >
-            <span class={`${prefixCls}-close-x`} />
+            <span class={`${prefixCls}-close-x`}>
+              <Icon type='close'/>
+            </span>
           </button>
         )
       }
@@ -146,31 +163,49 @@ const Drawer = {
         </div>
       )
     },
+    getRcDrawerStyle () {
+      const { zIndex, placement, maskStyle } = this.$props
+      return this.$data._push
+        ? {
+          ...maskStyle,
+          zIndex,
+          transform: this.getPushTransform(placement),
+        }
+        : {
+          ...maskStyle,
+          zIndex,
+        }
+    },
+
   },
   render () {
     const props = getOptionProps(this)
-    const { zIndex, visible, placement, mask, wrapClassName, ...rest } = props
+    const { width, height, visible, placement, wrapClassName, ...rest } = props
-    const vcDrawerStyle = this.$data._push
+    const haveMask = rest.mask ? '' : 'no-mask'
-      ? {
+    const offsetStyle = {}
-        zIndex,
+    if (placement === 'left' || placement === 'right') {
-        transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
+      offsetStyle.width = typeof width === 'number' ? `${width}px` : width
+    } else {
+      offsetStyle.height = typeof height === 'number' ? `${height}px` : height
     }
-      : { zIndex }
     const vcDrawerProps = {
       props: {
         handler: false,
-        open: visible,
-        showMask: mask,
-        placement,
-        wrapClassName,
         ...rest,
+        ...offsetStyle,
+        open: visible,
+        showMask: props.mask,
+        placement,
+        wrapClassName: classNames({
+          [wrapClassName]: !!wrapClassName,
+          [haveMask]: !!haveMask,
+        }),
       },
       on: {
         maskClick: this.onMaskClick,
         ...this.$listeners,
       },
-      style: vcDrawerStyle,
+      style: this.getRcDrawerStyle(),
-
     }
     return (
       <VcDrawer

components/drawer/index.zh-CN.md

@@ -10,10 +10,11 @@
 | maskStyle | 遮罩样式 | object | {} |
 | title | 标题 | string \| slot | - |
 | visible | Drawer 是否可见 | boolean | - |
-| width | 宽度 | string \| number | 256 |
 | wrapClassName | 对话框外层容器的类名 | string | - |
+| width | 宽度 | string \| number | 256 |
+| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
-| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
+| placement | 抽屉的方向 | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right'
 
 ## 方法
 

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -20,7 +20,7 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `<input placeh
 exports[`renders ./components/input/demo/group.md correctly 1`] = `
 <div><span class="ant-input-group ant-input-group-lg"><div class="ant-col-5"><input defaultvalue="0571" type="text" class="ant-input"></div><div class="ant-col-8"><input defaultvalue="26888888" type="text" class="ant-input"></div></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="0571" type="text" class="ant-input" style="width: 20%;"><input defaultvalue="26888888" type="text" class="ant-input" style="width: 30%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
 </div><input defaultvalue="Xihu District, Hangzhou" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
-</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
+</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
 </div>
 <div class="ant-select ant-select-enabled">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">

components/locale-provider/__tests__/__snapshots__/demo.test.js.snap

@@ -35,8 +35,9 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
             </div>
           </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
         </div>
-      </div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span>
+      </div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-    </div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span>
+          <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
+        </svg></i></span></span>
     </div>
     <div class="example"><button type="button" class="ant-btn ant-btn-primary"><span>Show Modal</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show info</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show confirm</span></button> <a href="#" class="">Click to confirm</a></div>
     <div classname="example">
@@ -373,7 +374,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
       </div>
     </div>
     <!---->
-</div>
+  </div>
 </div>
 `;