@arco-design/mobile-react 2.38.3 → 2.39.0

package/esm/_helpers/hooks.js

@@ -6,7 +6,6 @@
 import { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { getSystem, scrollWithAnimation, safeGetComputedStyle } from '@arco-design/mobile-utils';
 import { GlobalContext } from '../context-provider';
-
 /**
  * 监听页面resize事件的统一封装
  * @desc {en} Unified encapsulation for monitoring page resize events
@@ -27,17 +26,14 @@ export function useListenResize(resizeHandler, deps, needListen) {
   if (deps === void 0) {
     deps = [];
   }
-
   if (needListen === void 0) {
     needListen = true;
   }
-
   useEffect(function () {
     if (needListen) {
       window.addEventListener('resize', resizeHandler);
       window.addEventListener('orientationchange', resizeHandler);
     }
-
     return function () {
       if (needListen) {
         window.removeEventListener('resize', resizeHandler);
@@ -46,6 +42,7 @@ export function useListenResize(resizeHandler, deps, needListen) {
     };
   }, [].concat(deps, [needListen]));
 }
+
 /**
  * useState自定义封装，统一处理在组件卸载后还使用setState的行为
  * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
@@ -61,18 +58,15 @@ export function useListenResize(resizeHandler, deps, needListen) {
  * const [scrollValue, setScrollValue] = useMountedState(value);
  * ```
  */
-
 export function useMountedState(initialState) {
   var _useState = useState(initialState),
-      state = _useState[0],
-      setState = _useState[1];
-
+    state = _useState[0],
+    setState = _useState[1];
   var leavingRef = useRef(false);
   var setValidState = useCallback(function (value) {
     if (leavingRef.current) {
       return;
     }
-
     setState(value);
   }, []);
   useEffect(function () {
@@ -85,6 +79,7 @@ export function useMountedState(initialState) {
   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
@@ -98,21 +93,18 @@ export function useMountedState(initialState) {
  * const [opened, openedRef, setOpened] = useSameRefState(false);
  * ```
  */
-
 export function useSameRefState(initialValue) {
   var _useState2 = useState(initialValue),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+    state = _useState2[0],
+    setState = _useState2[1];
   var stateRef = 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
@@ -126,18 +118,17 @@ export function useSameRefState(initialValue) {
  * const [index, indexRef, setIndex] = useRefState(currentIndex);
  * ```
  */
-
 export function useRefState(initialValue) {
   var _useState3 = useState(initialValue),
-      state = _useState3[0],
-      setState = _useState3[1];
-
+    state = _useState3[0],
+    setState = _useState3[1];
   var stateRef = useRef(state);
   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
@@ -151,18 +142,17 @@ export function useRefState(initialValue) {
  * const [active, activeRef, setActive] = useRefMountedState(false);
  * ```
  */
-
 export function useRefMountedState(initialValue) {
   var _useMountedState = useMountedState(initialValue),
-      state = _useMountedState[0],
-      setState = _useMountedState[1];
-
+    state = _useMountedState[0],
+    setState = _useMountedState[1];
   var stateRef = useRef(state);
   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
@@ -179,12 +169,10 @@ export function useRefMountedState(initialValue) {
  * }, [index]);
  * ```
  */
-
 export function useUpdateEffect(effect, dependencies) {
   if (dependencies === void 0) {
     dependencies = [];
   }
-
   var isInitialMount = useRef(true);
   useEffect(function () {
     if (isInitialMount.current) {
@@ -194,6 +182,7 @@ export function useUpdateEffect(effect, dependencies) {
     }
   }, dependencies);
 }
+
 /**
  * 手动触发一次组件的rerender
  * @desc {en} Manually trigger the rerender of the component once
@@ -208,11 +197,9 @@ export function useUpdateEffect(effect, dependencies) {
  * }
  * ```
  */
-
 export function useForceUpdate() {
   var _useState4 = useState(0),
-      setTick = _useState4[1];
-
+    setTick = _useState4[1];
   var update = useCallback(function () {
     setTick(function (tick) {
       return tick + 1;
@@ -220,6 +207,7 @@ export function useForceUpdate() {
   }, []);
   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)
@@ -234,7 +222,6 @@ export function useForceUpdate() {
  * const wrapSizeRef = useLatestRef(wrapSize);
  * ```
  */
-
 export function useLatestRef(variable) {
   var variableRef = useRef(variable);
   useEffect(function () {
@@ -260,22 +247,20 @@ export function useLatestRef(variable) {
  * const systemWithHarmony = useSystem({ detectHarmony: true });
  * ```
  */
-
 export function useSystem(options) {
   var _useContext = useContext(GlobalContext),
-      currentSystem = _useContext.system;
-
+    currentSystem = _useContext.system;
   var _useState5 = useState(function () {
-    return currentSystem || getSystem(options);
-  }),
-      system = _useState5[0],
-      setSystem = _useState5[1];
-
+      return currentSystem || getSystem(options);
+    }),
+    system = _useState5[0],
+    setSystem = _useState5[1];
   useEffect(function () {
     setSystem(currentSystem || 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
@@ -289,21 +274,17 @@ export function useSystem(options) {
  * const { windowHeight, windowWidth } = useWindowSize();
  * ```
  */
-
 export function useWindowSize(listenResize) {
   var _useState6 = useState(typeof window !== 'undefined' ? window.innerWidth : 0),
-      windowWidth = _useState6[0],
-      setWindowWidth = _useState6[1];
-
+    windowWidth = _useState6[0],
+    setWindowWidth = _useState6[1];
   var _useState7 = 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);
   useEffect(function () {
     setSize();
@@ -313,7 +294,6 @@ export function useWindowSize(listenResize) {
     windowHeight: windowHeight
   };
 }
-
 /**
  * 弹窗中滚动统一处理，防止滚动穿透
  * @desc {en} Unified processing of scrolling in pop-up windows to prevent scrolling penetration
@@ -342,7 +322,6 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
   if (orientationDirection === void 0) {
     orientationDirection = 'top';
   }
-
   var scrollRef = useRef([]);
   var touchingRef = useRef({
     dom: null,
@@ -356,11 +335,9 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
     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) {
@@ -373,19 +350,15 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
     } 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);
@@ -395,66 +368,54 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
         }
       }
     }
-
     touchingRef.current = {
       dom: originNode,
       inScrollIndexes: inScrollIndexes
     };
     return inScrollIndexes;
   }
-
   var handleTouchMove = 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;
@@ -462,35 +423,28 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
     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();
@@ -501,14 +455,12 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
       e.cancelable && e.preventDefault();
       prevented = true;
     }
-
     onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
   }, [orientationDirection, gestureOutOfControl]);
   useEffect(function () {
     if (!visible || !popupDom) {
       return function () {};
     }
-
     popupDom.addEventListener('touchstart', handleTouchStart);
     popupDom.addEventListener('touchmove', handleTouchMove, {
       passive: false
@@ -519,6 +471,7 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
     };
   }, [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
@@ -531,7 +484,6 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
  * useSwiperInnerScroll(getInnerScrollContainer);
  * ```
  */
-
 export function useSwiperInnerScroll(getInnerScrollContainer) {
   var stopFunc = useCallback(function (e) {
     return e.stopPropagation();
@@ -540,7 +492,6 @@ export function useSwiperInnerScroll(getInnerScrollContainer) {
     if (!getInnerScrollContainer) {
       return;
     }
-
     var containers = getInnerScrollContainer();
     var validContainers = Array.isArray(containers) ? containers : [containers];
     validContainers.forEach(function (container) {
@@ -559,6 +510,7 @@ export function useSwiperInnerScroll(getInnerScrollContainer) {
     };
   }, [getInnerScrollContainer]);
 }
+
 /**
  * 事件绑定统一封装
  * @desc {en} Unified encapsulation of event binding
@@ -578,21 +530,17 @@ export function useSwiperInnerScroll(getInnerScrollContainer) {
  * useAddListener(domRef.current, 'touchend', onTouchEnd);
  * ```
  */
-
 export function useAddListener(dom, event, handler, options) {
   if (options === void 0) {
     options = {
       capture: true
     };
   }
-
   useEffect(function () {
     if (!dom) return;
-
     if (handler) {
       dom.addEventListener(event, handler, options);
     }
-
     return function () {
       if (handler) {
         dom.removeEventListener(event, handler, options);
@@ -600,13 +548,14 @@ export function useAddListener(dom, event, handler, options) {
     };
   }, [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
@@ -623,22 +572,19 @@ var arcoFullScreenOriginOverflow = '';
  * usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow);
  * ```
  */
-
 export 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 = 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';
   }, []);
@@ -646,11 +592,9 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
    * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原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 = useCallback(function () {
     var newCount = arcoFullScreenCount - 1;
     arcoFullScreenCount = newCount;
-
     if (!newCount) {
       document.body.style.overflow = arcoFullScreenOriginOverflow;
     }
@@ -658,14 +602,12 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
   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.
@@ -675,6 +617,7 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
     };
   }, [visible]);
 }
+
 /**
  * 进度条计算公共逻辑，根据传入的参数计算出当前百分比和过渡效果开关，进度类组件内部使用
  * @desc {en} Progress bar calculation common logic, used internally by the progress class component
@@ -686,20 +629,16 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
  * const [currentPercentage, transitionControl] = useProgress(mountedTransition, percentage, duration, mountedBezier, step);
  * ```
  */
-
 export function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
   var _useState8 = useState(0),
-      currentPercentage = _useState8[0],
-      setCurrentPercentage = _useState8[1];
-
+    currentPercentage = _useState8[0],
+    setCurrentPercentage = _useState8[1];
   var _useState9 = useState(false),
-      transitionControl = _useState9[0],
-      setTransitionControl = _useState9[1];
-
-  var _useState10 = useState(0),
-      count = _useState10[0],
-      setCount = _useState10[1];
-
+    transitionControl = _useState9[0],
+    setTransitionControl = _useState9[1];
+  var _useState0 = useState(0),
+    count = _useState0[0],
+    setCount = _useState0[1];
   var latestPercentage = useRef(percentage);
   useEffect(function () {
     mountedTransition ? scrollWithAnimation(0, percentage, function (progress) {
@@ -722,6 +661,7 @@ export function useProgress(mountedTransition, percentage, duration, mountedBezi
   }, [count, percentage, step]);
   return [currentPercentage, transitionControl];
 }
+
 /**
  * 单击和双击事件统一处理
  * @desc {en} Unified processing of single and double click events
@@ -739,16 +679,13 @@ export function useProgress(mountedTransition, percentage, duration, mountedBezi
  * const handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
  * ```
  */
-
 export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
   if (delay === void 0) {
     delay = 200;
   }
-
-  var _useState11 = useState(0),
-      clickTimes = _useState11[0],
-      setClickTimes = _useState11[1];
-
+  var _useState1 = useState(0),
+    clickTimes = _useState1[0],
+    setClickTimes = _useState1[1];
   var eventRef = useRef(undefined);
   useEffect(function () {
     var timer = setTimeout(function () {
@@ -768,6 +705,7 @@ export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
   };
 }
 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
@@ -785,12 +723,10 @@ var arcoSvgKeyCount = 0;
  * const { svgKey } = useGenSvgKey(userSetSvgKey);
  * ```
  */
-
 export function useGenSvgKey(userSetSvgKey) {
-  var _useState12 = useState(''),
-      innerSvgKey = _useState12[0],
-      setInnerSvgKey = _useState12[1];
-
+  var _useState10 = useState(''),
+    innerSvgKey = _useState10[0],
+    setInnerSvgKey = _useState10[1];
   var svgKey = userSetSvgKey || innerSvgKey;
   useEffect(function () {
     setInnerSvgKey("inner-" + arcoSvgKeyCount);

package/esm/_helpers/index.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /**
  * @type utils
  * @name componentUtils
  */
+
 export * from './hooks';
 export * from './react-dom';
 export * from './render';
 export * from './type';
+
 /**
  * 获取带浏览器前缀的样式
  * @desc {en} Get style with browser vendor prefix
@@ -39,12 +40,10 @@ export * from './type';
  * // }
  * ```
  */
-
 export function getStyleWithVendor(style) {
   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) : {};
@@ -52,6 +51,7 @@ export function getStyleWithVendor(style) {
   }, {});
   return newStyle;
 }
+
 /**
  * 给元素设置带浏览器前缀的样式
  * @desc {en} Set element style with browser vendor prefix
@@ -82,14 +82,13 @@ export function getStyleWithVendor(style) {
  * console.log(computedStyle.getPropertyValue('border-radius')); // Output: The borderRadius style without a vendor prefix
  * ```
  */
-
 export 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
@@ -110,7 +109,6 @@ export function setStyleWithVendor(dom, style) {
  * console.log(result2); // Output: 100
  * ```
  */
-
 export var getDefaultValue = function getDefaultValue(value, defaultValue) {
   return value === void 0 ? defaultValue : value;
 };