@rc-component/dialog 1.0.0 → 1.1.0

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.d.ts

@@ -7,9 +7,9 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
     onMouseUp?: React.MouseEventHandler;
     holderRef?: React.Ref<HTMLDivElement>;
 }
-export type ContentRef = {
+export type PanelRef = {
     focus: () => void;
     changeActive: (next: boolean) => void;
 };
-declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<ContentRef>>;
+declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
 export default Panel;

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";
+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); }
 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.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import type { PanelProps, ContentRef } from './Panel';
+import type { PanelProps, PanelRef } from './Panel';
+import type { CSSMotionRef } from '@rc-component/motion/es/CSSMotion';
+export type CSSMotionStateRef = Pick<CSSMotionRef, 'inMotion' | 'enableMotion'>;
+export type ContentRef = PanelRef & CSSMotionStateRef;
 export type ContentProps = {
     motionName: string;
     ariaId: string;

package/es/Dialog/Content/index.js

@@ -1,38 +1,43 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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); }
 import * as React from 'react';
 import { useRef } from 'react';
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/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();
+  const panelRef = useRef();
+
+  // ============================== Refs ==============================
+  React.useImperativeHandle(ref, () => ({
+    ...panelRef.current,
+    inMotion: dialogRef.current.inMotion,
+    enableMotion: dialogRef.current.enableMotion
+  }));
 
   // ============================= 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.nativeElement);
+    setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
   }
 
   // ============================= Render =============================
@@ -45,19 +50,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: panelRef,
+    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";
+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); }
 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;
+import CSSMotion from '@rc-component/motion';
+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;