@arco-design/mobile-react 2.27.4 → 2.28.0

package/esm/style.js

@@ -1,35 +1,32 @@
 import '../style/public.less';
-import './button/style';
+import './tabs/style';
+import './sticky/style';
+import './load-more/style';
+import './cell/style';
 import './action-sheet/style';
 import './avatar/style';
 import './badge/style';
+import './button/style';
 import './carousel/style';
-import './cell/style';
 import './checkbox/style';
 import './circle-progress/style';
 import './collapse/style';
 import './context-provider/style';
 import './count-down/style';
 import './date-picker/style';
-import './divider/style';
 import './dialog/style';
+import './divider/style';
 import './dropdown/style';
 import './dropdown-menu/style';
 import './ellipsis/style';
 import './form/style';
-import './input/style';
-import './textarea/style';
-import './radio/style';
-import './image-picker/style';
-import './rate/style';
-import './slider/style';
 import './grid/style';
 import './image/style';
-import './show-monitor/style';
+import './image-picker/style';
 import './image-preview/style';
 import './index-bar/style';
+import './input/style';
 import './keyboard/style';
-import './load-more/style';
 import './loading/style';
 import './masking/style';
 import './nav-bar/style';
@@ -44,15 +41,18 @@ import './popup-swiper/style';
 import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
+import './radio/style';
+import './rate/style';
 import './search-bar/style';
+import './show-monitor/style';
+import './slider/style';
 import './stepper/style';
 import './steps/style';
-import './sticky/style';
 import './swipe-action/style';
 import './swipe-load/style';
 import './switch/style';
 import './tab-bar/style';
-import './tabs/style';
 import './tag/style';
+import './textarea/style';
 import './toast/style';
 import './transition/style';

package/esm/switch/index.js

@@ -1,8 +1,11 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useContext } from 'react';
 import { cls, componentWrapper } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, GlobalContext } from '../context-provider';
 import { useSystem } from '../_helpers';
 var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var system = useSystem();
   var className = props.className,
       style = props.style,
@@ -70,13 +73,15 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
 
     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 {

package/esm/switch/style/css/index.css

@@ -44,15 +44,31 @@
   right: auto;
   left:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  left: initial;
+  right:  5PX ;
+}
 .arco-switch.type-android.checked .arco-switch-inner {
   -webkit-transform:  translateX(16PX) ;
           transform:  translateX(16PX) ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
+  -webkit-transform: rotate(180deg) translateX(16PX) ;
+          transform: rotate(180deg) translateX(16PX) ;
+}
 .arco-switch.type-android .arco-switch-inner {
   width:  20PX ;
   height:  20PX ;
   box-shadow:  0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-inner {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .arco-switch.type-android.disabled.checked {
   background-color:  #94bfff ;
 }
@@ -63,6 +79,10 @@
   font-size:  12PX ;
   right:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-text {
+  right: initial;
+  left:  5PX ;
+}
 .arco-switch.type-ios {
   width:  1.02rem ;
   height:  0.62rem ;
@@ -83,11 +103,23 @@
   right: auto;
   left:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  left: initial;
+  right:  0.12rem ;
+}
 .arco-switch.type-ios.checked .arco-switch-inner {
   -webkit-transform:  translateX(0.4rem) ;
           transform:  translateX(0.4rem) ;
   box-shadow:  0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
+  -webkit-transform: rotate(180deg) translateX(0.4rem) ;
+          transform: rotate(180deg) translateX(0.4rem) ;
+}
 .arco-switch.type-ios.disabled.checked {
   opacity:  0.3 ;
 }
@@ -95,6 +127,10 @@
   font-size:  0.28rem ;
   right:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-text {
+  right: initial;
+  left:  0.12rem ;
+}
 .arco-switch.type-ios .arco-switch-inner {
   width:  0.54rem ;
   height:  0.54rem ;
@@ -136,6 +172,10 @@
     border-radius: 150%;
   }
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .arco-switch.type-ios.disabled.checked {
   background-color:  #4DD865 ;
 }
@@ -169,6 +209,10 @@
   -webkit-transition:  all 0.2s ;
   transition:  all 0.2s ;
 }
+[dir="rtl"] .arco-switch-inner {
+  left: initial;
+  right: 0;
+}
 .fully .arco-switch-inner {
   border-radius:  50% ;
 }

package/esm/switch/style/index.less

@@ -33,17 +33,23 @@
         &.checked {
             .use-var(background-color, switch-android-checked-background);
             .@{prefix}-switch-text {
-                right: auto;
-                .use-var(left, switch-android-text-gap-size);
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-android-text-gap-size);
             }
             .@{prefix}-switch-inner {
                 .use-var(transform, switch-android-checked-inner-transform);
+                [dir="rtl"] & {
+                    .use-var(transform, switch-android-checked-inner-transform, "rotate(180deg)");
+                }
             }
         }
         .@{prefix}-switch-inner {
             .use-var(width, switch-android-inner-diameter-size);
             .use-var(height, switch-android-inner-diameter-size);
             .use-var(box-shadow, switch-android-inner-box-shadow);
+            [dir="rtl"] & {
+                transform: rotate(180deg);
+            }
         }
 
         &.disabled {
@@ -58,7 +64,7 @@
         }
         .@{prefix}-switch-text {
             .use-var(font-size, switch-android-text-font-size);
-            .use-var(right, switch-android-text-gap-size);
+            .use-var-with-rtl(right, switch-android-text-gap-size);
         }
     }
 
@@ -80,12 +86,15 @@
         &.checked {
             .use-var(background-color, switch-ios-checked-background);
             .@{prefix}-switch-text {
-                right: auto;
-                .use-var(left, switch-ios-text-gap-size);
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-ios-text-gap-size);
             }
             .@{prefix}-switch-inner {
                 .use-var(transform, switch-ios-checked-inner-transform);
                 .use-var(box-shadow, switch-ios-inner-box-shadow);
+                [dir="rtl"] & {
+                    .use-var(transform, switch-ios-checked-inner-transform, "rotate(180deg)");
+                }
             }
         }
 
@@ -94,12 +103,15 @@
         }
         .@{prefix}-switch-text {
             .use-var(font-size, switch-ios-text-font-size);
-            .use-var(right, switch-ios-text-gap-size);
+            .use-var-with-rtl(right, switch-ios-text-gap-size);
         }
         .@{prefix}-switch-inner {
             .use-var(width, switch-ios-inner-diameter-size);
             .use-var(height, switch-ios-inner-diameter-size);
             .onepx-border-var(all, switch-ios-inner-border-color, 50%);
+            [dir="rtl"] & {
+                transform: rotate(180deg);
+            }
         }
 
         &.disabled {
@@ -127,7 +139,7 @@
 
     &-inner {
         position: relative;
-        left: 0;
+        .set-prop-with-rtl(left, 0);
         top: 0;
         display: flex;
         align-items: center;

package/esm/tabs/demo/style/css/mobile.css

@@ -43,6 +43,17 @@
           justify-content: flex-end;
   font-weight: bold;
 }
+[dir="rtl"] #demo-tabs .demo-tabs-add-extra {
+  right: initial;
+  left: 0;
+}
+[dir="rtl"] #demo-tabs .demo-tabs-add-extra {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+          justify-content: flex-start;
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 #demo-tabs .demo-tab-custom-bar .arco-tab-cell-container-wrap {
   height: 1.52rem;
 }

package/esm/tabs/demo/style/mobile.less

@@ -24,7 +24,7 @@
 
     .demo-tabs-add-extra {
         position: absolute;
-        right: 0;
+        .set-prop-with-rtl(right, 0);
         top: 0;
         background: linear-gradient(270deg, #fff 66.04%, rgba(255, 255, 255, 0) 105%);
         .rem(width, 64);
@@ -36,6 +36,10 @@
         align-items: center;
         justify-content: flex-end;
         font-weight: bold;
+        [dir="rtl"] & {
+            justify-content: flex-start;
+            transform: rotate(180deg);
+        }
     }
 
     .demo-tab-custom-bar {

package/esm/tabs/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback, useContext } from 'react';
 import { cls, nextTick } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, GlobalContext } from '../context-provider';
 import TabCell from './tab-cell';
 import TabPane from './tab-pane';
 import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll, useSystem } from '../_helpers';
@@ -124,6 +124,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
       _props$swipeEnergySav = props.swipeEnergySaving,
       swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
+
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var domRef = useRef(null);
   var cellRef = useRef(null);
   var paneRef = useRef(null);
@@ -175,6 +179,8 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   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;
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -294,6 +300,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     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;
@@ -311,10 +318,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       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);
@@ -364,10 +371,11 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     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;
     }
 
@@ -511,7 +519,8 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       tabPaneExtra: tabPaneExtra,
       autoHeight: autoHeight,
       onScroll: onScroll,
-      swipeEnergySaving: swipeEnergySaving
+      swipeEnergySaving: swipeEnergySaving,
+      rtlRatio: rtlRatio
     }, commonProps)));
   });
 });

package/esm/tabs/style/css/index.css

@@ -368,11 +368,12 @@
   -webkit-flex: 1;
           flex: 1;
 }
-.arco-tab-cell.vertical:not(.custom).line {
+.arco-tab-cell.vertical:not(.custom).line:not(.last) {
   margin-right:  0.8rem ;
 }
-.arco-tab-cell.vertical:not(.custom).line.last {
-  margin-right: 0;
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
+  margin-right: initial;
+  margin-left:  0.8rem ;
 }
 .arco-tab-cell.vertical:not(.custom).line.active,
 .arco-tab-cell.vertical:not(.custom).line-divide.active {
@@ -407,29 +408,53 @@
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
+  border-right: initial;
+  border-left: 1PX solid #165dff ;
+}
 .arco-tab-cell.vertical:not(.custom).card:first-of-type {
   border-top-left-radius:  2PX ;
   border-bottom-left-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-top-left-radius: initial;
+  border-top-right-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-bottom-left-radius: initial;
+  border-bottom-right-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card:last-of-type {
   border-top-right-radius:  2PX ;
   border-bottom-right-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-top-right-radius: initial;
+  border-top-left-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-bottom-right-radius: initial;
+  border-bottom-left-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card.android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.android {
   padding-top: 0.04rem;
 }
 .arco-tab-cell.vertical:not(.custom).tag,
 .arco-tab-cell.vertical:not(.custom).tag-divide {
-  margin-right:  0.32rem ;
   padding:  0 0.32rem ;
   border-radius: 2rem;
   background:  #f7f8fA ;
   color:  #1d2129 ;
 }
-.arco-tab-cell.vertical:not(.custom).tag.last,
-.arco-tab-cell.vertical:not(.custom).tag-divide.last {
-  margin-right: 0;
+.arco-tab-cell.vertical:not(.custom).tag:not(.last),
+.arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right:  0.32rem ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right: initial;
+  margin-left:  0.32rem ;
 }
 .arco-tab-cell.vertical:not(.custom).tag.active,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active {

package/esm/tabs/style/index.less

@@ -310,12 +310,8 @@
 
         &:not(.custom) {
 
-            &.line {
-                .use-var(margin-right, tabs-tab-bar-line-gutter);
-
-                &.last {
-                    margin-right: 0;
-                }
+            &.line:not(.last) {
+                .use-var-with-rtl(margin-right, tabs-tab-bar-line-gutter);
             }
 
             &.line,
@@ -337,17 +333,17 @@
                 }
 
                 &:not(:last-child) {
-                    .use-var(border-right, tabs-tab-bar-card-color, 1PX solid);
+                    .use-var-with-rtl(border-right, tabs-tab-bar-card-color, 1PX solid);
                 }
 
                 &:first-of-type {
-                    .use-var(border-top-left-radius, tabs-tab-bar-card-border-radius);
-                    .use-var(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-top-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
                 }
 
                 &:last-of-type {
-                    .use-var(border-top-right-radius, tabs-tab-bar-card-border-radius);
-                    .use-var(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-top-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
                 }
             }
 
@@ -361,14 +357,13 @@
 
             &.tag,
             &.tag-divide {
-                .use-var(margin-right, tabs-tab-bar-tag-gutter);
                 .use-var(padding, tabs-tab-bar-tag-padding);
                 .rem(border-radius, 100);
                 .use-var(background, tabs-tab-bar-tag-background);
                 .use-var(color, tabs-tab-bar-tag-text-color);
 
-                &.last {
-                    margin-right: 0;
+                &:not(.last) {
+                    .use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
                 }
 
                 &.active {

package/esm/tabs/tab-cell-underline.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { addCssKeyframes, cls, nextTick, removeCssStyleDom } from '@arco-design/mobile-utils';
 import { getStyleWithVendor, useRefState, useSystem } from '../_helpers';
+import { GlobalContext } from '../context-provider';
 var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
   var prefix = props.prefix,
       useCaterpillar = props.useCaterpillar,
@@ -25,6 +26,9 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
       getTabRect = props.getTabRect,
       getTabCenterLeft = props.getTabCenterLeft;
 
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var _useState = useState({}),
       underlineStyle = _useState[0],
       setUnderlineStyle = _useState[1];
@@ -44,6 +48,7 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
   var isVertical = tabDirection === 'vertical';
   var maxScaleWithDefault = caterpillarMaxScale || 2;
   var translateZStr = translateZ ? ' translateZ(0)' : '';
+  var rtlRatio = isVertical && useRtl ? -1 : 1;
   useImperativeHandle(ref, function () {
     return {
       setCaterpillarAnimate: setCaterpillarAnimate,
@@ -115,11 +120,13 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function getDescIndex() {
-    if (distance > 0) {
+    var comparedDis = distance * rtlRatio;
+
+    if (comparedDis > 0) {
       return activeIndex - 1;
     }
 
-    if (distance < 0) {
+    if (comparedDis < 0) {
       return activeIndex + 1;
     }
 
@@ -141,7 +148,8 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
     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' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
@@ -156,7 +164,7 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
       var currentWidth = getLineWidth(activeIndex);
       var descWidth = getLineWidth(descIndex);
       var widthOffset = moveRatio * (currentWidth - descWidth);
-      adaptiveStyle = (_adaptiveStyle = {}, _adaptiveStyle[isVertical ? 'width' : 'height'] = distance > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _adaptiveStyle.willChange = 'width', _adaptiveStyle);
+      adaptiveStyle = (_adaptiveStyle = {}, _adaptiveStyle[isVertical ? 'width' : 'height'] = comparedDis > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _adaptiveStyle.willChange = 'width', _adaptiveStyle);
       adaptiveOuterStyle = isVertical ? {
         width: 'auto'
       } : {
@@ -173,7 +181,7 @@ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     return {
       outer: _extends({
-        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: _extends({}, transStyle, adaptiveStyle)
     };

package/esm/tabs/tab-cell.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext } from 'react';
 import { cls, scrollWithAnimation, nextTick } from '@arco-design/mobile-utils';
 import { useSystem } from '../_helpers';
 import TabCellUnderline from './tab-cell-underline';
+import { GlobalContext } from '../context-provider';
 var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var tabs = props.tabs,
       prefixCls = props.prefixCls,
@@ -52,6 +53,10 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
       translateZ = props.translateZ,
       tabBarStopPropagation = props.tabBarStopPropagation;
   var prefix = prefixCls + "-tab-cell";
+
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var domRef = useRef(null);
   var underlineRef = useRef(null);
   var allCellRectRef = useRef([]);
@@ -246,20 +251,22 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function getCellStyle(index) {
+    var _ref2;
+
     if (!isVertical) {
       return {};
     }
 
+    var marginStart = useRtl ? 'marginRight' : 'marginLeft';
+    var marginEnd = useRtl ? 'marginLeft' : 'marginRight';
+
     if (index === 0) {
-      return {
-        marginRight: cellGutter,
-        marginLeft: getCellPadding('left')
-      };
+      var _ref;
+
+      return _ref = {}, _ref[marginEnd] = cellGutter, _ref[marginStart] = getCellPadding('left'), _ref;
     }
 
-    return {
-      marginRight: index === tabs.length - 1 ? void 0 : cellGutter
-    };
+    return _ref2 = {}, _ref2[marginEnd] = index === tabs.length - 1 ? void 0 : cellGutter, _ref2;
   }
 
   function renderBarItem(tab, index) {

package/esm/tabs/tab-pane.js

@@ -36,7 +36,8 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       autoHeight = props.autoHeight,
       swipeEnergySaving = props.swipeEnergySaving,
       changeIndex = props.changeIndex,
-      onScroll = props.onScroll;
+      onScroll = props.onScroll,
+      rtlRatio = props.rtlRatio;
   var domRef = useRef(null);
   var panesRef = useRef([]);
   var autoScrollingRef = useRef(false);
@@ -235,7 +236,7 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
     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
@@ -263,7 +264,7 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
 
     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
     };

package/esm/tabs/type.d.ts

@@ -579,6 +579,7 @@ export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDu
     paneTrans: boolean;
     swipeable: boolean;
     changeIndex: (newIndex: number, from?: string) => void;
+    rtlRatio: number;
 }
 export interface TabPaneRef {
     /**