@arco-design/mobile-react 2.19.0

package/umd/carousel/index.js

@@ -0,0 +1,1021 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global._helpers);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends3, _react, _mobileUtils, _contextProvider, _helpers) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends3 = _interopRequireDefault(_extends3);
+  _react = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  /**
+   * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
+   * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
+   * @type 数据展示
+   * @type_en Data Display
+   * @name 轮播图
+   * @name_en Carousel
+   */
+  var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var className = props.className,
+        wrapStyle = props.wrapStyle,
+        style = props.style,
+        children = props.children,
+        _props$list = props.list,
+        list = _props$list === void 0 ? [] : _props$list,
+        _props$animateDuratio = props.animateDuration,
+        animateDuration = _props$animateDuratio === void 0 ? 500 : _props$animateDuratio,
+        _props$animateDuratio2 = props.animateDurationSlide,
+        animateDurationSlide = _props$animateDuratio2 === void 0 ? 300 : _props$animateDuratio2,
+        _props$loop = props.loop,
+        loop = _props$loop === void 0 ? true : _props$loop,
+        _props$autoPlay = props.autoPlay,
+        autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+        _props$swipeable = props.swipeable,
+        swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
+        _props$stayDuration = props.stayDuration,
+        stayDuration = _props$stayDuration === void 0 ? 4000 : _props$stayDuration,
+        boxWidth = props.boxWidth,
+        boxHeight = props.boxHeight,
+        baseBoxWidth = props.baseBoxWidth,
+        baseBoxHeight = props.baseBoxHeight,
+        _props$width = props.width,
+        width = _props$width === void 0 ? 0 : _props$width,
+        height = props.height,
+        _props$initialIndex = props.initialIndex,
+        initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,
+        renderIndicator = props.renderIndicator,
+        _props$indicatorPos = props.indicatorPos,
+        indicatorPos = _props$indicatorPos === void 0 ? 'center' : _props$indicatorPos,
+        _props$indicatorVerti = props.indicatorVerticalPos,
+        indicatorVerticalPos = _props$indicatorVerti === void 0 ? 'left' : _props$indicatorVerti,
+        indicatorOutside = props.indicatorOutside,
+        _props$showIndicator = props.showIndicator,
+        showIndicator = _props$showIndicator === void 0 ? true : _props$showIndicator,
+        _props$hideSingleIndi = props.hideSingleIndicator,
+        hideSingleIndicator = _props$hideSingleIndi === void 0 ? true : _props$hideSingleIndi,
+        _props$indicatorType = props.indicatorType,
+        indicatorType = _props$indicatorType === void 0 ? 'square' : _props$indicatorType,
+        _props$indicatorClass = props.indicatorClass,
+        indicatorClass = _props$indicatorClass === void 0 ? '' : _props$indicatorClass,
+        indicatorInverse = props.indicatorInverse,
+        _props$spaceBetween = props.spaceBetween,
+        spaceBetween = _props$spaceBetween === void 0 ? 0 : _props$spaceBetween,
+        _props$offsetBetween = props.offsetBetween,
+        offsetBetween = _props$offsetBetween === void 0 ? 0 : _props$offsetBetween,
+        currentIndex = props.currentIndex,
+        _props$autoHeight = props.autoHeight,
+        autoHeight = _props$autoHeight === void 0 ? false : _props$autoHeight,
+        _props$percentToChang = props.percentToChange,
+        percentToChange = _props$percentToChang === void 0 ? 0.3 : _props$percentToChang,
+        _props$distanceToChan = props.distanceToChange,
+        distanceToChange = _props$distanceToChan === void 0 ? 10 : _props$distanceToChan,
+        _props$speedToChange = props.speedToChange,
+        speedToChange = _props$speedToChange === void 0 ? 100 : _props$speedToChange,
+        vertical = props.vertical,
+        lazyloadCount = props.lazyloadCount,
+        _props$inactiveScale = props.inactiveScale,
+        inactiveScale = _props$inactiveScale === void 0 ? 1 : _props$inactiveScale,
+        _props$stopPropagatio = props.stopPropagation,
+        stopPropagation = _props$stopPropagatio === void 0 ? true : _props$stopPropagatio,
+        _props$fakeItem = props.fakeItem,
+        fakeItem = _props$fakeItem === void 0 ? false : _props$fakeItem,
+        _props$allowEndBlank = props.allowEndBlank,
+        allowEndBlank = _props$allowEndBlank === void 0 ? false : _props$allowEndBlank,
+        _props$bounceWhenNoLo = props.bounceWhenNoLoop,
+        bounceWhenNoLoop = _props$bounceWhenNoLo === void 0 ? false : _props$bounceWhenNoLo,
+        _props$bounceDampRate = props.bounceDampRate,
+        bounceDampRate = _props$bounceDampRate === void 0 ? 3 : _props$bounceDampRate,
+        distanceProcessor = props.distanceProcessor,
+        getInnerScrollContainer = props.getInnerScrollContainer,
+        onChange = props.onChange,
+        onAfterChange = props.onAfterChange,
+        onTouchStart = props.onTouchStart,
+        onTouchMove = props.onTouchMove,
+        onTouchEnd = props.onTouchEnd,
+        onTransitionStart = props.onTransitionStart,
+        onTransitionEnd = props.onTransitionEnd,
+        onDistanceChange = props.onDistanceChange,
+        _props$stopTouchThres = props.stopTouchThreshold,
+        stopTouchThreshold = _props$stopTouchThres === void 0 ? 0 : _props$stopTouchThres,
+        onTouchStopped = props.onTouchStopped,
+        onPageVisibleChange = props.onPageVisibleChange;
+    var domRef = (0, _react.useRef)(null);
+    var wrapRef = (0, _react.useRef)(null);
+    var innerRef = (0, _react.useRef)(null);
+    var itemsRef = (0, _react.useRef)([]);
+    var fakeWrapRef = (0, _react.useRef)(null);
+    var timerRef = (0, _react.useRef)(null);
+    var movedChildRef = (0, _react.useRef)(-1);
+    var touchStartTimeRef = (0, _react.useRef)(0);
+    var touchStartedRef = (0, _react.useRef)(false);
+    var touchMovedRef = (0, _react.useRef)(false);
+
+    var _useState = (0, _react.useState)(baseBoxWidth || 0),
+        wrapWidth = _useState[0],
+        setWrapWidth = _useState[1];
+
+    var _useState2 = (0, _react.useState)(baseBoxHeight || 0),
+        wrapHeight = _useState2[0],
+        setWrapHeight = _useState2[1];
+
+    var touchStartXRef = (0, _react.useRef)(0);
+    var touchStartYRef = (0, _react.useRef)(0);
+    var scrollingRef = (0, _react.useRef)(null);
+    var touchStoppedRef = (0, _react.useRef)(false);
+    var bouncingRef = (0, _react.useRef)(false);
+
+    var _useState3 = (0, _react.useState)('auto'),
+        currentItemHeight = _useState3[0],
+        setCurrentItemHeight = _useState3[1];
+
+    var _useRefState = (0, _helpers.useRefState)(false),
+        posAdjusting = _useRefState[0],
+        posAdjustingRef = _useRefState[1],
+        setPosAdjusting = _useRefState[2];
+
+    var _useRefState2 = (0, _helpers.useRefState)(0),
+        distance = _useRefState2[0],
+        distanceRef = _useRefState2[1],
+        setDistance = _useRefState2[2];
+
+    var _useState4 = (0, _react.useState)(true),
+        isAutoJump = _useState4[0],
+        setIsAutoJump = _useState4[1];
+
+    var _useRefState3 = (0, _helpers.useRefState)(currentIndex !== void 0 ? currentIndex : initialIndex),
+        index = _useRefState3[0],
+        indexRef = _useRefState3[1],
+        setIndex = _useRefState3[2];
+
+    var _useRefState4 = (0, _helpers.useRefState)([]),
+        transforms = _useRefState4[0],
+        transformsRef = _useRefState4[1],
+        setTransforms = _useRefState4[2];
+
+    var _useRefState5 = (0, _helpers.useRefState)('left'),
+        direction = _useRefState5[0],
+        directionRef = _useRefState5[1],
+        setStateDirection = _useRefState5[2];
+
+    var lastDirectionRef = (0, _react.useRef)('');
+    var lastShownIndexRef = (0, _react.useRef)(-1);
+
+    var _getAllChildren = getAllChildren(),
+        allChildren = _getAllChildren.allChildren,
+        fakeTwoChildren = _getAllChildren.fakeTwoChildren;
+
+    var total = allChildren.length;
+    var shownTotal = fakeTwoChildren ? 2 : total;
+    var indicatorArr = (0, _react.useMemo)(function () {
+      var arr = [];
+
+      for (var i = 0; i < shownTotal; i += 1) {
+        arr.push(i);
+      }
+
+      return arr;
+    }, [shownTotal]);
+    var leftOffset = typeof offsetBetween === 'number' ? offsetBetween : offsetBetween.left || 0;
+    var rightOffset = typeof offsetBetween === 'number' ? offsetBetween : offsetBetween.right || 0;
+    var wrapSize = vertical ? wrapHeight : wrapWidth;
+    var childWidth = (width || wrapWidth) - spaceBetween - (leftOffset + rightOffset);
+    var childHeight = (height || wrapHeight) - spaceBetween - (leftOffset + rightOffset);
+    var childSize = vertical ? childHeight : childWidth;
+    var noLoop = !loop || !vertical && Boolean(width) || vertical && Boolean(height) || total < 2 || (leftOffset > 0 || rightOffset > 0) && !fakeItem;
+    var shownIndex = getShownIndex(index);
+    var dynamicAnimateDuration = getDynamicDuration(isAutoJump);
+    var cubic = isAutoJump ? 'auto' : 'slide';
+    var indexFixed = currentIndex !== void 0;
+    var needTouchEvent = swipeable && !indexFixed && childSize > 0;
+    var userSetBoxWidth = boxWidth || baseBoxWidth;
+    var userSetBoxHeight = boxHeight || baseBoxHeight;
+    var noInterval = noLoop || !autoPlay || indexFixed || childSize <= 0;
+    var inactiveValidScale = (0, _react.useMemo)(function () {
+      return Math.max(0, Math.min(inactiveScale, 1));
+    }, [inactiveScale]);
+
+    var _useState5 = (0, _react.useState)([]),
+        fakeIndexes = _useState5[0],
+        setFakeIndexes = _useState5[1];
+
+    var system = (0, _helpers.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.
+
+    var needRefreshDom = !noInterval && system === 'ios';
+    var setDirection = (0, _react.useCallback)(function (newDirec) {
+      setStateDirection(function (direc) {
+        lastDirectionRef.current = direc;
+        return newDirec;
+      });
+    }, []);
+    var wrapSizeRef = (0, _helpers.useLatestRef)(wrapSize);
+    var updateDataRef = (0, _helpers.useLatestRef)(updateData);
+    var setPlayIntervalRef = (0, _helpers.useLatestRef)(setPlayInterval);
+    var handleTouchStart = (0, _react.useCallback)(function (e) {
+      if (onTouchStart && onTouchStart(e, shownTotal, getShownIndex(indexRef.current))) {
+        return;
+      }
+
+      if (posAdjustingRef.current) {
+        return;
+      }
+
+      touchStartedRef.current = true;
+      touchMovedRef.current = false;
+      clear();
+      var evt = e.touches[0];
+      touchStartXRef.current = evt.clientX || 0;
+      touchStartYRef.current = evt.clientY || 0;
+      scrollingRef.current = null;
+      touchStoppedRef.current = false;
+      setPosAdjusting(false);
+      touchStartTimeRef.current = new Date().getTime();
+    }, [shownTotal, onTouchStart]);
+    var triggerTouchStopped = (0, _react.useCallback)(function (posDis) {
+      var needStop = Math.abs(posDis) > stopTouchThreshold;
+
+      if (!touchStoppedRef.current && needStop) {
+        onTouchStopped && onTouchStopped(posDis >= 0 ? -1 : 1);
+      }
+
+      touchStoppedRef.current = needStop;
+    }, [stopTouchThreshold, onTouchStopped]);
+    var handleTouchMove = (0, _react.useCallback)(function (e) {
+      if (onTouchMove && onTouchMove(e, shownTotal, getShownIndex(indexRef.current))) {
+        return;
+      }
+
+      stopPropagation && e.stopPropagation();
+
+      if (!touchStartedRef.current || posAdjustingRef.current) {
+        e.cancelable && e.preventDefault();
+        return;
+      }
+
+      touchMovedRef.current = true;
+      var evt = e.changedTouches[0];
+      var touchMoveX = Math.max(0, evt.clientX || 0);
+      var touchMoveY = evt.clientY || 0;
+      var posDisX = touchMoveX - touchStartXRef.current;
+      var posDisY = touchMoveY - touchStartYRef.current;
+      var absDisX = Math.abs(posDisX);
+      var absDisY = Math.abs(posDisY);
+      var originDis = vertical ? posDisY : posDisX;
+
+      var processor = distanceProcessor || function (dis, size, child) {
+        return child * (dis / size);
+      };
+
+      var posDis = processor(originDis, wrapSizeRef.current, childSize);
+
+      if (total < 2) {
+        triggerTouchStopped(posDis);
+        return;
+      }
+
+      if (scrollingRef.current === null) {
+        scrollingRef.current = vertical ? absDisY < absDisX : absDisX < absDisY;
+      } // 如果是在滚动页面则禁用轮播图手势
+      // @en Disable carousel gestures if scrolling
+
+
+      if (scrollingRef.current) {
+        setDistance(0); // bugfix: 未触发横滑就不触发touchend逻辑，且这个场景不需要触发onTouchStopped，因此直接设置touchStoppedRef
+        // @en bugfix: The touchend event will not be triggered if the horizontal swipe is not triggered, and this scene does not need to trigger onTouchStopped.
+
+        touchStoppedRef.current = true; // 不会触发jumpTo，但touchstart时clear了，所以要手动设置一次interval
+        // @en JumpTo will not be triggered, but it is cleared in touchstart event, so need to manually set interval once
+
+        setPlayIntervalRef.current();
+        return;
+      }
+
+      setDirection(posDis >= 0 ? 'right' : 'left');
+
+      if (noLoop && (indexRef.current === 0 && posDis > 0 || indexRef.current === total - 1 && posDis < 0)) {
+        triggerTouchStopped(posDis);
+
+        if (bounceWhenNoLoop && bounceDampRate) {
+          e.cancelable && e.preventDefault();
+          bouncingRef.current = true;
+          setDistance(posDis / bounceDampRate);
+        } else {
+          setDistance(0);
+        }
+
+        return;
+      }
+
+      e.cancelable && e.preventDefault();
+      touchStoppedRef.current = false;
+      var maxDis = childSize;
+      setDistance(posDis > 0 ? Math.min(maxDis, posDis) : Math.max(-1 * maxDis, posDis));
+    }, [shownTotal, noLoop, vertical, childSize, stopPropagation, bounceWhenNoLoop, bounceDampRate, onTouchMove, triggerTouchStopped]);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current,
+        wrap: wrapRef.current,
+        items: itemsRef.current,
+        noLoop: noLoop,
+        updateData: updateData,
+        changeIndex: changeIndex
+      };
+    }, [updateData, changeIndex]);
+    (0, _helpers.useListenResize)(updateData, [updateData]);
+    (0, _helpers.useSwiperInnerScroll)(getInnerScrollContainer);
+    var updateWhenVisible = (0, _react.useCallback)(function () {
+      fakeWrapRef.current && (fakeWrapRef.current.style.display = 'none');
+      wrapRef.current && (wrapRef.current.style.display = ''); // 部分情况下页面隐藏后容器宽度变成0，因此页面返回后需重新取一次容器尺寸
+      // @en In some cases, the width of the container becomes 0 after the page is invisible, so the container size needs to be resized after the page is visible.
+
+      updateDataRef.current();
+    }, []);
+    var updateWhenInvisible = (0, _react.useCallback)(function () {
+      clear();
+
+      if (wrapRef.current && fakeWrapRef.current) {
+        fakeWrapRef.current.style.height = (wrapRef.current.offsetHeight || 0) + "px";
+        fakeWrapRef.current.style.display = 'block';
+        wrapRef.current.style.display = 'none';
+      }
+    }, []);
+    (0, _react.useEffect)(function () {
+      if (onPageVisibleChange) {
+        return onPageVisibleChange(updateWhenVisible, updateWhenInvisible);
+      } // ios 在页面隐藏后返回时会有dom结构正确但渲染错乱的情况，因此在页面隐藏时先用占位符，返回后重新渲染一次dom
+      // @en In iOS, When the page is invisible, the DOM will be correct but the rendering is disordered. So use a placeholder when the page is invisible, and re-render the DOM after it is visible.
+
+
+      var update = function update() {
+        if (document.visibilityState === 'visible') {
+          updateWhenVisible();
+        } else {
+          updateWhenInvisible();
+        }
+      };
+
+      document.addEventListener('visibilitychange', update);
+      return function () {
+        document.removeEventListener('visibilitychange', update);
+      };
+    }, [onPageVisibleChange]);
+    (0, _react.useEffect)(function () {
+      if (distanceToChange > 0 && distanceToChange < 1) {
+        console.warn("[Carousel Props Warning] The value of the prop `distanceToChange` is too small(" + distanceToChange + "). Do you meant to use the prop `percentToChange`?");
+      }
+    }, [distanceToChange]);
+    (0, _react.useEffect)(function () {
+      if (vertical && !boxHeight) {
+        console.warn('[Carousel Rendering Warning] When the prop `vertical` is specified and the prop `boxHeight` is not specified, you need to set a fixed `height` style for the outermost element.');
+      }
+    }, [vertical, boxHeight]);
+    (0, _react.useEffect)(function () {
+      if (wrapRef.current && needTouchEvent) {
+        wrapRef.current.addEventListener('touchstart', handleTouchStart);
+        wrapRef.current.addEventListener('touchmove', handleTouchMove);
+      }
+
+      return function () {
+        if (wrapRef.current && needTouchEvent) {
+          wrapRef.current.removeEventListener('touchstart', handleTouchStart);
+          wrapRef.current.removeEventListener('touchmove', handleTouchMove);
+        }
+      };
+    }, [handleTouchStart, handleTouchMove, needTouchEvent]);
+    (0, _react.useEffect)(function () {
+      // 布局改变时重新计算
+      // @en Recalculate when layout changes
+      updateData();
+      return function () {
+        clear();
+      };
+    }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+    (0, _helpers.useUpdateEffect)(function () {
+      if (currentIndex !== void 0) {
+        jumpTo(currentIndex);
+      }
+    }, [currentIndex]);
+    (0, _helpers.useUpdateEffect)(function () {
+      onDistanceChange && onDistanceChange(distance, wrapSize, index);
+    }, [distance, wrapSize, index]);
+    (0, _react.useEffect)(function () {
+      // children改变，索引超出新children范围时兼容
+      // @en When children change, it needs to be compatible when the index exceeds the range of the new children
+      if (allChildren.length && indexRef.current >= allChildren.length) {
+        jumpTo(allChildren.length - 1, true, true);
+      } else if (indexRef.current < 0) {
+        jumpTo(0, true, true);
+      }
+    }, [allChildren.length]);
+    (0, _react.useEffect)(function () {
+      // bugfix: 修复ios轮播循环时闪动问题
+      // @en bugfix: Fix the flickering problem when the carousel loops in iOS
+      if (isAutoJump && posAdjusting) {
+        setTimeout(function () {
+          getFakeChild();
+        }, 100);
+      } else {
+        getFakeChild();
+      }
+    }, [index, direction, childSize, total]);
+    (0, _react.useEffect)(function () {
+      (0, _mobileUtils.nextTick)(function () {
+        updateLayoutData();
+      });
+    }, [shownIndex, autoHeight, allChildren]);
+    (0, _helpers.useUpdateEffect)(function () {
+      if (typeof onChange === 'function') {
+        onChange(shownIndex);
+      }
+    }, [shownIndex]);
+    (0, _react.useEffect)(function () {
+      return function () {
+        lastShownIndexRef.current = shownIndex;
+      };
+    }, [shownIndex]);
+    (0, _react.useEffect)(function () {
+      if (!fakeItem || posAdjusting) {
+        return;
+      }
+
+      setCurrentFakeIndex();
+    }, [posAdjusting, index, direction, total, childSize]);
+
+    function getShownIndex(nowIndex) {
+      var validIndex = nowIndex === total ? 0 : nowIndex;
+      var shownInd = nowIndex === -1 ? total - 1 : validIndex;
+      return fakeTwoChildren ? shownInd % 2 : shownInd;
+    }
+
+    function getDynamicDuration(autoJump) {
+      return autoJump ? animateDuration : animateDurationSlide;
+    }
+
+    function setCurrentHeight() {
+      if (!innerRef.current || !autoHeight || vertical) {
+        return;
+      }
+
+      var allItemDom = itemsRef.current;
+      var nowIndex = getShownIndex(indexRef.current);
+      var currentHeight = (allItemDom[nowIndex] || {}).offsetHeight || 'auto';
+      setCurrentItemHeight(currentHeight);
+    }
+
+    function getAllChildren() {
+      var allChild = [];
+      var fakeTwo = false;
+
+      if (list && list.length) {
+        var actualList = list;
+
+        if (list.length === 2 && fakeItem) {
+          fakeTwo = true;
+          actualList = list.concat(list);
+        }
+
+        allChild = actualList.map(function (item, i) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
+            key: i,
+            className: "carousel-item-img needsclick",
+            src: item.src,
+            alt: "",
+            onClick: item.onClick
+          }), item.text ? /*#__PURE__*/_react.default.createElement("div", {
+            className: "carousel-item-text"
+          }, item.text) : null);
+        });
+      } else if (children && Object.prototype.toString.call(children) === '[object Array]') {
+        allChild = children;
+
+        if (allChild.length === 2 && fakeItem) {
+          fakeTwo = true;
+          allChild = [].concat(allChild, allChild);
+        }
+      } else {
+        allChild = children ? [children] : [];
+      }
+
+      return {
+        allChildren: allChild,
+        fakeTwoChildren: fakeTwo
+      };
+    }
+
+    function getDefaultDirection() {
+      var nowIndex = indexRef.current;
+
+      if (nowIndex === total - 1) {
+        return 'left';
+      }
+
+      if (nowIndex === 0) {
+        return 'right';
+      }
+
+      return '';
+    }
+
+    function changeIndex(newIndex, rightNow) {
+      jumpTo(newIndex, true, rightNow);
+    }
+
+    function jumpTo(newIndex, autoJump, rightNow) {
+      if (autoJump === void 0) {
+        autoJump = true;
+      }
+
+      var oldIndex = getShownIndex(indexRef.current);
+      var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
+
+      if (autoJump) {
+        setDirection('left');
+      } else if (newIndex === indexRef.current) {
+        setDirection(distanceRef.current > 0 ? 'right' : 'left');
+      } else {
+        setDirection('');
+      }
+
+      setPosAdjusting(true);
+      setIsAutoJump(autoJump);
+      setDistance(0);
+      setIndex(newIndex);
+      touchStartTimeRef.current = 0;
+      onTransitionStart && onTransitionStart();
+      setTimeout(function () {
+        setPosAdjusting(false);
+        (0, _mobileUtils.nextTick)(function () {
+          setDirection(getDefaultDirection());
+          var newTransform = transformsRef.current.slice();
+          var transChanged = false;
+
+          if (newIndex === -1 && movedChildRef.current >= 0) {
+            newTransform[movedChildRef.current] = 0;
+            transChanged = true;
+            setIndex(total - 1);
+          } else if (newIndex === total && movedChildRef.current >= 0) {
+            newTransform[movedChildRef.current] = 0;
+            transChanged = true;
+            setIndex(0);
+          }
+
+          transChanged && setTransforms(newTransform);
+          setIsAutoJump(true);
+          onTransitionEnd && onTransitionEnd();
+
+          if (changedIndex >= 0) {
+            onAfterChange && onAfterChange(changedIndex, oldIndex);
+          }
+
+          (0, _mobileUtils.nextTick)(function () {
+            setPlayIntervalRef.current();
+          });
+        });
+      }, rightNow ? 0 : getDynamicDuration(autoJump));
+      autoJump && setDirection('');
+    }
+
+    function setPlayInterval() {
+      clear();
+
+      if (noInterval) {
+        return;
+      }
+
+      timerRef.current = delayTimeout(function () {
+        jumpTo(indexRef.current + 1);
+      }, stayDuration);
+    }
+
+    function updateLayoutData() {
+      if (wrapRef.current) {
+        setWrapWidth(wrapRef.current.offsetWidth);
+        setWrapHeight(wrapRef.current.offsetHeight);
+      }
+
+      setCurrentHeight();
+    }
+
+    function updateData() {
+      updateLayoutData();
+      setPlayIntervalRef.current();
+    }
+
+    function clear() {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    }
+
+    function getFakeChild() {
+      if (noLoop) {
+        return;
+      }
+
+      var nowIndex = indexRef.current;
+      var newTransform = transformsRef.current.slice();
+      var dis = Math.max(0, childSize);
+      allChildren.forEach(function (_, childIndex) {
+        if (nowIndex === 0 && directionRef.current === 'right' && childIndex === total - 1) {
+          movedChildRef.current = childIndex;
+          newTransform[childIndex] = -1 * total * dis;
+        } else if (nowIndex === total - 1 && directionRef.current === 'left' && childIndex === 0) {
+          movedChildRef.current = childIndex;
+          newTransform[childIndex] = total * dis;
+        } else if (nowIndex >= 0 && nowIndex < total) {
+          newTransform[childIndex] = 0;
+        }
+      });
+      setTransforms(newTransform);
+    }
+
+    function delayTimeout(callback, timeout) {
+      return setTimeout(callback, timeout);
+    }
+
+    function handleTouchEnd(e) {
+      if (!needTouchEvent) {
+        return;
+      }
+
+      if (onTouchEnd && onTouchEnd(e.nativeEvent, shownTotal, getShownIndex(indexRef.current))) {
+        return;
+      }
+
+      stopPropagation && e.stopPropagation();
+
+      if (bouncingRef.current) {
+        bouncingRef.current = false;
+        jumpTo(index, false);
+        return;
+      }
+
+      if (!touchStartedRef.current || !touchMovedRef.current || posAdjustingRef.current || touchStoppedRef.current) {
+        return;
+      }
+
+      touchStartedRef.current = false;
+      touchMovedRef.current = false;
+      var touchEndTime = new Date().getTime();
+      var speed = distance / (touchEndTime - touchStartTimeRef.current) * 1000;
+      var maxSlice = childSize * percentToChange;
+      var dis = Math.abs(distance);
+      var needJump = dis > maxSlice && dis > distanceToChange || Math.abs(speed) > speedToChange;
+
+      if (distance > 0 && needJump) {
+        jumpTo(index - 1, false);
+      } else if (distance < 0 && needJump) {
+        jumpTo(index + 1, false);
+      } else {
+        jumpTo(index, false);
+      }
+    }
+
+    function getSlideTransitionStyle() {
+      return {
+        transitionProperty: posAdjusting ? 'transform' : 'none',
+        transitionDuration: posAdjusting ? dynamicAnimateDuration + "ms" : '0ms'
+      };
+    }
+
+    function getInnerStyle() {
+      var transitionStyle = (0, _helpers.getStyleWithVendor)(getSlideTransitionStyle());
+      var innerSize = childSize * total;
+      var dis = index * childSize * -1 + distance + leftOffset;
+      var minTransform = childSize > 0 ? leftOffset : 0;
+      var maxTransform = allowEndBlank ? dis : -1 * innerSize + wrapSize - rightOffset;
+      var noLoopDis = bounceWhenNoLoop && (index === 0 && distance > 0 || index === total - 1 && distance < 0) ? Math.min(minTransform + distance, Math.max(maxTransform + distance, dis)) : Math.min(minTransform, Math.max(maxTransform, dis)); // noLoop时需要在最后也露出spaceBetween的空白，所以当滑到最后一个时transform向左移动相应宽度
+      // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
+
+      var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) : dis;
+      var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+
+      if (vertical) {
+        var _translateStyle = (0, _helpers.getStyleWithVendor)({
+          transform: "translateY(" + transStr + ") translateZ(0)"
+        });
+
+        return (0, _extends3.default)({}, transitionStyle, _translateStyle, {
+          width: '100%'
+        });
+      }
+
+      var translateStyle = (0, _helpers.getStyleWithVendor)({
+        transform: "translateX(" + transStr + ") translateZ(0)"
+      });
+      return (0, _extends3.default)({
+        width: Math.max(0, innerSize) || 'auto',
+        height: height
+      }, transitionStyle, translateStyle);
+    }
+
+    function getCarouselStyle() {
+      if (vertical) {
+        return (0, _extends3.default)({
+          height: userSetBoxHeight
+        }, style || {});
+      }
+
+      var heightStyle = currentItemHeight && currentItemHeight !== 'auto' ? {
+        height: currentItemHeight
+      } : {};
+      return (0, _extends3.default)({
+        width: userSetBoxWidth
+      }, heightStyle, style || {});
+    } // 当最前或最后的滑块通过transform手动被放置到最后或最前时，在展示层可以认为是第total个或第-1个模块
+    // @en When the front or last slider is manually placed to the rear or the front through transform, it can be considered as the total or -1 module in the display layer
+
+
+    function getShownChildIndex(curIndex) {
+      var childIndex = curIndex;
+
+      if (transforms[childIndex] > 0) {
+        childIndex = total;
+      } else if (transforms[childIndex] < 0) {
+        childIndex = -1;
+      }
+
+      return childIndex;
+    } // 当两侧有露出内容时，为了循环衔接上需要fake前后的dom来做视觉填充
+    // @en When there is exposed content on both sides, it is necessary to fake the front and rear dom to make visual filling in order to connect circularly.
+
+
+    function setCurrentFakeIndex() {
+      var newIndexes = fakeIndexes.slice();
+
+      if (childSize <= 0) {
+        if (index === 0) {
+          newIndexes[0] = {
+            index: total - 1,
+            side: 'left'
+          };
+        }
+
+        if (index === total - 1) {
+          newIndexes[2] = {
+            index: 0,
+            side: 'right'
+          };
+        }
+
+        setFakeIndexes(newIndexes);
+        return;
+      }
+
+      if (index === 1 && direction === 'right' || index === 0 && direction !== 'right') {
+        newIndexes[0] = {
+          index: total - 1,
+          side: 'left'
+        };
+      }
+
+      if (index === 0 && direction === 'right' || index === -1) {
+        newIndexes[1] = {
+          index: total - 2,
+          side: 'left'
+        };
+      }
+
+      if (index === total - 2 && direction === 'left' || index === total - 1 && direction !== 'left') {
+        newIndexes[2] = {
+          index: 0,
+          side: 'right'
+        };
+      }
+
+      if (index === total - 1 && direction === 'left' || index === total) {
+        newIndexes[3] = {
+          index: 1,
+          side: 'right'
+        };
+      }
+
+      setFakeIndexes(newIndexes);
+    }
+
+    function getItemTranslateStyle(childIndex, ratio) {
+      var dis = index - childIndex;
+      var prefix = dis > 0 ? 1 : -1;
+      var transPercent = 1 - inactiveValidScale;
+      var trans = 0;
+
+      if (Math.abs(dis) > 1) {
+        trans = (prefix * (Math.abs(dis) - 1) - ratio) * transPercent;
+      } else if (dis === -1 && ratio > 0 || dis === 1 && ratio < 0) {
+        trans = -1 * ratio * transPercent;
+      }
+
+      return "translate" + (vertical ? 'Y' : 'X') + "(" + trans * 100 + "%)";
+    }
+
+    function getItemScaleStyle(childIndex, ratio) {
+      var originScale = inactiveValidScale; // active滑块前后两侧的滑块，根据滑动距离等比放大
+      // @en The front and rear sides of the active slider, and zoom in proportionally according to the sliding distance
+
+      if (childIndex === index - 1 && direction === 'right' || childIndex === index + 1 && direction === 'left') {
+        return originScale + (1 - originScale) * Math.abs(ratio);
+      } // active的滑块，根据滑动距离等比缩小
+      // @en The active slider, zoom out proportionally according to the sliding distance
+
+
+      if (childIndex === index) {
+        return 1 - (1 - originScale) * Math.abs(ratio);
+      } // 其他保持inactiveScale即可
+      // @en Others remain inactiveScale
+
+
+      return originScale;
+    }
+
+    function getItemOriginStyle(childIndex) {
+      var origin = 0.5;
+      var dis = childIndex - index;
+
+      if (dis === 0) {
+        // 当前active的卡片，随滑动方向切换origin
+        // @en The currently active card, switch origin with the sliding direction
+        origin = direction === 'right' || direction === '' && lastDirectionRef.current === 'left' ? 0 : 1;
+      } else if (dis <= -1) {
+        // 当前active之前的卡片，origin均靠最右
+        // @en The cards in front of the currently active card, the origin is on the far right
+        origin = 1;
+      } else if (dis >= 1) {
+        // 当前active之后的卡片，origin均靠最左
+        // @en The cards after the currently active card, the origin is on the far left
+        origin = 0;
+      }
+
+      var originStr = origin * 100 + "%";
+      return vertical ? "center " + originStr : originStr + " center";
+    }
+
+    function getItemInnerStyle(curIndex) {
+      var transitionStyle = getSlideTransitionStyle();
+      var childIndex = getShownChildIndex(curIndex);
+      var ratio = distance / childSize || 0; // 有放大效果的item，随着distance变化而变化scale和transform-origin
+      // @en Item with magnification effect, scale and transform-origin change with distance
+      // transform效果与fake dom时item的transform需隔离，且scale后会影响item的padding展示
+      // @en The transform effect of the item needs to be isolated from the fake dom, and the padding display of the item will be affected after scale.
+      // 因此需要缩放时多包裹一层item-inner，单独处理缩放逻辑
+      // @en Therefore, need to wrap an additional layer of item-inner when scaling, and handle the scaling logic separately
+
+      var scale = getItemScaleStyle(childIndex, ratio);
+      var transformStyle = {
+        transform: getItemTranslateStyle(childIndex, ratio) + " scale(" + scale + ")",
+        transformOrigin: getItemOriginStyle(childIndex)
+      };
+      return (0, _helpers.getStyleWithVendor)((0, _extends3.default)({}, transitionStyle, transformStyle));
+    }
+
+    function getItemFakeStyle(childIndex) {
+      var _extends2, _ref, _ref2;
+
+      var styleMap = {
+        leftDirec: vertical ? 'bottom' : 'right',
+        rightDirec: vertical ? 'top' : 'left',
+        otherDirec: vertical ? 'left' : 'top',
+        trans: vertical ? 'Y' : 'X'
+      };
+      return (0, _extends3.default)((_extends2 = {
+        position: 'absolute'
+      }, _extends2[styleMap.otherDirec] = 0, _extends2), childIndex >= 0 ? (_ref = {}, _ref[styleMap.rightDirec] = childSize > 0 ? '100%' : total * 100 + "%", _ref.transform = "translate" + styleMap.trans + "(" + (childIndex - total) * 100 + "%)", _ref) : (_ref2 = {}, _ref2[styleMap.leftDirec] = '100%', _ref2.transform = "translate" + styleMap.trans + "(" + (childIndex + 1) * 100 + "%)", _ref2));
+    }
+
+    function getItemStyle(childIndex, isFake) {
+      var _ref3, _ref4;
+
+      var initialStartSpace = spaceBetween + leftOffset;
+      var initialEndSpace = spaceBetween + rightOffset;
+      var initalSize = vertical ? userSetBoxHeight : '100%';
+      var styleMap = {
+        size: vertical ? 'height' : 'width',
+        paddingStart: vertical ? 'paddingTop' : 'paddingLeft',
+        paddingEnd: vertical ? 'paddingBottom' : 'paddingRight',
+        translate: vertical ? 'translateY' : 'translateX'
+      }; // bugfix: item 为半透明状态下 fakeItem 和普通 item 重叠露馅问题
+      // @en bugfix: Solve the problem of overlapping fakeItem and the normal item when item is translucent
+
+      var transformStyle = isFake ? {
+        visibility: childIndex === total && transforms[0] > 0 || childIndex === -1 && transforms[total - 1] < 0 ? 'hidden' : 'initial'
+      } : {
+        transform: styleMap.translate + "(" + (transforms[childIndex] || 0) + "px)"
+      }; // childSize <= 0 说明是未全部加载完成的首屏情况 做一下特殊处理
+      // @en childSize <= 0 indicates that the first screen is not fully loaded, so do some special treatment
+
+      var layoutStyle = childSize > 0 ? (_ref3 = {}, _ref3[styleMap.size] = childSize - spaceBetween, _ref3[styleMap.paddingStart] = spaceBetween, _ref3.boxSizing = 'content-box', _ref3) : (_ref4 = {}, _ref4[styleMap.size] = initalSize, _ref4[styleMap.paddingStart] = initialStartSpace, _ref4[styleMap.paddingEnd] = initialEndSpace, _ref4.boxSizing = 'border-box', _ref4.transform = styleMap.translate + "(" + (childIndex === index ? 0 : (index - childIndex) * (spaceBetween + leftOffset + rightOffset)) + "px)", _ref4);
+      var fakeStyle = isFake ? getItemFakeStyle(childIndex) : {};
+
+      if (isFake && childSize < 0) {
+        delete fakeStyle.transform;
+      }
+
+      return (0, _helpers.getStyleWithVendor)((0, _extends3.default)({}, transformStyle, layoutStyle, fakeStyle));
+    }
+
+    function renderChild(child, childIndex, prefix) {
+      // 兼容线上逻辑，不需要切换放大效果的，不包裹item-inner
+      // @en No need to switch the magnification effect, do not wrap item-inner
+      return inactiveValidScale === 1 ? child : /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix + "-item-inner",
+        style: getItemInnerStyle(childIndex)
+      }, child);
+    }
+
+    function renderFakeItem(prefix, fakeIndex, side) {
+      if (!fakeItem || fakeIndex === void 0) {
+        return null;
+      }
+
+      var posIndex = side === 'left' ? fakeIndex - total : fakeIndex + total;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: "" + fakeIndex + posIndex,
+        className: (0, _mobileUtils.cls)(prefix + "-item carousel-item fake-item fake-" + side, {
+          vertical: vertical
+        }),
+        style: getItemStyle(posIndex, true)
+      }, renderChild(allChildren[fakeIndex], posIndex, prefix));
+    }
+
+    function renderAllFakeItem(prefix) {
+      return fakeIndexes.map(function (fakeIndex) {
+        return renderFakeItem(prefix, fakeIndex.index, fakeIndex.side);
+      });
+    }
+
+    function renderCarousel(_ref5) {
+      var _cls;
+
+      var prefixCls = _ref5.prefixCls;
+      var prefix = prefixCls + "-carousel";
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-wrap", className),
+        style: wrapStyle,
+        ref: domRef
+      }, needRefreshDom ? /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix + " wrap-placeholder",
+        ref: fakeWrapRef
+      }) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd,
+        ref: wrapRef,
+        style: getCarouselStyle()
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-inner " + cubic, {
+          vertical: vertical
+        }),
+        style: getInnerStyle(),
+        ref: innerRef
+      }, allChildren.map(function (child, childIndex) {
+        var inView = lazyloadCount !== void 0 ? childIndex >= index - lazyloadCount && childIndex <= index + lazyloadCount : true;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: childIndex,
+          className: (0, _mobileUtils.cls)(prefix + "-item carousel-item normal-item", {
+            active: childIndex === index,
+            vertical: vertical,
+            'ssr-float': childSize <= 0 && childIndex !== index
+          }),
+          style: getItemStyle(childIndex),
+          ref: function ref(childRef) {
+            itemsRef.current[childIndex] = childRef;
+          }
+        }, inView || transforms[childIndex] ? renderChild(child, childIndex, prefix) : null);
+      }), renderAllFakeItem(prefix))), showIndicator && (total > 1 || !hideSingleIndicator) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-indicator pos-" + indicatorPos, (_cls = {}, _cls["vertical ver-pos-" + indicatorVerticalPos] = vertical, _cls), {
+          inverse: indicatorInverse === void 0 ? indicatorOutside : indicatorInverse
+        }, {
+          outside: indicatorOutside
+        })
+      }, renderIndicator ? renderIndicator(shownIndex, shownTotal, lastShownIndexRef.current) : indicatorArr.map(function (_, i) {
+        return /*#__PURE__*/_react.default.createElement("i", {
+          key: i,
+          className: (0, _mobileUtils.cls)('indicator', "type-" + indicatorType, indicatorClass, {
+            active: i === shownIndex
+          })
+        });
+      })) : null);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderCarousel);
+  });
+  var _default = Carousel;
+  _exports.default = _default;
+});