@rc-component/dialog 1.0.0 → 1.0.1

package/es/Dialog/Content/MemoChildren.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-export default /*#__PURE__*/React.memo(function (_ref) {
-  var children = _ref.children;
-  return children;
-}, function (_, _ref2) {
-  var shouldUpdate = _ref2.shouldUpdate;
-  return !shouldUpdate;
-});
+export default /*#__PURE__*/React.memo(({
+  children
+}) => children, (_, {
+  shouldUpdate
+}) => !shouldUpdate);

package/es/Dialog/Content/Panel.js

@@ -1,77 +1,76 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
-import { useComposeRef } from "rc-util/es/ref";
+import { useComposeRef } from "@rc-component/util/es/ref";
 import React, { useMemo, useRef } from 'react';
 import { RefContext } from "../../context";
 import MemoChildren from "./MemoChildren";
-import pickAttrs from "rc-util/es/pickAttrs";
-var sentinelStyle = {
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+const sentinelStyle = {
   width: 0,
   height: 0,
   overflow: 'hidden',
   outline: 'none'
 };
-var entityStyle = {
+const entityStyle = {
   outline: 'none'
 };
-var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var prefixCls = props.prefixCls,
-    className = props.className,
-    style = props.style,
-    title = props.title,
-    ariaId = props.ariaId,
-    footer = props.footer,
-    closable = props.closable,
-    closeIcon = props.closeIcon,
-    onClose = props.onClose,
-    children = props.children,
-    bodyStyle = props.bodyStyle,
-    bodyProps = props.bodyProps,
-    modalRender = props.modalRender,
-    onMouseDown = props.onMouseDown,
-    onMouseUp = props.onMouseUp,
-    holderRef = props.holderRef,
-    visible = props.visible,
-    forceRender = props.forceRender,
-    width = props.width,
-    height = props.height,
-    modalClassNames = props.classNames,
-    modalStyles = props.styles;
+const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    prefixCls,
+    className,
+    style,
+    title,
+    ariaId,
+    footer,
+    closable,
+    closeIcon,
+    onClose,
+    children,
+    bodyStyle,
+    bodyProps,
+    modalRender,
+    onMouseDown,
+    onMouseUp,
+    holderRef,
+    visible,
+    forceRender,
+    width,
+    height,
+    classNames: modalClassNames,
+    styles: modalStyles
+  } = props;
 
   // ================================= Refs =================================
-  var _React$useContext = React.useContext(RefContext),
-    panelRef = _React$useContext.panel;
-  var mergedRef = useComposeRef(holderRef, panelRef);
-  var sentinelStartRef = useRef();
-  var sentinelEndRef = useRef();
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _sentinelStartRef$cur;
-        (_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 || _sentinelStartRef$cur.focus({
+  const {
+    panel: panelRef
+  } = React.useContext(RefContext);
+  const mergedRef = useComposeRef(holderRef, panelRef);
+  const sentinelStartRef = useRef();
+  const sentinelEndRef = useRef();
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      sentinelStartRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    changeActive: next => {
+      const {
+        activeElement
+      } = document;
+      if (next && activeElement === sentinelEndRef.current) {
+        sentinelStartRef.current.focus({
+          preventScroll: true
+        });
+      } else if (!next && activeElement === sentinelStartRef.current) {
+        sentinelEndRef.current.focus({
           preventScroll: true
         });
-      },
-      changeActive: function changeActive(next) {
-        var _document = document,
-          activeElement = _document.activeElement;
-        if (next && activeElement === sentinelEndRef.current) {
-          sentinelStartRef.current.focus({
-            preventScroll: true
-          });
-        } else if (!next && activeElement === sentinelStartRef.current) {
-          sentinelEndRef.current.focus({
-            preventScroll: true
-          });
-        }
       }
-    };
-  });
+    }
+  }));
 
   // ================================ Style =================================
-  var contentStyle = {};
+  const contentStyle = {};
   if (width !== undefined) {
     contentStyle.width = width;
   }
@@ -79,47 +78,56 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     contentStyle.height = height;
   }
   // ================================ Render ================================
-  var footerNode = footer ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer),
-    style: _objectSpread({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.footer)
+  const footerNode = footer ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-footer`, modalClassNames?.footer),
+    style: {
+      ...modalStyles?.footer
+    }
   }, footer) : null;
-  var headerNode = title ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header),
-    style: _objectSpread({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header)
+  const headerNode = title ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-header`, modalClassNames?.header),
+    style: {
+      ...modalStyles?.header
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-title"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.title),
+    className: classNames(`${prefixCls}-title`, modalClassNames?.title),
     id: ariaId,
-    style: _objectSpread({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.title)
+    style: {
+      ...modalStyles?.title
+    }
   }, title)) : null;
-  var closableObj = useMemo(function () {
-    if (_typeof(closable) === 'object' && closable !== null) {
+  const closableObj = useMemo(() => {
+    if (typeof closable === 'object' && closable !== null) {
       return closable;
     }
     if (closable) {
       return {
-        closeIcon: closeIcon !== null && closeIcon !== void 0 ? closeIcon : /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-close-x")
+        closeIcon: closeIcon ?? /*#__PURE__*/React.createElement("span", {
+          className: `${prefixCls}-close-x`
         })
       };
     }
     return {};
   }, [closable, closeIcon, prefixCls]);
-  var ariaProps = pickAttrs(closableObj, true);
-  var closeBtnIsDisabled = _typeof(closable) === 'object' && closable.disabled;
-  var closerNode = closable ? /*#__PURE__*/React.createElement("button", _extends({
+  const ariaProps = pickAttrs(closableObj, true);
+  const closeBtnIsDisabled = typeof closable === 'object' && closable.disabled;
+  const closerNode = closable ? /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
     onClick: onClose,
     "aria-label": "Close"
   }, ariaProps, {
-    className: "".concat(prefixCls, "-close"),
+    className: `${prefixCls}-close`,
     disabled: closeBtnIsDisabled
   }), closableObj.closeIcon) : null;
-  var content = /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-section"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.section),
-    style: modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.section
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-section`, modalClassNames?.section),
+    style: modalStyles?.section
   }, closerNode, headerNode, /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("".concat(prefixCls, "-body"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.body),
-    style: _objectSpread(_objectSpread({}, bodyStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
+    className: classNames(`${prefixCls}-body`, modalClassNames?.body),
+    style: {
+      ...bodyStyle,
+      ...modalStyles?.body
+    }
   }, bodyProps), children), footerNode);
   return /*#__PURE__*/React.createElement("div", {
     key: "dialog-element",
@@ -127,7 +135,10 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-labelledby": title ? ariaId : null,
     "aria-modal": "true",
     ref: mergedRef,
-    style: _objectSpread(_objectSpread({}, style), contentStyle),
+    style: {
+      ...style,
+      ...contentStyle
+    },
     className: classNames(prefixCls, className),
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp

package/es/Dialog/Content/index.js

@@ -1,38 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { useRef } from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import { offset } from "../../util";
 import Panel from "./Panel";
-var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var prefixCls = props.prefixCls,
-    title = props.title,
-    style = props.style,
-    className = props.className,
-    visible = props.visible,
-    forceRender = props.forceRender,
-    destroyOnClose = props.destroyOnClose,
-    motionName = props.motionName,
-    ariaId = props.ariaId,
-    onVisibleChanged = props.onVisibleChanged,
-    mousePosition = props.mousePosition;
-  var dialogRef = useRef();
+const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    prefixCls,
+    title,
+    style,
+    className,
+    visible,
+    forceRender,
+    destroyOnClose,
+    motionName,
+    ariaId,
+    onVisibleChanged,
+    mousePosition
+  } = props;
+  const dialogRef = useRef();
 
   // ============================= Style ==============================
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    transformOrigin = _React$useState2[0],
-    setTransformOrigin = _React$useState2[1];
-  var contentStyle = {};
+  const [transformOrigin, setTransformOrigin] = React.useState();
+  const contentStyle = {};
   if (transformOrigin) {
     contentStyle.transformOrigin = transformOrigin;
   }
   function onPrepare() {
-    var elementOffset = offset(dialogRef.current);
-    setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? "".concat(mousePosition.x - elementOffset.left, "px ").concat(mousePosition.y - elementOffset.top, "px") : '');
+    const elementOffset = offset(dialogRef.current);
+    setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
   }
 
   // ============================= Render =============================
@@ -45,19 +42,22 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     motionName: motionName,
     removeOnLeave: destroyOnClose,
     ref: dialogRef
-  }, function (_ref, motionRef) {
-    var motionClassName = _ref.className,
-      motionStyle = _ref.style;
-    return /*#__PURE__*/React.createElement(Panel, _extends({}, props, {
-      ref: ref,
-      title: title,
-      ariaId: ariaId,
-      prefixCls: prefixCls,
-      holderRef: motionRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, motionStyle), style), contentStyle),
-      className: classNames(className, motionClassName)
-    }));
-  });
+  }, ({
+    className: motionClassName,
+    style: motionStyle
+  }, motionRef) => /*#__PURE__*/React.createElement(Panel, _extends({}, props, {
+    ref: ref,
+    title: title,
+    ariaId: ariaId,
+    prefixCls: prefixCls,
+    holderRef: motionRef,
+    style: {
+      ...motionStyle,
+      ...style,
+      ...contentStyle
+    },
+    className: classNames(className, motionClassName)
+  })));
 });
 Content.displayName = 'Content';
 export default Content;

package/es/Dialog/Mask.js

@@ -1,28 +1,31 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
-var Mask = function Mask(props) {
-  var prefixCls = props.prefixCls,
-    style = props.style,
-    visible = props.visible,
-    maskProps = props.maskProps,
-    motionName = props.motionName,
-    className = props.className;
+const Mask = props => {
+  const {
+    prefixCls,
+    style,
+    visible,
+    maskProps,
+    motionName,
+    className
+  } = props;
   return /*#__PURE__*/React.createElement(CSSMotion, {
     key: "mask",
     visible: visible,
     motionName: motionName,
-    leavedClassName: "".concat(prefixCls, "-mask-hidden")
-  }, function (_ref, ref) {
-    var motionClassName = _ref.className,
-      motionStyle = _ref.style;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      ref: ref,
-      style: _objectSpread(_objectSpread({}, motionStyle), style),
-      className: classNames("".concat(prefixCls, "-mask"), motionClassName, className)
-    }, maskProps));
-  });
+    leavedClassName: `${prefixCls}-mask-hidden`
+  }, ({
+    className: motionClassName,
+    style: motionStyle
+  }, ref) => /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: {
+      ...motionStyle,
+      ...style
+    },
+    className: classNames(`${prefixCls}-mask`, motionClassName, className)
+  }, maskProps)));
 };
 export default Mask;

package/es/Dialog/index.js

@@ -1,67 +1,62 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import classNames from 'classnames';
-import contains from "rc-util/es/Dom/contains";
-import useId from "rc-util/es/hooks/useId";
-import KeyCode from "rc-util/es/KeyCode";
-import pickAttrs from "rc-util/es/pickAttrs";
+import contains from "@rc-component/util/es/Dom/contains";
+import useId from "@rc-component/util/es/hooks/useId";
+import KeyCode from "@rc-component/util/es/KeyCode";
+import pickAttrs from "@rc-component/util/es/pickAttrs";
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import { getMotionName } from "../util";
 import Content from "./Content";
 import Mask from "./Mask";
-import { warning } from "rc-util/es/warning";
-var Dialog = function Dialog(props) {
-  var _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? 'rc-dialog' : _props$prefixCls,
-    zIndex = props.zIndex,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? false : _props$visible,
-    _props$keyboard = props.keyboard,
-    keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
-    _props$focusTriggerAf = props.focusTriggerAfterClose,
-    focusTriggerAfterClose = _props$focusTriggerAf === void 0 ? true : _props$focusTriggerAf,
-    wrapStyle = props.wrapStyle,
-    wrapClassName = props.wrapClassName,
-    wrapProps = props.wrapProps,
-    onClose = props.onClose,
-    afterOpenChange = props.afterOpenChange,
-    afterClose = props.afterClose,
-    transitionName = props.transitionName,
-    animation = props.animation,
-    _props$closable = props.closable,
-    closable = _props$closable === void 0 ? true : _props$closable,
-    _props$mask = props.mask,
-    mask = _props$mask === void 0 ? true : _props$mask,
-    maskTransitionName = props.maskTransitionName,
-    maskAnimation = props.maskAnimation,
-    _props$maskClosable = props.maskClosable,
-    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
-    maskStyle = props.maskStyle,
-    maskProps = props.maskProps,
-    rootClassName = props.rootClassName,
-    modalClassNames = props.classNames,
-    modalStyles = props.styles;
+import { warning } from "@rc-component/util/es/warning";
+const Dialog = props => {
+  const {
+    prefixCls = 'rc-dialog',
+    zIndex,
+    visible = false,
+    keyboard = true,
+    focusTriggerAfterClose = true,
+    // scrollLocker,
+    // Wrapper
+    wrapStyle,
+    wrapClassName,
+    wrapProps,
+    onClose,
+    afterOpenChange,
+    afterClose,
+    // Dialog
+    transitionName,
+    animation,
+    closable = true,
+    // Mask
+    mask = true,
+    maskTransitionName,
+    maskAnimation,
+    maskClosable = true,
+    maskStyle,
+    maskProps,
+    rootClassName,
+    rootStyle,
+    classNames: modalClassNames,
+    styles: modalStyles
+  } = props;
   if (process.env.NODE_ENV !== 'production') {
-    ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(function (prop) {
+    ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(prop => {
       // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
-      warning(!(prop in props), "".concat(prop, " is deprecated, please use styles instead."));
+      warning(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
     if ('wrapClassName' in props) {
-      warning(false, "wrapClassName is deprecated, please use classNames instead.");
+      warning(false, `wrapClassName is deprecated, please use classNames instead.`);
     }
   }
-  var lastOutSideActiveElementRef = useRef();
-  var wrapperRef = useRef();
-  var contentRef = useRef();
-  var _React$useState = React.useState(visible),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    animatedVisible = _React$useState2[0],
-    setAnimatedVisible = _React$useState2[1];
+  const lastOutSideActiveElementRef = useRef();
+  const wrapperRef = useRef();
+  const contentRef = useRef();
+  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
   // ========================== Init ==========================
-  var ariaId = useId();
+  const ariaId = useId();
   function saveLastOutSideActiveElementRef() {
     if (!contains(wrapperRef.current, document.activeElement)) {
       lastOutSideActiveElementRef.current = document.activeElement;
@@ -69,8 +64,7 @@ var Dialog = function Dialog(props) {
   }
   function focusDialogContent() {
     if (!contains(wrapperRef.current, document.activeElement)) {
-      var _contentRef$current;
-      (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
+      contentRef.current?.focus();
     }
   }
 
@@ -95,35 +89,35 @@ var Dialog = function Dialog(props) {
 
       // Trigger afterClose only when change visible from true to false
       if (animatedVisible) {
-        afterClose === null || afterClose === void 0 || afterClose();
+        afterClose?.();
       }
     }
-    afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(newVisible);
+    afterOpenChange?.(newVisible);
   }
   function onInternalClose(e) {
-    onClose === null || onClose === void 0 || onClose(e);
+    onClose?.(e);
   }
 
   // >>> Content
-  var contentClickRef = useRef(false);
-  var contentTimeoutRef = useRef();
+  const contentClickRef = useRef(false);
+  const contentTimeoutRef = useRef();
 
   // We need record content click incase content popup out of dialog
-  var onContentMouseDown = function onContentMouseDown() {
+  const onContentMouseDown = () => {
     clearTimeout(contentTimeoutRef.current);
     contentClickRef.current = true;
   };
-  var onContentMouseUp = function onContentMouseUp() {
-    contentTimeoutRef.current = setTimeout(function () {
+  const onContentMouseUp = () => {
+    contentTimeoutRef.current = setTimeout(() => {
       contentClickRef.current = false;
     });
   };
 
   // >>> Wrapper
   // Close only when element not on dialog
-  var onWrapperClick = null;
+  let onWrapperClick = null;
   if (maskClosable) {
-    onWrapperClick = function onWrapperClick(e) {
+    onWrapperClick = e => {
       if (contentClickRef.current) {
         contentClickRef.current = false;
       } else if (wrapperRef.current === e.target) {
@@ -145,7 +139,7 @@ var Dialog = function Dialog(props) {
   }
 
   // ========================= Effect =========================
-  useEffect(function () {
+  useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
@@ -153,35 +147,37 @@ var Dialog = function Dialog(props) {
   }, [visible]);
 
   // Remove direct should also check the scroll bar update
-  useEffect(function () {
-    return function () {
-      clearTimeout(contentTimeoutRef.current);
-    };
+  useEffect(() => () => {
+    clearTimeout(contentTimeoutRef.current);
   }, []);
-  var mergedStyle = _objectSpread(_objectSpread(_objectSpread({
-    zIndex: zIndex
-  }, wrapStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.wrapper), {}, {
+  const mergedStyle = {
+    zIndex,
+    ...wrapStyle,
+    ...modalStyles?.wrapper,
     display: !animatedVisible ? 'none' : null
-  });
+  };
 
   // ========================= Render =========================
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("".concat(prefixCls, "-root"), rootClassName)
+    className: classNames(`${prefixCls}-root`, rootClassName),
+    style: rootStyle
   }, pickAttrs(props, {
     data: true
   })), /*#__PURE__*/React.createElement(Mask, {
     prefixCls: prefixCls,
     visible: mask && visible,
     motionName: getMotionName(prefixCls, maskTransitionName, maskAnimation),
-    style: _objectSpread(_objectSpread({
-      zIndex: zIndex
-    }, maskStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.mask),
+    style: {
+      zIndex,
+      ...maskStyle,
+      ...modalStyles?.mask
+    },
     maskProps: maskProps,
-    className: modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.mask
+    className: modalClassNames?.mask
   }), /*#__PURE__*/React.createElement("div", _extends({
     tabIndex: -1,
     onKeyDown: onWrapperKeyDown,
-    className: classNames("".concat(prefixCls, "-wrap"), wrapClassName, modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.wrapper),
+    className: classNames(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,
     onClick: onWrapperClick,
     style: mergedStyle