@arco-design/mobile-react 2.22.0 → 2.22.3

package/cjs/steps/type.d.ts

@@ -20,6 +20,11 @@ export interface StepProps {
      * @en Specify the step status. When this item is not input, the status will be automatically specified according to the current property of steps
      */
     status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值
+     * @en Specify the step alignment. When this item is not input, it will be automatically specified according to the align property of steps
+     */
+    align?: 'center' | 'start';
 }
 export interface StepsProps {
     /**
@@ -38,6 +43,13 @@ export interface StepsProps {
      * @default horizontal
      */
     direction?: 'vertical' | 'horizontal';
+    /**
+     * 步骤条对齐方式
+     * @en Step alignment
+     * @default direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"
+     * @default_en "center" when direction="horizontal" and "start" when direction="vertical"
+     */
+    align?: 'center' | 'start';
     /**
      * 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控
      * @en Specify the current step, counting from 0. In the step children elements, the status can be overwritten through the status, and it is controlled if it is input

package/cjs/tabs/index.js

@@ -193,6 +193,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var touchStoppedRef = (0, _react.useRef)(false);
   var changeFromRef = (0, _react.useRef)('');
   var touchMoveBarScrollRef = (0, _react.useRef)(false);
+  var system = (0, _helpers.useSystem)();
   var allPanes = getAllPanes();
   var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
   var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
@@ -307,10 +308,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     var evt = e.changedTouches[0];
     var touchMoveX = evt.clientX || 0;
-    var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况
+    var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
     // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
 
-    var posDisX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+    var posDisX = system === 'ios' && touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
     var posDisY = touchMoveY - touchStartYRef.current;
     var absDisX = Math.abs(posDisX);
     var absDisY = Math.abs(posDisY);

package/cjs/tabs/style/css/index.css

@@ -386,8 +386,8 @@
 .arco-tab-cell.vertical:not(.custom).line.active.system-android,
 .arco-tab-cell.vertical:not(.custom).line-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card {
   color:  #165dff ;
@@ -401,8 +401,8 @@
 .arco-tab-cell.vertical:not(.custom).card.active.android,
 .arco-tab-cell.vertical:not(.custom).card.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
@@ -444,8 +444,8 @@
 .arco-tab-cell.vertical:not(.custom).tag.active.system-android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.horizontal {
   height:  1.08rem ;
@@ -458,8 +458,8 @@
 .arco-tab-cell.horizontal.active.android,
 .arco-tab-cell.horizontal.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-pane-container.mode-swipe {
   display: -webkit-box;

package/cjs/tabs/style/index.less

@@ -322,7 +322,7 @@
             &.line-divide {
 
                 &.active {
-                    .text-medium-var(tabs-tab-bar-line-active-color);
+                    .text-medium();
                     .use-var(color, tabs-tab-bar-line-active-color);
                 }
             }
@@ -333,7 +333,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-card-color);
                     .use-var(color, tabs-tab-bar-card-text-color);
-                    .text-medium-var(tabs-tab-bar-card-text-color);
+                    .text-medium();
                 }
 
                 &:not(:last-child) {
@@ -374,7 +374,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-tag-active-background);
                     .use-var(color, tabs-tab-bar-tag-active-text-color);
-                    .text-medium-var(tabs-tab-bar-tag-active-text-color);
+                    .text-medium();
                 }
             }
         }
@@ -384,7 +384,7 @@
         .use-var(height, tabs-tab-bar-horizontal-height);
 
         &.active {
-            .text-medium-var(tabs-tab-bar-line-active-color);
+            .text-medium();
             .use-var(color, tabs-tab-bar-line-active-color);
         }
     }

package/dist/index.js

@@ -4222,61 +4222,63 @@
           loop = _d === void 0 ? true : _d,
           _e = props.autoPlay,
           autoPlay = _e === void 0 ? true : _e,
-          _f = props.swipeable,
-          swipeable = _f === void 0 ? true : _f,
-          _g = props.stayDuration,
-          stayDuration = _g === void 0 ? 4000 : _g,
+          _f = props.autoPlayDirection,
+          autoPlayDirection = _f === void 0 ? 'normal' : _f,
+          _g = props.swipeable,
+          swipeable = _g === void 0 ? true : _g,
+          _h = props.stayDuration,
+          stayDuration = _h === void 0 ? 4000 : _h,
           boxWidth = props.boxWidth,
           boxHeight = props.boxHeight,
           baseBoxWidth = props.baseBoxWidth,
           baseBoxHeight = props.baseBoxHeight,
-          _h = props.width,
-          width = _h === void 0 ? 0 : _h,
+          _j = props.width,
+          width = _j === void 0 ? 0 : _j,
           height = props.height,
-          _j = props.initialIndex,
-          initialIndex = _j === void 0 ? 0 : _j,
+          _k = props.initialIndex,
+          initialIndex = _k === void 0 ? 0 : _k,
           renderIndicator = props.renderIndicator,
-          _k = props.indicatorPos,
-          indicatorPos = _k === void 0 ? 'center' : _k,
-          _l = props.indicatorVerticalPos,
-          indicatorVerticalPos = _l === void 0 ? 'left' : _l,
+          _l = props.indicatorPos,
+          indicatorPos = _l === void 0 ? 'center' : _l,
+          _m = props.indicatorVerticalPos,
+          indicatorVerticalPos = _m === void 0 ? 'left' : _m,
           indicatorOutside = props.indicatorOutside,
-          _m = props.showIndicator,
-          showIndicator = _m === void 0 ? true : _m,
-          _o = props.hideSingleIndicator,
-          hideSingleIndicator = _o === void 0 ? true : _o,
-          _p = props.indicatorType,
-          indicatorType = _p === void 0 ? 'square' : _p,
-          _q = props.indicatorClass,
-          indicatorClass = _q === void 0 ? '' : _q,
+          _o = props.showIndicator,
+          showIndicator = _o === void 0 ? true : _o,
+          _p = props.hideSingleIndicator,
+          hideSingleIndicator = _p === void 0 ? true : _p,
+          _q = props.indicatorType,
+          indicatorType = _q === void 0 ? 'square' : _q,
+          _r = props.indicatorClass,
+          indicatorClass = _r === void 0 ? '' : _r,
           indicatorInverse = props.indicatorInverse,
-          _r = props.spaceBetween,
-          spaceBetween = _r === void 0 ? 0 : _r,
-          _s = props.offsetBetween,
-          offsetBetween = _s === void 0 ? 0 : _s,
+          _s = props.spaceBetween,
+          spaceBetween = _s === void 0 ? 0 : _s,
+          _t = props.offsetBetween,
+          offsetBetween = _t === void 0 ? 0 : _t,
           currentIndex = props.currentIndex,
-          _t = props.autoHeight,
-          autoHeight = _t === void 0 ? false : _t,
-          _u = props.percentToChange,
-          percentToChange = _u === void 0 ? 0.3 : _u,
-          _v = props.distanceToChange,
-          distanceToChange = _v === void 0 ? 10 : _v,
-          _w = props.speedToChange,
-          speedToChange = _w === void 0 ? 100 : _w,
+          _u = props.autoHeight,
+          autoHeight = _u === void 0 ? false : _u,
+          _v = props.percentToChange,
+          percentToChange = _v === void 0 ? 0.3 : _v,
+          _w = props.distanceToChange,
+          distanceToChange = _w === void 0 ? 10 : _w,
+          _x = props.speedToChange,
+          speedToChange = _x === void 0 ? 100 : _x,
           vertical = props.vertical,
           lazyloadCount = props.lazyloadCount,
-          _x = props.inactiveScale,
-          inactiveScale = _x === void 0 ? 1 : _x,
-          _y = props.stopPropagation,
-          stopPropagation = _y === void 0 ? true : _y,
-          _z = props.fakeItem,
-          fakeItem = _z === void 0 ? false : _z,
-          _0 = props.allowEndBlank,
-          allowEndBlank = _0 === void 0 ? false : _0,
-          _1 = props.bounceWhenNoLoop,
-          bounceWhenNoLoop = _1 === void 0 ? false : _1,
-          _2 = props.bounceDampRate,
-          bounceDampRate = _2 === void 0 ? 3 : _2,
+          _y = props.inactiveScale,
+          inactiveScale = _y === void 0 ? 1 : _y,
+          _z = props.stopPropagation,
+          stopPropagation = _z === void 0 ? true : _z,
+          _0 = props.fakeItem,
+          fakeItem = _0 === void 0 ? false : _0,
+          _1 = props.allowEndBlank,
+          allowEndBlank = _1 === void 0 ? false : _1,
+          _2 = props.bounceWhenNoLoop,
+          bounceWhenNoLoop = _2 === void 0 ? false : _2,
+          _3 = props.bounceDampRate,
+          bounceDampRate = _3 === void 0 ? 3 : _3,
           distanceProcessor = props.distanceProcessor,
           getInnerScrollContainer = props.getInnerScrollContainer,
           onChange = props.onChange,
@@ -4287,8 +4289,8 @@
           onTransitionStart = props.onTransitionStart,
           onTransitionEnd = props.onTransitionEnd,
           onDistanceChange = props.onDistanceChange,
-          _3 = props.stopTouchThreshold,
-          stopTouchThreshold = _3 === void 0 ? 0 : _3,
+          _4 = props.stopTouchThreshold,
+          stopTouchThreshold = _4 === void 0 ? 0 : _4,
           onTouchStopped = props.onTouchStopped,
           onPageVisibleChange = props.onPageVisibleChange;
       var domRef = React.useRef(null);
@@ -4302,13 +4304,13 @@
       var touchStartedRef = React.useRef(false);
       var touchMovedRef = React.useRef(false);
 
-      var _4 = React.useState(baseBoxWidth || 0),
-          wrapWidth = _4[0],
-          setWrapWidth = _4[1];
+      var _5 = React.useState(baseBoxWidth || 0),
+          wrapWidth = _5[0],
+          setWrapWidth = _5[1];
 
-      var _5 = React.useState(baseBoxHeight || 0),
-          wrapHeight = _5[0],
-          setWrapHeight = _5[1];
+      var _6 = React.useState(baseBoxHeight || 0),
+          wrapHeight = _6[0],
+          setWrapHeight = _6[1];
 
       var touchStartXRef = React.useRef(0);
       var touchStartYRef = React.useRef(0);
@@ -4316,45 +4318,45 @@
       var touchStoppedRef = React.useRef(false);
       var bouncingRef = React.useRef(false);
 
-      var _6 = React.useState('auto'),
-          currentItemHeight = _6[0],
-          setCurrentItemHeight = _6[1];
+      var _7 = React.useState('auto'),
+          currentItemHeight = _7[0],
+          setCurrentItemHeight = _7[1];
 
-      var _7 = useRefState(false),
-          posAdjusting = _7[0],
-          posAdjustingRef = _7[1],
-          setPosAdjusting = _7[2];
+      var _8 = useRefState(false),
+          posAdjusting = _8[0],
+          posAdjustingRef = _8[1],
+          setPosAdjusting = _8[2];
 
-      var _8 = useRefState(0),
-          distance = _8[0],
-          distanceRef = _8[1],
-          setDistance = _8[2];
+      var _9 = useRefState(0),
+          distance = _9[0],
+          distanceRef = _9[1],
+          setDistance = _9[2];
 
-      var _9 = React.useState(true),
-          isAutoJump = _9[0],
-          setIsAutoJump = _9[1];
+      var _10 = React.useState(true),
+          isAutoJump = _10[0],
+          setIsAutoJump = _10[1];
 
-      var _10 = useRefState(currentIndex !== void 0 ? currentIndex : initialIndex),
-          index = _10[0],
-          indexRef = _10[1],
-          setIndex = _10[2];
+      var _11 = useRefState(currentIndex !== void 0 ? currentIndex : initialIndex),
+          index = _11[0],
+          indexRef = _11[1],
+          setIndex = _11[2];
 
-      var _11 = useRefState([]),
-          transforms = _11[0],
-          transformsRef = _11[1],
-          setTransforms = _11[2];
+      var _12 = useRefState([]),
+          transforms = _12[0],
+          transformsRef = _12[1],
+          setTransforms = _12[2];
 
-      var _12 = useRefState('left'),
-          direction = _12[0],
-          directionRef = _12[1],
-          setStateDirection = _12[2];
+      var _13 = useRefState(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
+          direction = _13[0],
+          directionRef = _13[1],
+          setStateDirection = _13[2];
 
       var lastDirectionRef = React.useRef('');
       var lastShownIndexRef = React.useRef(-1);
 
-      var _13 = getAllChildren(),
-          allChildren = _13.allChildren,
-          fakeTwoChildren = _13.fakeTwoChildren;
+      var _14 = getAllChildren(),
+          allChildren = _14.allChildren,
+          fakeTwoChildren = _14.fakeTwoChildren;
 
       var total = allChildren.length;
       var shownTotal = fakeTwoChildren ? 2 : total;
@@ -4386,9 +4388,9 @@
         return Math.max(0, Math.min(inactiveScale, 1));
       }, [inactiveScale]);
 
-      var _14 = React.useState([]),
-          fakeIndexes = _14[0],
-          setFakeIndexes = _14[1];
+      var _15 = React.useState([]),
+          fakeIndexes = _15[0],
+          setFakeIndexes = _15[1];
 
       var system = useSystem(); // 开启自动循环时iOS会有渲染问题需要强刷dom，但不需要autoPlay的不用强刷，这里判断下
       // @en When the automatic loop is turned on, there will be rendering problems in iOS. Need to brush the dom, but if you don't need autoPlay, don't need to brush.
@@ -4581,7 +4583,7 @@
         return function () {
           clear();
         };
-      }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+      }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
       useUpdateEffect(function () {
         if (currentIndex !== void 0) {
           jumpTo(currentIndex);
@@ -4721,7 +4723,7 @@
         var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
 
         if (autoJump) {
-          setDirection('left');
+          setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
         } else if (newIndex === indexRef.current) {
           setDirection(distanceRef.current > 0 ? 'right' : 'left');
         } else {
@@ -4775,7 +4777,7 @@
         }
 
         timerRef.current = delayTimeout(function () {
-          jumpTo(indexRef.current + 1);
+          jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
         }, stayDuration);
       }
 
@@ -8061,6 +8063,7 @@
       var touchStoppedRef = React.useRef(false);
       var changeFromRef = React.useRef('');
       var touchMoveBarScrollRef = React.useRef(false);
+      var system = useSystem();
       var allPanes = getAllPanes();
       var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
       var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
@@ -8173,10 +8176,10 @@
 
         var evt = e.changedTouches[0];
         var touchMoveX = evt.clientX || 0;
-        var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况
+        var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
         // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
 
-        var posDisX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+        var posDisX = system === 'ios' && touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
         var posDisY = touchMoveY - touchStartYRef.current;
         var absDisX = Math.abs(posDisX);
         var absDisY = Math.abs(posDisY);
@@ -20831,6 +20834,7 @@
 
       var animationRef = React.useRef(0);
       var className = props.className,
+          style = props.style,
           children = props.children,
           _d = props.loadingText,
           loadingText = _d === void 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21006,9 +21010,9 @@
           'is-disabled': disabled || !touching && useHideAsNestedScroll
         }),
         ref: domRef,
-        style: contentHeight > 0 ? {
+        style: contentHeight > 0 ? __assign({
           height: contentHeight
-        } : {}
+        }, style || {}) : style
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-pull-refresh-content-wrapper")
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21038,6 +21042,7 @@
           locale = _c === void 0 ? defaultLocale : _c;
 
       var className = props.className,
+          style = props.style,
           children = props.children,
           _d = props.loosingText,
           loosingText = _d === void 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21272,6 +21277,7 @@
         className: cls(prefixCls + "-pull-refresh all-border-box is-android", className, {
           'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== PullRefreshStatus.Loading
         }),
+        style: style,
         ref: domRef
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-pull-refresh-place"),
@@ -22741,9 +22747,11 @@
           _b = _a.index,
           index = _b === void 0 ? 0 : _b,
           contextStatus = _a.status,
+          contextAlign = _a.align,
           changeIndex = _a.changeIndex;
 
       var status = props.status || contextStatus;
+      var align = props.align || contextAlign;
       var domRef = React.useRef(null);
       React.useImperativeHandle(ref, function () {
         return {
@@ -22782,12 +22790,12 @@
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: domRef,
-          className: cls(prefixCls + "-steps-item", currentStatus, direction, iconType),
+          className: cls(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
           onClick: function onClick() {
             return changeIndex(index);
           }
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+          className: cls(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
         }), icon ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
         }, icon) : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22795,7 +22803,7 @@
         }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/React__default["default"].createElement("span", {
           className: cls(prefixCls + "-steps-item-icon-dot")
         })), title || description ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-steps-item-content")
+          className: cls(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
         }, title ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
         }, title) : null, description ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22814,6 +22822,7 @@
           children = props.children,
           _b = props.direction,
           direction = _b === void 0 ? 'horizontal' : _b,
+          userSetAlign = props.align,
           _c = props.iconType,
           iconType = _c === void 0 ? 'number' : _c,
           current = props.current,
@@ -22824,6 +22833,8 @@
           items = props.items,
           onClick = props.onClick,
           onChange = props.onChange;
+      var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+      var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
       var _f = React.useState(Number(defaultIndex)),
           innerIndex = _f[0],
@@ -22859,11 +22870,12 @@
             direction: direction,
             index: index,
             status: activeIndex === index ? status : void 0,
+            align: align,
             changeIndex: changeIndex
           },
           key: index
         }, child);
-      }, [iconType, activeIndex, direction]);
+      }, [iconType, activeIndex, direction, align]);
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {