@arco-design/mobile-react 2.22.2 → 2.22.3

package/esm/carousel/index.d.ts

@@ -66,6 +66,12 @@ export interface CarouselProps {
      * @default true
      */
     autoPlay?: boolean;
+    /**
+     * 自动播放方向
+     * @en Direction when playing auto
+     * @default "normal"
+     */
+    autoPlayDirection?: 'normal' | 'reverse';
     /**
      * 是否响应手势滑动
      * @en Whether to respond to gesture swipe

package/esm/carousel/index.js

@@ -27,6 +27,8 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       loop = _props$loop === void 0 ? true : _props$loop,
       _props$autoPlay = props.autoPlay,
       autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+      _props$autoPlayDirect = props.autoPlayDirection,
+      autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
       _props$swipeable = props.swipeable,
       swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
       _props$stayDuration = props.stayDuration,
@@ -149,7 +151,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       transformsRef = _useRefState4[1],
       setTransforms = _useRefState4[2];
 
-  var _useRefState5 = useRefState('left'),
+  var _useRefState5 = useRefState(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
       direction = _useRefState5[0],
       directionRef = _useRefState5[1],
       setStateDirection = _useRefState5[2];
@@ -386,7 +388,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     return function () {
       clear();
     };
-  }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+  }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
   useUpdateEffect(function () {
     if (currentIndex !== void 0) {
       jumpTo(currentIndex);
@@ -526,7 +528,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     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 {
@@ -580,7 +582,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     timerRef.current = delayTimeout(function () {
-      jumpTo(indexRef.current + 1);
+      jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
     }, stayDuration);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.12.6",
+        "@arco-design/mobile-utils": "^2.12.7",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "52a29775d16e5e7d2b7645086644cf03aac6d71f"
+    "gitHead": "2d9f52e4a749a50a0b6248b14ab8f8d02f2f0e1e"
 }

package/tools/flexible.js

@@ -1,82 +1,101 @@
-"use strict";
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["exports"], factory);
+    } else if (typeof exports !== "undefined") {
+        factory(exports);
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory(mod.exports);
+        global.setRootPixel = mod.exports.default;
+    }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+
+    "use strict";
 
-function setRootPixel(base, sketch, max) {
-    var baseFontSize = base || 50;
-    var sketchWidth = sketch || 375;
-    var maxFontSize = max || 64;
-    var defaultFontSize = 0;
+    _exports.__esModule = true;
+    _exports.default = void 0;
 
-    function getDefaultFontSize() {
-        if (defaultFontSize) {
+    function setRootPixel(base, sketch, max) {
+        var baseFontSize = base || 50;
+        var sketchWidth = sketch || 375;
+        var maxFontSize = max || 64;
+        var defaultFontSize = 0;
+
+        function getDefaultFontSize() {
+            if (defaultFontSize) {
+                return defaultFontSize;
+            }
+
+            document.documentElement.style.fontSize = '';
+            var temp = document.createElement('div');
+            temp.style.cssText = 'width:1rem;display:none';
+            document.head.appendChild(temp);
+            defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
+            document.head.removeChild(temp);
             return defaultFontSize;
         }
 
-        document.documentElement.style.fontSize = '';
-        var temp = document.createElement('div');
-        temp.style.cssText = 'width:1rem;display:none';
-        document.head.appendChild(temp);
-        defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
-        document.head.removeChild(temp);
-        return defaultFontSize;
-    }
+        function getQuery(name) {
+            return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
+        }
 
-    function getQuery(name) {
-        return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
-    }
+        function setRootFontSize() {
+            var widthQueryKey = '';
+            var rem2px = baseFontSize;
+            var clientWidth;
 
-    function setRootFontSize() {
-        var widthQueryKey = '';
-        var rem2px = baseFontSize;
-        var clientWidth;
-
-        if (widthQueryKey && +getQuery(widthQueryKey)) {
-            clientWidth = +getQuery(widthQueryKey);
-        } else {
-            clientWidth = window.innerWidth && document.documentElement.clientWidth
-                ? Math.min(window.innerWidth, document.documentElement.clientWidth)
-                : window.innerWidth
-                    || document.documentElement.clientWidth
-                    || document.body && document.body.clientWidth
-                    || sketchWidth;
+            if (widthQueryKey && +getQuery(widthQueryKey)) {
+                clientWidth = +getQuery(widthQueryKey);
+            } else {
+                clientWidth = window.innerWidth && document.documentElement.clientWidth
+                    ? Math.min(window.innerWidth, document.documentElement.clientWidth)
+                    : window.innerWidth
+                        || document.documentElement.clientWidth
+                        || document.body && document.body.clientWidth
+                        || sketchWidth;
+            }
+            var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
+            htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
+            window.ROOT_FONT_SIZE = htmlFontSizePx;
+            document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
         }
-        var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
-        htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
-        window.ROOT_FONT_SIZE = htmlFontSizePx;
-        document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
-    }
 
-    function adjust(immediate) {
-        if (immediate) {
-            setRootFontSize();
-            return;
+        function adjust(immediate) {
+            if (immediate) {
+                setRootFontSize();
+                return;
+            }
+
+            setTimeout(setRootFontSize, 30);
         }
 
-        setTimeout(setRootFontSize, 30);
-    }
+        function removeRootPixel() {
+            document.documentElement.style.fontSize = '';
+            window.removeEventListener('resize', adjust, false);
+            if ('onorientationchange' in window) {
+                window.removeEventListener('orientationchange', adjust, false);
+            }
+        }
 
-    function removeRootPixel() {
-        document.documentElement.style.fontSize = '';
-        window.removeEventListener('resize', adjust, false);
-        if ('onorientationchange' in window) {
-            window.removeEventListener('orientationchange', adjust, false);
+        if (window.isResponsive === false) {
+            document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
+            return function () {
+                document.documentElement.style.fontSize = '';
+            };
         }
-    }
 
-    if (window.isResponsive === false) {
-        document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
-        return function () {
-            document.documentElement.style.fontSize = '';
-        };
-    }
+        adjust(true);
+        window.addEventListener('resize', adjust, false);
 
-    adjust(true);
-    window.addEventListener('resize', adjust, false);
+        if ('onorientationchange' in window) {
+            window.addEventListener('orientationchange', adjust, false);
+        }
 
-    if ('onorientationchange' in window) {
-        window.addEventListener('orientationchange', adjust, false);
+        return removeRootPixel;
     }
 
-    return removeRootPixel;
-}
+    _exports.default = setRootPixel;
 
-module.exports = setRootPixel;
+});

package/umd/carousel/index.d.ts

@@ -66,6 +66,12 @@ export interface CarouselProps {
      * @default true
      */
     autoPlay?: boolean;
+    /**
+     * 自动播放方向
+     * @en Direction when playing auto
+     * @default "normal"
+     */
+    autoPlayDirection?: 'normal' | 'reverse';
     /**
      * 是否响应手势滑动
      * @en Whether to respond to gesture swipe

package/umd/carousel/index.js

@@ -47,6 +47,8 @@
         loop = _props$loop === void 0 ? true : _props$loop,
         _props$autoPlay = props.autoPlay,
         autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+        _props$autoPlayDirect = props.autoPlayDirection,
+        autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
         _props$swipeable = props.swipeable,
         swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
         _props$stayDuration = props.stayDuration,
@@ -169,7 +171,7 @@
         transformsRef = _useRefState4[1],
         setTransforms = _useRefState4[2];
 
-    var _useRefState5 = (0, _helpers.useRefState)('left'),
+    var _useRefState5 = (0, _helpers.useRefState)(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
         direction = _useRefState5[0],
         directionRef = _useRefState5[1],
         setStateDirection = _useRefState5[2];
@@ -406,7 +408,7 @@
       return function () {
         clear();
       };
-    }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+    }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
     (0, _helpers.useUpdateEffect)(function () {
       if (currentIndex !== void 0) {
         jumpTo(currentIndex);
@@ -546,7 +548,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 {
@@ -600,7 +602,7 @@
       }
 
       timerRef.current = delayTimeout(function () {
-        jumpTo(indexRef.current + 1);
+        jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
       }, stayDuration);
     }