@arco-design/mobile-react 2.32.0 → 2.33.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.33.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.32.0...@arco-design/mobile-react@2.33.0) (2024-10-24)
+
+
+### Bug Fixes
+
+* fix carousel scrolling bug when trigger click ([8b62ee3](https://github.com/arco-design/arco-design-mobile/commit/8b62ee3dfe489fc1890f099cc26c527d94f4ddbd))
+
+
+### Features
+
+* `Steps` support reverse order ([#287](https://github.com/arco-design/arco-design-mobile/issues/287)) ([8ed5614](https://github.com/arco-design/arco-design-mobile/commit/8ed5614d385d20bfb5fa1ada83d7f56e9f1c5150))
+* add custom class support to `Avatar` component ([#285](https://github.com/arco-design/arco-design-mobile/issues/285)) ([8a37b7c](https://github.com/arco-design/arco-design-mobile/commit/8a37b7cbd05bacb457a3c2692a66a6a02cd7646f))
+
+
+
+
+
 # [2.32.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.31.6...@arco-design/mobile-react@2.32.0) (2024-08-16)
 
 

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.31.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.31.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.32.0/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.31.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.31.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.32.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/avatar/index.js

@@ -59,6 +59,8 @@ function componentGenerator(Comp) {
         textAvatar = _props$textAvatar === void 0 ? '' : _props$textAvatar,
         _props$avatarStyle = props.avatarStyle,
         avatarStyle = _props$avatarStyle === void 0 ? {} : _props$avatarStyle,
+        _props$avatarClass = props.avatarClass,
+        avatarClass = _props$avatarClass === void 0 ? '' : _props$avatarClass,
         _props$autoFixFontSiz = props.autoFixFontSize,
         autoFixFontSize = _props$autoFixFontSiz === void 0 ? true : _props$autoFixFontSiz,
         _props$autoFixFontOff = props.autoFixFontOffset,
@@ -140,7 +142,7 @@ function componentGenerator(Comp) {
       className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_cls = {}, _cls[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _cls)),
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
+      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", avatarClass, prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
       style: avatarStyle,
       ref: avatarRef
     }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {

package/cjs/avatar/type.d.ts

@@ -42,6 +42,12 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * @default {}
      */
     avatarStyle?: React.CSSProperties;
+    /**
+     * 头像元素的自定义类名
+     * @en Custom classname for avatar element
+     * @default ""
+     */
+    avatarClass?: string;
     /**
      * 是否自动根据头像尺寸调整字体大小
      * @en Whether to automatically adjust the font size according to the avatar size

package/cjs/carousel/index.js

@@ -243,6 +243,12 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     if (posAdjustingRef.current) {
       return;
+    } // touchMove触发时，阻止handleTouchStart多次执行（如点击事件）
+    // @en When touchMove is triggered, prevent handleTouchStart from executing multiple times (such as click events)
+
+
+    if (touchStartedRef.current && touchMovedRef.current) {
+      return;
     }
 
     touchStartedRef.current = true;
@@ -699,12 +705,23 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return;
     }
 
-    if (!touchStartedRef.current || !touchMovedRef.current || posAdjustingRef.current || touchStoppedRef.current) {
+    if (!touchStartedRef.current) {
       return;
     }
 
     touchStartedRef.current = false;
+
+    if (!touchMovedRef.current) {
+      setPlayIntervalRef.current();
+      return;
+    }
+
     touchMovedRef.current = false;
+
+    if (posAdjustingRef.current || touchStoppedRef.current) {
+      return;
+    }
+
     var touchEndTime = new Date().getTime();
     var dis = Math.abs(distance);
     var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;

package/cjs/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current" | "reverseOrder"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/cjs/steps/index.js

@@ -53,6 +53,8 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$status = props.status,
       status = _props$status === void 0 ? 'process' : _props$status,
       items = props.items,
+      _props$reverseOrder = props.reverseOrder,
+      reverseOrder = _props$reverseOrder === void 0 ? false : _props$reverseOrder,
       onClick = props.onClick,
       onChange = props.onChange;
   var defaultAlign = direction === 'vertical' ? 'start' : 'center';
@@ -93,6 +95,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         index: index,
         status: activeIndex === index ? status : void 0,
         align: align,
+        reverseOrder: reverseOrder,
         changeIndex: changeIndex
       },
       key: index
@@ -101,7 +104,9 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixCls + "-steps all-border-box " + className + " " + direction + " " + system,
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps all-border-box " + className + " " + direction + " " + system, {
+        'reverse-order': reverseOrder
+      }),
       style: style,
       ref: domRef
     }, items ? items.map(function (item, index) {

package/cjs/steps/style/css/index.css

@@ -516,6 +516,12 @@
   display: flex;
   padding:  0.32rem 0 ;
 }
+.arco-steps.reverse-order {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+}
 .arco-steps-item {
   position: relative;
   display: -webkit-box;
@@ -548,6 +554,14 @@
 .arco-steps-item:last-child .arco-steps-item-tail::after {
   visibility: hidden;
 }
+.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::after,
+.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::before {
+  visibility: hidden;
+}
+.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::before,
+.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::after {
+  visibility: visible;
+}
 .arco-steps-item-tail {
   position: absolute;
   display: -webkit-box;
@@ -577,13 +591,13 @@
   right:  9PX ;
 }
 .horizontal .arco-steps-item-tail-align-start::after {
-  content: "";
+  content: '';
   width: 100%;
   border-radius:  2PX ;
 }
 .horizontal .arco-steps-item-tail-align-center::before,
 .horizontal .arco-steps-item-tail-align-center::after {
-  content: "";
+  content: '';
   width: 50%;
 }
 .horizontal .arco-steps-item-tail-align-center::before {
@@ -637,13 +651,13 @@
   padding:  14PX 0 ;
 }
 .vertical .arco-steps-item-tail-align-start::after {
-  content: "";
+  content: '';
   height: 100%;
   border-radius:  2PX ;
 }
 .vertical .arco-steps-item-tail-align-center::before,
 .vertical .arco-steps-item-tail-align-center::after {
-  content: "";
+  content: '';
   height: 50%;
 }
 .vertical .arco-steps-item-tail-align-center::before {
@@ -667,6 +681,15 @@
 .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #165DFF ;
 }
+.reverse-order .arco-steps-item-tail-status-finish::before,
+.reverse-order .arco-steps-item-tail-status-process::after,
+.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::after {
+  background:  #165DFF ;
+}
+.reverse-order .arco-steps-item-tail-status-process::before,
+.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
+  background:  #e5e6eb ;
+}
 .arco-steps-item-custom-icon,
 .arco-steps-item-icon {
   display: -webkit-inline-box;
@@ -796,6 +819,12 @@
   padding-bottom:  0 ;
   padding-left:  0.4rem ;
 }
+.arco-steps.vertical.reverse-order {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 [dir="rtl"] .arco-steps.vertical {
   padding-left: initial;
   padding-right:  0.4rem ;
@@ -823,6 +852,15 @@
 .arco-theme-dark .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #3C7EFF ;
 }
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-finish::before,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-process::after,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::after {
+  background:  #3C7EFF ;
+}
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-process::before,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
+  background:  #484849 ;
+}
 .arco-theme-dark .number.finish .arco-steps-item-icon {
   background:  #000D4D ;
 }

package/cjs/steps/style/index.less

@@ -1,9 +1,13 @@
-@import "../../../style/mixin.less";
+@import '../../../style/mixin.less';
 
 .@{prefix}-steps {
     display: flex;
     .use-var(padding, steps-padding);
 
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
     &-item {
         position: relative;
         display: flex;
@@ -30,6 +34,20 @@
             visibility: hidden;
         }
 
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
         &-tail {
             position: absolute;
             display: flex;
@@ -50,7 +68,7 @@
                     .use-var(padding, steps-tail-horizontal-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         width: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -59,7 +77,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         width: 50%;
                     }
                     &::before {
@@ -90,7 +108,7 @@
                     .use-var(padding, steps-tail-vertical-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         height: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -99,7 +117,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         height: 50%;
                     }
                     &::before {
@@ -127,6 +145,20 @@
             &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
         }
 
         &-custom-icon,
@@ -206,7 +238,6 @@
         }
 
         &-content {
-
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
                 &-align-center {
@@ -262,6 +293,10 @@
     }
 
     &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
         flex-direction: column;
         .use-var(padding-bottom, steps-vertical-padding-bottom);
         .use-var-with-rtl(padding-left, steps-vertical-padding-left);
@@ -307,6 +342,23 @@
             .use-var(background, dark-steps-tail-finish-background);
           }
         }
+        &-status-finish::before,
+        &-status-process::after,
+        &-align-center&-status-error::after {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-finish-background);
+            }
+          }
+        }
+        &-status-process::before,
+        &-align-center&-status-error::before {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-standard-background);
+            }
+          }
+        }
       }
       &-icon {
         .number.finish & {

package/cjs/steps/type.d.ts

@@ -32,6 +32,11 @@ export interface StepsProps {
      * @en Custom classname
      */
     className?: string;
+    /**
+     *  顺序反转，设置为true后，顺序将从右到左，从下到上
+     * @en reverse the order from right to left and from bottom to top
+     */
+    reverseOrder?: boolean;
     /**
      * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
      * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)'

package/dist/index.js

@@ -7813,19 +7813,21 @@
           _e = props.status,
           status = _e === void 0 ? 'process' : _e,
           items = props.items,
+          _f = props.reverseOrder,
+          reverseOrder = _f === void 0 ? false : _f,
           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],
-          setInnerIndex = _f[1];
+      var _g = React.useState(Number(defaultIndex)),
+          innerIndex = _g[0],
+          setInnerIndex = _g[1];
 
-      var _g = useRefState(current === void 0 ? innerIndex : current),
-          activeIndex = _g[0],
-          activeRefIndex = _g[1],
-          setActiveIndex = _g[2];
+      var _h = useRefState(current === void 0 ? innerIndex : current),
+          activeIndex = _h[0],
+          activeRefIndex = _h[1],
+          setActiveIndex = _h[2];
 
       var domRef = React.useRef(null);
       var system = useSystem();
@@ -7853,6 +7855,7 @@
             index: index,
             status: activeIndex === index ? status : void 0,
             align: align,
+            reverseOrder: reverseOrder,
             changeIndex: changeIndex
           },
           key: index
@@ -7861,7 +7864,9 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-steps all-border-box " + className + " " + direction + " " + system,
+          className: cls(prefixCls + "-steps all-border-box " + className + " " + direction + " " + system, {
+            'reverse-order': reverseOrder
+          }),
           style: style,
           ref: domRef
         }, items ? items.map(function (item, index) {
@@ -9826,24 +9831,26 @@
             textAvatar = _g === void 0 ? '' : _g,
             _h = props.avatarStyle,
             avatarStyle = _h === void 0 ? {} : _h,
-            _j = props.autoFixFontSize,
-            autoFixFontSize = _j === void 0 ? true : _j,
-            _k = props.autoFixFontOffset,
-            autoFixFontOffset = _k === void 0 ? 2 : _k,
-            _l = props.avatarName,
-            avatarName = _l === void 0 ? '' : _l,
-            _m = props.avatarDesc,
-            avatarDesc = _m === void 0 ? '' : _m,
-            _o = props.children,
-            children = _o === void 0 ? null : _o,
-            _p = props.renderInfo,
-            renderInfo = _p === void 0 ? null : _p,
-            _q = props.className,
-            className = _q === void 0 ? '' : _q,
-            _r = props.style,
-            style = _r === void 0 ? {} : _r,
-            _s = props.imageProps,
-            imageProps = _s === void 0 ? {} : _s,
+            _j = props.avatarClass,
+            avatarClass = _j === void 0 ? '' : _j,
+            _k = props.autoFixFontSize,
+            autoFixFontSize = _k === void 0 ? true : _k,
+            _l = props.autoFixFontOffset,
+            autoFixFontOffset = _l === void 0 ? 2 : _l,
+            _m = props.avatarName,
+            avatarName = _m === void 0 ? '' : _m,
+            _o = props.avatarDesc,
+            avatarDesc = _o === void 0 ? '' : _o,
+            _p = props.children,
+            children = _p === void 0 ? null : _p,
+            _q = props.renderInfo,
+            renderInfo = _q === void 0 ? null : _q,
+            _r = props.className,
+            className = _r === void 0 ? '' : _r,
+            _s = props.style,
+            style = _s === void 0 ? {} : _s,
+            _t = props.imageProps,
+            imageProps = _t === void 0 ? {} : _t,
             defaultOverLap = props.defaultOverLap,
             onClickDecoration = props.onClickDecoration,
             onClick = props.onClick;
@@ -9851,9 +9858,9 @@
         var avatarRef = React.useRef(null);
         var avatarTextRef = React.useRef(null);
 
-        var _t = React.useState(1),
-            textScale = _t[0],
-            setTextScale = _t[1];
+        var _u = React.useState(1),
+            textScale = _u[0],
+            setTextScale = _u[1];
 
         React.useImperativeHandle(ref, function () {
           return {
@@ -9902,7 +9909,7 @@
           className: cls(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_a = {}, _a[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _a)),
           onClick: onClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_b = {}, _b[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _b[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _b[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _b)),
+          className: cls(prefixCls + "-avatar", avatarClass, prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_b = {}, _b[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _b[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _b[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _b)),
           style: avatarStyle,
           ref: avatarRef
         }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconUserFill, {
@@ -10402,6 +10409,12 @@
 
         if (posAdjustingRef.current) {
           return;
+        } // touchMove触发时，阻止handleTouchStart多次执行（如点击事件）
+        // @en When touchMove is triggered, prevent handleTouchStart from executing multiple times (such as click events)
+
+
+        if (touchStartedRef.current && touchMovedRef.current) {
+          return;
         }
 
         touchStartedRef.current = true;
@@ -10858,12 +10871,23 @@
           return;
         }
 
-        if (!touchStartedRef.current || !touchMovedRef.current || posAdjustingRef.current || touchStoppedRef.current) {
+        if (!touchStartedRef.current) {
           return;
         }
 
         touchStartedRef.current = false;
+
+        if (!touchMovedRef.current) {
+          setPlayIntervalRef.current();
+          return;
+        }
+
         touchMovedRef.current = false;
+
+        if (posAdjustingRef.current || touchStoppedRef.current) {
+          return;
+        }
+
         var touchEndTime = new Date().getTime();
         var dis = Math.abs(distance);
         var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;