@tarojs/components-react 4.0.4 → 4.0.5-alpha.1

package/dist/components/swiper/index.js

@@ -1,13 +1,16 @@
-import { __rest } from 'tslib';
-import 'swiper/swiper-bundle.min.css';
+import { __rest, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+import 'swiper/swiper-bundle.css';
 import './style/index.css.js';
 import classNames from 'classnames';
 import React__default from 'react';
-import Swipers from 'swiper/swiper-bundle.esm.js';
+import Swipers from 'swiper/bundle';
 import { debounce, createForwardRefComponent } from '../../utils/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var _SwiperInner_source, _SwiperInner_swiperResetting, _SwiperInner_lastSwiperActiveIndex, _SwiperInner_domChangeByOutSide;
 let INSTANCE_ID = 0;
+const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5;
+const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7;
 const createEvent = type => {
   let e;
   try {
@@ -45,181 +48,314 @@ class SwiperItemInner extends React__default.Component {
   }
 }
 class SwiperInner extends React__default.Component {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
     this._id = 1 + INSTANCE_ID++;
-    this._$current = 0;
-    this._$width = 0;
-    this._$height = 0;
-    this.handleSwiperLoopListen = () => {
-      var _a, _b, _c, _d;
-      (_b = (_a = this.observerFirst) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
-      (_d = (_c = this.observerLast) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
-      this.observerFirst = new MutationObserver(this.handleSwiperLoop);
-      this.observerLast = new MutationObserver(this.handleSwiperLoop);
-      const wrapper = this.mySwiper.$wrapperEl[0];
-      const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)');
-      if (list.length >= 1) {
-        this.observerFirst.observe(list[0], {
-          characterData: true
-        });
-      } else if (list.length >= 2) {
-        this.observerLast.observe(list[list.length - 1], {
-          characterData: true
-        });
+    _SwiperInner_source.set(this, 'autoplay');
+    _SwiperInner_swiperResetting.set(this, false);
+    _SwiperInner_lastSwiperActiveIndex.set(this, 0);
+    _SwiperInner_domChangeByOutSide.set(this, false);
+    this.handleInit = function () {
+      let reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      const {
+        autoplay = false,
+        circular = true,
+        current = 0,
+        displayMultipleItems = 1,
+        duration = 500,
+        interval = 5000,
+        currentItemId,
+        effectsProps = {},
+        vertical
+      } = _this.props;
+      let initialSlide = parseInt(String(current), 10);
+      if (reset) {
+        initialSlide = __classPrivateFieldGet(_this, _SwiperInner_lastSwiperActiveIndex, "f");
+      } else {
+        if (currentItemId) {
+          let itemIdIndex = 0;
+          _this.getSlidersList().forEach((swiperItem, index) => {
+            // @ts-ignore
+            if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+              itemIdIndex = index;
+            }
+          });
+          initialSlide = itemIdIndex;
+        }
       }
-    };
-    this.handleSwiperLoop = debounce(() => {
-      if (this.mySwiper && this.mySwiper.$wrapperEl && this.props.circular) {
+      const loopAdditionalSlides = _this.getLoopAdditionalSlides();
+      const centeredSlides = parseFloat(String(displayMultipleItems)) === 1;
+      const slidesPerView = parseFloat(String(displayMultipleItems)) === 1 ? 'auto' : displayMultipleItems;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const that = _this;
+      const opt = Object.assign(Object.assign({
+        // 指示器
+        pagination: {
+          el: `.taro-swiper-${_this._id} > .swiper-container > .swiper-pagination`
+        },
+        direction: vertical ? 'vertical' : 'horizontal',
+        loop: circular,
+        slidesPerView: slidesPerView,
+        initialSlide,
+        speed: parseInt(String(duration), 10),
+        observer: true,
+        observeParents: true,
+        loopAdditionalSlides,
+        centeredSlides
+      }, effectsProps), {
+        on: {
+          init(_swiper) {
+            that.getNeedFixLoop() && _swiper.loopFix();
+            that.props.autoplay && _swiper.autoplay.start();
+          },
+          slideChangeTransitionEnd(_swiper) {
+            if (__classPrivateFieldGet(that, _SwiperInner_swiperResetting, "f")) return;
+            that.getNeedFixLoop() && _swiper.loopFix();
+            that.props.autoplay && _swiper.autoplay.start();
+            const e = createEvent('touchend');
+            try {
+              const currentId = that.getCurrentId(_swiper);
+              Object.defineProperty(e, 'detail', {
+                enumerable: true,
+                value: {
+                  source: __classPrivateFieldGet(that, _SwiperInner_source, "f"),
+                  current: this.realIndex,
+                  currentId: currentId
+                }
+              });
+            } catch (err) {} // eslint-disable-line no-empty
+            that.handleOnAnimationFinish(e);
+            __classPrivateFieldSet(that, _SwiperInner_source, 'autoplay', "f");
+          },
+          touchEnd: _swiper => {
+            __classPrivateFieldSet(that, _SwiperInner_source, 'touch', "f");
+            that.props.autoplay && _swiper.autoplay.start();
+          },
+          touchStart: _swiper => {
+            that.props.autoplay && _swiper.autoplay.pause();
+          },
+          slideChange(_swiper) {
+            if (__classPrivateFieldGet(that, _SwiperInner_swiperResetting, "f") || __classPrivateFieldGet(that, _SwiperInner_lastSwiperActiveIndex, "f") === _swiper.realIndex) return;
+            __classPrivateFieldSet(that, _SwiperInner_lastSwiperActiveIndex, _swiper.realIndex, "f");
+            const e = createEvent('touchend');
+            try {
+              const currentId = that.getCurrentId(_swiper);
+              Object.defineProperty(e, 'detail', {
+                enumerable: true,
+                value: {
+                  current: this.realIndex,
+                  source: __classPrivateFieldGet(that, _SwiperInner_source, "f"),
+                  currentId
+                }
+              });
+            } catch (err) {} // eslint-disable-line no-empty
+            that.handleOnChange(e);
+          },
+          autoplay(_swiper) {
+            // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题
+            _swiper.animating = false;
+            __classPrivateFieldSet(that, _SwiperInner_source, 'autoplay', "f");
+          }
+        }
+      });
+      // 自动播放
+      if (autoplay) {
+        opt.autoplay = {
+          delay: parseInt(String(interval), 10),
+          disableOnInteraction: false
+        };
+      }
+      _this.swiper = new Swipers(_this.$el, opt);
+      if (_this.getNeedFixLoop()) {
         // @ts-ignore
-        this.mySwiper.loopDestroy();
+        const minTranslate = _this.swiper.minTranslate.bind(_this.swiper);
         // @ts-ignore
-        this.mySwiper.loopCreate();
+        const maxTranslate = _this.swiper.maxTranslate.bind(_this.swiper);
+        if (centeredSlides && _this.getSlidersList().length < 4) {
+          // @ts-ignore
+          _this.swiper.minTranslate = () => minTranslate() + _this.parseMargin()[1];
+          // @ts-ignore
+          _this.swiper.maxTranslate = () => maxTranslate() - _this.parseMargin()[0];
+        } else {
+          // @ts-ignore
+          _this.swiper.minTranslate = () => minTranslate() - _this.parseMargin()[0];
+          // @ts-ignore
+          _this.swiper.maxTranslate = () => maxTranslate() + _this.parseMargin()[1];
+        }
+      }
+      _this.setState({
+        swiperWrapper: _this.swiper.wrapperEl
+      });
+    };
+    this.handleSwiperSizeDebounce = debounce(() => {
+      if (!this.swiper) return;
+      if (this.props.circular) {
+        if (__classPrivateFieldGet(this, _SwiperInner_domChangeByOutSide, "f")) {
+          this.reset();
+          __classPrivateFieldSet(this, _SwiperInner_domChangeByOutSide, false, "f");
+        }
+      } else {
+        this.swiper.update();
+        __classPrivateFieldSet(this, _SwiperInner_swiperResetting, false, "f");
       }
-    }, 500);
+    }, 50);
+    this.reset = () => {
+      if (!this.swiper) return;
+      __classPrivateFieldSet(this, _SwiperInner_swiperResetting, true, "f");
+      __classPrivateFieldSet(this, _SwiperInner_lastSwiperActiveIndex, this.swiper.realIndex, "f");
+      this.swiper.destroy();
+      this.handleInit(true);
+      __classPrivateFieldSet(this, _SwiperInner_swiperResetting, false, "f");
+    };
+    this.getSlidersList = () => {
+      var _a, _b;
+      return ((_b = (_a = this.$el) === null || _a === void 0 ? void 0 : _a.querySelectorAll) === null || _b === void 0 ? void 0 : _b.call(_a, '.swiper-slide')) || [];
+    };
+    this.getNeedFixLoop = () => {
+      const margins = this.parseMargin();
+      const hasMargin = margins.filter(Boolean).length > 0;
+      return this.props.circular && hasMargin;
+    };
+    this.parseMargin = () => {
+      const {
+        previousMargin = '0px',
+        nextMargin = '0px'
+      } = this.props;
+      const [, pM] = /^(\d+)px/.exec(previousMargin) || [];
+      const [, nN] = /^(\d+)px/.exec(nextMargin) || [];
+      return [parseInt(pM) || 0, parseInt(nN) || 0];
+    };
+    this.state = {
+      swiperWrapper: null
+    };
   }
   componentDidMount() {
-    const {
-      autoplay = false,
-      circular = true,
-      current = 0,
-      displayMultipleItems = 1,
-      duration = 500,
-      interval = 5000,
-      spaceBetween,
-      vertical
-    } = this.props;
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-    const opt = {
-      // 指示器
-      pagination: {
-        el: `.taro-swiper-${this._id} > .swiper-container > .swiper-pagination`
-      },
-      direction: vertical ? 'vertical' : 'horizontal',
-      loop: circular,
-      slidesPerView: parseFloat(String(displayMultipleItems)),
-      initialSlide: parseInt(String(current), 10),
-      speed: parseInt(String(duration), 10),
-      observer: true,
-      observeParents: true,
-      on: {
-        slideChange() {
-          const e = createEvent('touchend');
-          try {
-            Object.defineProperty(e, 'detail', {
-              enumerable: true,
-              value: {
-                current: this.realIndex
-              }
-            });
-          } catch (err) {} // eslint-disable-line no-empty
-          that._$current = this.realIndex;
-          that.handleOnChange(e);
-        },
-        transitionEnd() {
-          const e = createEvent('touchend');
-          try {
-            Object.defineProperty(e, 'detail', {
-              enumerable: true,
-              value: {
-                current: this.mySwiper.realIndex
-              }
-            });
-            if (this.mySwiper.isBeginning) {
-              this.mySwiper.slideToLoop(this.props.children.length - 1, 0);
-            } else if (this.mySwiper.isEnd) {
-              this.mySwiper.slideToLoop(0, 0);
-            }
-          } catch (err) {} // eslint-disable-line no-empty
-          that.handleOnAnimationFinish(e);
-        },
-        observerUpdate(_swiper, e) {
-          const target = e.target;
-          const className = target && typeof target.className === 'string' ? target.className : '';
-          if (className.includes('taro_page') && target.style.display !== 'none') {
-            if (that.props.autoplay && target.contains(_swiper.$el[0])) {
-              if (that.props.circular) {
-                _swiper.slideToLoop(this.realIndex, 0); // 更新下标
-              } else {
-                _swiper.slideTo(this.realIndex);
-              }
-            }
-          }
-        }
+    this.handleInit();
+  }
+  hackSwiperWrapDomAction() {
+    if (!this.state.swiperWrapper || !this.swiper) return;
+    const appendChild = this.state.swiperWrapper.appendChild.bind(this.state.swiperWrapper);
+    const removeChild = this.state.swiperWrapper.removeChild.bind(this.state.swiperWrapper);
+    const replaceChild = this.state.swiperWrapper.replaceChild.bind(this.state.swiperWrapper);
+    const insertBefore = this.state.swiperWrapper.insertBefore.bind(this.state.swiperWrapper);
+    const beforeAction = () => {
+      if (!this.state.swiperWrapper || !this.swiper) return;
+      __classPrivateFieldSet(this, _SwiperInner_swiperResetting, true, "f");
+      if (!__classPrivateFieldGet(this, _SwiperInner_domChangeByOutSide, "f") && this.props.circular) {
+        __classPrivateFieldSet(this, _SwiperInner_domChangeByOutSide, true, "f");
+        this.swiper.loopDestroy();
+        this.swiper.params.loop = false;
       }
     };
-    // 自动播放
-    if (autoplay) {
-      opt.autoplay = {
-        delay: parseInt(String(interval), 10),
-        disableOnInteraction: false
-      };
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.appendChild = function () {
+      beforeAction();
+      return appendChild(...arguments);
+    };
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.removeChild = function () {
+      beforeAction();
+      return removeChild(...arguments);
+    };
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.replaceChild = function () {
+      beforeAction();
+      return replaceChild(...arguments);
+    };
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.insertBefore = function () {
+      beforeAction();
+      return insertBefore(...arguments);
+    };
+  }
+  componentDidUpdate(prevProps, pervState) {
+    if (!this.swiper || !this.state.swiperWrapper) return;
+    if (pervState.swiperWrapper !== this.state.swiperWrapper && this.state.swiperWrapper) {
+      this.observer && this.observer.disconnect();
+      this.observer = new MutationObserver(this.handleSwiperSizeDebounce);
+      this.observer.observe(this.state.swiperWrapper, {
+        childList: true
+      });
+      this.hackSwiperWrapDomAction();
     }
-    // 两端距离
-    if (spaceBetween) {
-      opt.spaceBetween = spaceBetween;
+    if (prevProps.circular !== this.props.circular || prevProps.displayMultipleItems !== this.props.displayMultipleItems) {
+      this.reset();
     }
-    this.mySwiper = new Swipers(this.$el, opt);
-    setTimeout(() => {
-      this.mySwiper.update();
-    }, 500);
-    if (!this.mySwiper || !this.props.circular) return;
-    const wrapper = this.mySwiper.$wrapperEl[0];
-    this.observer = new MutationObserver(this.handleSwiperLoopListen);
-    this.observer.observe(wrapper, {
-      childList: true
-    });
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.mySwiper) {
-      const nextCurrent = typeof nextProps.current === 'number' ? nextProps.current : this._$current || 0;
-      this.handleSwiperLoop();
-      // 是否衔接滚动模式
-      if (nextProps.circular) {
-        if (!this.mySwiper.isBeginning && !this.mySwiper.isEnd) {
-          this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)); // 更新下标
-        }
+    if (prevProps.interval !== this.props.interval) {
+      if (typeof this.swiper.params.autoplay === 'object') {
+        this.swiper.params.autoplay.delay = this.props.interval;
+      }
+    }
+    if (prevProps.duration !== this.props.duration) {
+      this.swiper.params.speed = this.props.duration;
+    }
+    if (prevProps.current !== this.props.current && !this.props.currentItemId) {
+      const n = parseInt(String(this.props.current), 10);
+      if (isNaN(n) || n === this.swiper.realIndex) return;
+      __classPrivateFieldSet(this, _SwiperInner_source, '', "f");
+      if (this.props.circular) {
+        this.swiper.slideToLoop(n); // 更新下标
+        this.props.autoplay && this.swiper.autoplay.pause();
+        // @ts-ignore
+        this.swiper.loopFix();
+        this.props.autoplay && this.swiper.autoplay.start();
       } else {
-        this.mySwiper.slideTo(parseInt(nextCurrent, 10) + 1); // 更新下标
+        this.swiper.slideTo(n); // 更新下标
       }
-      const autoplay = this.mySwiper.autoplay;
-      // 判断是否需要停止或开始自动轮播
-      if (autoplay.running !== nextProps.autoplay) {
-        if (nextProps.autoplay) {
-          if (typeof this.mySwiper.params.autoplay === 'object') {
-            this.mySwiper.params.autoplay.disableOnInteraction = false;
-            this.mySwiper.params.autoplay.delay = parseInt(String(this.props.interval) || '3000', 10);
+    }
+    if (prevProps.autoplay !== this.props.autoplay) {
+      const swiperAutoplay = this.swiper.autoplay;
+      if (swiperAutoplay) {
+        if (swiperAutoplay.running === this.props.autoplay) return;
+        if (this.props.autoplay) {
+          if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
+            if (this.swiper.params.autoplay.disableOnInteraction === true) {
+              this.swiper.params.autoplay.disableOnInteraction = false;
+            }
+            this.swiper.params.autoplay.delay = this.props.interval;
           }
-          autoplay.start();
+          swiperAutoplay.start();
         } else {
-          autoplay.stop();
+          swiperAutoplay.stop();
         }
       }
-      this.mySwiper.update(); // 更新子元素
     }
-  }
-  componentDidUpdate(preProps) {
-    if (preProps.children.length === 0 && this.props.children.length > 0) {
-      this.mySwiper.loopDestroy();
-      this.mySwiper.loopCreate();
-    }
-    if (!this.mySwiper) return;
-    if (this.props.autoplay) {
-      if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) {
-        this.mySwiper.autoplay.start();
+    if (prevProps.currentItemId !== this.props.currentItemId) {
+      let itemIdIndex = 0;
+      this.getSlidersList().forEach((swiperItem, index) => {
+        const itemId = swiperItem.getAttribute('item-id');
+        // @ts-ignore
+        if (itemId === this.props.currentItemId) {
+          if (this.props.circular) {
+            itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index'));
+          } else {
+            itemIdIndex = index;
+          }
+        }
+      });
+      if (isNaN(itemIdIndex) || itemIdIndex === this.swiper.realIndex) return;
+      __classPrivateFieldSet(this, _SwiperInner_source, '', "f");
+      if (this.props.circular) {
+        this.swiper.slideToLoop(itemIdIndex); // 更新下标
+        this.props.autoplay && this.swiper.autoplay.pause();
+        // @ts-ignore
+        this.swiper.loopFix();
+        this.props.autoplay && this.swiper.autoplay.start();
+      } else {
+        this.swiper.slideTo(itemIdIndex); // 更新下标
       }
     }
-    this._$width = this.mySwiper.width;
-    this._$height = this.mySwiper.height;
   }
   componentWillUnmount() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     this.$el = null;
-    if (this.mySwiper) this.mySwiper.destroy();
-    (_b = (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
-    (_d = (_c = this.observerFirst) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
-    (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);
+    (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+    (_d = (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
+    this.setState({
+      swiperWrapper: null
+    });
   }
   handleOnChange(e) {
     const func = this.props.onChange;
@@ -229,17 +365,23 @@ class SwiperInner extends React__default.Component {
     const func = this.props.onAnimationFinish;
     typeof func === 'function' && func(e);
   }
-  parsePX() {
-    let s = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0px';
-    return parseFloat(s.replace(/r*px/i, ''));
+  getLoopAdditionalSlides() {
+    const slidersLength = this.getSlidersList().length;
+    if (!this.$el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD) return 0;
+    if (slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD) return 1;
+    return 2;
+  }
+  getCurrentId(swiper) {
+    const slides = swiper.slides;
+    const activeIndex = swiper.activeIndex;
+    const currentSlide = slides[activeIndex];
+    return currentSlide.getAttribute('item-id');
   }
   render() {
     const {
       className,
       style,
       vertical,
-      previousMargin,
-      nextMargin,
       indicatorColor,
       indicatorActiveColor,
       forwardedRef
@@ -248,12 +390,13 @@ class SwiperInner extends React__default.Component {
     const defaultIndicatorActiveColor = indicatorActiveColor || '#000';
     const cls = classNames(`taro-swiper-${this._id}`, className);
     const sty = Object.assign({
-      paddingTop: vertical ? this.parsePX(previousMargin) : 0,
-      paddingRight: vertical ? 0 : this.parsePX(nextMargin),
-      paddingBottom: vertical ? this.parsePX(nextMargin) : 0,
-      paddingLeft: vertical ? 0 : this.parsePX(previousMargin),
       overflow: 'hidden'
     }, style);
+    if (this.props.full) {
+      sty.height = '100%';
+    }
+    const [pM, nM] = this.parseMargin();
+    const swiperContainerStyleList = ['overflow: visible;', vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`, this.props.full ? 'height: 100%;' : ''];
     const paginationCls = classNames('swiper-pagination', {
       'swiper-pagination-hidden': !this.props.indicatorDots,
       'swiper-pagination-bullets': this.props.indicatorDots
@@ -279,6 +422,7 @@ class SwiperInner extends React__default.Component {
             __html: `<style type='text/css'>
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${defaultIndicatorColor} }
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${defaultIndicatorActiveColor} }
+              .taro-swiper-${this._id} > .swiper-container { ${swiperContainerStyleList.join('')} }
               </style>`
           }
         }), /*#__PURE__*/jsx("div", {
@@ -291,6 +435,7 @@ class SwiperInner extends React__default.Component {
     });
   }
 }
+_SwiperInner_source = new WeakMap(), _SwiperInner_swiperResetting = new WeakMap(), _SwiperInner_lastSwiperActiveIndex = new WeakMap(), _SwiperInner_domChangeByOutSide = new WeakMap();
 const Swiper = createForwardRefComponent(SwiperInner);
 const SwiperItem = createForwardRefComponent(SwiperItemInner);