@arco-design/mobile-react 2.27.5 → 2.28.0

package/dist/index.js

@@ -406,7 +406,7 @@
         type = 'to';
       }
 
-      var targetTop = Math.max(0, type === 'by' ? initTop + target : target);
+      var targetTop = type === 'by' ? initTop + target : target;
       var start = Date.now();
 
       var fn = function fn() {
@@ -3165,6 +3165,20 @@
       var result = [state, setValidState];
       return result;
     }
+    function useSameRefState(initialValue) {
+      var _a = React.useState(initialValue),
+          state = _a[0],
+          setState = _a[1];
+
+      var stateRef = React.useRef(state);
+
+      var setStateProxy = function setStateProxy(data) {
+        stateRef.current = data;
+        setState(data);
+      };
+
+      return [state, stateRef, setStateProxy];
+    }
     function useRefState(initialValue) {
       var _a = React.useState(initialValue),
           state = _a[0],
@@ -3707,6 +3721,7 @@
           renderUnderline = props.renderUnderline,
           getTabRect = props.getTabRect,
           getTabCenterLeft = props.getTabCenterLeft;
+      var useRtl = React.useContext(GlobalContext).useRtl;
 
       var _a = React.useState({}),
           underlineStyle = _a[0],
@@ -3727,6 +3742,7 @@
       var isVertical = tabDirection === 'vertical';
       var maxScaleWithDefault = caterpillarMaxScale || 2;
       var translateZStr = translateZ ? ' translateZ(0)' : '';
+      var rtlRatio = isVertical && useRtl ? -1 : 1;
       React.useImperativeHandle(ref, function () {
         return {
           setCaterpillarAnimate: setCaterpillarAnimate,
@@ -3798,11 +3814,13 @@
       }
 
       function getDescIndex() {
-        if (distance > 0) {
+        var comparedDis = distance * rtlRatio;
+
+        if (comparedDis > 0) {
           return activeIndex - 1;
         }
 
-        if (distance < 0) {
+        if (comparedDis < 0) {
           return activeIndex + 1;
         }
 
@@ -3824,7 +3842,8 @@
         var currentLeft = getLineLeft(activeIndex);
         var descIndex = getDescIndex();
         var descLeft = getLineLeft(descIndex);
-        var moveRatio = wrapWidth ? distance / wrapWidth : 0;
+        var comparedDis = distance * rtlRatio;
+        var moveRatio = wrapWidth ? comparedDis / wrapWidth : 0;
         var leftOffset = moveRatio * (currentLeft - descLeft);
         var direc = isVertical ? 'X' : 'Y';
         var transStyle = useCaterpillar && !jumpingDis && !underlineAdaptive ? caterpillarProperty === 'size' ? (_a = {}, _a[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _a.willChange = 'width', _a) : {
@@ -3837,7 +3856,7 @@
           var currentWidth = getLineWidth(activeIndex);
           var descWidth = getLineWidth(descIndex);
           var widthOffset = moveRatio * (currentWidth - descWidth);
-          adaptiveStyle = (_b = {}, _b[isVertical ? 'width' : 'height'] = distance > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _b.willChange = 'width', _b);
+          adaptiveStyle = (_b = {}, _b[isVertical ? 'width' : 'height'] = comparedDis > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _b.willChange = 'width', _b);
           adaptiveOuterStyle = isVertical ? {
             width: 'auto'
           } : {
@@ -3854,7 +3873,7 @@
         };
         return {
           outer: __assign$2(__assign$2({
-            transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+            transform: "translate" + direc + "(" + (comparedDis > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
           }, outerSize), adaptiveOuterStyle),
           inner: __assign$2(__assign$2({}, transStyle), adaptiveStyle)
         };
@@ -3980,6 +3999,7 @@
           translateZ = props.translateZ,
           tabBarStopPropagation = props.tabBarStopPropagation;
       var prefix = prefixCls + "-tab-cell";
+      var useRtl = React.useContext(GlobalContext).useRtl;
       var domRef = React.useRef(null);
       var underlineRef = React.useRef(null);
       var allCellRectRef = React.useRef([]);
@@ -4174,20 +4194,20 @@
       }
 
       function getCellStyle(index) {
+        var _a, _b;
+
         if (!isVertical) {
           return {};
         }
 
+        var marginStart = useRtl ? 'marginRight' : 'marginLeft';
+        var marginEnd = useRtl ? 'marginLeft' : 'marginRight';
+
         if (index === 0) {
-          return {
-            marginRight: cellGutter,
-            marginLeft: getCellPadding('left')
-          };
+          return _a = {}, _a[marginEnd] = cellGutter, _a[marginStart] = getCellPadding('left'), _a;
         }
 
-        return {
-          marginRight: index === tabs.length - 1 ? void 0 : cellGutter
-        };
+        return _b = {}, _b[marginEnd] = index === tabs.length - 1 ? void 0 : cellGutter, _b;
       }
 
       function renderBarItem(tab, index) {
@@ -4766,7 +4786,8 @@
           autoHeight = props.autoHeight,
           swipeEnergySaving = props.swipeEnergySaving,
           changeIndex = props.changeIndex,
-          onScroll = props.onScroll;
+          onScroll = props.onScroll,
+          rtlRatio = props.rtlRatio;
       var domRef = React.useRef(null);
       var panesRef = React.useRef([]);
       var autoScrollingRef = React.useRef(false);
@@ -4965,7 +4986,7 @@
         var translateStr = translateZ ? ' translateZ(0)' : '';
         var sizeStyle = tabDirection === 'vertical' ? {
           width: 100 * panes.length + "%",
-          transform: "translateX(" + (distance - wrapWidth * activeIndex) + "px)" + translateStr
+          transform: "translateX(" + (distance - wrapWidth * activeIndex * rtlRatio) + "px)" + translateStr
         } : {
           height: 100 * panes.length + "%",
           transform: "translateY(" + (distance - wrapHeight * activeIndex) + "px)" + translateStr
@@ -4993,7 +5014,7 @@
 
         var translateStr = translateZ ? ' translateZ(0)' : '';
         var sizeStyle = tabDirection === 'vertical' ? {
-          transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+          transform: "translateX(" + (distance - wrapWidth * (activeIndex - index) * rtlRatio) + "px)" + translateStr
         } : {
           transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
         };
@@ -5175,6 +5196,7 @@
           tabBarStopPropagation = _6 === void 0 ? true : _6,
           _7 = props.swipeEnergySaving,
           swipeEnergySaving = _7 === void 0 ? false : _7;
+      var useRtl = React.useContext(GlobalContext).useRtl;
       var domRef = React.useRef(null);
       var cellRef = React.useRef(null);
       var paneRef = React.useRef(null);
@@ -5226,6 +5248,8 @@
       var allPanes = getAllPanes();
       var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
       var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
+      var horizontalUseRtl = tabDirection === 'vertical' && useRtl;
+      var rtlRatio = horizontalUseRtl ? -1 : 1;
       React.useImperativeHandle(ref, function () {
         return {
           dom: domRef.current,
@@ -5343,6 +5367,7 @@
         var posDisY = touchMoveY - touchStartYRef.current;
         var absDisX = Math.abs(posDisX);
         var absDisY = Math.abs(posDisY);
+        var comparedDis = posDisX * rtlRatio;
 
         if (scrollingRef.current === null) {
           scrollingRef.current = absDisX < absDisY;
@@ -5360,10 +5385,10 @@
           return;
         }
 
-        if (activeIndexRef.current === 0 && posDisX > 0 || activeIndexRef.current === tabs.length - 1 && posDisX < 0) {
+        if (activeIndexRef.current === 0 && comparedDis > 0 || activeIndexRef.current === tabs.length - 1 && comparedDis < 0) {
           if (!touchStoppedRef.current && absDisX > stopTouchThreshold) {
             touchStoppedRef.current = true;
-            onTouchStopped && onTouchStopped(posDisX >= 0 ? -1 : 1);
+            onTouchStopped && onTouchStopped(comparedDis >= 0 ? -1 : 1);
           }
 
           setDistance(0);
@@ -5413,10 +5438,11 @@
         var index = activeIndexRef.current;
         var needJump = Math.abs(dis) > maxSlice && Math.abs(dis) > distanceToChangeTab || Math.abs(speed) > speedToChangeTab;
         var newIndex = index;
+        var comparedDis = dis * rtlRatio;
 
-        if (dis > 0 && needJump) {
+        if (comparedDis > 0 && needJump) {
           newIndex = index - 1;
-        } else if (dis < 0 && needJump) {
+        } else if (comparedDis < 0 && needJump) {
           newIndex = index + 1;
         }
 
@@ -5560,7 +5586,8 @@
           tabPaneExtra: tabPaneExtra,
           autoHeight: autoHeight,
           onScroll: onScroll,
-          swipeEnergySaving: swipeEnergySaving
+          swipeEnergySaving: swipeEnergySaving,
+          rtlRatio: rtlRatio
         }, commonProps)));
       });
     });
@@ -5721,6 +5748,22 @@
         });
         framePendingRef.current = true;
       }, [containerEventHandler]);
+      var updatePlaceholderLayoutInner = React.useCallback(function () {
+        if (placeholderRef.current) {
+          var contentHeight = contentCalculateHeightRef.current; // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
+          // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
+
+          placeholderRef.current.style.height = (isStickyRef.current ? contentHeight : 0) + "px";
+        }
+      }, []);
+      var updatePlaceholderLayout = React.useCallback(function () {
+        if (contentRef.current) {
+          var contentClientRect = contentRef.current.getBoundingClientRect();
+          contentCalculateHeightRef.current = contentClientRect.height;
+        }
+
+        updatePlaceholderLayoutInner();
+      }, []);
       React.useEffect(function () {
         var containerEle = getActualContainer(getContainer);
         containerRef.current = containerEle || document.body;
@@ -5743,18 +5786,15 @@
         };
       }, [getContainer, getScrollContainer, recalculatePosition]);
       React.useEffect(function () {
-        if (placeholderRef.current) {
-          // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
-          // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
-          placeholderRef.current.style.height = (isStickyRef.current ? contentCalculateHeightRef.current : 0) + "px";
-        }
+        updatePlaceholderLayoutInner();
       }, [isSticky, wasSticky]);
       React.useImperativeHandle(ref, function () {
         return {
           dom: contentRef.current,
-          recalculatePosition: recalculatePosition
+          recalculatePosition: recalculatePosition,
+          updatePlaceholderLayout: updatePlaceholderLayout
         };
-      }, [recalculatePosition]);
+      }, [recalculatePosition, updatePlaceholderLayout]);
       var computedStyle = React.useMemo(function () {
         return __assign$2(__assign$2({}, style || {}), stickyStateStyle);
       }, [stickyStateStyle, style]);
@@ -10167,7 +10207,13 @@
       var groupKey = React.useContext(CollapseKeyContext).key;
       var CollapseContext = allContexts[groupKey] || {};
       var groupContext = React.useContext(CollapseContext) || {};
-      var opened = React.useMemo(function () {
+
+      var _l = useSameRefState(false),
+          opened = _l[0],
+          openedRef = _l[1],
+          setOpened = _l[2];
+
+      React.useEffect(function () {
         var show = false; // 优先级： group > children
         // @en Priority: group > children
 
@@ -10181,7 +10227,7 @@
           show = itemActive;
         }
 
-        return show;
+        setOpened(show);
       }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
 
       var getContentHeight = function getContentHeight() {
@@ -10199,8 +10245,8 @@
         contentWrapRef.current.style.height = newHeight;
         var transTimeout = convertCssDuration(contentWrapRef.current, 'transitionDuration');
         setTimeout(function () {
-          return contentWrapRef.current && (contentWrapRef.current.style.height = opened ? 'auto' : '0px');
-        }, opened ? transTimeout : 20);
+          return contentWrapRef.current && (contentWrapRef.current.style.height = openedRef.current ? 'auto' : '0px');
+        }, openedRef.current ? transTimeout : 20);
       };
 
       var toggleOpened = function toggleOpened() {
@@ -10223,10 +10269,10 @@
         }
 
         var height = getContentHeight();
-        contentWrapRef.current.style.height = opened ? contentHeightRef.current + "px" : '0px';
+        contentWrapRef.current.style.height = openedRef.current ? contentHeightRef.current + "px" : '0px';
         nextTick(function () {
           contentHeightRef.current = height;
-          resetHeight(opened ? height + "px" : '0px');
+          resetHeight(openedRef.current ? height + "px" : '0px');
         });
       };
 
@@ -20203,7 +20249,8 @@
         return /*#__PURE__*/React__default["default"].createElement(Carousel, __assign$2({
           autoPlay: false,
           loop: loop,
-          lazyloadCount: lazyloadCount
+          lazyloadCount: lazyloadCount,
+          stopPropagation: false
         }, carouselProps), (allImages || []).map(function (image, index) {
           var innerNode = /*#__PURE__*/React__default["default"].createElement("div", {
             key: index,
@@ -24718,7 +24765,8 @@
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
+        var prefixCls = _a.prefixCls,
+            useRtl = _a.useRtl;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           role: "slider",
           "aria-valuemin": 0,
@@ -24734,6 +24782,7 @@
           // 对内的index从1开始，方便计算
           // @en The index of the pair starts from 1, which is convenient for calculation
           var index = i + 1;
+          var halfIndex = allowHalf ? index - 0.5 : index;
           var status = getIconStatus(index);
           return /*#__PURE__*/React__default["default"].createElement("div", {
             key: index,
@@ -24744,12 +24793,12 @@
           }, renderRateIcon(prefixCls + "-rate", status, index), /*#__PURE__*/React__default["default"].createElement("div", {
             className: prefixCls + "-rate-icon-click-half left",
             onClick: function onClick() {
-              return handleStarIndexChange(allowHalf ? index - 0.5 : index);
+              return handleStarIndexChange(useRtl ? index : halfIndex);
             }
           }), /*#__PURE__*/React__default["default"].createElement("div", {
             className: prefixCls + "-rate-icon-click-half right",
             onClick: function onClick() {
-              return handleStarIndexChange(index);
+              return handleStarIndexChange(useRtl ? halfIndex : index);
             }
           }));
         }));
@@ -27578,6 +27627,7 @@
     });
 
     var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var useRtl = React.useContext(GlobalContext).useRtl;
       var system = useSystem();
       var className = props.className,
           style = props.style,
@@ -27645,13 +27695,15 @@
 
         var touchEndX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
         var distance = touchEndX - touchStartX;
+        var swipeRight = useRtl ? distance < 0 : distance > 0;
+        var swipeLeft = useRtl ? distance > 0 : distance < 0;
         var newChecked = false; // 右滑打开
         // @en Swipe right to open
 
-        if (distance > 0) {
+        if (swipeRight) {
           newChecked = true; // 左滑关闭
           // @en Swipe left to close
-        } else if (distance < 0) {
+        } else if (swipeLeft) {
           newChecked = false; // 点击时取反
           // @en Invert on clicking
         } else {