@arco-design/mobile-react 2.27.4 → 2.28.0

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

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers", "../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"), require("../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers, global.contextProvider);
     global.tabCellUnderline = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers, _contextProvider) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -47,6 +47,9 @@
         getTabRect = props.getTabRect,
         getTabCenterLeft = props.getTabCenterLeft;
 
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
     var _useState = (0, _react.useState)({}),
         underlineStyle = _useState[0],
         setUnderlineStyle = _useState[1];
@@ -66,6 +69,7 @@
     var isVertical = tabDirection === 'vertical';
     var maxScaleWithDefault = caterpillarMaxScale || 2;
     var translateZStr = translateZ ? ' translateZ(0)' : '';
+    var rtlRatio = isVertical && useRtl ? -1 : 1;
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         setCaterpillarAnimate: setCaterpillarAnimate,
@@ -137,11 +141,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;
       }
 
@@ -163,7 +169,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' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
@@ -178,7 +185,7 @@
         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'
         } : {
@@ -195,7 +202,7 @@
       };
       return {
         outer: (0, _extends2.default)({
-          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: (0, _extends2.default)({}, transStyle, adaptiveStyle)
       };

package/umd/tabs/tab-cell.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers", "./tab-cell-underline"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers", "./tab-cell-underline", "../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"), require("./tab-cell-underline"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"), require("./tab-cell-underline"), require("../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers, global.tabCellUnderline);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers, global.tabCellUnderline, global.contextProvider);
     global.tabCell = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers, _tabCellUnderline) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers, _tabCellUnderline, _contextProvider) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -74,6 +74,10 @@
         translateZ = props.translateZ,
         tabBarStopPropagation = props.tabBarStopPropagation;
     var prefix = prefixCls + "-tab-cell";
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
     var domRef = (0, _react.useRef)(null);
     var underlineRef = (0, _react.useRef)(null);
     var allCellRectRef = (0, _react.useRef)([]);
@@ -268,20 +272,22 @@
     }
 
     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/umd/tabs/tab-pane.js

@@ -58,7 +58,8 @@
         autoHeight = props.autoHeight,
         swipeEnergySaving = props.swipeEnergySaving,
         changeIndex = props.changeIndex,
-        onScroll = props.onScroll;
+        onScroll = props.onScroll,
+        rtlRatio = props.rtlRatio;
     var domRef = (0, _react.useRef)(null);
     var panesRef = (0, _react.useRef)([]);
     var autoScrollingRef = (0, _react.useRef)(false);
@@ -257,7 +258,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
@@ -285,7 +286,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
       };

package/umd/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 {
     /**

package/umd/toast/index.d.ts

@@ -185,8 +185,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -196,8 +196,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -207,8 +207,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -218,8 +218,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -229,8 +229,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -240,8 +240,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };

package/umd/toast/index.js

@@ -68,6 +68,7 @@
         initialBodyOverflow = props.initialBodyOverflow;
     var closeTimerRef = (0, _react.useRef)();
     var domRef = (0, _react.useRef)(null);
+    var wrapDomRef = (0, _react.useRef)(null);
     var isInitialMount = (0, _react.useRef)(false);
     var hasType = type && type !== 'info';
     (0, _react.useImperativeHandle)(ref, function () {
@@ -136,7 +137,8 @@
         className: (0, _mobileUtils.cls)(prefixClass + "-wrapper", "from-" + direction, {
           'no-event': !disableBodyTouch
         }),
-        onClick: handleClickMask
+        onClick: handleClickMask,
+        ref: wrapDomRef
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixClass + "-inner", layout, (_cls = {}, _cls[prefixClass + "-inner-mixin"] = (loading || hasType || icon) && layout === 'vertical', _cls))
       }, loading && /*#__PURE__*/_react.default.createElement("div", {
@@ -163,7 +165,8 @@
       }, /*#__PURE__*/_react.default.createElement(_transition.default, {
         in: visible,
         timeout: transitionDuration,
-        type: "fade"
+        type: "fade",
+        nodeRef: wrapDomRef
       }, renderComponent(prefixCls + "-toast"))));
     });
   });