@tarojs/components-react 4.0.1 → 4.0.3-alpha.0

package/dist/components/pull-down-refresh/index.js

@@ -1,21 +1,17 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/inherits';
-import _createSuper from '@babel/runtime/helpers/createSuper';
 import { __rest } from 'tslib';
 import './style/index.css.js';
 import Taro from '@tarojs/taro';
 import classNames from 'classnames';
-import React from 'react';
+import React__default from 'react';
+import { createForwardRefComponent } from '../../utils/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 function setTransform(nodeStyle, value) {
   nodeStyle.transform = value;
   nodeStyle.webkitTransform = value;
   nodeStyle.MozTransform = value;
 }
-var isWebView = typeof navigator !== 'undefined' && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
+const isWebView = typeof navigator !== 'undefined' && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
 var PullDownState;
 (function (PullDownState) {
   PullDownState["activate"] = "activate";
@@ -30,113 +26,103 @@ var INDICATOR;
   INDICATOR["release"] = "loading";
   INDICATOR["finish"] = "finish";
 })(INDICATOR || (INDICATOR = {}));
-var supportsPassive = false;
+let supportsPassive = false;
 try {
-  var opts = Object.defineProperty({}, 'passive', {
-    get: function get() {
+  const opts = Object.defineProperty({}, 'passive', {
+    get() {
       supportsPassive = true;
     }
   });
-  window.addEventListener('cancel', function () {
-    return {};
-  }, opts);
+  window.addEventListener('cancel', () => ({}), opts);
 } catch (e) {} // eslint-disable-line no-empty
-var willPreventDefault = supportsPassive ? {
+const willPreventDefault = supportsPassive ? {
   passive: false
 } : false;
-var PullDownRefresh = /*#__PURE__*/function (_React$Component) {
-  _inherits(PullDownRefresh, _React$Component);
-  var _super = _createSuper(PullDownRefresh);
-  function PullDownRefresh() {
-    var _this;
-    _classCallCheck(this, PullDownRefresh);
-    _this = _super.apply(this, arguments);
+class PullDownRefresh extends React__default.Component {
+  constructor() {
+    super(...arguments);
     // https://github.com/yiminghe/zscroller/blob/2d97973287135745818a0537712235a39a6a62a1/src/Scroller.js#L355
     // currSt: `activate` / `deactivate` / `release` / `finish`
-    _this.state = {
+    this.state = {
       currSt: PullDownState.deactivate,
       dragOnEdge: false
     };
-    _this._ScreenY = 0;
-    _this._startScreenY = 0;
-    _this._lastScreenY = 0;
-    _this._isMounted = false;
-    _this.listeners = [];
-    _this.triggerPullDownRefresh = function (flag) {
+    this._ScreenY = 0;
+    this._startScreenY = 0;
+    this._lastScreenY = 0;
+    this._isMounted = false;
+    this.listeners = [];
+    this.triggerPullDownRefresh = flag => {
       // 在初始化时、用代码 自动 触发 pullDownRefresh
       // 添加this._isMounted的判断，否则组建一实例化，currSt就会是finish
-      if (!_this.state.dragOnEdge && _this._isMounted) {
+      if (!this.state.dragOnEdge && this._isMounted) {
         if (flag) {
-          _this._lastScreenY = _this.props.distanceToRefresh + 1;
+          this._lastScreenY = this.props.distanceToRefresh + 1;
           // change dom need after setState
-          _this.setState({
+          this.setState({
             currSt: PullDownState.release
-          }, function () {
-            return _this.setContentStyle(_this._lastScreenY);
-          });
+          }, () => this.setContentStyle(this._lastScreenY));
         } else {
-          _this.setState({
+          this.setState({
             currSt: PullDownState.finish
-          }, function () {
-            return _this.reset();
-          });
+          }, () => this.reset());
         }
       }
     };
-    _this.init = function () {
-      var ele = _this.scrollContainer;
-      _this._to = {
-        touchstart: _this.onTouchStart.bind(_assertThisInitialized(_this), ele),
-        touchmove: _this.onTouchMove.bind(_assertThisInitialized(_this), ele),
-        touchend: _this.onTouchEnd.bind(_assertThisInitialized(_this), ele),
-        touchcancel: _this.onTouchEnd.bind(_assertThisInitialized(_this), ele)
+    this.init = () => {
+      const ele = this.scrollContainer;
+      this._to = {
+        touchstart: this.onTouchStart.bind(this, ele),
+        touchmove: this.onTouchMove.bind(this, ele),
+        touchend: this.onTouchEnd.bind(this, ele),
+        touchcancel: this.onTouchEnd.bind(this, ele)
       };
-      Object.keys(_this._to).forEach(function (key) {
-        ele.addEventListener(key, _this._to[key], willPreventDefault);
+      Object.keys(this._to).forEach(key => {
+        ele.addEventListener(key, this._to[key], willPreventDefault);
       });
     };
-    _this.destroy = function () {
-      if (!_this._to) return;
-      var ele = _this.scrollContainer;
-      Object.keys(_this._to).forEach(function (key) {
-        ele.removeEventListener(key, _this._to[key]);
+    this.destroy = () => {
+      if (!this._to) return;
+      const ele = this.scrollContainer;
+      Object.keys(this._to).forEach(key => {
+        ele.removeEventListener(key, this._to[key]);
       });
     };
-    _this.onTouchStart = function (_, e) {
-      _this._ScreenY = _this._startScreenY = e.touches[0].screenY;
+    this.onTouchStart = (_, e) => {
+      this._ScreenY = this._startScreenY = e.touches[0].screenY;
       // 一开始 refreshing 为 true 时 this._lastScreenY 有值
-      _this._lastScreenY = _this._lastScreenY || 0;
+      this._lastScreenY = this._lastScreenY || 0;
     };
-    _this.isEdge = function (ele) {
-      var container = _this.scrollContainer;
+    this.isEdge = ele => {
+      const container = this.scrollContainer;
       if (container && container === document.body) {
         // In chrome61 `document.body.scrollTop` is invalid
-        var scrollNode = document.scrollingElement ? document.scrollingElement : document.body;
+        const scrollNode = document.scrollingElement ? document.scrollingElement : document.body;
         return scrollNode.scrollTop <= 0;
       }
       return ele.scrollTop <= 0;
     };
-    _this.damping = function (dy) {
-      if (Math.abs(_this._lastScreenY) > _this.props.damping) {
+    this.damping = dy => {
+      if (Math.abs(this._lastScreenY) > this.props.damping) {
         return 0;
       }
-      var ratio = Math.abs(_this._ScreenY - _this._startScreenY) / window.screen.height;
+      const ratio = Math.abs(this._ScreenY - this._startScreenY) / window.screen.height;
       dy *= (1 - ratio) * 0.6;
       return dy;
     };
-    _this.onTouchMove = function (ele, e) {
+    this.onTouchMove = (ele, e) => {
       // 使用 pageY 对比有问题
-      var _screenY = e.touches[0].screenY;
+      const _screenY = e.touches[0].screenY;
       // 拖动方向不符合的不处理
-      if (_this._startScreenY > _screenY) {
+      if (this._startScreenY > _screenY) {
         return;
       }
-      if (_this.isEdge(ele)) {
-        if (!_this.state.dragOnEdge) {
+      if (this.isEdge(ele)) {
+        if (!this.state.dragOnEdge) {
           // 当用户开始往上滑的时候isEdge还是false的话，会导致this._ScreenY不是想要的，只有当isEdge为true时，再上滑，才有意义
           // 下面这行代码解决了上面这个问题
-          _this._ScreenY = _this._startScreenY = e.touches[0].screenY;
-          _this.setState({
+          this._ScreenY = this._startScreenY = e.touches[0].screenY;
+          this.setState({
             dragOnEdge: true
           });
         }
@@ -146,21 +132,21 @@ var PullDownRefresh = /*#__PURE__*/function (_React$Component) {
         // add stopPropagation with fastclick will trigger content onClick event. why?
         // ref https://github.com/ant-design/ant-design-mobile/issues/2141
         // e.stopPropagation();
-        var _diff = Math.round(_screenY - _this._ScreenY);
-        _this._ScreenY = _screenY;
-        _this._lastScreenY += _this.damping(_diff);
-        _this.setContentStyle(_this._lastScreenY);
-        if (Math.abs(_this._lastScreenY) < _this.props.distanceToRefresh) {
-          if (_this.state.currSt !== PullDownState.deactivate) {
+        const _diff = Math.round(_screenY - this._ScreenY);
+        this._ScreenY = _screenY;
+        this._lastScreenY += this.damping(_diff);
+        this.setContentStyle(this._lastScreenY);
+        if (Math.abs(this._lastScreenY) < this.props.distanceToRefresh) {
+          if (this.state.currSt !== PullDownState.deactivate) {
             // console.log('back to the distance');
-            _this.setState({
+            this.setState({
               currSt: PullDownState.deactivate
             });
           }
         } else {
-          if (_this.state.currSt === PullDownState.deactivate) {
+          if (this.state.currSt === PullDownState.deactivate) {
             // console.log('reach to the distance');
-            _this.setState({
+            this.setState({
               currSt: PullDownState.activate
             });
           }
@@ -168,169 +154,167 @@ var PullDownRefresh = /*#__PURE__*/function (_React$Component) {
         // https://github.com/ant-design/ant-design-mobile/issues/573#issuecomment-339560829
         // iOS UIWebView issue, It seems no problem in WKWebView
         if (isWebView && e.changedTouches[0].clientY < 0) {
-          _this.onTouchEnd();
+          this.onTouchEnd();
         }
       }
     };
-    _this.onTouchEnd = function () {
+    this.onTouchEnd = () => {
       var _a, _b;
-      if (_this.state.dragOnEdge) {
-        _this.setState({
+      if (this.state.dragOnEdge) {
+        this.setState({
           dragOnEdge: false
         });
       }
-      if (_this.state.currSt === PullDownState.activate) {
-        _this.setState({
+      if (this.state.currSt === PullDownState.activate) {
+        this.setState({
           currSt: PullDownState.release
         });
-        (_b = (_a = _this.props).onRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
-        _this._lastScreenY = _this.props.distanceToRefresh + 1;
-        _this.setContentStyle(_this._lastScreenY);
-      } else if (_this.state.currSt === 'release') {
-        _this._lastScreenY = _this.props.distanceToRefresh + 1;
-        _this.setContentStyle(_this._lastScreenY);
+        (_b = (_a = this.props).onRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this._lastScreenY = this.props.distanceToRefresh + 1;
+        this.setContentStyle(this._lastScreenY);
+      } else if (this.state.currSt === 'release') {
+        this._lastScreenY = this.props.distanceToRefresh + 1;
+        this.setContentStyle(this._lastScreenY);
       } else {
-        _this.reset();
+        this.reset();
       }
     };
-    _this.reset = function () {
-      _this._lastScreenY = 0;
-      _this.setContentStyle(0);
+    this.reset = () => {
+      this._lastScreenY = 0;
+      this.setContentStyle(0);
     };
-    _this.setContentStyle = function (ty) {
+    this.setContentStyle = ty => {
       // TODO: Why sometimes do not have `this.contentRef` ?
-      if (_this.contentRef) {
+      if (this.contentRef) {
         // translate3d 不清理 会影响内部元素定位
         if (ty) {
-          setTransform(_this.contentRef.style, "translate3d(0px,".concat(ty, "px,0)"));
+          setTransform(this.contentRef.style, `translate3d(0px,${ty}px,0)`);
         } else {
-          setTransform(_this.contentRef.style, '');
+          setTransform(this.contentRef.style, '');
         }
       }
     };
-    return _this;
   }
-  _createClass(PullDownRefresh, [{
-    key: "scrollContainer",
-    get: function get() {
-      var _a, _b;
-      return ((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.parentElement) || ((_b = this.contentRef) === null || _b === void 0 ? void 0 : _b.closest('.taro_page_stationed')) || document.querySelector('.taro_page_stationed') || document.querySelector('.taro_page') || document.querySelector('.taro_router') || document.querySelector('.taro-tabbar__panel') || document.body;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      this.init();
-      this._isMounted = true;
-      this.listeners = [['__taroStartPullDownRefresh', function (_ref) {
-        var successHandler = _ref.successHandler,
-          errorHandler = _ref.errorHandler;
-        try {
-          _this2.triggerPullDownRefresh(true);
-          successHandler({
-            errMsg: 'startPullDownRefresh: ok'
-          });
-        } catch (e) {
-          errorHandler({
-            errMsg: 'startPullDownRefresh: fail'
-          });
-        }
-      }], ['__taroStopPullDownRefresh', function (_ref2) {
-        var successHandler = _ref2.successHandler,
-          errorHandler = _ref2.errorHandler;
-        try {
-          _this2.triggerPullDownRefresh(false);
-          successHandler({
-            errMsg: 'stopPullDownRefresh: ok'
-          });
-        } catch (e) {
-          errorHandler({
-            errMsg: 'stopPullDownRefresh: fail'
-          });
-        }
-      }]];
-      this.listeners.forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          evtName = _ref4[0],
-          callback = _ref4[1];
-        Taro.eventCenter.on(evtName, callback);
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.destroy();
-      this.listeners.forEach(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          evtName = _ref6[0],
-          callback = _ref6[1];
-        Taro.eventCenter.off(evtName, callback);
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var _a, _b, _c, _d;
-      if (prevState.currSt !== this.state.currSt) {
-        var pageEl = this.scrollContainer;
-        switch (this.state.currSt) {
-          case PullDownState.release:
-            (_b = (_a = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _a === void 0 ? void 0 : _a.onPullDownRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
-            break;
-          case PullDownState.deactivate:
-            (_d = (_c = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _c === void 0 ? void 0 : _c.onPullIntercept) === null || _d === void 0 ? void 0 : _d.call(_c);
-        }
+  get scrollContainer() {
+    var _a, _b;
+    return ((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.parentElement) || ((_b = this.contentRef) === null || _b === void 0 ? void 0 : _b.closest('.taro_page_stationed')) || document.querySelector('.taro_page_stationed') || document.querySelector('.taro_page') || document.querySelector('.taro_router') || document.querySelector('.taro-tabbar__panel') || document.body;
+  }
+  componentDidMount() {
+    this.init();
+    this._isMounted = true;
+    this.listeners = [['__taroStartPullDownRefresh', _ref => {
+      let {
+        successHandler,
+        errorHandler
+      } = _ref;
+      try {
+        this.triggerPullDownRefresh(true);
+        successHandler({
+          errMsg: 'startPullDownRefresh: ok'
+        });
+      } catch (e) {
+        errorHandler({
+          errMsg: 'startPullDownRefresh: fail'
+        });
+      }
+    }], ['__taroStopPullDownRefresh', _ref2 => {
+      let {
+        successHandler,
+        errorHandler
+      } = _ref2;
+      try {
+        this.triggerPullDownRefresh(false);
+        successHandler({
+          errMsg: 'stopPullDownRefresh: ok'
+        });
+      } catch (e) {
+        errorHandler({
+          errMsg: 'stopPullDownRefresh: fail'
+        });
+      }
+    }]];
+    this.listeners.forEach(_ref3 => {
+      let [evtName, callback] = _ref3;
+      Taro.eventCenter.on(evtName, callback);
+    });
+  }
+  componentWillUnmount() {
+    this.destroy();
+    this.listeners.forEach(_ref4 => {
+      let [evtName, callback] = _ref4;
+      Taro.eventCenter.off(evtName, callback);
+    });
+  }
+  componentDidUpdate(_, prevState) {
+    var _a, _b, _c, _d;
+    if (prevState.currSt !== this.state.currSt) {
+      const pageEl = this.scrollContainer;
+      switch (this.state.currSt) {
+        case PullDownState.release:
+          (_b = (_a = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _a === void 0 ? void 0 : _a.onPullDownRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
+          break;
+        case PullDownState.deactivate:
+          (_d = (_c = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _c === void 0 ? void 0 : _c.onPullIntercept) === null || _d === void 0 ? void 0 : _d.call(_c);
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var props = Object.assign({}, this.props);
-      delete props.damping;
-      delete props.indicator;
-      delete props.distanceToRefresh;
-      delete props.onRefresh;
-      var className = props.className,
-        prefixCls = props.prefixCls,
-        children = props.children,
-        restProps = __rest(props, ["className", "prefixCls", "children"]);
-      var renderRefresh = function renderRefresh(cls) {
-        var _this3$state = _this3.state,
-          currSt = _this3$state.currSt,
-          dragOnEdge = _this3$state.dragOnEdge;
-        var cla = classNames(cls, !dragOnEdge && "".concat(prefixCls, "-transition"));
-        var showIndicator = currSt === 'activate' || currSt === 'release';
-        return React.createElement("div", {
-          className: "".concat(prefixCls, "-content-wrapper")
-        }, React.createElement("div", {
+  }
+  render() {
+    const props = Object.assign({}, this.props);
+    delete props.damping;
+    delete props.indicator;
+    delete props.distanceToRefresh;
+    delete props.onRefresh;
+    const {
+        className,
+        prefixCls,
+        children,
+        forwardedRef
+      } = props,
+      restProps = __rest(props, ["className", "prefixCls", "children", "forwardedRef"]);
+    const renderRefresh = cls => {
+      const {
+        currSt,
+        dragOnEdge
+      } = this.state;
+      const cla = classNames(cls, !dragOnEdge && `${prefixCls}-transition`);
+      const showIndicator = currSt === 'activate' || currSt === 'release';
+      return /*#__PURE__*/jsx("div", {
+        className: `${prefixCls}-content-wrapper`,
+        children: /*#__PURE__*/jsxs("div", {
           className: cla,
-          ref: function ref(el) {
-            _this3.contentRef = el;
-          }
-        }, showIndicator && React.createElement("div", {
-          className: "".concat(prefixCls, "-indicator")
-        }, React.createElement("div", null), React.createElement("div", null), React.createElement("div", null)), children));
-      };
-      if (this.scrollContainer) {
-        return renderRefresh("".concat(prefixCls, "-content ").concat(prefixCls, "-down"));
-      }
-      return React.createElement("pull-down-refresh", Object.assign({
-        ref: function ref(el) {
-          _this3.containerRef = el;
-        },
-        className: classNames(className, prefixCls, "".concat(prefixCls, "-down"))
-      }, restProps), renderRefresh("".concat(prefixCls, "-content")));
+          ref: el => {
+            this.contentRef = el;
+          },
+          children: [showIndicator && /*#__PURE__*/jsxs("div", {
+            className: `${prefixCls}-indicator`,
+            children: [/*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {})]
+          }), children]
+        })
+      });
+    };
+    if (this.scrollContainer) {
+      return renderRefresh(`${prefixCls}-content ${prefixCls}-down`);
     }
-  }]);
-  return PullDownRefresh;
-}(React.Component);
+    return /*#__PURE__*/jsx("pull-down-refresh", {
+      ref: el => {
+        if (forwardedRef) {
+          forwardedRef.current = el;
+        }
+        this.containerRef = el;
+      },
+      className: classNames(className, prefixCls, `${prefixCls}-down`),
+      ...restProps,
+      children: renderRefresh(`${prefixCls}-content`)
+    });
+  }
+}
 PullDownRefresh.defaultProps = {
   prefixCls: 'rmc-pull-to-refresh',
   distanceToRefresh: 50,
   damping: 100,
   indicator: INDICATOR
 };
+var index = createForwardRefComponent(PullDownRefresh);
 
-export { PullDownRefresh as default };
+export { index as default };
 //# sourceMappingURL=index.js.map