fix: drawer style to wrapStyle

components/drawer/demo/from-drawer.md

@@ -1,131 +0,0 @@
-<cn>
-#### 对象编辑
-用于承载编辑相关操作，需要点击关闭按钮关闭。
-</cn>
-
-<us>
-#### Edit item in drawer
-A drawer containing an editable form which needs to be collapsed by clicking the close button.
-</us>
-
-```html
-<template>
-  <div>
-    <a-button type="primary" @click="showDrawer">
-      Open
-    </a-button>
-    <a-drawer
-      title="Create"
-      width=720
-      placement="right"
-      :closable="false"
-      @close="onClose"
-      :visible="visible"
-      style="height: calc(100% - 55px);overflow: 'auto';paddingBottom: 53px"
-    >
-      <a-form layout="vertical" hideRequiredMark>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="Name" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter user name' }]}">
-              <a-input placeholder="please enter user name" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="Url" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter url' }]}">
-              <a-input
-                  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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please select an owner' }]}">
-              <a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the type' }]}">
-              <a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the approver' }]}">
-              <a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the dateTime' }]}">
-              <a-date-picker
-                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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter url description' }]}">
-              <a-textarea :rows="4" placeholder="please enter url description" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </Form>
-      <div
-        :style="{
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-          borderTop: '1px solid #e8e8e8',
-          padding: '10px 16px',
-          textAlign: 'right',
-          left: 0,
-          background: '#fff',
-          borderRadius: '0 0 4px 4px',
-        }"
-      >
-        <a-button
-          :style="{
-            marginRight: 8,
-          }"
-          @click="onClose"
-        >
-          Cancel
-        </a-button>
-        <a-button @click="onClose" type="primary">Submit</a-button>
-      </div>
-    </a-drawer>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      visible: false,
-    }
-  },
-  methods: {
-    showDrawer() {
-      this.visible = true
-    },
-    onClose() {
-      this.visible = false
-    },
-  },
-}
-</script>
-```

components/drawer/index.jsx

@@ -1,4 +1,3 @@
-import warning from 'warning'
 import classnames from 'classnames'
 import VcDrawer from '../vc-drawer/src'
 import PropTypes from '../_util/vue-types'
@@ -15,6 +14,7 @@ const Drawer = {
     maskClosable: PropTypes.bool.def(true),
     mask: PropTypes.bool.def(true),
     maskStyle: PropTypes.object,
+    wrapStyle: PropTypes.object,
     title: PropTypes.any,
     visible: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
@@ -107,7 +107,7 @@ const Drawer = {
         return null
       }
       this.destoryClose = false
-      const { placement, bodyStyle } = this.$props
+      const { placement } = this.$props
 
       const containerStyle = placement === 'left' ||
         placement === 'right' ? {
@@ -157,26 +157,22 @@ const Drawer = {
         >
           {header}
           {closer}
-          <div key='body' class={`${prefixCls}-body`} style={bodyStyle}>
+          <div key='body' class={`${prefixCls}-body`}>
             {this.$slots.default}
           </div>
         </div>
       )
     },
     getRcDrawerStyle () {
-      const { zIndex, placement, maskStyle } = this.$props
+      const { zIndex, placement, maskStyle, wrapStyle } = this.$props
-      return this.$data._push
+      const { _push: push } = this.$data
-        ? {
+      return {
-          ...maskStyle,
+        ...maskStyle,
-          zIndex,
+        zIndex,
-          transform: this.getPushTransform(placement),
+        transform: push ? this.getPushTransform(placement) : undefined,
-        }
+        ...wrapStyle,
-        : {
+      }
-          ...maskStyle,
-          zIndex,
-        }
     },
-
   },
   render () {
     const props = getOptionProps(this)
@@ -200,12 +196,12 @@ const Drawer = {
           [wrapClassName]: !!wrapClassName,
           [haveMask]: !!haveMask,
         }),
+        wrapStyle: this.getRcDrawerStyle(),
       },
       on: {
         maskClick: this.onMaskClick,
         ...this.$listeners,
       },
-      style: this.getRcDrawerStyle(),
     }
     return (
       <VcDrawer

components/vc-drawer/src/Drawer.js

@@ -2,7 +2,7 @@ import classnames from 'classnames'
 import Vue from 'vue'
 import ref from 'vue-ref'
 import BaseMixin from '../../_util/BaseMixin'
-import { initDefaultProps, getEvents, getClass } from '../../_util/props-util'
+import { initDefaultProps, getEvents } from '../../_util/props-util'
 import { cloneElement } from '../../_util/vnode'
 import ContainerRender from '../../_util/ContainerRender'
 import getScrollBarSize from '../../_util/getScrollBarSize'
@@ -376,6 +376,7 @@ const Drawer = {
         maskStyle,
         width,
         height,
+        wrapStyle,
       } = this.$props
       const children = this.$slots.default
       const wrapperClassname = classnames(prefixCls, {
@@ -422,6 +423,7 @@ const Drawer = {
           }],
         })
       }
+
       const domContProps = {
         class: wrapperClassname,
         directives: [{
@@ -433,6 +435,7 @@ const Drawer = {
         on: {
           transitionend: this.onWrapperTransitionEnd,
         },
+        style: wrapStyle,
       }
       const directivesMaskDom = [{
         name: 'ant-ref',

components/vc-drawer/src/drawerProps.js

@@ -18,4 +18,5 @@ export default {
   showMask: PropTypes.bool,
   maskStyle: PropTypes.object,
   className: PropTypes.string,
+  wrapStyle: PropTypes.object,
 }