@arco-design/mobile-react 2.22.2 → 2.22.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.22.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.2...@arco-design/mobile-react@2.22.3) (2022-11-23)
+
+
+### Bug Fixes
+
+* `Carousel` supports autoPlayDirection ([#72](https://github.com/arco-design/arco-design-mobile/issues/72)) ([527aaf4](https://github.com/arco-design/arco-design-mobile/commit/527aaf4bdf86fe4cf995bd8e4bd2580e9db8c942))
+* flexible.js support umd ([#73](https://github.com/arco-design/arco-design-mobile/issues/73)) ([d3f35c0](https://github.com/arco-design/arco-design-mobile/commit/d3f35c093a579bb404fff91dbf6437cdd93f19f7))
+
+
+
+
+
 ## [2.22.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.0...@arco-design/mobile-react@2.22.2) (2022-11-09)
 
 

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

package/cjs/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/cjs/carousel/index.js

@@ -42,6 +42,8 @@ var Carousel = /*#__PURE__*/(0, _react.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,
@@ -164,7 +166,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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];
@@ -401,7 +403,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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);
@@ -541,7 +543,7 @@ var Carousel = /*#__PURE__*/(0, _react.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 {
@@ -595,7 +597,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     timerRef.current = delayTimeout(function () {
-      jumpTo(indexRef.current + 1);
+      jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
     }, stayDuration);
   }
 

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);
       }
 
@@ -14682,7 +14684,7 @@
     });
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {