@arco-design/mobile-react 2.25.4 → 2.27.0

package/tokens/app/arcodesign/default/index.less

@@ -704,6 +704,34 @@
 @image-picker-close-height: ~`pxtorem(18)`;
 @image-picker-close-background: rgba(0, 0, 0, 0.3);
 @image-picker-close-border-radius: 0 ~`pxtorem(2)`;
+@index-bar-background: white;
+@index-bar-group-active-color: @primary-color;
+@index-bar-group-left-spacing: ~`pxtorem(16)`;
+@index-bar-group-title-height: ~`pxtorem(24)`;
+@index-bar-group-title-background: #f7f8fa;
+@index-bar-group-title-font-color: @sub-info-font-color;
+@index-bar-group-title-font-size: ~`pxtorem(14)`;
+@index-bar-group-item-height: ~`pxtorem(54)`;
+@index-bar-group-item-font-size: ~`pxtorem(16)`;
+@index-bar-sidebar-active-color: @primary-color;
+@index-bar-sidebar-item-font-size: ~`pxtorem(10)`;
+@index-bar-sidebar-item-line-height: ~`pxtorem(14)`;
+@index-bar-sidebar-item-padding: ~`pxtorem(2)` ~`pxtorem(8)`;
+@index-bar-sidebar-item-width: ~`pxtorem(10)`;
+@index-bar-sidebar-sweat-padding: 0 ~`pxtorem(8)`;
+@index-bar-sidebar-sweat-background: #323232;
+@index-bar-sidebar-sweat-color: white;
+@index-bar-sidebar-sweat-right: ~`pxtorem(36)`;
+@index-bar-sidebar-sweat-font-size: ~`pxtorem(24)`;
+@index-bar-sidebar-sweat-radius: ~`pxtorem(50)`;
+@index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-27)`;
+@index-bar-sidebar-sweat-triangle-border: ~`pxtorem(18)` solid transparent;
+@index-bar-sidebar-toast-background: #323232;
+@index-bar-sidebar-toast-color: white;
+@index-bar-sidebar-toast-height: ~`pxtorem(48)`;
+@index-bar-sidebar-toast-radius: ~`pxtorem(4)`;
+@index-bar-sidebar-toast-padding: 0 ~`pxtorem(8)`;
+@index-bar-sidebar-toast-font-size: ~`pxtorem(24)`;
 @stepper-font-size: ~`pxtorem(14)`;
 @stepper-square-border: 1PX solid #f2f3f5;
 @stepper-square-border-radius: ~`pxtorem(2)`;
@@ -741,4 +769,27 @@
 @time-line-content-font-size: ~`pxtorem(16)`;
 @time-line-content-background-color: @line-color;
 @time-line-content-color: @font-color;
+@keyboard-background: #f2f3f5;
+@keyboard-content-padding: ~`pxtorem(8)`;
+@keyboard-unified-margin: ~`pxtorem(8)`;
+@keyboard-confirm-key-background: #165dff;
+@keyboard-confirm-key-color: #ffffff;
+@keyboard-confirm-key-font-size: ~`pxtorem(18)`;
+@keyboard-key-font-weight: 500;
+@keyboard-key-font-size: ~`pxtorem(22)`;
+@keyboard-key-icon-size: ~`pxtorem(26)`;
+@keyboard-key-line-height: ~`pxtorem(30)`;
+@keyboard-key-background: #ffffff;
+@keyboard-key-active-background: #e5e6eb;
+@keyboard-key-border-radius: ~`pxtorem(4)`;
+@keyboard-key-height: ~`pxtorem(48)`;
+@keyboard-key-color: #1d2129;
+@divider-line-thickness: 1PX;
+@divider-line-color: @line-color;
+@divider-content-font-size: ~`pxtorem(14)`;
+@divider-content-font-color: @sub-font-color;
+@divider-left-width: ~`pxtorem(28)`;
+@divider-right-width: ~`pxtorem(28)`;
+@divider-content-padding: ~`pxtorem(12)`;
+@divider-padding: ~`pxtorem(16)`;
 

package/tokens/mixin/index.less

@@ -2,7 +2,7 @@
 @import './vars-switch.less';
 @import './pxtorem.less';
 
-.rem (@property; @values...) {
+.rem(@property; @values...) {
     @{property}: ~`(function () {
         var baseFontSize=@{base-font-size};
         var sizeList = @{values};
@@ -15,6 +15,15 @@
     }())`;
 }
 
+.rem-with-rtl(@property; @values...) {
+    .rem(@property; @values...);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .rem(@new-property; @values...);
+    }
+}
+
 // for hack dark mode
 .use-dark-mode-query(@rules) {
     & when (@use-dark-mode = 1) {
@@ -31,6 +40,15 @@
     }
 }
 
+.use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
+    .use-var(@property, @variables, @preValues, @nextValues);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .use-var(@new-property, @variables, @preValues, @nextValues);
+    }
+}
+
 .hairline-var(@color, @direction: all) {
     .hairline(@@color, @direction);
     & when (@use-css-vars = 1) {

package/umd/_helpers/hooks.js

@@ -30,23 +30,26 @@
   _exports.useSystem = useSystem;
   _exports.useUpdateEffect = useUpdateEffect;
   _exports.useWindowSize = useWindowSize;
+
   /**
    * @type hooks
    * @name 公共hooks
    * @name_en General Hooks
    */
-
   function useListenResize(resizeHandler, deps, needListen) {
     if (deps === void 0) {
       deps = [];
     }
+
     if (needListen === void 0) {
       needListen = true;
     }
+
     (0, _react.useEffect)(function () {
       if (!needListen) {
         return function () {};
       }
+
       window.addEventListener('resize', resizeHandler);
       window.addEventListener('orientationchange', resizeHandler);
       return function () {
@@ -55,7 +58,6 @@
       };
     }, [].concat(deps, [needListen]));
   }
-
   /**
    * useState自定义封装，统一处理在组件卸载后还使用setState的行为
    * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
@@ -64,15 +66,19 @@
    * @param initialState 初始状态
    * @param initialState {en} Initial State
    */
+
+
   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 () {
@@ -83,30 +89,36 @@
     var result = [state, setValidState];
     return result;
   }
+
   function useRefState(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);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
     }, [state]);
     return [state, stateRef, setState];
   }
+
   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];
   }
+
   function useUpdateEffect(effect, dependencies) {
     if (dependencies === void 0) {
       dependencies = [];
     }
+
     var isInitialMount = (0, _react.useRef)(true);
     (0, _react.useEffect)(function () {
       if (isInitialMount.current) {
@@ -116,9 +128,11 @@
       }
     }, dependencies);
   }
+
   function useForceUpdate() {
     var _useState3 = (0, _react.useState)(0),
-      setTick = _useState3[1];
+        setTick = _useState3[1];
+
     var update = (0, _react.useCallback)(function () {
       setTick(function (tick) {
         return tick + 1;
@@ -126,6 +140,7 @@
     }, []);
     return update;
   }
+
   function useLatestRef(variable) {
     var variableRef = (0, _react.useRef)(variable);
     (0, _react.useEffect)(function () {
@@ -133,30 +148,37 @@
     }, [variable]);
     return variableRef;
   }
+
   function useSystem() {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-      currentSystem = _useContext.system;
+        currentSystem = _useContext.system;
+
     var _useState4 = (0, _react.useState)(function () {
-        return currentSystem || (0, _mobileUtils.getSystem)();
-      }),
-      system = _useState4[0],
-      setSystem = _useState4[1];
+      return currentSystem || (0, _mobileUtils.getSystem)();
+    }),
+        system = _useState4[0],
+        setSystem = _useState4[1];
+
     (0, _react.useEffect)(function () {
       setSystem(currentSystem || (0, _mobileUtils.getSystem)());
     }, [currentSystem]);
     return system;
   }
+
   function useWindowSize(listenResize) {
     var _useState5 = (0, _react.useState)(0),
-      windowWidth = _useState5[0],
-      setWindowWidth = _useState5[1];
+        windowWidth = _useState5[0],
+        setWindowWidth = _useState5[1];
+
     var _useState6 = (0, _react.useState)(0),
-      windowHeight = _useState6[0],
-      setWindowHeight = _useState6[1];
+        windowHeight = _useState6[0],
+        setWindowHeight = _useState6[1];
+
     function setSize() {
       setWindowWidth(window.innerWidth);
       setWindowHeight(window.innerHeight);
     }
+
     useListenResize(setSize, [], listenResize);
     (0, _react.useEffect)(function () {
       setSize();
@@ -166,11 +188,13 @@
       windowHeight: windowHeight
     };
   }
+
   /* eslint-disable max-lines-per-function */
   function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirection, preventCallback, onTouchMove, gestureOutOfControl) {
     if (orientationDirection === void 0) {
       orientationDirection = 'top';
     }
+
     var scrollRef = (0, _react.useRef)([]);
     var touchingRef = (0, _react.useRef)({
       dom: null,
@@ -184,9 +208,11 @@
       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) {
@@ -199,15 +225,19 @@
       } 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);
@@ -217,54 +247,66 @@
           }
         }
       }
+
       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;
@@ -272,28 +314,35 @@
       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();
@@ -304,12 +353,14 @@
         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
@@ -320,6 +371,7 @@
       };
     }, [visible, popupDom, handleTouchStart, handleTouchMove]);
   }
+
   function useSwiperInnerScroll(getInnerScrollContainer) {
     var stopFunc = (0, _react.useCallback)(function (e) {
       return e.stopPropagation();
@@ -328,6 +380,7 @@
       if (!getInnerScrollContainer) {
         return;
       }
+
       var containers = getInnerScrollContainer();
       var validContainers = Array.isArray(containers) ? containers : [containers];
       validContainers.forEach(function (container) {
@@ -346,17 +399,21 @@
       };
     }, [getInnerScrollContainer]);
   }
+
   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);
@@ -364,23 +421,26 @@
       };
     }, [handler]);
   }
-
   /**
    * 统计同时出现的全屏组件
    * @en Count simultaneous full-screen components
    */
+
+
   var arcoFullScreenCount = 0;
   var arcoFullScreenOriginOverflow = '';
+
   function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
     // 新出现一个全屏组件则计数+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';
     }, []);
@@ -388,9 +448,11 @@
      * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原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;
       }
@@ -398,12 +460,14 @@
     (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.
@@ -413,19 +477,25 @@
       };
     }, [visible]);
   }
+
   var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState7 = (0, _react.useState)(0),
-      currentPercentage = _useState7[0],
-      setCurrentPercentage = _useState7[1];
+        currentPercentage = _useState7[0],
+        setCurrentPercentage = _useState7[1];
+
     var _useState8 = (0, _react.useState)(false),
-      transitionControl = _useState8[0],
-      setTransitionControl = _useState8[1];
+        transitionControl = _useState8[0],
+        setTransitionControl = _useState8[1];
+
     var _useState9 = (0, _react.useState)(0),
-      count = _useState9[0],
-      setCount = _useState9[1];
+        count = _useState9[0],
+        setCount = _useState9[1];
+
+    var latestPercentage = (0, _react.useRef)(percentage);
     (0, _react.useEffect)(function () {
       mountedTransition ? (0, _mobileUtils.scrollWithAnimation)(0, percentage, function (progress) {
-        setCurrentPercentage(Math.floor(progress));
+        var targetProgress = progress / percentage * latestPercentage.current;
+        setCurrentPercentage(Math.floor(targetProgress));
       }, duration, mountedBezier) : setCurrentPercentage(percentage);
       var id = setTimeout(function () {
         setTransitionControl(true);
@@ -435,6 +505,7 @@
       };
     }, []);
     (0, _react.useEffect)(function () {
+      latestPercentage.current = percentage;
       setCount(Math.floor(percentage / step));
     }, [percentage, step]);
     (0, _react.useEffect)(function () {
@@ -442,14 +513,18 @@
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
   };
+
   _exports.useProgress = useProgress;
+
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {
       delay = 200;
     }
+
     var _useState10 = (0, _react.useState)(0),
-      clickTimes = _useState10[0],
-      setClickTimes = _useState10[1];
+        clickTimes = _useState10[0],
+        setClickTimes = _useState10[1];
+
     var eventRef = (0, _react.useRef)();
     (0, _react.useEffect)(function () {
       var timer = setTimeout(function () {
@@ -468,11 +543,14 @@
       });
     };
   }
+
   var arcoSvgKeyCount = 0;
+
   function useGenSvgKey(userSetSvgKey) {
     var _useState11 = (0, _react.useState)(''),
-      innerSvgKey = _useState11[0],
-      setInnerSvgKey = _useState11[1];
+        innerSvgKey = _useState11[0],
+        setInnerSvgKey = _useState11[1];
+
     var svgKey = userSetSvgKey || innerSvgKey;
     (0, _react.useEffect)(function () {
       setInnerSvgKey("inner-" + arcoSvgKeyCount);

package/umd/_helpers/index.js

@@ -14,6 +14,7 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   var _exportNames = {
     getStyleWithVendor: true,
@@ -40,15 +41,16 @@
     if (key in _exports && _exports[key] === _reactDom[key]) return;
     _exports[key] = _reactDom[key];
   });
+
   /**
    * @type utils
    * @name componentUtils
    */
-
   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) : {};
@@ -56,13 +58,15 @@
     }, {});
     return newStyle;
   }
-
   /**
    * 计算默认值，仅未定义时使用默认值
    * @desc {en} Calculate the default value, use default value only if undefined
    */
+
+
   var getDefaultValue = function getDefaultValue(value, defaultValue) {
     return value === void 0 ? defaultValue : value;
   };
+
   _exports.getDefaultValue = getDefaultValue;
 });