@rc-component/dialog 1.0.0 → 1.1.0

package/lib/Dialog/Content/Panel.js

@@ -1,87 +1,85 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _ref = require("rc-util/lib/ref");
+var _ref = require("@rc-component/util/lib/ref");
 var _react = _interopRequireWildcard(require("react"));
 var _context = require("../../context");
 var _MemoChildren = _interopRequireDefault(require("./MemoChildren"));
-var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var sentinelStyle = {
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const sentinelStyle = {
   width: 0,
   height: 0,
   overflow: 'hidden',
   outline: 'none'
 };
-var entityStyle = {
+const entityStyle = {
   outline: 'none'
 };
-var Panel = /*#__PURE__*/_react.default.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.default.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.default.useContext(_context.RefContext),
-    panelRef = _React$useContext.panel;
-  var mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef);
-  var sentinelStartRef = (0, _react.useRef)();
-  var sentinelEndRef = (0, _react.useRef)();
-  _react.default.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.default.useContext(_context.RefContext);
+  const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef);
+  const sentinelStartRef = (0, _react.useRef)();
+  const sentinelEndRef = (0, _react.useRef)();
+  _react.default.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;
   }
@@ -89,47 +87,56 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     contentStyle.height = height;
   }
   // ================================ Render ================================
-  var footerNode = footer ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer),
-    style: (0, _objectSpread2.default)({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.footer)
+  const footerNode = footer ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefixCls}-footer`, modalClassNames?.footer),
+    style: {
+      ...modalStyles?.footer
+    }
   }, footer) : null;
-  var headerNode = title ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header),
-    style: (0, _objectSpread2.default)({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header)
+  const headerNode = title ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefixCls}-header`, modalClassNames?.header),
+    style: {
+      ...modalStyles?.header
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-title"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.title),
+    className: (0, _classnames.default)(`${prefixCls}-title`, modalClassNames?.title),
     id: ariaId,
-    style: (0, _objectSpread2.default)({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.title)
+    style: {
+      ...modalStyles?.title
+    }
   }, title)) : null;
-  var closableObj = (0, _react.useMemo)(function () {
-    if ((0, _typeof2.default)(closable) === 'object' && closable !== null) {
+  const closableObj = (0, _react.useMemo)(() => {
+    if (typeof closable === 'object' && closable !== null) {
       return closable;
     }
     if (closable) {
       return {
-        closeIcon: closeIcon !== null && closeIcon !== void 0 ? closeIcon : /*#__PURE__*/_react.default.createElement("span", {
-          className: "".concat(prefixCls, "-close-x")
+        closeIcon: closeIcon ?? /*#__PURE__*/_react.default.createElement("span", {
+          className: `${prefixCls}-close-x`
         })
       };
     }
     return {};
   }, [closable, closeIcon, prefixCls]);
-  var ariaProps = (0, _pickAttrs.default)(closableObj, true);
-  var closeBtnIsDisabled = (0, _typeof2.default)(closable) === 'object' && closable.disabled;
-  var closerNode = closable ? /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+  const ariaProps = (0, _pickAttrs.default)(closableObj, true);
+  const closeBtnIsDisabled = typeof closable === 'object' && closable.disabled;
+  const closerNode = closable ? /*#__PURE__*/_react.default.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.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-section"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.section),
-    style: modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.section
-  }, closerNode, headerNode, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(prefixCls, "-body"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.body),
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bodyStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
+  const content = /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefixCls}-section`, modalClassNames?.section),
+    style: modalStyles?.section
+  }, closerNode, headerNode, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)(`${prefixCls}-body`, modalClassNames?.body),
+    style: {
+      ...bodyStyle,
+      ...modalStyles?.body
+    }
   }, bodyProps), children), footerNode);
   return /*#__PURE__*/_react.default.createElement("div", {
     key: "dialog-element",
@@ -137,7 +144,10 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "aria-labelledby": title ? ariaId : null,
     "aria-modal": "true",
     ref: mergedRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), contentStyle),
+    style: {
+      ...style,
+      ...contentStyle
+    },
     className: (0, _classnames.default)(prefixCls, className),
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp

package/lib/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/lib/Dialog/Content/index.js

@@ -1,52 +1,56 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
 var _util = require("../../util");
 var _Panel = _interopRequireDefault(require("./Panel"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 = (0, _react.useRef)();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    prefixCls,
+    title,
+    style,
+    className,
+    visible,
+    forceRender,
+    destroyOnClose,
+    motionName,
+    ariaId,
+    onVisibleChanged,
+    mousePosition
+  } = props;
+  const dialogRef = (0, _react.useRef)();
+  const panelRef = (0, _react.useRef)();
+
+  // ============================== Refs ==============================
+  React.useImperativeHandle(ref, () => ({
+    ...panelRef.current,
+    inMotion: dialogRef.current.inMotion,
+    enableMotion: dialogRef.current.enableMotion
+  }));
 
   // ============================= Style ==============================
-  var _React$useState = React.useState(),
-    _React$useState2 = (0, _slicedToArray2.default)(_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 = (0, _util.offset)(dialogRef.current);
-    setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? "".concat(mousePosition.x - elementOffset.left, "px ").concat(mousePosition.y - elementOffset.top, "px") : '');
+    const elementOffset = (0, _util.offset)(dialogRef.current.nativeElement);
+    setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
   }
 
   // ============================= Render =============================
-  return /*#__PURE__*/React.createElement(_rcMotion.default, {
+  return /*#__PURE__*/React.createElement(_motion.default, {
     visible: visible,
     onVisibleChanged: onVisibleChanged,
     onAppearPrepare: onPrepare,
@@ -55,19 +59,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.default, (0, _extends2.default)({}, props, {
-      ref: ref,
-      title: title,
-      ariaId: ariaId,
-      prefixCls: prefixCls,
-      holderRef: motionRef,
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionStyle), style), contentStyle),
-      className: (0, _classnames.default)(className, motionClassName)
-    }));
-  });
+  }, ({
+    className: motionClassName,
+    style: motionStyle
+  }, motionRef) => /*#__PURE__*/React.createElement(_Panel.default, _extends({}, props, {
+    ref: panelRef,
+    title: title,
+    ariaId: ariaId,
+    prefixCls: prefixCls,
+    holderRef: motionRef,
+    style: {
+      ...motionStyle,
+      ...style,
+      ...contentStyle
+    },
+    className: (0, _classnames.default)(className, motionClassName)
+  })));
 });
 Content.displayName = 'Content';
 var _default = exports.default = Content;

package/lib/Dialog/Mask.js

@@ -1,38 +1,40 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _rcMotion = _interopRequireDefault(require("rc-motion"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Mask = function Mask(props) {
-  var prefixCls = props.prefixCls,
-    style = props.style,
-    visible = props.visible,
-    maskProps = props.maskProps,
-    motionName = props.motionName,
-    className = props.className;
-  return /*#__PURE__*/React.createElement(_rcMotion.default, {
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const Mask = props => {
+  const {
+    prefixCls,
+    style,
+    visible,
+    maskProps,
+    motionName,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(_motion.default, {
     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", (0, _extends2.default)({
-      ref: ref,
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionStyle), style),
-      className: (0, _classnames.default)("".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: (0, _classnames.default)(`${prefixCls}-mask`, motionClassName, className)
+  }, maskProps)));
 };
 var _default = exports.default = Mask;