@tarojs/components-react 4.0.1-alpha.1 → 4.0.1

package/dist/components/swiper/index.js

@@ -1,15 +1,19 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _createSuper from '@babel/runtime/helpers/createSuper';
 import { __rest } from 'tslib';
 import 'swiper/swiper-bundle.min.css';
 import './style/index.css.js';
 import classNames from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import Swipers from 'swiper/swiper-bundle.esm.js';
-import { debounce, createForwardRefComponent } from '../../utils/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { debounce } from '../../utils/index.js';
 
-let INSTANCE_ID = 0;
-const createEvent = type => {
-  let e;
+var INSTANCE_ID = 0;
+var createEvent = function createEvent(type) {
+  var e;
   try {
     e = new TouchEvent(type);
   } catch (err) {
@@ -18,281 +22,297 @@ const createEvent = type => {
   }
   return e;
 };
-class SwiperItemInner extends React__default.Component {
-  render() {
-    const _a = this.props,
-      {
-        className,
-        style,
-        itemId,
-        children,
-        forwardedRef
-      } = _a,
-      restProps = __rest(_a, ["className", "style", "itemId", "children", "forwardedRef"]);
-    const cls = classNames('swiper-slide', className);
-    return /*#__PURE__*/jsx("div", {
-      ref: e => {
-        if (e && forwardedRef) {
-          forwardedRef.current = e;
-        }
-      },
-      className: cls,
-      style: style,
-      "item-id": itemId,
-      ...restProps,
-      children: children
-    });
+var SwiperItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(SwiperItem, _React$Component);
+  var _super = _createSuper(SwiperItem);
+  function SwiperItem() {
+    _classCallCheck(this, SwiperItem);
+    return _super.apply(this, arguments);
   }
-}
-class SwiperInner extends React__default.Component {
-  constructor() {
-    super(...arguments);
-    this._id = 1 + INSTANCE_ID++;
-    this._$current = 0;
-    this._$width = 0;
-    this._$height = 0;
-    this.handleSwiperLoopListen = () => {
+  _createClass(SwiperItem, [{
+    key: "render",
+    value: function render() {
+      var _a = this.props,
+        className = _a.className,
+        style = _a.style,
+        itemId = _a.itemId,
+        children = _a.children,
+        restProps = __rest(_a, ["className", "style", "itemId", "children"]);
+      var cls = classNames('swiper-slide', className);
+      return React.createElement("div", Object.assign({
+        className: cls,
+        style: style,
+        "item-id": itemId
+      }, restProps), children);
+    }
+  }]);
+  return SwiperItem;
+}(React.Component);
+var Swiper = /*#__PURE__*/function (_React$Component2) {
+  _inherits(Swiper, _React$Component2);
+  var _super2 = _createSuper(Swiper);
+  function Swiper() {
+    var _this;
+    _classCallCheck(this, Swiper);
+    _this = _super2.apply(this, arguments);
+    _this._id = 1 + INSTANCE_ID++;
+    _this._$current = 0;
+    _this._$width = 0;
+    _this._$height = 0;
+    _this.handleSwiperLoopListen = function () {
       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)');
+      (_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);
+      var wrapper = _this.mySwiper.$wrapperEl[0];
+      var list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)');
       if (list.length >= 1) {
-        this.observerFirst.observe(list[0], {
+        _this.observerFirst.observe(list[0], {
           characterData: true
         });
       } else if (list.length >= 2) {
-        this.observerLast.observe(list[list.length - 1], {
+        _this.observerLast.observe(list[list.length - 1], {
           characterData: true
         });
       }
     };
-    this.handleSwiperLoop = debounce(() => {
-      if (this.mySwiper && this.mySwiper.$wrapperEl && this.props.circular) {
+    _this.handleSwiperLoop = debounce(function () {
+      if (_this.mySwiper && _this.mySwiper.$wrapperEl && _this.props.circular) {
         // @ts-ignore
-        this.mySwiper.loopDestroy();
+        _this.mySwiper.loopDestroy();
         // @ts-ignore
-        this.mySwiper.loopCreate();
+        _this.mySwiper.loopCreate();
       }
     }, 500);
+    return _this;
   }
-  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);
+  _createClass(Swiper, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props = this.props,
+        _this$props$autoplay = _this$props.autoplay,
+        autoplay = _this$props$autoplay === void 0 ? false : _this$props$autoplay,
+        _this$props$circular = _this$props.circular,
+        circular = _this$props$circular === void 0 ? true : _this$props$circular,
+        _this$props$current = _this$props.current,
+        current = _this$props$current === void 0 ? 0 : _this$props$current,
+        _this$props$displayMu = _this$props.displayMultipleItems,
+        displayMultipleItems = _this$props$displayMu === void 0 ? 1 : _this$props$displayMu,
+        _this$props$duration = _this$props.duration,
+        duration = _this$props$duration === void 0 ? 500 : _this$props$duration,
+        _this$props$interval = _this$props.interval,
+        interval = _this$props$interval === void 0 ? 5000 : _this$props$interval,
+        spaceBetween = _this$props.spaceBetween,
+        vertical = _this$props.vertical;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var that = this;
+      var opt = {
+        // 指示器
+        pagination: {
+          el: ".taro-swiper-".concat(this._id, " > .swiper-container > .swiper-pagination")
         },
-        transitionEnd() {
-          const e = createEvent('touchend');
-          try {
-            Object.defineProperty(e, 'detail', {
-              enumerable: true,
-              value: {
-                current: this.mySwiper.realIndex
+        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: function slideChange() {
+            var 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: function transitionEnd() {
+            var 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);
               }
-            });
-            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);
+            } catch (err) {} // eslint-disable-line no-empty
+            that.handleOnAnimationFinish(e);
+          },
+          observerUpdate: function observerUpdate(_swiper, e) {
+            var target = e.target;
+            var 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);
+                }
               }
             }
           }
         }
-      }
-    };
-    // 自动播放
-    if (autoplay) {
-      opt.autoplay = {
-        delay: parseInt(String(interval), 10),
-        disableOnInteraction: false
       };
-    }
-    // 两端距离
-    if (spaceBetween) {
-      opt.spaceBetween = spaceBetween;
-    }
-    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)); // 更新下标
-        }
-      } else {
-        this.mySwiper.slideTo(parseInt(nextCurrent, 10) + 1); // 更新下标
+      // 自动播放
+      if (autoplay) {
+        opt.autoplay = {
+          delay: parseInt(String(interval), 10),
+          disableOnInteraction: false
+        };
       }
-      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 (spaceBetween) {
+        opt.spaceBetween = spaceBetween;
+      }
+      this.mySwiper = new Swipers(this.$el, opt);
+      setTimeout(function () {
+        _this2.mySwiper.update();
+      }, 500);
+      if (!this.mySwiper || !this.props.circular) return;
+      var wrapper = this.mySwiper.$wrapperEl[0];
+      this.observer = new MutationObserver(this.handleSwiperLoopListen);
+      this.observer.observe(wrapper, {
+        childList: true
+      });
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (this.mySwiper) {
+        var 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)); // 更新下标
           }
-          autoplay.start();
         } else {
-          autoplay.stop();
+          this.mySwiper.slideTo(parseInt(nextCurrent, 10) + 1); // 更新下标
         }
+
+        var 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);
+            }
+            autoplay.start();
+          } else {
+            autoplay.stop();
+          }
+        }
+        this.mySwiper.update(); // 更新子元素
       }
-      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();
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps) {
+      if (preProps.children.length === 0 && this.props.children.length > 0) {
+        this.mySwiper.loopDestroy();
+        this.mySwiper.loopCreate();
       }
-    }
-    this._$width = this.mySwiper.width;
-    this._$height = this.mySwiper.height;
-  }
-  componentWillUnmount() {
-    var _a, _b, _c, _d, _e, _f;
-    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);
-  }
-  handleOnChange(e) {
-    const func = this.props.onChange;
-    typeof func === 'function' && func(e);
-  }
-  handleOnAnimationFinish(e) {
-    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, ''));
-  }
-  render() {
-    const {
-      className,
-      style,
-      vertical,
-      previousMargin,
-      nextMargin,
-      indicatorColor,
-      indicatorActiveColor,
-      forwardedRef
-    } = this.props;
-    const defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)';
-    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);
-    const paginationCls = classNames('swiper-pagination', {
-      'swiper-pagination-hidden': !this.props.indicatorDots,
-      'swiper-pagination-bullets': this.props.indicatorDots
-    });
-    return /*#__PURE__*/jsx("div", {
-      className: `swiper-container-wrapper ${cls}`,
-      style: sty,
-      ref: e => {
-        if (forwardedRef && e) {
-          forwardedRef.current = e;
+      if (!this.mySwiper) return;
+      if (this.props.autoplay) {
+        if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) {
+          this.mySwiper.autoplay.start();
         }
-      },
-      children: /*#__PURE__*/jsxs("div", {
-        className: "swiper-container",
+      }
+      this._$width = this.mySwiper.width;
+      this._$height = this.mySwiper.height;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _a, _b, _c, _d, _e, _f;
+      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);
+    }
+  }, {
+    key: "handleOnChange",
+    value: function handleOnChange(e) {
+      var func = this.props.onChange;
+      typeof func === 'function' && func(e);
+    }
+  }, {
+    key: "handleOnAnimationFinish",
+    value: function handleOnAnimationFinish(e) {
+      var func = this.props.onAnimationFinish;
+      typeof func === 'function' && func(e);
+    }
+  }, {
+    key: "parsePX",
+    value: function parsePX() {
+      var s = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0px';
+      return parseFloat(s.replace(/r*px/i, ''));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props2 = this.props,
+        className = _this$props2.className,
+        style = _this$props2.style,
+        vertical = _this$props2.vertical,
+        previousMargin = _this$props2.previousMargin,
+        nextMargin = _this$props2.nextMargin,
+        indicatorColor = _this$props2.indicatorColor,
+        indicatorActiveColor = _this$props2.indicatorActiveColor;
+      var defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)';
+      var defaultIndicatorActiveColor = indicatorActiveColor || '#000';
+      var cls = classNames("taro-swiper-".concat(this._id), className);
+      var 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);
+      var paginationCls = classNames('swiper-pagination', {
+        'swiper-pagination-hidden': !this.props.indicatorDots,
+        'swiper-pagination-bullets': this.props.indicatorDots
+      });
+      return React.createElement("div", {
+        className: "swiper-container-wrapper ".concat(cls),
+        style: sty
+      }, React.createElement("div", {
+        className: 'swiper-container',
         style: {
           overflow: 'visible'
         },
-        ref: el => {
-          this.$el = el;
-        },
-        children: [/*#__PURE__*/jsx("div", {
-          dangerouslySetInnerHTML: {
-            __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} }
-              </style>`
-          }
-        }), /*#__PURE__*/jsx("div", {
-          className: "swiper-wrapper",
-          children: this.props.children
-        }), /*#__PURE__*/jsx("div", {
-          className: paginationCls
-        })]
-      })
-    });
-  }
-}
-const Swiper = createForwardRefComponent(SwiperInner);
-const SwiperItem = createForwardRefComponent(SwiperItemInner);
+        ref: function ref(el) {
+          _this3.$el = el;
+        }
+      }, React.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: "<style type='text/css'>\n              .taro-swiper-".concat(this._id, " > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ").concat(defaultIndicatorColor, " }\n              .taro-swiper-").concat(this._id, " > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ").concat(defaultIndicatorActiveColor, " }\n              </style>")
+        }
+      }), React.createElement("div", {
+        className: 'swiper-wrapper'
+      }, this.props.children), React.createElement("div", {
+        className: paginationCls
+      })));
+    }
+  }]);
+  return Swiper;
+}(React.Component);
 
 export { Swiper, SwiperItem };
 //# sourceMappingURL=index.js.map