@tarojs/components-react 4.0.0-canary.9 → 4.0.0

package/dist/components/swiper/index.js

@@ -1,19 +1,15 @@
-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 from 'react';
+import React__default from 'react';
 import Swipers from 'swiper/swiper-bundle.esm.js';
-import { debounce } from '../../utils/index.js';
+import { debounce, createForwardRefComponent } from '../../utils/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var INSTANCE_ID = 0;
-var createEvent = function createEvent(type) {
-  var e;
+let INSTANCE_ID = 0;
+const createEvent = type => {
+  let e;
   try {
     e = new TouchEvent(type);
   } catch (err) {
@@ -22,297 +18,281 @@ var createEvent = function createEvent(type) {
   }
   return e;
 };
-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 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
+    });
   }
-  _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 () {
+}
+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 = () => {
       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);
-      var wrapper = _this.mySwiper.$wrapperEl[0];
-      var 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);
+      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], {
+        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(function () {
-      if (_this.mySwiper && _this.mySwiper.$wrapperEl && _this.props.circular) {
+    this.handleSwiperLoop = debounce(() => {
+      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;
   }
-  _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")
+  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);
         },
-        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);
+        transitionEnd() {
+          const e = createEvent('touchend');
+          try {
+            Object.defineProperty(e, 'detail', {
+              enumerable: true,
+              value: {
+                current: this.mySwiper.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 (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);
               }
             }
           }
         }
-      };
-      // 自动播放
-      if (autoplay) {
-        opt.autoplay = {
-          delay: parseInt(String(interval), 10),
-          disableOnInteraction: false
-        };
-      }
-      // 两端距离
-      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
-      });
+    };
+    // 自动播放
+    if (autoplay) {
+      opt.autoplay = {
+        delay: parseInt(String(interval), 10),
+        disableOnInteraction: false
+      };
     }
-  }, {
-    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)); // 更新下标
-          }
-        } else {
-          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(); // 更新子元素
-      }
+    // 两端距离
+    if (spaceBetween) {
+      opt.spaceBetween = spaceBetween;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps) {
-      if (preProps.children.length === 0 && this.props.children.length > 0) {
-        this.mySwiper.loopDestroy();
-        this.mySwiper.loopCreate();
+    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 (!this.mySwiper) return;
-      if (this.props.autoplay) {
-        if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) {
-          this.mySwiper.autoplay.start();
+      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);
+          }
+          autoplay.start();
+        } else {
+          autoplay.stop();
         }
       }
-      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);
+      this.mySwiper.update(); // 更新子元素
     }
-  }, {
-    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);
+  }
+  componentDidUpdate(preProps) {
+    if (preProps.children.length === 0 && this.props.children.length > 0) {
+      this.mySwiper.loopDestroy();
+      this.mySwiper.loopCreate();
     }
-  }, {
-    key: "parsePX",
-    value: function parsePX() {
-      var s = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0px';
-      return parseFloat(s.replace(/r*px/i, ''));
+    if (!this.mySwiper) return;
+    if (this.props.autoplay) {
+      if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) {
+        this.mySwiper.autoplay.start();
+      }
     }
-  }, {
-    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',
+    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;
+        }
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        className: "swiper-container",
         style: {
           overflow: 'visible'
         },
-        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);
+        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);
 
 export { Swiper, SwiperItem };
 //# sourceMappingURL=index.js.map