feat: update drawer

components/drawer/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import Icon from '../icon';
 import { getComponentFromProp, getOptionProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 const Drawer = {
   name: 'ADrawer',
@@ -20,7 +21,7 @@ const Drawer = {
     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'),
+    prefixCls: PropTypes.string,
     placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
     level: PropTypes.any.def(null),
     wrapClassName: PropTypes.string, // not use class like react, vue will add class to root dom
@@ -28,7 +29,7 @@ const Drawer = {
   },
   mixins: [BaseMixin],
   data() {
-    this.destoryClose = false;
+    this.destroyClose = false;
     this.preVisible = this.$props.visible;
     return {
       _push: false,
@@ -38,6 +39,7 @@ const Drawer = {
     parentDrawer: {
       default: () => null,
     },
+    configProvider: { default: () => ({}) },
   },
   provide() {
     return {
@@ -79,18 +81,18 @@ const Drawer = {
         _push: false,
       });
     },
-    onDestoryTransitionEnd() {
-      const isDestroyOnClose = this.getDestoryOnClose();
+    onDestroyTransitionEnd() {
+      const isDestroyOnClose = this.getDestroyOnClose();
       if (!isDestroyOnClose) {
         return;
       }
       if (!this.visible) {
-        this.destoryClose = true;
+        this.destroyClose = true;
         this.$forceUpdate();
       }
     },
 
-    getDestoryOnClose() {
+    getDestroyOnClose() {
       return this.destroyOnClose && !this.visible;
     },
     // get drawar push width or height
@@ -102,13 +104,47 @@ const Drawer = {
         return `translateY(${placement === 'top' ? 180 : -180}px)`;
       }
     },
+    getRcDrawerStyle() {
+      const { zIndex, placement, maskStyle, wrapStyle } = this.$props;
+      const { _push: push } = this.$data;
+      return {
+        ...maskStyle,
+        zIndex,
+        transform: push ? this.getPushTransform(placement) : undefined,
+        ...wrapStyle,
+      };
+    },
+    renderHeader(prefixCls) {
+      const { closable } = this.$props;
+      const title = getComponentFromProp(this, 'title');
+      if (!title && !closable) {
+        return null;
+      }
+
+      const headerClassName = title ? `${prefixCls}-header` : `${prefixCls}-header-no-title`;
+      return (
+        <div class={headerClassName}>
+          {title && <div class={`${prefixCls}-title`}>{title}</div>}
+          {closable ? this.renderCloseIcon(prefixCls) : null}
+        </div>
+      );
+    },
+    renderCloseIcon(prefixCls) {
+      return (
+        <button key="closer" onClick={this.close} aria-label="Close" class={`${prefixCls}-close`}>
+          <Icon type="close" />
+        </button>
+      );
+    },
     // render drawer body dom
-    renderBody() {
-      if (this.destoryClose && !this.visible) {
+    renderBody(prefixCls) {
+      if (this.destroyClose && !this.visible) {
         return null;
       }
-      this.destoryClose = false;
-      const { placement } = this.$props;
+      this.destroyClose = false;
+      const {
+        placement,
+      } = this.$props;
 
       const containerStyle =
         placement === 'left' || placement === 'right'
@@ -118,63 +154,34 @@ const Drawer = {
             }
           : {};
 
-      const isDestroyOnClose = this.getDestoryOnClose();
+      const isDestroyOnClose = this.getDestroyOnClose();
       if (isDestroyOnClose) {
         // Increase the opacity transition, delete children after closing.
         containerStyle.opacity = 0;
         containerStyle.transition = 'opacity .3s';
       }
-      const { prefixCls, closable } = this.$props;
-      const title = getComponentFromProp(this, 'title');
-      // is have header dom
-      let header;
-      if (title) {
-        header = (
-          <div key="header" class={`${prefixCls}-header`}>
-            <div class={`${prefixCls}-title`}>{title}</div>
-          </div>
-        );
-      }
-      // is have closer button
-      let closer;
-      if (closable) {
-        closer = (
-          <button key="closer" onClick={this.close} aria-label="Close" class={`${prefixCls}-close`}>
-            <span class={`${prefixCls}-close-x`}>
-              <Icon type="close" />
-            </span>
-          </button>
-        );
-      }
 
       return (
         <div
           class={`${prefixCls}-wrapper-body`}
           style={containerStyle}
-          onTransitionend={this.onDestoryTransitionEnd}
+          onTransitionend={this.onDestroyTransitionEnd}
         >
-          {header}
-          {closer}
+          {this.renderHeader(prefixCls)}
           <div key="body" class={`${prefixCls}-body`}>
             {this.$slots.default}
           </div>
         </div>
       );
     },
-    getRcDrawerStyle() {
-      const { zIndex, placement, maskStyle, wrapStyle } = this.$props;
-      const { _push: push } = this.$data;
-      return {
-        ...maskStyle,
-        zIndex,
-        transform: push ? this.getPushTransform(placement) : undefined,
-        ...wrapStyle,
-      };
-    },
   },
   render() {
     const props = getOptionProps(this);
-    const { width, height, visible, placement, wrapClassName, ...rest } = props;
+    const {
+      prefixCls: customizePrefixCls,
+      width, height, visible,
+      placement, wrapClassName, ...rest
+    } = props;
     const haveMask = rest.mask ? '' : 'no-mask';
     const offsetStyle = {};
     if (placement === 'left' || placement === 'right') {
@@ -183,11 +190,15 @@ const Drawer = {
       offsetStyle.height = typeof height === 'number' ? `${height}px` : height;
     }
     const handler = getComponentFromProp(this, 'handle') || false;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('drawer', customizePrefixCls);
+
     const vcDrawerProps = {
       props: {
         ...rest,
         handler,
         ...offsetStyle,
+        prefixCls,
         open: visible,
         showMask: props.mask,
         placement,
@@ -202,7 +213,7 @@ const Drawer = {
         ...this.$listeners,
       },
     };
-    return <VcDrawer {...vcDrawerProps}>{this.renderBody()}</VcDrawer>;
+    return <VcDrawer {...vcDrawerProps}>{this.renderBody(prefixCls)}</VcDrawer>;
   },
 };
 

components/drawer/style/index.js

@@ -1,5 +1,2 @@
 import '../../style/index.less';
 import './index.less';
-
-// style dependencies
-import '../../button/style';