@arco-design/mobile-react 2.25.4 → 2.26.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.26.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.4...@arco-design/mobile-react@2.26.0) (2023-04-11)
+
+
+### Bug Fixes
+
+* `Carousel` fix confused rendering due to missing keys ([565b51e](https://github.com/arco-design/arco-design-mobile/commit/565b51ef84382fec04d9ecfd4264600a332913bc))
+* `Image` border radius ([#107](https://github.com/arco-design/arco-design-mobile/issues/107)) ([6f1fe3e](https://github.com/arco-design/arco-design-mobile/commit/6f1fe3e4d72330d7e65ea95a58e79231779ae2f7))
+* `Progress` state error when updating progress before animation done ([#105](https://github.com/arco-design/arco-design-mobile/issues/105)) ([a8d2398](https://github.com/arco-design/arco-design-mobile/commit/a8d2398f9139316985bd3c8ea1fd6760412bea5b))
+* `Tabs` support the prop "underlineAdaptive" ([b81b535](https://github.com/arco-design/arco-design-mobile/commit/b81b535e4933e0d51e0bcf8d7135b39d706f0b24))
+* add prop "blockChangeWhenCompositing" for input type components ([a082a02](https://github.com/arco-design/arco-design-mobile/commit/a082a02143cd53f61e757be7bd26391f8d04e6f6))
+
+
+### Features
+
+* `Carousel` & `NoticeBar` & `Input` & `Cell` rtl adaption ([bbd2fbb](https://github.com/arco-design/arco-design-mobile/commit/bbd2fbb3689a807f0d37b7ac51ac131e37224ae6))
+* add new component `Divider` ([#102](https://github.com/arco-design/arco-design-mobile/issues/102)) ([2ad2830](https://github.com/arco-design/arco-design-mobile/commit/2ad2830b3851cb1e7e8d96edda3a75f27edf2e7a))
+
+
+
+
+
 ## [2.25.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.25.3...@arco-design/mobile-react@2.25.4) (2023-02-27)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.4/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.25.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.25.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.25.4/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/hooks.js

@@ -17,26 +17,32 @@ exports.useSwiperInnerScroll = useSwiperInnerScroll;
 exports.useSystem = useSystem;
 exports.useUpdateEffect = useUpdateEffect;
 exports.useWindowSize = useWindowSize;
+
 var _react = require("react");
+
 var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _contextProvider = require("../context-provider");
+
 /**
  * @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 () {
@@ -45,7 +51,6 @@ function useListenResize(resizeHandler, deps, needListen) {
     };
   }, [].concat(deps, [needListen]));
 }
-
 /**
  * useState自定义封装，统一处理在组件卸载后还使用setState的行为
  * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
@@ -54,15 +59,19 @@ function useListenResize(resizeHandler, deps, needListen) {
  * @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 () {
@@ -73,30 +82,36 @@ function useMountedState(initialState) {
   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) {
@@ -106,9 +121,11 @@ function useUpdateEffect(effect, dependencies) {
     }
   }, 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;
@@ -116,6 +133,7 @@ function useForceUpdate() {
   }, []);
   return update;
 }
+
 function useLatestRef(variable) {
   var variableRef = (0, _react.useRef)(variable);
   (0, _react.useEffect)(function () {
@@ -123,30 +141,37 @@ function useLatestRef(variable) {
   }, [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();
@@ -156,11 +181,13 @@ function useWindowSize(listenResize) {
     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,
@@ -174,9 +201,11 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
     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) {
@@ -189,15 +218,19 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
     } 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);
@@ -207,54 +240,66 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
         }
       }
     }
+
     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;
@@ -262,28 +307,35 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
     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();
@@ -294,12 +346,14 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
       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
@@ -310,6 +364,7 @@ function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirect
     };
   }, [visible, popupDom, handleTouchStart, handleTouchMove]);
 }
+
 function useSwiperInnerScroll(getInnerScrollContainer) {
   var stopFunc = (0, _react.useCallback)(function (e) {
     return e.stopPropagation();
@@ -318,6 +373,7 @@ function useSwiperInnerScroll(getInnerScrollContainer) {
     if (!getInnerScrollContainer) {
       return;
     }
+
     var containers = getInnerScrollContainer();
     var validContainers = Array.isArray(containers) ? containers : [containers];
     validContainers.forEach(function (container) {
@@ -336,17 +392,21 @@ function useSwiperInnerScroll(getInnerScrollContainer) {
     };
   }, [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);
@@ -354,23 +414,26 @@ function useAddListener(dom, event, handler, options) {
     };
   }, [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';
   }, []);
@@ -378,9 +441,11 @@ function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
    * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原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;
     }
@@ -388,12 +453,14 @@ function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
   (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.
@@ -403,19 +470,25 @@ function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
     };
   }, [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);
@@ -425,6 +498,7 @@ var useProgress = function useProgress(mountedTransition, percentage, duration,
     };
   }, []);
   (0, _react.useEffect)(function () {
+    latestPercentage.current = percentage;
     setCount(Math.floor(percentage / step));
   }, [percentage, step]);
   (0, _react.useEffect)(function () {
@@ -432,14 +506,18 @@ var useProgress = function useProgress(mountedTransition, percentage, duration,
   }, [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 () {
@@ -458,11 +536,14 @@ function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     });
   };
 }
+
 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/cjs/_helpers/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 var _exportNames = {
   getStyleWithVendor: true,
@@ -8,37 +9,45 @@ var _exportNames = {
 };
 exports.getDefaultValue = void 0;
 exports.getStyleWithVendor = getStyleWithVendor;
+
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _hooks = require("./hooks");
+
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   exports[key] = _hooks[key];
 });
+
 var _type = require("./type");
+
 Object.keys(_type).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _type[key]) return;
   exports[key] = _type[key];
 });
+
 var _reactDom = require("./react-dom");
+
 Object.keys(_reactDom).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   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) : {};
@@ -46,12 +55,14 @@ function getStyleWithVendor(style) {
   }, {});
   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;