@arco-design/mobile-react 2.25.4 → 2.27.0

package/esm/load-more/index.js

@@ -3,6 +3,7 @@ import lodashThrottle from 'lodash.throttle';
 import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { useUpdateEffect } from '../_helpers';
+
 /**
  * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
  * @en Pull-up loading component, supports `scroll` and `click` two trigger loading methods, supports scroll monitoring. Both controlled and uncontrolled forms are supported. <br>If only the initial `getData` is triggered after the component is introduced, please make sure that the `callback` is not called in the `getData` method to remove the loading state, and the `blockWhenLoading` property is not set to false.
@@ -13,36 +14,38 @@ import { useUpdateEffect } from '../_helpers';
  */
 var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    style = props.style,
-    beforeReadyArea = props.beforeReadyArea,
-    loadingArea = props.loadingArea,
-    noMoreArea = props.noMoreArea,
-    prepareArea = props.prepareArea,
-    retryArea = props.retryArea,
-    _props$defaultStatus = props.defaultStatus,
-    defaultStatus = _props$defaultStatus === void 0 ? 'prepare' : _props$defaultStatus,
-    status = props.status,
-    getScrollContainer = props.getScrollContainer,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'scroll' : _props$trigger,
-    _props$threshold = props.threshold,
-    threshold = _props$threshold === void 0 ? 200 : _props$threshold,
-    _props$throttle = props.throttle,
-    throttle = _props$throttle === void 0 ? 0 : _props$throttle,
-    _props$getDataAtFirst = props.getDataAtFirst,
-    getDataAtFirst = _props$getDataAtFirst === void 0 ? true : _props$getDataAtFirst,
-    getData = props.getData,
-    _props$blockWhenLoadi = props.blockWhenLoading,
-    blockWhenLoading = _props$blockWhenLoadi === void 0 ? true : _props$blockWhenLoadi,
-    onStatusChange = props.onStatusChange,
-    onClick = props.onClick,
-    onEndReached = props.onEndReached;
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      beforeReadyArea = props.beforeReadyArea,
+      loadingArea = props.loadingArea,
+      noMoreArea = props.noMoreArea,
+      prepareArea = props.prepareArea,
+      retryArea = props.retryArea,
+      _props$defaultStatus = props.defaultStatus,
+      defaultStatus = _props$defaultStatus === void 0 ? 'prepare' : _props$defaultStatus,
+      status = props.status,
+      getScrollContainer = props.getScrollContainer,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'scroll' : _props$trigger,
+      _props$threshold = props.threshold,
+      threshold = _props$threshold === void 0 ? 200 : _props$threshold,
+      _props$throttle = props.throttle,
+      throttle = _props$throttle === void 0 ? 0 : _props$throttle,
+      _props$getDataAtFirst = props.getDataAtFirst,
+      getDataAtFirst = _props$getDataAtFirst === void 0 ? true : _props$getDataAtFirst,
+      getData = props.getData,
+      _props$blockWhenLoadi = props.blockWhenLoading,
+      blockWhenLoading = _props$blockWhenLoadi === void 0 ? true : _props$blockWhenLoadi,
+      onStatusChange = props.onStatusChange,
+      onClick = props.onClick,
+      onEndReached = props.onEndReached;
   var domRef = useRef(null);
   var requestAtFirst = trigger === 'scroll' ? getDataAtFirst : false;
+
   var _useState = useState(defaultStatus),
-    innerStatus = _useState[0],
-    setInnerStatus = _useState[1];
+      innerStatus = _useState[0],
+      setInnerStatus = _useState[1];
+
   var lastScrollEndRef = useRef(false);
   var nowStatus = status || innerStatus;
   var statusRef = useRef(nowStatus);
@@ -54,6 +57,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
     if (blockWhenLoading && statusRef.current === 'loading') {
       return;
     }
+
     changeStatus('loading', scene);
     getData == null ? void 0 : getData(function (st) {
       lastScrollEndRef.current = false;
@@ -79,10 +83,12 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [trigger]);
   var handleContainerScroll = useCallback(function () {
     var scrollTop = getScrollContainerAttribute('scrollTop', getScrollContainer);
+
     if (checkNeedTrigger(scrollTop, threshold + 1)) {
       if (!lastScrollEndRef.current) {
         lastScrollEndRef.current = true;
         onEndReached && onEndReached();
+
         if (!['nomore', 'retry', 'before-ready'].includes(statusRef.current)) {
           triggerGetData('scrollEnd');
         }
@@ -94,13 +100,16 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     var binded = null;
     var scrollFunc = throttle ? lodashThrottle(handleContainerScroll, throttle) : handleContainerScroll;
+
     if (trigger === 'scroll') {
       var container = getValidScrollContainer(getScrollContainer);
+
       if (container) {
         container.addEventListener('scroll', scrollFunc);
         binded = container;
       }
     }
+
     return function () {
       if (binded) {
         binded.removeEventListener('scroll', scrollFunc);
@@ -113,45 +122,55 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
       changeStatus: changeStatus
     };
   }, [changeStatus]);
+
   function checkNeedTrigger(top, ths) {
     var scrollHeight = getScrollContainerAttribute('scrollHeight', getScrollContainer);
     var clientHeight = getScrollContainerAttribute('clientHeight', getScrollContainer);
     return scrollHeight - top - clientHeight <= ths;
   }
+
   function handleClick(e) {
     if (trigger === 'click' && statusRef.current === 'prepare' || statusRef.current === 'retry') {
       triggerGetData('click');
     }
+
     onClick && onClick(e);
   }
+
   function renderArea(locale) {
     switch (nowStatus) {
       case 'before-ready':
         return beforeReadyArea;
+
       case 'prepare':
         return prepareArea === void 0 ? /*#__PURE__*/React.createElement("div", {
           className: "load-more-text prepare"
         }, trigger === 'scroll' ? locale.LoadMore.prepareScrollText : locale.LoadMore.prepareClickText, locale.LoadMore.loadMoreText) : prepareArea;
+
       case 'loading':
         return loadingArea === void 0 ? /*#__PURE__*/React.createElement("div", {
           className: "load-more-text loading"
         }, locale.LoadMore.loadingText) : loadingArea;
+
       case 'nomore':
         return noMoreArea === void 0 ? /*#__PURE__*/React.createElement("div", {
           className: "load-more-text nomore"
         }, locale.LoadMore.noDataText) : noMoreArea;
+
       case 'retry':
         return retryArea === void 0 ? /*#__PURE__*/React.createElement("div", {
           className: "load-more-text retry"
         }, locale.LoadMore.failLoadText) : retryArea;
+
       default:
         return null;
     }
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-load-more status-" + nowStatus + " " + className,
       ref: domRef,

package/esm/loading/index.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } f
 import { cls, isOneOf } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { getStyleWithVendor, useGenSvgKey } from '../_helpers';
+
 /**
  * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
  * @en Loading component, divided into four types, `circle` is a ring, `arc` is an arc `spin` is a rotation, and `dot` is a dot. All types can be customized in color, ring and arc types can be customized with coil radius and thickness, and rotation and dot types can be customized with internal element transparency.
@@ -13,32 +14,36 @@ import { getStyleWithVendor, useGenSvgKey } from '../_helpers';
  */
 var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
   var style = props.style,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    color = props.color,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'dot' : _props$type,
-    list = props.list,
-    _props$duration = props.duration,
-    duration = _props$duration === void 0 ? 1000 : _props$duration,
-    _props$svgKey = props.svgKey,
-    userSetSvgKey = _props$svgKey === void 0 ? '' : _props$svgKey,
-    _props$radius = props.radius,
-    radius = _props$radius === void 0 ? 9 : _props$radius,
-    _props$stroke = props.stroke,
-    stroke = _props$stroke === void 0 ? 2 : _props$stroke,
-    _props$filleted = props.filleted,
-    filleted = _props$filleted === void 0 ? true : _props$filleted;
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      color = props.color,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'dot' : _props$type,
+      list = props.list,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 1000 : _props$duration,
+      _props$svgKey = props.svgKey,
+      userSetSvgKey = _props$svgKey === void 0 ? '' : _props$svgKey,
+      _props$radius = props.radius,
+      radius = _props$radius === void 0 ? 9 : _props$radius,
+      _props$stroke = props.stroke,
+      stroke = _props$stroke === void 0 ? 2 : _props$stroke,
+      _props$filleted = props.filleted,
+      filleted = _props$filleted === void 0 ? true : _props$filleted;
+
   var _useState = useState([]),
-    statusList = _useState[0],
-    setStatusList = _useState[1];
+      statusList = _useState[0],
+      setStatusList = _useState[1];
+
   var timerId = useRef(-1);
   var halfCircle = Math.PI * radius;
   var circlePos = 0.5 * stroke + radius;
   var circleSize = radius * 2 + stroke;
   var domRef = useRef(null);
+
   var _useGenSvgKey = useGenSvgKey(userSetSvgKey),
-    svgKey = _useGenSvgKey.svgKey;
+      svgKey = _useGenSvgKey.svgKey;
+
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
@@ -54,6 +59,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
         setStatusList(newList);
       }, interval);
     }
+
     return function () {
       if (timerId.current >= 0) {
         clearInterval(timerId.current);
@@ -62,6 +68,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [type, statusList, duration]);
   useEffect(function () {
     var newList;
+
     if (list && list.length) {
       newList = list;
     } else {
@@ -69,16 +76,20 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
         case 'spin':
           newList = [1, 0.1, 0.2286, 0.3572, 0.4858, 0.6144, 0.743, 0.8716];
           break;
+
         case 'dot':
           newList = [0.2, 0.6, 1];
           break;
+
         default:
           newList = [];
           break;
       }
     }
+
     setStatusList(newList);
   }, [list, type]);
+
   function renderSpin() {
     var len = statusList.length;
     return statusList.map(function (opacity, index) {
@@ -100,6 +111,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       }));
     });
   }
+
   function renderDot() {
     return statusList.map(function (opacity, index) {
       return /*#__PURE__*/React.createElement("span", {
@@ -114,6 +126,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     });
   }
+
   function renderCircle() {
     return /*#__PURE__*/React.createElement("svg", {
       viewBox: "0 0 " + circleSize + " " + circleSize
@@ -180,6 +193,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }) : null);
   }
+
   function renderArc() {
     return /*#__PURE__*/React.createElement("svg", {
       viewBox: "0 0 " + circleSize + " " + circleSize
@@ -206,20 +220,26 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       strokeLinecap: 'round'
     } : {})));
   }
+
   function renderLoadingByType() {
     switch (type) {
       case 'spin':
         return renderSpin();
+
       case 'dot':
         return renderDot();
+
       case 'circle':
         return renderCircle();
+
       case 'arc':
         return renderArc();
+
       default:
         return null;
     }
   }
+
   function getLoadingStyle() {
     var circleStyle = isOneOf(type, ['circle', 'arc']) ? {
       width: circleSize,
@@ -229,6 +249,7 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       animationDuration: duration + "ms"
     }, circleStyle, style || {}));
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {

package/esm/masking/index.d.ts

@@ -205,11 +205,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
      * @param {MaskingProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/masking/index.js

@@ -8,45 +8,45 @@ import { open } from './methods';
 export * from './methods';
 var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? false : _props$visible,
-    maskClass = props.maskClass,
-    maskStyle = props.maskStyle,
-    contentClass = props.contentClass,
-    contentStyle = props.contentStyle,
-    close = props.close,
-    onClose = props.onClose,
-    onOpen = props.onOpen,
-    onMaskClick = props.onMaskClick,
-    children = props.children,
-    _props$maskTransition = props.maskTransitionType,
-    maskTransitionType = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
-    _props$contentTransit = props.contentTransitionType,
-    contentTransitionType = _props$contentTransit === void 0 ? 'fade' : _props$contentTransit,
-    _props$maskTransition2 = props.maskTransitionTimeout,
-    maskTransitionTimeout = _props$maskTransition2 === void 0 ? 300 : _props$maskTransition2,
-    _props$contentTransit2 = props.contentTransitionTimeout,
-    contentTransitionTimeout = _props$contentTransit2 === void 0 ? 300 : _props$contentTransit2,
-    _props$maskClosable = props.maskClosable,
-    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
-    animatingClosable = props.animatingClosable,
-    _props$mountOnEnter = props.mountOnEnter,
-    mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
-    _props$unmountOnExit = props.unmountOnExit,
-    unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
-    _props$orientationDir = props.orientationDirection,
-    orientationDirection = _props$orientationDir === void 0 ? 'top' : _props$orientationDir,
-    _props$preventBodyScr = props.preventBodyScroll,
-    preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
-    initialBodyOverflow = props.initialBodyOverflow,
-    _props$contentAtCente = props.contentAtCenter,
-    contentAtCenter = _props$contentAtCente === void 0 ? false : _props$contentAtCente,
-    _props$gestureOutOfCo = props.gestureOutOfControl,
-    gestureOutOfControl = _props$gestureOutOfCo === void 0 ? false : _props$gestureOutOfCo,
-    getContainer = props.getContainer,
-    getScrollContainer = props.getScrollContainer,
-    onPreventTouchMove = props.onPreventTouchMove,
-    onTouchMove = props.onTouchMove;
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      maskClass = props.maskClass,
+      maskStyle = props.maskStyle,
+      contentClass = props.contentClass,
+      contentStyle = props.contentStyle,
+      close = props.close,
+      onClose = props.onClose,
+      onOpen = props.onOpen,
+      onMaskClick = props.onMaskClick,
+      children = props.children,
+      _props$maskTransition = props.maskTransitionType,
+      maskTransitionType = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
+      _props$contentTransit = props.contentTransitionType,
+      contentTransitionType = _props$contentTransit === void 0 ? 'fade' : _props$contentTransit,
+      _props$maskTransition2 = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition2 === void 0 ? 300 : _props$maskTransition2,
+      _props$contentTransit2 = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit2 === void 0 ? 300 : _props$contentTransit2,
+      _props$maskClosable = props.maskClosable,
+      maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
+      animatingClosable = props.animatingClosable,
+      _props$mountOnEnter = props.mountOnEnter,
+      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+      _props$unmountOnExit = props.unmountOnExit,
+      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      _props$orientationDir = props.orientationDirection,
+      orientationDirection = _props$orientationDir === void 0 ? 'top' : _props$orientationDir,
+      _props$preventBodyScr = props.preventBodyScroll,
+      preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
+      initialBodyOverflow = props.initialBodyOverflow,
+      _props$contentAtCente = props.contentAtCenter,
+      contentAtCenter = _props$contentAtCente === void 0 ? false : _props$contentAtCente,
+      _props$gestureOutOfCo = props.gestureOutOfControl,
+      gestureOutOfControl = _props$gestureOutOfCo === void 0 ? false : _props$gestureOutOfCo,
+      getContainer = props.getContainer,
+      getScrollContainer = props.getScrollContainer,
+      onPreventTouchMove = props.onPreventTouchMove,
+      onTouchMove = props.onTouchMove;
   var domRef = useRef(null);
   var maskRef = useRef(null);
   var contentRef = useRef(null);
@@ -54,15 +54,19 @@ var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
   var isInitialMount = useRef(false);
   var isAnimating = useRef(false);
   var closeScene = useRef('');
+
   var _useState = useState(visible),
-    innerVisible = _useState[0],
-    setInnerVisible = _useState[1];
+      innerVisible = _useState[0],
+      setInnerVisible = _useState[1];
+
   var _useState2 = useState(visible),
-    outerVisible = _useState2[0],
-    setOuterVisible = _useState2[1];
+      outerVisible = _useState2[0],
+      setOuterVisible = _useState2[1];
+
   var _useState3 = useState(''),
-    extraClass = _useState3[0],
-    setExtraClass = _useState3[1];
+      extraClass = _useState3[0],
+      setExtraClass = _useState3[1];
+
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -77,13 +81,17 @@ var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
     if (timerRef.current >= 0) {
       clearTimeout(timerRef.current);
     }
+
     var mounted = isInitialMount.current;
+
     if (mounted) {
       isAnimating.current = true;
     }
+
     if (!mounted && !visible && !mountOnEnter) {
       setExtraClass('pre-mount');
     }
+
     if (visible) {
       setOuterVisible(true);
       nextTick(function () {
@@ -103,30 +111,39 @@ var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
         closeScene.current = '';
       });
     }
+
     isInitialMount.current = true;
   }, [visible]);
+
   function setCloseScene(scene) {
     closeScene.current = scene;
   }
+
   function execAfterClose(callback) {
     return window.setTimeout(callback, Math.max(getMaxTimeout(maskTransitionTimeout, 'exit'), getMaxTimeout(contentTransitionTimeout, 'exit')));
   }
+
   function execAfterOpen(callback) {
     return window.setTimeout(callback, Math.max(getMaxTimeout(maskTransitionTimeout, 'enter'), getMaxTimeout(contentTransitionTimeout, 'enter')));
   }
+
   function getMaxTimeout(timeout, type) {
     return typeof timeout === 'number' ? timeout : timeout[type] || 0;
   }
+
   function handleMaskAction(e) {
     e.preventDefault();
     e.stopPropagation();
     onMaskClick == null ? void 0 : onMaskClick();
+
     if (!maskClosable || !animatingClosable && isAnimating.current) {
       return;
     }
+
     closeScene.current = 'mask';
     close == null ? void 0 : close(e);
   }
+
   function renderMasking(_ref) {
     var prefixCls = _ref.prefixCls;
     return !mountOnEnter || outerVisible || !unmountOnExit ? /*#__PURE__*/React.createElement(Portal, {
@@ -159,6 +176,7 @@ var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
       style: contentStyle
     }, children)))) : null;
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderMasking);
 });
 export function methodsGenerator(Comp) {
@@ -173,7 +191,6 @@ export function methodsGenerator(Comp) {
   };
 }
 var MaskingWithGlobalContext = CompWithGlobalContext(Masking);
-
 /**
  * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
  * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -182,4 +199,5 @@ var MaskingWithGlobalContext = CompWithGlobalContext(Masking);
  * @name 模态弹窗
  * @name_en Masking
  */
+
 export default componentWrapper(Masking, methodsGenerator(MaskingWithGlobalContext));

package/esm/masking/methods.js

@@ -7,6 +7,7 @@ export function getOpenMethod(Component, containerId, normalize) {
       return config;
     };
   }
+
   return function (config, context) {
     var baseProps = _extends({
       unmountOnExit: true
@@ -14,31 +15,41 @@ export function getOpenMethod(Component, containerId, normalize) {
       visible: false,
       close: function close() {}
     });
-    var dynamicProps = _extends({}, baseProps);
 
-    // 不同的key用不同的容器挂载
+    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
+
+
     var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
+
     var _appendElementById = appendElementById(id, baseProps.getContainer),
-      div = _appendElementById.child;
+        div = _appendElementById.child;
+
     var leaving = false;
+
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-      render = _ReactDOMRender.render;
+        render = _ReactDOMRender.render;
+
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, normalize(newConfig));
       render(dynamicProps);
     }
+
     function close() {
       leaving = true;
       dynamicProps.visible = false;
       render(dynamicProps);
     }
+
     dynamicProps.close = close;
+
     dynamicProps.onClose = function (scene) {
       baseProps.onClose && baseProps.onClose(scene);
+
       if (baseProps.unmountOnExit) {
         removeElement(div);
       }
     };
+
     render(dynamicProps);
     nextTick(function () {
       if (leaving) return;

package/esm/nav-bar/back-icon.js

@@ -1,7 +1,8 @@
 import React from 'react';
+
 function BackArrow(_ref) {
   var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color;
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color;
   return /*#__PURE__*/React.createElement("div", {
     className: "c-svg-arrow nav-bar-back"
   }, /*#__PURE__*/React.createElement("svg", {
@@ -13,4 +14,5 @@ function BackArrow(_ref) {
     fill: color
   })));
 }
+
 export default BackArrow;