@arco-design/mobile-react 2.32.0 → 2.34.0

package/dist/index.js

@@ -3981,6 +3981,8 @@
         setState(value);
       }, []);
       React.useEffect(function () {
+        // see: https://github.com/arco-design/arco-design-mobile/pull/292
+        leavingRef.current = false;
         return function () {
           leavingRef.current = true;
         };
@@ -7813,19 +7815,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 +7857,7 @@
             index: index,
             status: activeIndex === index ? status : void 0,
             align: align,
+            reverseOrder: reverseOrder,
             changeIndex: changeIndex
           },
           key: index
@@ -7861,7 +7866,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 +9833,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 +9860,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 +9911,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 +10411,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 +10873,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;
@@ -23492,9 +23518,13 @@
       var contentRef = React.useRef(null);
       var timerRef = React.useRef(null);
 
-      var _j = React.useState(false),
-          needMarquee = _j[0],
-          setNeedMarquee = _j[1];
+      var _j = React.useState(true),
+          visible = _j[0],
+          setVisible = _j[1];
+
+      var _k = React.useState(false),
+          needMarquee = _k[0],
+          setNeedMarquee = _k[1];
 
       var extraClass = React.useMemo(function () {
         var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -23535,9 +23565,8 @@
       }, [useRtl]);
 
       function close() {
-        if (domRef.current) {
-          removeElement(domRef.current);
-        }
+        setVisible(false);
+        clear();
       }
 
       function handleClose(e) {
@@ -23602,7 +23631,7 @@
       }
 
       function renderNoticeBar(prefix) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
+        return visible ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefix, className, extraClass),
           style: style,
           ref: domRef,
@@ -23628,7 +23657,7 @@
         }, rightContent) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefix + "-close",
           onClick: handleClose
-        }, closeIcon) : null);
+        }, closeIcon) : null) : null;
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -24229,7 +24258,15 @@
         if (left || width || top || height || bottom) {
           if (!show) {
             setTimeout(function () {
-              setShow(true);
+              setShow(function () {
+                var _a; // bugfix:
+                // 外层CSSTransition使用dom API而非通过react className属性修改class
+                // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+
+
+                (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('show');
+                return true;
+              });
             }, 0);
           }
         }
@@ -24281,7 +24318,6 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: domRef,
         className: cls(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-          show: show,
           'with-shadow': needShadow,
           'with-suffix': showCloseIcon || textSuffix,
           'custom-content': typeof content !== 'string'