@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/DatePicker/typings.d.ts

@@ -35,10 +35,6 @@ export interface DatePickerProps extends Omit<FormControlBaseProps, 'name' | 'va
     valueFormat?: string;
     /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
     /** 输入框后置内容，只对 type="text" 有效 */
@@ -86,11 +82,6 @@ export interface DatePickerRangeProps extends Omit<FormControlBaseProps, 'name'
     unlinkPanels?: boolean;
     /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
-    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
     /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
@@ -135,10 +126,6 @@ export interface AllDatePickerProps extends Omit<FormControlBaseProps, 'name' |
     valueFormat?: string;
     /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
     /** 输入框后置内容，只对 type="text" 有效 */

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,6 +1,6 @@
 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;
-var _excluded = ["name", "readonly", "clearable", "valueFormat", "format", "placeholder", "classPrefix", "onChange", "prepend", "shortcuts", "append", "warning", "error", "defaultTime", "formatter", "onClear", "onVisibleChange"];
+var _excluded = ["name", "readonly", "clearable", "valueFormat", "format", "placeholder", "classPrefix", "onChange", "prepend", "shortcuts", "append", "defaultTime", "formatter", "onClear", "onVisibleChange"];
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -35,7 +35,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     isoWeek: true,
     clearable: true,
     disabled: false,
-    placeholder: '请选择日期时间'
+    placeholder: ''
   }, props);
   var _props = props,
     name = _props.name,
@@ -50,8 +50,6 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     prepend = _props.prepend,
     shortcuts = _props.shortcuts,
     append = _props.append,
-    warning = _props.warning,
-    error = _props.error,
     defaultTime = _props.defaultTime,
     formatter = _props.formatter,
     _onClear = _props.onClear,
@@ -124,6 +122,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     _useState10 = _slicedToArray(_useState9, 2),
     time = _useState10[0],
     setTime = _useState10[1];
+  var timeRef = useRef('');
   var onActive = useCallback(function () {
     if (!disabled) {
       setVisible(true);
@@ -131,7 +130,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     }
   }, [disabled, onVisibleChange]);
   var handleChange = useCallback(function (val) {
-    if (isEmpty(time) && !defaultTime) {
+    if (isEmpty(timeRef.current) && !defaultTime) {
       val = val.hour(0).minute(0).second(0);
     } else if (defaultTime) {
       var defTime = dayjs(defaultTime);
@@ -140,6 +139,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     setValue(val ? val.format(format) : '');
     setDate(val ? val.format(extractDateFormat(format === 'x' ? 'YYYY-MM-DD' : format)) : '');
     setTime(val ? val.format(extractTimeFormat(format === 'x' ? 'HH:mm:ss' : format)) : '');
+    timeRef.current = val ? val.format(extractTimeFormat(format === 'x' ? 'HH:mm:ss' : format)) : '';
     if (valueFormat == 'x') {
       onChange(val ? val.toDate().getTime() : '');
     } else if (isNotEmpty(props.valueFormat)) {
@@ -147,10 +147,11 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     } else {
       onChange === null || onChange === void 0 || onChange(val ? val.toDate() : '');
     }
-  }, [defaultTime, format, onChange, props.valueFormat, setValue, time, valueFormat]);
+  }, [defaultTime, format, onChange, props.valueFormat, setValue, valueFormat]);
   var setSelectionRange = useCallback(function (start, end) {
-    var _inputs = timePickerRef.current.input.current;
-    if (!_inputs.value) {
+    var _timePickerRef$curren;
+    var _inputs = (_timePickerRef$curren = timePickerRef.current) === null || _timePickerRef$curren === void 0 || (_timePickerRef$curren = _timePickerRef$curren.input) === null || _timePickerRef$curren === void 0 ? void 0 : _timePickerRef$curren.current;
+    if (!(_inputs !== null && _inputs !== void 0 && _inputs.value)) {
       return;
     }
     _inputs.setSelectionRange(start, end);
@@ -198,8 +199,6 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
       focus: visible
     })),
     style: props.style,
-    error: error,
-    warning: warning,
     prepend: prepend,
     append: append,
     plain: props.plain
@@ -214,11 +213,17 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
       setVisible(false);
       onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
       setShowTime(false);
-    }
-  }, animationInputProps, {
+    },
     transitionAppear: true,
-    unmountOnExit: true
-  }, animationInputProps, popperProps), /*#__PURE__*/React.createElement(CalendarContext.Provider, {
+    unmountOnExit: true,
+    popperClass: "is-pure"
+  }, animationInputProps, {
+    onEnter: function onEnter() {
+      var _props$onEnter, _props2, _popperInstRef$curren;
+      (_props$onEnter = (_props2 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props2);
+      (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
+    }
+  }, popperProps), /*#__PURE__*/React.createElement(CalendarContext.Provider, {
     value: {
       value: dateProp,
       dateType: 'date',
@@ -228,6 +233,10 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
       onChange: handleChange,
       disabledDate: props.disabledDate,
       close: function close() {
+        if (isEmpty(value)) {
+          timeRef.current = dayjs().format(extractTimeFormat(format === 'x' ? 'HH:mm:ss' : format));
+          handleChange(dayjs());
+        }
         setVisible(false);
         onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
       },
@@ -251,7 +260,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     placeholder: "\u9009\u62E9\u65F6\u95F4",
     value: time,
     clearable: false,
-    onFocus: function onFocus() {
+    onClick: function onClick() {
       return setShowTime(true);
     },
     ref: timePickerRef,
@@ -283,14 +292,15 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     visible: enter,
     showSeconds: (valueFormat || format).includes('s') || (valueFormat || format) === 'x',
     referenceElement: function referenceElement() {
-      var _timePickerRef$curren;
-      return timePickerRef === null || timePickerRef === void 0 || (_timePickerRef$curren = timePickerRef.current) === null || _timePickerRef$curren === void 0 ? void 0 : _timePickerRef$curren.ref;
+      var _timePickerRef$curren2;
+      return timePickerRef === null || timePickerRef === void 0 || (_timePickerRef$curren2 = timePickerRef.current) === null || _timePickerRef$curren2 === void 0 ? void 0 : _timePickerRef$curren2.ref;
     },
     onDestroy: function onDestroy() {
       return setShowTime(false);
     },
-    ref: timePanelRef,
-    setSelectionRange: setSelectionRange,
+    ref: timePanelRef
+    // setSelectionRange={setSelectionRange}
+    ,
     onOk: function onOk() {
       setShowTime(false);
     }

package/dist/Dialog/Dialog.d.ts

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

package/dist/Dialog/Dialog.js

@@ -1,113 +1,125 @@
 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;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import omit from 'lodash/omit';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Transition from "../Transition/Transition";
-import { PopupManager, addUnit } from "../Util";
-import { useClassNames, useControlled } from "../hooks";
+import { PopupManager, addUnit, mergeDefaultProps } from "../Util";
+import { useClassNames } from "../hooks";
+import { useLockscreen } from "../hooks/useLockscreen";
 import DialogBody from "./DialogBody";
 import { DialogContext } from "./DialogContext";
 import DialogFooter from "./DialogFooter";
 import DialogHeader from "./DialogHeader";
 import { useDraggable } from "./useDraggable";
-function InternalElDialog(props, ref) {
-  var _props$modal = props.modal,
-    modal = _props$modal === void 0 ? true : _props$modal,
-    _props$closeOnClickMo = props.closeOnClickModal,
-    closeOnClickModal = _props$closeOnClickMo === void 0 ? true : _props$closeOnClickMo,
-    _props$width = props.width,
-    width = _props$width === void 0 ? '50%' : _props$width,
-    _props$overflow = props.overflow,
-    overflow = _props$overflow === void 0 ? false : _props$overflow,
-    title = props.title,
-    showClose = props.showClose,
-    border = props.border,
-    children = props.children,
-    center = props.center,
-    alignCenter = props.alignCenter,
-    draggable = props.draggable,
-    fullscreen = props.fullscreen,
-    headerClass = props.headerClass,
-    top = props.top,
-    close = props.close,
-    beforeClose = props.beforeClose,
-    _props$lockScroll = props.lockScroll,
-    lockScroll = _props$lockScroll === void 0 ? true : _props$lockScroll,
-    zIndex = props.zIndex,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'dialog' : _props$classPrefix;
+var Dialog = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    visible: false,
+    modal: true,
+    closeOnClickModal: true,
+    width: '50%',
+    overflow: false,
+    lockScroll: true,
+    showClose: true,
+    classPrefix: 'dialog',
+    transitionConfig: 'dialog-fade',
+    openDelay: 0,
+    closeDelay: 0,
+    destroyOnClose: false
+  }, props);
+  var _props = props,
+    visible = _props.visible,
+    modal = _props.modal,
+    modalPenetrable = _props.modalPenetrable,
+    closeOnClickModal = _props.closeOnClickModal,
+    width = _props.width,
+    overflow = _props.overflow,
+    title = _props.title,
+    footer = _props.footer,
+    showClose = _props.showClose,
+    openDelay = _props.openDelay,
+    closeDelay = _props.closeDelay,
+    border = _props.border,
+    children = _props.children,
+    center = _props.center,
+    alignCenter = _props.alignCenter,
+    draggable = _props.draggable,
+    fullscreen = _props.fullscreen,
+    headerClass = _props.headerClass,
+    bodyClass = _props.bodyClass,
+    footerClass = _props.footerClass,
+    top = _props.top,
+    onCloseDialog = _props.onCloseDialog,
+    beforeClose = _props.beforeClose,
+    lockScroll = _props.lockScroll,
+    zIndex = _props.zIndex,
+    classPrefix = _props.classPrefix,
+    modalClass = _props.modalClass,
+    transitionConfig = _props.transitionConfig,
+    destroyOnClose = _props.destroyOnClose;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
     m = _useClassNames.m,
     is = _useClassNames.is;
-  var _useControlled = useControlled(props.visible, props.defaultVisible),
-    _useControlled2 = _slicedToArray(_useControlled, 3),
-    visible = _useControlled2[0],
-    setVisible = _useControlled2[1],
-    isControlled = _useControlled2[2];
-
-  /** 是否有标题 */
-  var haveTitle = useRef(false);
+  useLockscreen(visible, {
+    shouldLock: lockScroll
+  });
 
-  /** 是否有按钮组 */
-  var haveFooter = useRef(false);
   // 模态框容器div
   var wrapperRef = useRef(null);
   // 模态框主题div
   var dialogRef = useRef(null);
-  // 遮罩div
-  // const backdropRef = useRef<HTMLDivElement>(null);
   var overlayRef = useRef(null);
   var headerRef = useRef(null);
+  var mousedownRef = useRef(null);
+  var contentRef = useRef(null);
   var nextZIndex = useMemo(function () {
     return zIndex || PopupManager.nextZIndex();
   }, [zIndex]);
-  useDraggable(dialogRef, headerRef, draggable, overflow);
-
-  /** 获取子组件 */
-  var getInstancesFromChildren = useCallback(function (_children) {
-    var componentChildren = _children instanceof Array ? _children : [_children];
-    componentChildren.forEach(function (node) {
-      var _nodeType;
-      var nodeType = node === null || node === void 0 ? void 0 : node.type;
-      nodeType = ((_nodeType = nodeType) === null || _nodeType === void 0 ? void 0 : _nodeType.displayName) || nodeType;
-      if (nodeType === 'ElDialogHeader') {
-        haveTitle.current = true;
-      } else if (nodeType === 'ElDialogFooter') {
-        haveFooter.current = true;
-      } else if (nodeType === 'Fragment') {
-        getInstancesFromChildren(node);
-      }
-    });
-  }, []);
+  var onMousedown = function onMousedown(e) {
+    e.stopPropagation();
+    mousedownRef.current = e;
+  };
+  var onMouseup = function onMouseup(mouseup) {
+    var _mousedownRef$current, _dialogRef$current, _dialogRef$current2;
+    var mouseUpTarget = mouseup === null || mouseup === void 0 ? void 0 : mouseup.target;
+    var mouseDownTarget = mousedownRef === null || mousedownRef === void 0 || (_mousedownRef$current = mousedownRef.current) === null || _mousedownRef$current === void 0 ? void 0 : _mousedownRef$current.target;
+    var isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    var isContainedByPopper = (dialogRef === null || dialogRef === void 0 || (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.contains(mouseUpTarget)) || (dialogRef === null || dialogRef === void 0 || (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.contains(mouseDownTarget));
+    if (isTargetExists || isContainedByPopper) {
+      return;
+    }
+    if (closeOnClickModal) {
+      doClose();
+    } else {
+      addClass(dialogRef.current, b('dialog-shake', false));
+      setTimeout(function () {
+        removeClass(dialogRef.current, b('dialog-shake', false));
+      }, 300);
+    }
+  };
+  useDraggable(dialogRef, headerRef, props);
   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();
+        onCloseDialog === null || onCloseDialog === void 0 || onCloseDialog();
       });
     } else {
-      setVisible(false);
-      close === null || close === void 0 || close();
+      onCloseDialog === null || onCloseDialog === void 0 || onCloseDialog();
     }
-  }, [beforeClose, close, setVisible]);
+  }, [beforeClose, onCloseDialog]);
 
   // const keydown = useCallback(
   //     ({ code }: KeyboardEvent) => {
@@ -121,105 +133,80 @@ function InternalElDialog(props, ref) {
   //     [doClose, visible],
   // );
 
-  /**关闭对话框 */
-  useEffect(function () {
-    if (visible) {
-      var mousedown;
-      var shadowRef = 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, _dialogRef$current, _dialogRef$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 = (dialogRef === null || dialogRef === void 0 || (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.contains(mouseUpTarget)) || (dialogRef === null || dialogRef === void 0 || (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.contains(mouseDownTarget));
-        if (isTargetExists || isContainedByPopper) {
-          return;
-        }
-        if (closeOnClickModal) {
-          doClose();
-        } else {
-          addClass(dialogRef.current, b('dialog-shake', false));
-          setTimeout(function () {
-            removeClass(dialogRef.current, b('dialog-shake', false));
-          }, 300);
-        }
-      });
-    }
-  }, [b, modal, beforeClose, doClose, ref, setVisible, visible, closeOnClickModal]);
-  useEffect(function () {
-    getInstancesFromChildren(children);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   useImperativeHandle(ref, function () {
     return wrapperRef.current;
   });
+  var transitionName = typeof transitionConfig === 'string' ? transitionConfig : transitionConfig.name;
   return /*#__PURE__*/React.createElement(DialogContext.Provider, {
     value: {
       modal: modal,
-      setVisible: setVisible,
-      isControlled: isControlled,
       doClose: doClose,
       center: center,
-      overflow: overflow,
-      haveTitle: haveTitle.current,
-      haveFooter: haveFooter.current
+      overflow: overflow
     }
-  }, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
+  }, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, _extends({
     nodeRef: wrapperRef,
     visible: visible,
     transitionAppear: true,
-    unmountOnExit: props.unmountOnExit || !draggable,
+    unmountOnExit: destroyOnClose,
     beforeEnter: function beforeEnter() {
-      var _props$beforeEnter;
-      (_props$beforeEnter = props.beforeEnter) === null || _props$beforeEnter === void 0 || _props$beforeEnter.call(props);
-      addClass(overlayRef.current, b('anim-bounce-in', false));
+      var _props$beforeEnter, _props2;
+      (_props$beforeEnter = (_props2 = props).beforeEnter) === null || _props$beforeEnter === void 0 || _props$beforeEnter.call(_props2);
+      addClass(wrapperRef.current, transitionName + '-enter-from');
+      addClass(wrapperRef.current, transitionName + '-enter-active');
     },
     onEnter: function onEnter() {
-      var _props$onOpen, _props$onEnter;
-      (_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(props);
-      (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props);
+      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);
       if (draggable && dialogRef.current) {
         // addStyle(modalRef.current, 'transform', `translate(${positionRef.current.left}px, ${positionRef.current.top}px)`);
       }
-      if (lockScroll) {
-        addClass(document.body, b('popup-parent--hidden', false));
-      }
     },
     afterEnter: function afterEnter() {
-      var _props$afterEnter, _props$onOpened;
-      (_props$afterEnter = props.afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(props);
-      (_props$onOpened = props.onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(props);
-      // addStyle(dialogRef.current, 'display', 'block');
-      removeClass(overlayRef.current, b('anim-bounce-in', false));
+      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, transitionName + '-enter-from');
+      // removeClass(wrapperRef.current, transitionName + '-enter-active');
     },
     beforeLeave: function beforeLeave() {
-      var _props$beforeLeave;
-      addClass(overlayRef.current, b('anim-bounce-out', false));
-      (_props$beforeLeave = props.beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(props);
+      var _props$beforeLeave, _props7;
+      addClass(wrapperRef.current, transitionName + '-leave-to');
+      addClass(wrapperRef.current, transitionName + '-leave-active');
+      (_props$beforeLeave = (_props7 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props7);
     },
     onLeave: function onLeave() {
-      var _props$onClose, _props$onLeave;
-      (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
-      (_props$onLeave = props.onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(props);
+      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);
+      // removeClass(wrapperRef.current, transitionName + '-leave-to');
     },
     afterLeave: function afterLeave() {
-      var _props$afterLeave, _props$onClosed;
-      (_props$afterLeave = props.afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(props);
-      (_props$onClosed = props.onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(props);
-      if (lockScroll) {
-        removeClass(document.body, b('popup-parent--hidden', false));
-      }
-      removeClass(overlayRef.current, b('anim-bounce-out', 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, transitionName + '-leave-active');
+      removeClass(wrapperRef.current, transitionName + '-leave-to');
     },
-    duration: 300
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b('overlay', false), props.className),
-    style: {
+    duration: 200 + closeDelay,
+    showDuration: openDelay
+  }, typeof transitionConfig === 'string' ? {} : omit(transitionConfig, 'name')), /*#__PURE__*/React.createElement("div", {
+    className: classNames(modal ? b('overlay', false) : '', modalClass || b('modal-dialog', false), is({
+      penetrable: modalPenetrable
+    })),
+    style: modal ? {
       zIndex: nextZIndex
+    } : {
+      zIndex: nextZIndex,
+      position: 'fixed',
+      top: '0px',
+      right: '0px',
+      bottom: '0px',
+      left: '0px'
     },
+    onMouseDown: onMousedown,
+    onMouseUp: onMouseup,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,
@@ -228,7 +215,7 @@ function InternalElDialog(props, ref) {
       display: alignCenter ? 'flex' : 'block'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b(), is({
+    className: classNames(b(), props.className, is({
       draggable: draggable,
       'align-center': alignCenter,
       fullscreen: fullscreen
@@ -241,11 +228,14 @@ function InternalElDialog(props, ref) {
     showClose: showClose,
     border: border,
     headerClass: headerClass
-  }, title), children)))), document.body));
-}
-var Comp = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(InternalElDialog));
-var Dialog = Comp;
-Dialog.body = DialogBody;
-Dialog.footer = DialogFooter;
+  }, title), /*#__PURE__*/React.createElement(DialogBody, {
+    ref: contentRef,
+    classPrefix: classPrefix,
+    className: bodyClass
+  }, children), /*#__PURE__*/React.createElement(DialogFooter, {
+    classPrefix: classPrefix,
+    className: footerClass
+  }, footer))))), document.body));
+}));
 Dialog.displayName = 'ElDialog';
 export default Dialog;

package/dist/Dialog/DialogBody.js

@@ -1,52 +1,17 @@
-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;
-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) } })); }
 import classNames from 'classnames';
-import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { useClassNames } from "../hooks";
 var DialogBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'dialog' : _props$classPrefix;
   var _useClassNames = useClassNames(classPrefix),
     e = _useClassNames.e;
-  // const { overflow, mounted, haveFooter } = useContext(DialogContext);
-
-  var contentRef = useRef(null);
-  // const scrollbarInstance = useRef<ScrollbarRef>(null);
-
-  // const resizeFn = useCallback(() => {
-  //     if (contentRef.current) {
-  //         const { top } = contentRef.current.getBoundingClientRect();
-  //         const { height = 0 } = haveFooter && contentRef.current.nextElementSibling ? contentRef.current.nextElementSibling.getBoundingClientRect() : {};
-  //         addStyle(contentRef.current, { [overflow ? 'height' : 'maxHeight']: `${document.body.clientHeight - top - height - 20 - 60}px` });
-  //         scrollbarInstance.current?.update();
-  //     }
-  // }, [haveFooter, overflow]);
-
-  // useEffect(() => {
-  //     if (mounted) {
-  //         resizeFn();
-  //         window.addEventListener('resize', resizeFn);
-  //     }
-
-  //     return () => {
-  //         window.removeEventListener('resize', resizeFn);
-  //     };
-  //     // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [mounted]);
-
-  useImperativeHandle(ref, function () {
-    return contentRef.current;
-  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["body"]))), props.className),
-    ref: contentRef,
-    style: _objectSpread({}, props.style)
+    ref: ref,
+    style: props.style
   }, props.children);
 }));
 DialogBody.displayName = 'ElDialogBody';