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,65 +104,6 @@ const Drawer = {
         return `translateY(${placement === 'top' ? 180 : -180}px)`;
       }
     },
-    // render drawer body dom
-    renderBody() {
-      if (this.destoryClose && !this.visible) {
-        return null;
-      }
-      this.destoryClose = false;
-      const { placement } = this.$props;
-
-      const containerStyle =
-        placement === 'left' || placement === 'right'
-          ? {
-              overflow: 'auto',
-              height: '100%',
-            }
-          : {};
-
-      const isDestroyOnClose = this.getDestoryOnClose();
-      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}
-        >
-          {header}
-          {closer}
-          <div key="body" class={`${prefixCls}-body`}>
-            {this.$slots.default}
-          </div>
-        </div>
-      );
-    },
     getRcDrawerStyle() {
       const { zIndex, placement, maskStyle, wrapStyle } = this.$props;
       const { _push: push } = this.$data;
@@ -171,10 +114,74 @@ const Drawer = {
         ...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(prefixCls) {
+      if (this.destroyClose && !this.visible) {
+        return null;
+      }
+      this.destroyClose = false;
+      const {
+        placement,
+      } = this.$props;
+
+      const containerStyle =
+        placement === 'left' || placement === 'right'
+          ? {
+              overflow: 'auto',
+              height: '100%',
+            }
+          : {};
+
+      const isDestroyOnClose = this.getDestroyOnClose();
+      if (isDestroyOnClose) {
+        // Increase the opacity transition, delete children after closing.
+        containerStyle.opacity = 0;
+        containerStyle.transition = 'opacity .3s';
+      }
+
+      return (
+        <div
+          class={`${prefixCls}-wrapper-body`}
+          style={containerStyle}
+          onTransitionend={this.onDestroyTransitionEnd}
+        >
+          {this.renderHeader(prefixCls)}
+          <div key="body" class={`${prefixCls}-body`}>
+            {this.$slots.default}
+          </div>
+        </div>
+      );
+    },
   },
   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';