fix: drawer class

Author: tangjinzhou

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Drawer class is test_drawer 1`] = `
-<div>
+<div class="">
   <div class="ant-drawer ant-drawer-right test_drawer">
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
@@ -16,7 +16,7 @@ exports[`Drawer class is test_drawer 1`] = `
 `;
 
 exports[`Drawer closable is false 1`] = `
-<div>
+<div class="">
   <div class="ant-drawer ant-drawer-right">
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
@@ -31,7 +31,7 @@ exports[`Drawer closable is false 1`] = `
 `;
 
 exports[`Drawer destroyOnClose is true 1`] = `
-<div>
+<div class="">
   <div class="ant-drawer ant-drawer-right">
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
@@ -46,7 +46,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
 `;
 
 exports[`Drawer have a title 1`] = `
-<div>
+<div class="">
   <div class="ant-drawer ant-drawer-right">
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
@@ -64,7 +64,7 @@ exports[`Drawer have a title 1`] = `
 `;
 
 exports[`Drawer render correctly 1`] = `
-<div>
+<div class="">
   <div class="ant-drawer ant-drawer-right">
     <div class="ant-drawer-mask"></div>
     <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
@@ -79,7 +79,7 @@ exports[`Drawer render correctly 1`] = `
 `;
 
 exports[`Drawer render top drawer 1`] = `
-<div>
+<div class="">
   <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;">

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

@@ -2,7 +2,7 @@
 
 exports[`Drawer render correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-default"><span>open</span></button>
-  <div>
+  <div class="">
     <div class="ant-drawer ant-drawer-right">
       <div class="ant-drawer-mask"></div>
       <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">

components/drawer/index.jsx

@@ -1,9 +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 Icon from '../icon'
-import { getComponentFromProp, getOptionProps, getClass } from '../_util/props-util'
+import { getComponentFromProp, getOptionProps } from '../_util/props-util'
 
 const Drawer = {
   name: 'ADrawer',
@@ -22,14 +23,10 @@ const Drawer = {
     prefixCls: PropTypes.string.def('ant-drawer'),
     placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
     level: PropTypes.any.def(null),
-    wrapClassName: PropTypes.string,
+    wrapClassName: PropTypes.string, // not use class like react, vue will add class to root dom
   },
   mixins: [BaseMixin],
   data () {
-    warning(
-      this.wrapClassName === undefined,
-      'wrapClassName is deprecated, please use className instead.',
-    )
     this.destoryClose = false
     this.preVisible = this.$props.visible
     return {
@@ -199,17 +196,16 @@ const Drawer = {
         open: visible,
         showMask: props.mask,
         placement,
+        className: classnames({
+          [wrapClassName]: !!wrapClassName,
+          [haveMask]: !!haveMask,
+        }),
       },
       on: {
         maskClick: this.onMaskClick,
         ...this.$listeners,
       },
       style: this.getRcDrawerStyle(),
-      class: {
-        [wrapClassName]: !!wrapClassName,
-        ...getClass(this),
-        [haveMask]: !!haveMask,
-      },
     }
     return (
       <VcDrawer

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

@@ -581,7 +581,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="upload" title="Upload" class="">Upload</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="upload" class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
         <!---->
         <div class="ant-form-extra">longgggggggggggggggggggggggggggggggggg</div>
       </div>

components/vc-drawer/src/Drawer.js

@@ -41,6 +41,7 @@ const Drawer = {
     handler: true,
     maskStyle: {},
     wrapperClassName: '',
+    className: '',
   }),
   data () {
     this.levelDom = []
@@ -367,6 +368,7 @@ const Drawer = {
     },
     getChildToRender (open) {
       const {
+        className,
         prefixCls,
         placement,
         handler,
@@ -379,7 +381,7 @@ const Drawer = {
       const wrapperClassname = classnames(prefixCls, {
         [`${prefixCls}-${placement}`]: true,
         [`${prefixCls}-open`]: open,
-        ...getClass(this),
+        [className]: !!className,
       })
       const isOpenChange = this.isOpenChange
       const isHorizontal = placement === 'left' || placement === 'right'

components/vc-drawer/src/drawerProps.js

@@ -17,4 +17,5 @@ export default {
   handler: PropTypes.any,
   showMask: PropTypes.bool,
   maskStyle: PropTypes.object,
+  className: PropTypes.string,
 }

tests/__snapshots__/index.test.js.snap

@@ -58,6 +58,7 @@ Array [
   "Upload",
   "Drawer",
   "Skeleton",
+  "Comment",
   "default",
 ]
 `;