@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Dialog/DialogContext.d.ts

@@ -2,21 +2,14 @@
 interface DialogContentProps {
     /** 当设置为 true，Dialog 打开时会显示背景，点击背景会关闭 Dialog，如果不想关闭 Dialog，可以设置为 'static' */
     modal: boolean;
-    setVisible: (visible: boolean) => void;
     /** 隐藏时的回调函数 */
     doClose: () => void;
-    /** 是否可控 */
-    isControlled: boolean;
     /** 是否让 Dialog 的 header 和 footer 部分居中排列 */
     center: boolean;
     /** body 内容过长时自动设置高度 */
     overflow: boolean;
     /** 是否加载成功 */
     mounted?: boolean;
-    /** 是否有标题 */
-    haveTitle: boolean;
-    /** 是否有按钮组 */
-    haveFooter: boolean;
 }
 export declare const DialogContext: import("react").Context<DialogContentProps>;
 export {};

package/dist/Dialog/DialogContext.js

@@ -2,12 +2,8 @@ import noop from 'lodash/noop';
 import { createContext } from 'react';
 export var DialogContext = /*#__PURE__*/createContext({
   modal: true,
-  setVisible: noop,
   doClose: noop,
-  isControlled: false,
   center: false,
   overflow: false,
-  mounted: false,
-  haveTitle: false,
-  haveFooter: false
+  mounted: false
 });

package/dist/Dialog/DialogHeader.js

@@ -20,14 +20,14 @@ var DialogHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
   var isString = useMemo(function () {
     return typeof props.children === 'string';
   }, [props.children]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("header", {
     ref: ref,
     className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))), is({
       border: border
     }), {
       'show-close': showClose
     }, props.headerClass)
-  }, isString ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, isString ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["title"]))),
     style: center ? {
       textAlign: 'center'

package/dist/Dialog/typings.d.ts

@@ -4,43 +4,61 @@ import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps<'--el-dialog-width' | '--el-dialog-margin-top' | '--el-dialog-bg-color' | '--el-dialog-box-shadow' | '--el-dialog-title-font-size' | '--el-dialog-content-font-size' | '--el-dialog-font-line-height' | '--el-dialog-padding-primary' | '--el-dialog-border-radius'>, TransitionProps {
     /** 是否显示模态框（可控） */
     visible: boolean;
-    /** 默认是否显示模态框 */
-    defaultVisible?: boolean;
+    /** Dialog 对话框 Dialog 的标题， 也可通过ElDialog.header传入 */
+    title?: string | React.ReactElement;
+    /** 对话框的宽度，默认值为 50% */
+    width?: string | number;
+    /** 是否为全屏 Dialog */
+    fullscreen?: boolean;
+    /** dialog CSS 中的 margin-top 值，默认为 15vh */
+    top?: string;
     /** 是否需要遮罩层 */
     modal?: boolean;
+    /** 是否允许穿透遮罩层。 modal 属性必须为 false */
+    modalPenetrable?: boolean;
     /** 遮罩的自定义类名 */
-    className?: string;
-    /** 是否可以通过点击 modal 关闭 Dialog */
-    closeOnClickModal?: boolean;
-    /** 应用于 backdrop DOM 节点的 css class */
-    backdropClassName?: string;
-    /** 对话框的宽度，默认值为 50% */
-    width?: string | number;
+    modalClass?: string;
     /** header 部分的自定义 class 名 */
     headerClass?: string;
-    /** Dialog 对话框 Dialog 的标题， 也可通过ElDialog.header传入 */
-    title?: string | React.ReactElement;
+    /** body 部分的自定义 class 名 */
+    bodyClass?: string;
+    /** footer 部分的自定义 class 名 */
+    footerClass?: string;
+    /** 是否在 Dialog 出现时将 body 滚动锁定 */
+    lockScroll?: boolean;
+    /** dialog 打开的延时时间，单位毫秒 */
+    openDelay?: number;
+    /** dialog 关闭的延时时间，单位毫秒 */
+    closeDelay?: number;
+    /** 是否可以通过点击 modal 关闭 Dialog */
+    closeOnClickModal?: boolean;
+    /** 是否可以通过按下 ESC 关闭 Dialog */
     /** 当设置为 true, 显示关闭按钮 */
     showClose?: boolean;
-    /** 标题是否有边框 */
-    border?: boolean;
-    /** dialog CSS 中的 margin-top 值，默认为 15vh */
-    top?: string;
-    /** 是否让 Dialog 的 header 和 footer 部分居中排列 */
-    center?: boolean;
-    /** 是否水平垂直对齐对话框 */
-    alignCenter?: boolean;
+    /** 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
+    beforeClose?: DialogBeforeCloseFn;
+    /** 关闭Dialog函数，与 `visible` 属性配合使用，关闭后将 `visible` 设置为 `false`。 */
+    onCloseDialog?: () => void;
+    /** 控制是否在关闭 Dialog 之后将子元素全部销毁 */
+    destroyOnClose?: boolean;
     /** 为 Dialog 启用可拖拽功能 */
     draggable?: boolean;
     /** 拖动范围可以超出可视区 */
     overflow?: boolean;
-    /** 是否为全屏 Dialog */
-    fullscreen?: boolean;
-    /** 是否在 Dialog 出现时将 body 滚动锁定 */
-    lockScroll?: boolean;
-    /** 是否可以通过按下 ESC 关闭 Dialog */
+    /** 是否让 Dialog 的 header 和 footer 部分居中排列 */
+    center?: boolean;
+    /** 是否水平垂直对齐对话框 */
+    alignCenter?: boolean;
     /** 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 */
     zIndex?: number;
+    /** 遮罩的自定义类名 */
+    className?: string;
+    /** Dialog 对话框 Dialog 的底部内容， 也可通过ElDialog.footer传入 */
+    footer?: React.ReactNode;
+    /** 标题是否有边框 */
+    border?: boolean;
+    /** Dialog 过渡动画配置 */
+    transitionConfig?: DialogTransition;
     /** Dialog 打开的回调 */
     onOpen?: () => void;
     /** Dialog 打开动画结束时的回调 */
@@ -49,13 +67,10 @@ export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps
     onClose?: () => void;
     /** Dialog 关闭动画结束时的回调 */
     onClosed?: () => void;
-    /** 关闭弹窗函数 */
-    close: () => void;
-    /** 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
-    beforeClose?: DialogBeforeCloseFn;
 }
 type DoneFn = (cancel?: boolean) => void;
 export type DialogBeforeCloseFn = (done: DoneFn) => void;
+export type DialogTransition = string | TransitionProps;
 export interface DialogHeaderProps extends BaseProps {
     /** header 部分的自定义 class 名 */
     headerClass?: string;

package/dist/Dialog/useDraggable.d.ts

@@ -1,2 +1,3 @@
 import { RefObject } from 'react';
-export declare const useDraggable: (targetRef: RefObject<HTMLElement | undefined>, dragRef: RefObject<HTMLElement | undefined>, draggable: boolean, overflow?: boolean) => void;
+import { DialogProps } from './typings';
+export declare const useDraggable: (targetRef: RefObject<HTMLElement | undefined>, dragRef: RefObject<HTMLElement | undefined>, props: DialogProps) => void;

package/dist/Dialog/useDraggable.js

@@ -1,11 +1,17 @@
 import { addUnit } from "../Util";
 import { useCallback, useEffect, useRef } from 'react';
-export var useDraggable = function useDraggable(targetRef, dragRef, draggable, overflow) {
+export var useDraggable = function useDraggable(targetRef, dragRef, props) {
+  var draggable = props.draggable,
+    visible = props.visible,
+    overflow = props.overflow,
+    showDuration = props.showDuration,
+    destroyOnClose = props.destroyOnClose;
   var transform = useRef({
     offsetX: 0,
     offsetY: 0
   });
   var overflowRef = useRef(overflow);
+  var initRef = useRef(false);
   var onMousedown = useCallback(function (e) {
     var _targetRef$current;
     var downX = e.clientX;
@@ -24,6 +30,9 @@ export var useDraggable = function useDraggable(targetRef, dragRef, draggable, o
     var minTop = -targetTop + offsetY;
     var maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
     var maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    if (targetRef.current) {
+      targetRef.current.classList.add('is-dragging');
+    }
     var onMousemove = function onMousemove(evt) {
       var moveX = offsetX + evt.clientX - downX;
       var moveY = offsetY + evt.clientY - downY;
@@ -39,9 +48,13 @@ export var useDraggable = function useDraggable(targetRef, dragRef, draggable, o
         targetRef.current.style.transform = "translate(".concat(addUnit(moveX), ", ").concat(addUnit(moveY), ")");
       }
     };
+    // 拖拽结束时移除is-dragging类
     var onMouseup = function onMouseup() {
       document.removeEventListener('mousemove', onMousemove);
       document.removeEventListener('mouseup', onMouseup);
+      if (targetRef.current) {
+        targetRef.current.classList.remove('is-dragging');
+      }
     };
     document.addEventListener('mousemove', onMousemove);
     document.addEventListener('mouseup', onMouseup);
@@ -50,21 +63,33 @@ export var useDraggable = function useDraggable(targetRef, dragRef, draggable, o
     if (dragRef.current && targetRef.current) {
       dragRef.current.addEventListener('mousedown', onMousedown);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (destroyOnClose) {
+      transform.current = {
+        offsetX: 0,
+        offsetY: 0
+      };
+    }
+  }, [destroyOnClose, dragRef, onMousedown, targetRef]);
   var offDraggable = useCallback(function () {
     if (dragRef.current && targetRef.current) {
       dragRef.current.removeEventListener('mousedown', onMousedown);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dragRef, onMousedown, targetRef]);
   useEffect(function () {
-    if (draggable) {
-      onDraggable();
+    overflowRef.current = overflow;
+    if (!draggable || !visible) {
+      offDraggable();
+      return;
+    }
+    if (visible) {
+      setTimeout(function () {
+        onDraggable();
+      }, showDuration);
+      initRef.current = true;
     } else {
       offDraggable();
     }
-    overflowRef.current = overflow;
+    offDraggable();
     return offDraggable;
-  }, [draggable, overflow, offDraggable, onDraggable]);
+  }, [draggable, visible, overflow]);
 };

package/dist/Drawer/Drawer.d.ts

@@ -1,15 +1,4 @@
-import React, { RefObject } from 'react';
-import DrawerBody from './DrawerBody';
-import DrawerFooter from './DrawerFooter';
+import React from 'react';
 import { DrawerProps } from './typings';
-declare const Comp: (props: DrawerProps & {
-    ref?: RefObject<HTMLDivElement> | React.ForwardedRef<HTMLDivElement>;
-}) => React.ReactElement;
-type InternalType = typeof Comp;
-interface CompInterface extends InternalType {
-    displayName?: string;
-    body: typeof DrawerBody;
-    footer: typeof DrawerFooter;
-}
-declare const Drawer: CompInterface;
+declare const Drawer: React.MemoExoticComponent<React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>>;
 export default Drawer;

package/dist/Drawer/Drawer.js

@@ -1,68 +1,73 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import { addClass, removeClass } from 'dom-lib';
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useComposeRef } from 'rc-util';
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Transition from "../Transition/Transition";
 import { PopupManager, addUnit, mergeDefaultProps } from "../Util";
-import { useClassNames, useControlled } from "../hooks";
+import { useClassNames } from "../hooks";
 import { namespace } from "../hooks/prefix";
+import { useLockscreen } from "../hooks/useLockscreen";
 import DrawerBody from "./DrawerBody";
 import { DrawerContext } from "./DrawerContext";
 import DrawerFooter from "./DrawerFooter";
 import DrawerHeader from "./DrawerHeader";
-function InternalComp(props, ref) {
+var Drawer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
-    direction: 'right',
+    direction: 'rtl',
     modal: true,
     closeOnClickModal: true,
     withHeader: true,
     lockScroll: true,
-    size: '30%'
+    size: '30%',
+    destroyOnClose: false
   }, props);
   var _props = props,
+    visible = _props.visible,
     modal = _props.modal,
+    modalPenetrable = _props.modalPenetrable,
+    modalClass = _props.modalClass,
     closeOnClickModal = _props.closeOnClickModal,
     title = _props.title,
+    footer = _props.footer,
+    headerClass = _props.headerClass,
+    bodyClass = _props.bodyClass,
+    footerClass = _props.footerClass,
     withHeader = _props.withHeader,
     size = _props.size,
     direction = _props.direction,
     children = _props.children,
-    close = _props.close,
+    close = _props.onCloseDrawer,
     beforeClose = _props.beforeClose,
     showClose = _props.showClose,
     border = _props.border,
     _props$classPrefix = _props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
-    lockScroll = _props.lockScroll;
+    lockScroll = _props.lockScroll,
+    zIndex = _props.zIndex,
+    destroyOnClose = _props.destroyOnClose;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
-    wb = _useClassNames.wb;
-  var _useControlled = useControlled(props.visible, props.defaultVisible),
-    _useControlled2 = _slicedToArray(_useControlled, 2),
-    visible = _useControlled2[0],
-    setVisible = _useControlled2[1];
+    is = _useClassNames.is;
+  useLockscreen(visible, {
+    shouldLock: lockScroll
+  });
   var sizeStyle = useMemo(function () {
-    if (['left', 'right'].includes(direction)) {
+    if (['ltr', 'rtl'].includes(direction)) {
       return {
-        '--el-drawer-width': addUnit(size)
+        width: addUnit(size)
       };
-    } else if (['top', 'bottom'].includes(direction)) {
+    } else if (['ttb', 'btt'].includes(direction)) {
       return {
-        '--el-drawer-height': addUnit(size)
+        height: addUnit(size)
       };
     }
   }, [direction, size]);
@@ -71,151 +76,124 @@ function InternalComp(props, ref) {
   var wrapperRef = useRef(null);
   // 模态框主题div
   var drawerRef = useRef(null);
-  // 遮罩div
-  var backdropRef = useRef(null);
-  var _useState = useState({
-      modal: 1,
-      drawer: 1
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    zIndex = _useState2[0],
-    setZIndex = _useState2[1];
+  var composedRef = useComposeRef(ref, wrapperRef);
+  var mousedownRef = useRef(null);
+  var nextZIndex = useMemo(function () {
+    return zIndex || PopupManager.nextZIndex();
+  }, [zIndex]);
+  var onMousedown = function onMousedown(e) {
+    e.stopPropagation();
+    mousedownRef.current = e;
+  };
+  var onMouseup = function onMouseup(mouseup) {
+    var _mousedownRef$current, _drawerRef$current, _drawerRef$current2;
+    var mouseUpTarget = mouseup === null || mouseup === void 0 ? void 0 : mouseup.target;
+    var mouseDownTarget = (_mousedownRef$current = mousedownRef.current) === null || _mousedownRef$current === void 0 ? void 0 : _mousedownRef$current.target;
+    var isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    var isContainedByPopper = (drawerRef === null || drawerRef === void 0 || (_drawerRef$current = drawerRef.current) === null || _drawerRef$current === void 0 ? void 0 : _drawerRef$current.contains(mouseUpTarget)) || (drawerRef === null || drawerRef === void 0 || (_drawerRef$current2 = drawerRef.current) === null || _drawerRef$current2 === void 0 ? void 0 : _drawerRef$current2.contains(mouseDownTarget));
+    if (isTargetExists || isContainedByPopper) {
+      return;
+    }
+    if (closeOnClickModal) {
+      doClose();
+    } else {
+      addClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
+      setTimeout(function () {
+        removeClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
+      }, 300);
+    }
+  };
   var doClose = useCallback(function () {
     if (beforeClose) {
-      beforeClose === null || beforeClose === void 0 || beforeClose(function (value) {
-        if (value) {
+      beforeClose === null || beforeClose === void 0 || beforeClose(function (cancle) {
+        if (cancle) {
           return;
         }
-        setVisible(false);
         close === null || close === void 0 || close();
       });
     } else {
-      setVisible(false);
       close === null || close === void 0 || close();
     }
-  }, [beforeClose, close, setVisible]);
-
-  /**关闭对话框 */
-  useEffect(function () {
-    if (visible) {
-      var _ref$current;
-      setZIndex({
-        modal: PopupManager.nextZIndex(),
-        drawer: PopupManager.nextZIndex()
-      });
-      var mousedown;
-      var shadowRef = (_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
-      shadowRef === null || shadowRef === void 0 || shadowRef.addEventListener('mousedown', function (e) {
-        return mousedown = e;
-      });
-      shadowRef === null || shadowRef === void 0 || shadowRef.addEventListener('mouseup', function (mouseup) {
-        var _mousedown, _drawerRef$current, _drawerRef$current2;
-        var mouseUpTarget = mouseup === null || mouseup === void 0 ? void 0 : mouseup.target;
-        var mouseDownTarget = (_mousedown = mousedown) === null || _mousedown === void 0 ? void 0 : _mousedown.target;
-        var isTargetExists = !mouseUpTarget || !mouseDownTarget;
-        var isContainedByPopper = (drawerRef === null || drawerRef === void 0 || (_drawerRef$current = drawerRef.current) === null || _drawerRef$current === void 0 ? void 0 : _drawerRef$current.contains(mouseUpTarget)) || (drawerRef === null || drawerRef === void 0 || (_drawerRef$current2 = drawerRef.current) === null || _drawerRef$current2 === void 0 ? void 0 : _drawerRef$current2.contains(mouseDownTarget));
-        if (isTargetExists || isContainedByPopper) {
-          return;
-        }
-        if (closeOnClickModal) {
-          doClose();
-        } else {
-          addClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
-          setTimeout(function () {
-            removeClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
-          }, 300);
-        }
-      });
-    }
-  }, [b, closeOnClickModal, modal, close, ref, setVisible, visible, doClose]);
+  }, [beforeClose, close]);
   return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
     value: {
       doClose: doClose
     }
-  }, modal && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
-    nodeRef: backdropRef,
+  }, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
+    nodeRef: wrapperRef,
     visible: visible,
+    showDuration: 0,
     transitionAppear: true,
-    unmountOnExit: true,
-    duration: 300,
-    onEnter: function onEnter() {
-      setTimeout(function () {
-        addClass(backdropRef.current, "".concat(namespace, "-anim-in"));
-      }, 10);
-    },
-    beforeLeave: function beforeLeave() {
-      return removeClass(backdropRef.current, "".concat(namespace, "-anim-in"));
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["backdrop"]))), "".concat(namespace, "-anim-fade")),
-    style: {
-      zIndex: zIndex.modal
+    unmountOnExit: destroyOnClose,
+    beforeEnter: function beforeEnter() {
+      var _props$beforeEnter, _props2;
+      (_props$beforeEnter = (_props2 = props).beforeEnter) === null || _props$beforeEnter === void 0 || _props$beforeEnter.call(_props2);
+      addClass(wrapperRef.current, b(_templateObject || (_templateObject = _taggedTemplateLiteral(["fade-enter-from"]))));
+      addClass(wrapperRef.current, b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["fade-enter-active"]))));
     },
-    ref: backdropRef
-  })), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
-    nodeRef: ref || wrapperRef,
-    visible: visible,
-    transitionAppear: true,
-    unmountOnExit: true,
-    beforeEnter: props.beforeEnter,
     onEnter: function onEnter() {
-      var _props$onOpen, _props2, _props$onEnter, _props3;
-      (_props$onOpen = (_props2 = props).onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(_props2);
-      (_props$onEnter = (_props3 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props3);
-      if (lockScroll) {
-        addClass(document.body, b('popup-parent--hidden', false));
-      }
+      var _props$onOpen, _props3, _props$onEnter, _props4;
+      (_props$onOpen = (_props3 = props).onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(_props3);
+      (_props$onEnter = (_props4 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props4);
     },
     afterEnter: function afterEnter() {
-      var _props$afterEnter, _props4, _props$onOpened, _props5;
-      (_props$afterEnter = (_props4 = props).afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(_props4);
-      (_props$onOpened = (_props5 = props).onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(_props5);
+      var _props$afterEnter, _props5, _props$onOpened, _props6;
+      (_props$afterEnter = (_props5 = props).afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(_props5);
+      (_props$onOpened = (_props6 = props).onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(_props6);
+      removeClass(wrapperRef.current, b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["fade-enter-from"]))));
     },
     beforeLeave: function beforeLeave() {
-      var _props$beforeLeave, _props6;
-      removeClass(drawerRef.current, "".concat(namespace, "-anim-slide-in"));
-      addClass(drawerRef.current, "".concat(namespace, "-anim-slide-out"));
-      (_props$beforeLeave = (_props6 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props6);
+      var _props$beforeLeave, _props7;
+      addClass(wrapperRef.current, b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["fade-leave-to"]))));
+      addClass(wrapperRef.current, b(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["fade-leave-active"]))));
+      (_props$beforeLeave = (_props7 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props7);
     },
     onLeave: function onLeave() {
-      var _props$onClose, _props7, _props$onLeave, _props8;
-      (_props$onClose = (_props7 = props).onClose) === null || _props$onClose === void 0 || _props$onClose.call(_props7);
-      (_props$onLeave = (_props8 = props).onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(_props8);
+      var _props$onClose, _props8, _props$onLeave, _props9;
+      (_props$onClose = (_props8 = props).onClose) === null || _props$onClose === void 0 || _props$onClose.call(_props8);
+      (_props$onLeave = (_props9 = props).onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(_props9);
     },
     afterLeave: function afterLeave() {
-      var _props$afterLeave, _props9, _props$onClosed, _props10;
-      (_props$afterLeave = (_props9 = props).afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(_props9);
-      (_props$onClosed = (_props10 = props).onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(_props10);
-      if (lockScroll) {
-        removeClass(document.body, b('popup-parent--hidden', false));
-      }
+      var _props$afterLeave, _props10, _props$onClosed, _props11;
+      (_props$afterLeave = (_props10 = props).afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(_props10);
+      (_props$onClosed = (_props11 = props).onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(_props11);
+      removeClass(wrapperRef.current, b(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["fade-leave-active"]))));
+      removeClass(wrapperRef.current, b(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["fade-leave-to"]))));
     },
     duration: 300
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), props.className),
-    style: _objectSpread(_objectSpread({}, props.style), {}, {
-      zIndex: zIndex.drawer
-    }),
-    ref: ref || wrapperRef
+    className: classNames(modal ? b('overlay', false) : '', modalClass || b('modal-drawer', false), is('drawer', {
+      penetrable: modalPenetrable
+    })),
+    style: modal ? {
+      zIndex: nextZIndex
+    } : {
+      zIndex: nextZIndex,
+      position: 'fixed',
+      top: '0px',
+      right: '0px',
+      bottom: '0px',
+      left: '0px'
+    },
+    onMouseDown: onMousedown,
+    onMouseUp: onMouseup,
+    ref: composedRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(wb(direction), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(direction)),
-    style: _objectSpread({
-      display: 'block'
-    }, sizeStyle),
+    className: classNames(b(), direction, {
+      open: visible
+    }, props.className),
+    style: _objectSpread(_objectSpread({}, sizeStyle), props.style),
+    role: "dialog",
     ref: drawerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["dialog"])))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
   }, withHeader ? /*#__PURE__*/React.createElement(DrawerHeader, {
-    classPrefix: classPrefix,
+    className: headerClass,
     showClose: showClose,
     border: border
-  }, title) : null, children))))), document.body));
-}
-var Comp = /*#__PURE__*/forwardRef(InternalComp);
-var Drawer = Comp;
-Drawer.body = DrawerBody;
-Drawer.footer = DrawerFooter;
-Drawer.displayName = 'Drawer';
+  }, title) : null, /*#__PURE__*/React.createElement(DrawerBody, {
+    className: bodyClass
+  }, children), footer && /*#__PURE__*/React.createElement(DrawerFooter, {
+    className: footerClass
+  }, footer)))), document.body));
+}));
+Drawer.displayName = 'ElDrawer';
 export default Drawer;

package/dist/Drawer/DrawerBody.js

@@ -1,13 +1,14 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
 import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
-import Scrollbar from "../Scrollbar/Scrollbar";
 import { useClassNames } from "../hooks";
 var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix;
+    classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix;
   var _useClassNames = useClassNames(classPrefix),
-    b = _useClassNames.b;
+    e = _useClassNames.e;
   var scrollbarInstance = useRef(null);
   var resizeFn = debounce(useCallback(function () {
     var _scrollbarInstance$cu;
@@ -20,13 +21,11 @@ var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(Scrollbar, {
-    ref: scrollbarInstance
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b(), props.className),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["body"]))), props.className),
     ref: ref,
     style: props.style
-  }, props.children));
+  }, props.children);
 });
 DrawerBody.displayName = 'ElDrawerBody';
 export default DrawerBody;