@arco-design/mobile-react 2.38.3 → 2.39.0

package/umd/_helpers/hooks.js

@@ -31,7 +31,6 @@
   _exports.useSystem = useSystem;
   _exports.useUpdateEffect = useUpdateEffect;
   _exports.useWindowSize = useWindowSize;
-
   /**
    * @type hooks
    * @name GeneralHooks
@@ -58,17 +57,14 @@
     if (deps === void 0) {
       deps = [];
     }
-
     if (needListen === void 0) {
       needListen = true;
     }
-
     (0, _react.useEffect)(function () {
       if (needListen) {
         window.addEventListener('resize', resizeHandler);
         window.addEventListener('orientationchange', resizeHandler);
       }
-
       return function () {
         if (needListen) {
           window.removeEventListener('resize', resizeHandler);
@@ -77,6 +73,7 @@
       };
     }, [].concat(deps, [needListen]));
   }
+
   /**
    * useState自定义封装，统一处理在组件卸载后还使用setState的行为
    * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
@@ -92,19 +89,15 @@
    * const [scrollValue, setScrollValue] = useMountedState(value);
    * ```
    */
-
-
   function useMountedState(initialState) {
     var _useState = (0, _react.useState)(initialState),
-        state = _useState[0],
-        setState = _useState[1];
-
+      state = _useState[0],
+      setState = _useState[1];
     var leavingRef = (0, _react.useRef)(false);
     var setValidState = (0, _react.useCallback)(function (value) {
       if (leavingRef.current) {
         return;
       }
-
       setState(value);
     }, []);
     (0, _react.useEffect)(function () {
@@ -117,6 +110,7 @@
     var result = [state, setValidState];
     return result;
   }
+
   /**
    * 用useState管理状态，且在状态更新之前同步至ref，并返回ref
    * @desc {en} Use useState to manage the state, and synchronize to ref before the state is updated, and return ref
@@ -130,22 +124,18 @@
    * const [opened, openedRef, setOpened] = useSameRefState(false);
    * ```
    */
-
-
   function useSameRefState(initialValue) {
     var _useState2 = (0, _react.useState)(initialValue),
-        state = _useState2[0],
-        setState = _useState2[1];
-
+      state = _useState2[0],
+      setState = _useState2[1];
     var stateRef = (0, _react.useRef)(state);
-
     var setStateProxy = function setStateProxy(data) {
       stateRef.current = data;
       setState(data);
     };
-
     return [state, stateRef, setStateProxy];
   }
+
   /**
    * 用useState管理状态，且在状态更新后同步至ref，并返回ref
    * @desc {en} Use useState to manage the state, and synchronize to ref after the state is updated, and return ref
@@ -159,19 +149,17 @@
    * const [index, indexRef, setIndex] = useRefState(currentIndex);
    * ```
    */
-
-
   function useRefState(initialValue) {
     var _useState3 = (0, _react.useState)(initialValue),
-        state = _useState3[0],
-        setState = _useState3[1];
-
+      state = _useState3[0],
+      setState = _useState3[1];
     var stateRef = (0, _react.useRef)(state);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
     }, [state]);
     return [state, stateRef, setState];
   }
+
   /**
    * 用useState管理状态，且在状态更新后同步至ref，并返回ref，统一处理在组件卸载后还使用setState的行为
    * @desc {en} Use useState to manage the state, and synchronize to ref after the state is updated, and return ref, and uniformly handle the behavior of using setState after the component is uninstalled
@@ -185,19 +173,17 @@
    * const [active, activeRef, setActive] = useRefMountedState(false);
    * ```
    */
-
-
   function useRefMountedState(initialValue) {
     var _useMountedState = useMountedState(initialValue),
-        state = _useMountedState[0],
-        setState = _useMountedState[1];
-
+      state = _useMountedState[0],
+      setState = _useMountedState[1];
     var stateRef = (0, _react.useRef)(state);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
     }, [state]);
     return [state, stateRef, setState];
   }
+
   /**
    * useEffect特殊封装，仅在非首次依赖更新时触发回调
    * @desc {en} Special encapsulation of useEffect, which only triggers the callback when the dependency is not updated for the first time
@@ -214,13 +200,10 @@
    * }, [index]);
    * ```
    */
-
-
   function useUpdateEffect(effect, dependencies) {
     if (dependencies === void 0) {
       dependencies = [];
     }
-
     var isInitialMount = (0, _react.useRef)(true);
     (0, _react.useEffect)(function () {
       if (isInitialMount.current) {
@@ -230,6 +213,7 @@
       }
     }, dependencies);
   }
+
   /**
    * 手动触发一次组件的rerender
    * @desc {en} Manually trigger the rerender of the component once
@@ -244,12 +228,9 @@
    * }
    * ```
    */
-
-
   function useForceUpdate() {
     var _useState4 = (0, _react.useState)(0),
-        setTick = _useState4[1];
-
+      setTick = _useState4[1];
     var update = (0, _react.useCallback)(function () {
       setTick(function (tick) {
         return tick + 1;
@@ -257,6 +238,7 @@
     }, []);
     return update;
   }
+
   /**
    * 获取任意变量的最新ref值（用于监听属性、方法等非state变量）
    * @desc {en} Get the latest ref value of any variable (used to monitor non-state variables such as properties and methods)
@@ -271,8 +253,6 @@
    * const wrapSizeRef = useLatestRef(wrapSize);
    * ```
    */
-
-
   function useLatestRef(variable) {
     var variableRef = (0, _react.useRef)(variable);
     (0, _react.useEffect)(function () {
@@ -298,23 +278,20 @@
    * const systemWithHarmony = useSystem({ detectHarmony: true });
    * ```
    */
-
-
   function useSystem(options) {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-        currentSystem = _useContext.system;
-
+      currentSystem = _useContext.system;
     var _useState5 = (0, _react.useState)(function () {
-      return currentSystem || (0, _mobileUtils.getSystem)(options);
-    }),
-        system = _useState5[0],
-        setSystem = _useState5[1];
-
+        return currentSystem || (0, _mobileUtils.getSystem)(options);
+      }),
+      system = _useState5[0],
+      setSystem = _useState5[1];
     (0, _react.useEffect)(function () {
       setSystem(currentSystem || (0, _mobileUtils.getSystem)(options));
     }, [currentSystem, options]);
     return system;
   }
+
   /**
    * 获取页面视口宽高大小，并在页面有resize时更新大小
    * @desc {en} Get the width and height of the page viewport, and update the size when the page is resized
@@ -328,22 +305,17 @@
    * const { windowHeight, windowWidth } = useWindowSize();
    * ```
    */
-
-
   function useWindowSize(listenResize) {
     var _useState6 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : 0),
-        windowWidth = _useState6[0],
-        setWindowWidth = _useState6[1];
-
+      windowWidth = _useState6[0],
+      setWindowWidth = _useState6[1];
     var _useState7 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerHeight : 0),
-        windowHeight = _useState7[0],
-        setWindowHeight = _useState7[1];
-
+      windowHeight = _useState7[0],
+      setWindowHeight = _useState7[1];
     function setSize() {
       setWindowWidth(window.innerWidth);
       setWindowHeight(window.innerHeight);
     }
-
     useListenResize(setSize, [], listenResize);
     (0, _react.useEffect)(function () {
       setSize();
@@ -353,7 +325,6 @@
       windowHeight: windowHeight
     };
   }
-
   /**
    * 弹窗中滚动统一处理，防止滚动穿透
    * @desc {en} Unified processing of scrolling in pop-up windows to prevent scrolling penetration
@@ -382,7 +353,6 @@
     if (orientationDirection === void 0) {
       orientationDirection = 'top';
     }
-
     var scrollRef = (0, _react.useRef)([]);
     var touchingRef = (0, _react.useRef)({
       dom: null,
@@ -396,11 +366,9 @@
       if (gestureOutOfControl) {
         return;
       }
-
       touchStartXRef.current = e.touches && e.touches[0] ? e.touches[0].clientX : 0;
       touchStartYRef.current = e.touches && e.touches[0] ? e.touches[0].clientY : 0;
       var ele = getScrollContainer ? getScrollContainer() : null;
-
       if (ele) {
         var actualEle = Array.isArray(ele) ? ele : [ele];
         scrollRef.current = actualEle.reduce(function (acc, nowEle) {
@@ -413,19 +381,15 @@
       } else {
         scrollRef.current = [];
       }
-
       touchingRef.current = {
         dom: null,
         inScrollIndexes: []
       };
     }, [getScrollContainer, gestureOutOfControl, orientationDirection]);
-
     function judgeInScroll(originNode, scroll) {
       var inScrollIndexes = [];
-
       for (var i = 0; i < scroll.length; i += 1) {
         var node = originNode;
-
         while (node && scroll[i]) {
           if (node === scroll[i].ele) {
             inScrollIndexes.push(i);
@@ -435,66 +399,54 @@
           }
         }
       }
-
       touchingRef.current = {
         dom: originNode,
         inScrollIndexes: inScrollIndexes
       };
       return inScrollIndexes;
     }
-
     var handleTouchMove = (0, _react.useCallback)(function (e) {
       function getScrollTop(scroll) {
         var ele = scroll.ele,
-            maxScrollX = scroll.maxScrollX,
-            maxScrollY = scroll.maxScrollY;
-
+          maxScrollX = scroll.maxScrollX,
+          maxScrollY = scroll.maxScrollY;
         switch (orientationDirection) {
           case 'left':
             return maxScrollY - ele.scrollLeft;
-
           case 'right':
             return ele.scrollLeft;
-
           case 'bottom':
             return maxScrollX - ele.scrollTop;
-
           case 'top':
           default:
             return ele.scrollTop;
         }
       }
-
       function getScrollLeft(scroll) {
         var ele = scroll.ele,
-            maxScrollX = scroll.maxScrollX,
-            maxScrollY = scroll.maxScrollY;
-
+          maxScrollX = scroll.maxScrollX,
+          maxScrollY = scroll.maxScrollY;
         switch (orientationDirection) {
           case 'left':
             return ele.scrollTop;
-
           case 'right':
             return maxScrollX - ele.scrollTop;
-
           case 'bottom':
             return maxScrollY - ele.scrollLeft;
-
           case 'top':
           default:
             return ele.scrollLeft;
         }
       }
-
       var touchMoveX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
       var touchMoveY = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientY : 0;
       var scroll = scrollRef.current;
       var node = e.target;
       var _touchingRef$current = touchingRef.current,
-          touchingDom = _touchingRef$current.dom,
-          touchingIndexes = _touchingRef$current.inScrollIndexes; // target一样就取缓存结果，不取dom判断了
+        touchingDom = _touchingRef$current.dom,
+        touchingIndexes = _touchingRef$current.inScrollIndexes;
+      // target一样就取缓存结果，不取dom判断了
       // @en If the target is the same, the cached result is taken, and the dom judgment is not taken.
-
       var inScrollIndexes = touchingDom === node ? touchingIndexes : judgeInScroll(node, scroll);
       var distanceX = touchMoveX - touchStartXRef.current;
       var distanceY = touchMoveY - touchStartYRef.current;
@@ -502,35 +454,28 @@
       var absY = Math.abs(distanceY);
       var direc = absY > absX ? 'y' : 'x';
       var prevented = false;
-
       if (gestureOutOfControl) {
         onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
         return;
       }
-
       if (scroll.length && inScrollIndexes.length) {
         var needPrevents = [];
-
         for (var i = 0; i < inScrollIndexes.length; i += 1) {
           var touchingScroll = scroll[inScrollIndexes[i]];
           var scrollTop = getScrollTop(touchingScroll);
           var scrollLeft = getScrollLeft(touchingScroll);
-
           if (distanceY > 0 && absY > absX && scrollTop === 0 || distanceX > 0 && absX > absY && scrollLeft === 0) {
             needPrevents.push(true);
             continue;
           }
-
           if (distanceY < 0 && absY > absX && scrollTop + 1 >= touchingScroll.maxScrollY || distanceX < 0 && absX > absY && scrollLeft + 1 >= touchingScroll.maxScrollX) {
             needPrevents.push(true);
             continue;
           }
-
           needPrevents.push(false);
-        } // 满足一个不prevent的条件就停止prevent，否则prevent
+        }
+        // 满足一个不prevent的条件就停止prevent，否则prevent
         // @en Stop prevent if a non-prevent condition is met, otherwise prevent.
-
-
         if (needPrevents.indexOf(false) < 0) {
           preventCallbackRef.current == null ? void 0 : preventCallbackRef.current(e, direc);
           e.cancelable && e.preventDefault();
@@ -541,14 +486,12 @@
         e.cancelable && e.preventDefault();
         prevented = true;
       }
-
       onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
     }, [orientationDirection, gestureOutOfControl]);
     (0, _react.useEffect)(function () {
       if (!visible || !popupDom) {
         return function () {};
       }
-
       popupDom.addEventListener('touchstart', handleTouchStart);
       popupDom.addEventListener('touchmove', handleTouchMove, {
         passive: false
@@ -559,6 +502,7 @@
       };
     }, [visible, popupDom, handleTouchStart, handleTouchMove]);
   }
+
   /**
    * 在滑动类组件中，如果有内部可滚动区域，则在内部滚动区域滚动时禁用滑动事件
    * @desc {en} In the sliding class component, if there is an inner scrollable area, the sliding event is disabled when the inner scrolling area is scrolled
@@ -571,8 +515,6 @@
    * useSwiperInnerScroll(getInnerScrollContainer);
    * ```
    */
-
-
   function useSwiperInnerScroll(getInnerScrollContainer) {
     var stopFunc = (0, _react.useCallback)(function (e) {
       return e.stopPropagation();
@@ -581,7 +523,6 @@
       if (!getInnerScrollContainer) {
         return;
       }
-
       var containers = getInnerScrollContainer();
       var validContainers = Array.isArray(containers) ? containers : [containers];
       validContainers.forEach(function (container) {
@@ -600,6 +541,7 @@
       };
     }, [getInnerScrollContainer]);
   }
+
   /**
    * 事件绑定统一封装
    * @desc {en} Unified encapsulation of event binding
@@ -619,22 +561,17 @@
    * useAddListener(domRef.current, 'touchend', onTouchEnd);
    * ```
    */
-
-
   function useAddListener(dom, event, handler, options) {
     if (options === void 0) {
       options = {
         capture: true
       };
     }
-
     (0, _react.useEffect)(function () {
       if (!dom) return;
-
       if (handler) {
         dom.addEventListener(event, handler, options);
       }
-
       return function () {
         if (handler) {
           dom.removeEventListener(event, handler, options);
@@ -642,14 +579,14 @@
       };
     }, [handler]);
   }
+
   /**
    * 统计同时出现的全屏组件
    * @en Count simultaneous full-screen components
    */
-
-
   var arcoFullScreenCount = 0;
   var arcoFullScreenOriginOverflow = '';
+
   /**
    * 在全屏组件出现时，将body的overflow设置为hidden，防止滚动穿透
    * @desc {en} When the full screen component appears, set the overflow of the body to hidden to prevent scrolling penetration
@@ -666,22 +603,19 @@
    * usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow);
    * ```
    */
-
   function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
     if (preventBodyScroll === void 0) {
       preventBodyScroll = true;
     }
-
     // 新出现一个全屏组件则计数+1，并设置body hidden样式
     // @en When a new full-screen component appears, count + 1 and set the body hidden style
     var addFullScreen = (0, _react.useCallback)(function () {
-      var count = arcoFullScreenCount; // 在当前没有全屏组件出现时，记下body overflow的初始值
+      var count = arcoFullScreenCount;
+      // 在当前没有全屏组件出现时，记下body overflow的初始值
       // @en Note the initial value of body overflow when no full-screen components are currently present
-
       if (!count) {
         arcoFullScreenOriginOverflow = initialBodyOverflow !== void 0 ? initialBodyOverflow : document.body.style.overflow;
       }
-
       arcoFullScreenCount += 1;
       document.body.style.overflow = 'hidden';
     }, []);
@@ -689,11 +623,9 @@
      * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原overflow样式
      * @en When removing a full-screen component, determine whether the overflow style needs to be restored according to whether there are any remaining full-screen components.
      */
-
     var removeFullScreen = (0, _react.useCallback)(function () {
       var newCount = arcoFullScreenCount - 1;
       arcoFullScreenCount = newCount;
-
       if (!newCount) {
         document.body.style.overflow = arcoFullScreenOriginOverflow;
       }
@@ -701,14 +633,12 @@
     (0, _react.useEffect)(function () {
       if (!preventBodyScroll) {
         return function () {};
-      } // 如果一开始就是visible=true则加上样式
+      }
+      // 如果一开始就是visible=true则加上样式
       // @en If it is visible=true at the beginning, add the style.
-
-
       if (visible) {
         addFullScreen();
       }
-
       return function () {
         // 如果这里visible为true，则说明即将隐藏组件或在展示时卸载组件
         // @en If visible here is true, it means that the component is about to be hidden or unloaded when displayed.
@@ -718,6 +648,7 @@
       };
     }, [visible]);
   }
+
   /**
    * 进度条计算公共逻辑，根据传入的参数计算出当前百分比和过渡效果开关，进度类组件内部使用
    * @desc {en} Progress bar calculation common logic, used internally by the progress class component
@@ -729,21 +660,16 @@
    * const [currentPercentage, transitionControl] = useProgress(mountedTransition, percentage, duration, mountedBezier, step);
    * ```
    */
-
-
   function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState8 = (0, _react.useState)(0),
-        currentPercentage = _useState8[0],
-        setCurrentPercentage = _useState8[1];
-
+      currentPercentage = _useState8[0],
+      setCurrentPercentage = _useState8[1];
     var _useState9 = (0, _react.useState)(false),
-        transitionControl = _useState9[0],
-        setTransitionControl = _useState9[1];
-
-    var _useState10 = (0, _react.useState)(0),
-        count = _useState10[0],
-        setCount = _useState10[1];
-
+      transitionControl = _useState9[0],
+      setTransitionControl = _useState9[1];
+    var _useState0 = (0, _react.useState)(0),
+      count = _useState0[0],
+      setCount = _useState0[1];
     var latestPercentage = (0, _react.useRef)(percentage);
     (0, _react.useEffect)(function () {
       mountedTransition ? (0, _mobileUtils.scrollWithAnimation)(0, percentage, function (progress) {
@@ -766,6 +692,7 @@
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
   }
+
   /**
    * 单击和双击事件统一处理
    * @desc {en} Unified processing of single and double click events
@@ -783,17 +710,13 @@
    * const handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
    * ```
    */
-
-
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {
       delay = 200;
     }
-
-    var _useState11 = (0, _react.useState)(0),
-        clickTimes = _useState11[0],
-        setClickTimes = _useState11[1];
-
+    var _useState1 = (0, _react.useState)(0),
+      clickTimes = _useState1[0],
+      setClickTimes = _useState1[1];
     var eventRef = (0, _react.useRef)(undefined);
     (0, _react.useEffect)(function () {
       var timer = setTimeout(function () {
@@ -812,8 +735,8 @@
       });
     };
   }
-
   var arcoSvgKeyCount = 0;
+
   /**
    * 自动生成svg <def>标签的唯一标识，用于区分不同svg的<def>内容
    * @desc {en} Automatically generate the unique identifier of the svg <def> tag, which is used to distinguish the <def> content of different svg
@@ -831,12 +754,10 @@
    * const { svgKey } = useGenSvgKey(userSetSvgKey);
    * ```
    */
-
   function useGenSvgKey(userSetSvgKey) {
-    var _useState12 = (0, _react.useState)(''),
-        innerSvgKey = _useState12[0],
-        setInnerSvgKey = _useState12[1];
-
+    var _useState10 = (0, _react.useState)(''),
+      innerSvgKey = _useState10[0],
+      setInnerSvgKey = _useState10[1];
     var svgKey = userSetSvgKey || innerSvgKey;
     (0, _react.useEffect)(function () {
       setInnerSvgKey("inner-" + arcoSvgKeyCount);

package/umd/_helpers/index.js

@@ -14,7 +14,6 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
   _exports.__esModule = true;
   var _exportNames = {
     getStyleWithVendor: true,
@@ -49,7 +48,6 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _exports[key] = _type[key];
   });
-
   /**
    * @type utils
    * @name componentUtils
@@ -90,7 +88,6 @@
     var allowReg = /(transform|transition|animation)/i;
     var newStyle = Object.keys(style).reduce(function (acc, key) {
       var _ref, _extends2;
-
       var webkitStyle = allowReg.test(key) ? (_ref = {}, _ref["Webkit" + key.replace(/^(.)/, function (_, p1) {
         return p1.toUpperCase();
       })] = style[key], _ref) : {};
@@ -98,6 +95,7 @@
     }, {});
     return newStyle;
   }
+
   /**
    * 给元素设置带浏览器前缀的样式
    * @desc {en} Set element style with browser vendor prefix
@@ -128,15 +126,13 @@
    * console.log(computedStyle.getPropertyValue('border-radius')); // Output: The borderRadius style without a vendor prefix
    * ```
    */
-
-
   function setStyleWithVendor(dom, style) {
     var vendorStyle = getStyleWithVendor(style);
-
     for (var key in vendorStyle) {
       dom.style[key] = vendorStyle[key];
     }
   }
+
   /**
    * 计算默认值，仅未定义时使用默认值
    * @desc {en} Calculate the default value, use default value only if undefined
@@ -157,11 +153,8 @@
    * console.log(result2); // Output: 100
    * ```
    */
-
-
   var getDefaultValue = function getDefaultValue(value, defaultValue) {
     return value === void 0 ? defaultValue : value;
   };
-
   _exports.getDefaultValue = getDefaultValue;
 });