@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/loading/index.js

@@ -3,7 +3,6 @@ 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.
@@ -14,36 +13,32 @@ 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
@@ -59,7 +54,6 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
         setStatusList(newList);
       }, interval);
     }
-
     return function () {
       if (timerId.current >= 0) {
         clearInterval(timerId.current);
@@ -68,7 +62,6 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [type, statusList, duration]);
   useEffect(function () {
     var newList;
-
     if (list && list.length) {
       newList = list;
     } else {
@@ -76,20 +69,16 @@ 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) {
@@ -111,7 +100,6 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       }));
     });
   }
-
   function renderDot() {
     return statusList.map(function (opacity, index) {
       return /*#__PURE__*/React.createElement("span", {
@@ -126,7 +114,6 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     });
   }
-
   function renderCircle() {
     return /*#__PURE__*/React.createElement("svg", {
       viewBox: "0 0 " + circleSize + " " + circleSize
@@ -193,7 +180,6 @@ var Loading = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }) : null);
   }
-
   function renderArc() {
     return /*#__PURE__*/React.createElement("svg", {
       viewBox: "0 0 " + circleSize + " " + circleSize
@@ -220,26 +206,20 @@ 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,
@@ -249,7 +229,6 @@ 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.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,19 +54,15 @@ 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,
@@ -81,17 +77,13 @@ 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 () {
@@ -111,39 +103,30 @@ 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, {
@@ -176,7 +159,6 @@ var Masking = /*#__PURE__*/forwardRef(function (props, ref) {
       style: contentStyle
     }, children)))) : null;
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderMasking);
 });
 export function methodsGenerator(Comp) {
@@ -191,6 +173,7 @@ 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.
@@ -199,5 +182,4 @@ var MaskingWithGlobalContext = CompWithGlobalContext(Masking);
  * @name 模态弹窗
  * @name_en Masking
  */
-
 export default componentWrapper(Masking, methodsGenerator(MaskingWithGlobalContext));

package/esm/masking/methods.js

@@ -7,7 +7,6 @@ export function getOpenMethod(Component, containerId, normalize) {
       return config;
     };
   }
-
   return function (config, context) {
     var baseProps = _extends({
       unmountOnExit: true
@@ -15,41 +14,31 @@ export function getOpenMethod(Component, containerId, normalize) {
       visible: false,
       close: function close() {}
     });
+    var dynamicProps = _extends({}, baseProps);
 
-    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
-
-
+    // 不同的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,8 +1,7 @@
 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", {
@@ -14,5 +13,4 @@ function BackArrow(_ref) {
     fill: color
   })));
 }
-
 export default BackArrow;

package/esm/nav-bar/index.js

@@ -4,7 +4,6 @@ import { cls, getScrollContainerAttribute, getValidScrollContainer } from '@arco
 import { ContextLayout } from '../context-provider';
 import BackArrow from './back-icon';
 import { useSystem } from '../_helpers';
-
 /**
  * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新style。
  * @en Navigation bar, supports ceiling and immersion, supports display at specified scroll position, and supports real-time update of style according to scroll position.
@@ -15,58 +14,51 @@ import { useSystem } from '../_helpers';
  */
 var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      _props$title = props.title,
-      title = _props$title === void 0 ? '' : _props$title,
-      onClickLeft = props.onClickLeft,
-      _props$leftContent = props.leftContent,
-      leftContent = _props$leftContent === void 0 ? /*#__PURE__*/React.createElement(BackArrow, null) : _props$leftContent,
-      onClickRight = props.onClickRight,
-      rightContent = props.rightContent,
-      onShowChange = props.onShowChange,
-      style = props.style,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      wrapClass = props.wrapClass,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? true : _props$placeholder,
-      _props$fixed = props.fixed,
-      fixed = _props$fixed === void 0 ? true : _props$fixed,
-      _props$hasBottomLine = props.hasBottomLine,
-      hasBottomLine = _props$hasBottomLine === void 0 ? true : _props$hasBottomLine,
-      _props$statusBarHeigh = props.statusBarHeight,
-      statusBarHeight = _props$statusBarHeigh === void 0 ? 0 : _props$statusBarHeigh,
-      extra = props.extra,
-      getScrollContainer = props.getScrollContainer,
-      _props$showOffset = props.showOffset,
-      showOffset = _props$showOffset === void 0 ? 0 : _props$showOffset,
-      getComputedStyleByScroll = props.getComputedStyleByScroll,
-      _props$ariaLabel = props.ariaLabel,
-      ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel,
-      _props$ariaRole = props.ariaRole,
-      ariaRole = _props$ariaRole === void 0 ? 'banner' : _props$ariaRole;
+    _props$title = props.title,
+    title = _props$title === void 0 ? '' : _props$title,
+    onClickLeft = props.onClickLeft,
+    _props$leftContent = props.leftContent,
+    leftContent = _props$leftContent === void 0 ? /*#__PURE__*/React.createElement(BackArrow, null) : _props$leftContent,
+    onClickRight = props.onClickRight,
+    rightContent = props.rightContent,
+    onShowChange = props.onShowChange,
+    style = props.style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    wrapClass = props.wrapClass,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? true : _props$placeholder,
+    _props$fixed = props.fixed,
+    fixed = _props$fixed === void 0 ? true : _props$fixed,
+    _props$hasBottomLine = props.hasBottomLine,
+    hasBottomLine = _props$hasBottomLine === void 0 ? true : _props$hasBottomLine,
+    _props$statusBarHeigh = props.statusBarHeight,
+    statusBarHeight = _props$statusBarHeigh === void 0 ? 0 : _props$statusBarHeigh,
+    extra = props.extra,
+    getScrollContainer = props.getScrollContainer,
+    _props$showOffset = props.showOffset,
+    showOffset = _props$showOffset === void 0 ? 0 : _props$showOffset,
+    getComputedStyleByScroll = props.getComputedStyleByScroll,
+    _props$ariaLabel = props.ariaLabel,
+    ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel,
+    _props$ariaRole = props.ariaRole,
+    ariaRole = _props$ariaRole === void 0 ? 'banner' : _props$ariaRole;
   var navBarRef = useRef(null);
-
   var _useState = useState(showOffset > 0),
-      scrollToggleHide = _useState[0],
-      setScrollToggleHide = _useState[1];
-
+    scrollToggleHide = _useState[0],
+    setScrollToggleHide = _useState[1];
   var relBackground = scrollToggleHide ? 'transparent' : '';
-
   var _useState2 = useState({}),
-      customStyle = _useState2[0],
-      setCustomStyle = _useState2[1];
-
+    customStyle = _useState2[0],
+    setCustomStyle = _useState2[1];
   var system = useSystem();
-
   var onElementScroll = function onElementScroll(curOffset) {
     setScrollToggleHide(curOffset < showOffset);
-
     if (getComputedStyleByScroll) {
       var cstyle = getComputedStyleByScroll(curOffset);
       setCustomStyle(cstyle);
     }
   };
-
   useImperativeHandle(ref, function () {
     return {
       navBar: navBarRef.current,
@@ -76,39 +68,35 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     onShowChange == null ? void 0 : onShowChange(!scrollToggleHide);
   }, [scrollToggleHide]);
-
   var handleEleScroll = function handleEleScroll() {
     var top = getScrollContainerAttribute('scrollTop', getScrollContainer) || 0;
     onElementScroll(top);
   };
-
   useEffect(function () {
     var needBind = showOffset || getComputedStyleByScroll;
     var container = getValidScrollContainer(getScrollContainer);
     handleEleScroll();
-
     if (needBind && container) {
       container.addEventListener('scroll', handleEleScroll, false);
     }
-
     return function () {
       if (needBind && container) {
         container.removeEventListener('scroll', handleEleScroll, false);
       }
     };
   }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
-
   function handleClickLeft(e) {
     if (onClickLeft) {
       onClickLeft(e);
     }
   }
-
   function handleClickRight(e) {
     if (onClickRight) {
       onClickRight(e);
     }
-  } // 最外层div是为了fixed时占位
+  }
+
+  // 最外层div是为了fixed时占位
   // @en The outermost div is a placeholder for fixed
   // 第二层div是为了沉浸式paddingTop
   // @en The second layer of div is for immersive paddingTop
@@ -118,11 +106,8 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
   // @en The background color is placed on the wrapper layer to be compatible with the background color of the pull-down rebound in iOS
   // fixed时用height+padding撑开nav-bar最外层高度；不fixed时内部wrapper元素撑开最外层高度
   // @en When fixed, use height+padding to stretch the outermost height of nav-bar; when not fixed, the inner wrapper element stretches the outermost height
-
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var _cls, _cls2;
-
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
       ref: navBarRef,