fix: drawer style to wrapStyle

components/drawer/__tests__/MultiDrawer.test.js

@@ -133,7 +133,7 @@ describe('Drawer', () => {
       wrapper.find('#open_two_drawer').trigger('click')
     }, 0)
     await asyncExpect(() => {
-      const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
+      const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
       expect(translateX).toEqual('translateX(-180px)')
       expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
     }, 1000)
@@ -154,7 +154,7 @@ describe('Drawer', () => {
       wrapper.find('#open_two_drawer').trigger('click')
     }, 0)
     await asyncExpect(() => {
-      const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
+      const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
       expect(translateX).toEqual('translateX(180px)')
       expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
     }, 1000)
@@ -174,7 +174,7 @@ describe('Drawer', () => {
       wrapper.find('#open_two_drawer').trigger('click')
     }, 0)
     await asyncExpect(() => {
-      const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
+      const translateY = wrapper.find('.ant-drawer.test_drawer').element.style.transform
       expect(translateY).toEqual('translateY(180px)')
       expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
     }, 1000)

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

@@ -6,6 +6,15 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
+<div><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
+      </svg></i> New account
+  </button>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
   <!---->

components/drawer/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest'
 
-demoTest('drawer', { skip: ['from-drawer.md'] })
+demoTest('drawer')

components/drawer/demo/form-in-drawer.md

@@ -0,0 +1,159 @@
+<cn>
+#### 抽屉表单
+在抽屉中使用表单。
+</cn>
+
+<us>
+#### Submit form in drawer
+Use form in drawer with submit button.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showDrawer">
+      <a-icon type="plus" /> New account
+    </a-button>
+    <a-drawer
+      title="Create a new account"
+      :width="720"
+      @close="onClose"
+      :visible="visible"
+      :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
+    >
+      <a-form :form="form" layout="vertical" hideRequiredMark>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Name">
+              <a-input
+                v-decorator="['name', {
+                  rules: [{ required: true, message: 'Please enter user name' }]
+                }]"
+                placeholder="Please enter user name"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="Url">
+              <a-input
+                v-decorator="['url', {
+                  rules: [{ required: true, message: 'please enter url' }]
+                }]"
+                style="width: 100%"
+                addonBefore="http://"
+                addonAfter=".com"
+                placeholder="please enter url"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Owner">
+              <a-select
+                v-decorator="['owner', {
+                  rules: [{ required: true, message: 'Please select an owner' }]
+                }]"
+                placeholder="Please a-s an owner"
+              >
+                <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
+                <a-select-option value="mao">Maomao Zhou</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="Type">
+              <a-select
+                v-decorator="['type', {
+                  rules: [{ required: true, message: 'Please choose the type' }]
+                }]"
+                placeholder="Please choose the type"
+              >
+                <a-select-option value="private">Private</a-select-option>
+                <a-select-option value="public">Public</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Approver">
+              <a-select
+                v-decorator="['approver', {
+                  rules: [{ required: true, message: 'Please choose the approver' }]
+                }]"
+                placeholder="Please choose the approver"
+              >
+                <a-select-option value="jack">Jack Ma</a-select-option>
+                <a-select-option value="tom">Tom Liu</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="DateTime">
+              <a-date-picker
+                v-decorator="['dateTime', {
+                  rules: [{ required: true, message: 'Please choose the dateTime' }]
+                }]"
+                style="width: 100%"
+                :getPopupContainer="trigger => trigger.parentNode"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="24">
+            <a-form-item label="Description">
+              <a-textarea
+                v-decorator="['description', {
+                  rules: [{ required: true, message: 'Please enter url description' }]
+                }]"
+                :rows="4"
+                placeholder="please enter url description"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+        }"
+      >
+        <a-button
+          :style="{marginRight: '8px'}"
+          @click="onClose"
+        >
+          Cancel
+        </a-button>
+        <a-button @click="onClose" type="primary">Submit</a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      visible: false,
+    }
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true
+    },
+    onClose() {
+      this.visible = false
+    },
+  },
+}
+</script>
+```

components/drawer/demo/index.vue

@@ -3,7 +3,7 @@ import BasicRight from './basic-right'
 import Placement from './placement'
 import UserProfile from './user-profile'
 import MultiLevelDrawer from './multi-level-drawer'
-import FromDrawer from './from-drawer'
+import FormInDrawer from './form-in-drawer'
 // import CustomPaging from './customPaging'
 // import CustomArrows from './customArrows'
 
@@ -50,7 +50,7 @@ export default {
         <md cn={md.cn} us={md.us} />
         <BasicRight />
         <Placement />
-        <FromDrawer />
+        <FormInDrawer />
         <UserProfile />
         <MultiLevelDrawer />
         <api>

components/drawer/index.en-US.md

@@ -5,16 +5,16 @@
 | --- | --- | --- | --- |
 | closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
 | destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
-| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| selectors   | 'body' |
+| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
 | mask | Whether to show mask or not. | Boolean | true |
 | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
 | 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 |
 | wrapClassName | The class name of the container of the Drawer dialog. | string | - |
+| wrapStyle |  The style of the container of the Drawer dialog. | object | - |
 | 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. | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right' |
 

components/drawer/index.zh-CN.md

@@ -4,13 +4,14 @@
 | --- | --- | --- | --- |
 | closable | 是否显示右上角的关闭按钮 | boolean | true |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
-| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| selectors  | 'body' |
+| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |
 | mask | 是否展示遮罩 | Boolean | true |
 | maskStyle | 遮罩样式 | object | {} |
 | title | 标题 | string \| slot | - |
 | visible | Drawer 是否可见 | boolean | - |
 | wrapClassName | 对话框外层容器的类名 | string | - |
+| wrapStyle | 对话框外层容器的`style` | object | - |
 | width | 宽度 | string \| number | 256 |
 | height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |