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

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

@@ -1,17 +1,21 @@
+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__default from 'react';
-import { createForwardRefComponent } from '../../utils/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 
 function setTransform(nodeStyle, value) {
   nodeStyle.transform = value;
   nodeStyle.webkitTransform = value;
   nodeStyle.MozTransform = value;
 }
-const isWebView = typeof navigator !== 'undefined' && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
+var isWebView = typeof navigator !== 'undefined' && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
 var PullDownState;
 (function (PullDownState) {
   PullDownState["activate"] = "activate";
@@ -26,103 +30,113 @@ var INDICATOR;
   INDICATOR["release"] = "loading";
   INDICATOR["finish"] = "finish";
 })(INDICATOR || (INDICATOR = {}));
-let supportsPassive = false;
+var supportsPassive = false;
 try {
-  const opts = Object.defineProperty({}, 'passive', {
-    get() {
+  var opts = Object.defineProperty({}, 'passive', {
+    get: function get() {
       supportsPassive = true;
     }
   });
-  window.addEventListener('cancel', () => ({}), opts);
+  window.addEventListener('cancel', function () {
+    return {};
+  }, opts);
 } catch (e) {} // eslint-disable-line no-empty
-const willPreventDefault = supportsPassive ? {
+var willPreventDefault = supportsPassive ? {
   passive: false
 } : false;
-class PullDownRefresh extends React__default.Component {
-  constructor() {
-    super(...arguments);
+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);
     // 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 = flag => {
+    _this._ScreenY = 0;
+    _this._startScreenY = 0;
+    _this._lastScreenY = 0;
+    _this._isMounted = false;
+    _this.listeners = [];
+    _this.triggerPullDownRefresh = function (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
-          }, () => this.setContentStyle(this._lastScreenY));
+          }, function () {
+            return _this.setContentStyle(_this._lastScreenY);
+          });
         } else {
-          this.setState({
+          _this.setState({
             currSt: PullDownState.finish
-          }, () => this.reset());
+          }, function () {
+            return _this.reset();
+          });
         }
       }
     };
-    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)
+    _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)
       };
-      Object.keys(this._to).forEach(key => {
-        ele.addEventListener(key, this._to[key], willPreventDefault);
+      Object.keys(_this._to).forEach(function (key) {
+        ele.addEventListener(key, _this._to[key], willPreventDefault);
       });
     };
-    this.destroy = () => {
-      if (!this._to) return;
-      const ele = this.scrollContainer;
-      Object.keys(this._to).forEach(key => {
-        ele.removeEventListener(key, this._to[key]);
+    _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.onTouchStart = (_, e) => {
-      this._ScreenY = this._startScreenY = e.touches[0].screenY;
+    _this.onTouchStart = function (_, 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 = ele => {
-      const container = this.scrollContainer;
+    _this.isEdge = function (ele) {
+      var container = _this.scrollContainer;
       if (container && container === document.body) {
         // In chrome61 `document.body.scrollTop` is invalid
-        const scrollNode = document.scrollingElement ? document.scrollingElement : document.body;
+        var scrollNode = document.scrollingElement ? document.scrollingElement : document.body;
         return scrollNode.scrollTop <= 0;
       }
       return ele.scrollTop <= 0;
     };
-    this.damping = dy => {
-      if (Math.abs(this._lastScreenY) > this.props.damping) {
+    _this.damping = function (dy) {
+      if (Math.abs(_this._lastScreenY) > _this.props.damping) {
         return 0;
       }
-      const ratio = Math.abs(this._ScreenY - this._startScreenY) / window.screen.height;
+      var ratio = Math.abs(_this._ScreenY - _this._startScreenY) / window.screen.height;
       dy *= (1 - ratio) * 0.6;
       return dy;
     };
-    this.onTouchMove = (ele, e) => {
+    _this.onTouchMove = function (ele, e) {
       // 使用 pageY 对比有问题
-      const _screenY = e.touches[0].screenY;
+      var _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
           });
         }
@@ -132,21 +146,21 @@ class PullDownRefresh extends React__default.Component {
         // add stopPropagation with fastclick will trigger content onClick event. why?
         // ref https://github.com/ant-design/ant-design-mobile/issues/2141
         // e.stopPropagation();
-        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) {
+        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) {
             // 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
             });
           }
@@ -154,167 +168,169 @@ class PullDownRefresh extends React__default.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 = () => {
+    _this.onTouchEnd = function () {
       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 = () => {
-      this._lastScreenY = 0;
-      this.setContentStyle(0);
+    _this.reset = function () {
+      _this._lastScreenY = 0;
+      _this.setContentStyle(0);
     };
-    this.setContentStyle = ty => {
+    _this.setContentStyle = function (ty) {
       // TODO: Why sometimes do not have `this.contentRef` ?
-      if (this.contentRef) {
+      if (_this.contentRef) {
         // translate3d 不清理 会影响内部元素定位
         if (ty) {
-          setTransform(this.contentRef.style, `translate3d(0px,${ty}px,0)`);
+          setTransform(_this.contentRef.style, "translate3d(0px,".concat(ty, "px,0)"));
         } else {
-          setTransform(this.contentRef.style, '');
+          setTransform(_this.contentRef.style, '');
         }
       }
     };
+    return _this;
   }
-  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);
-      }
+  _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;
     }
-  }
-  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: el => {
-            this.contentRef = el;
-          },
-          children: [showIndicator && /*#__PURE__*/jsxs("div", {
-            className: `${prefixCls}-indicator`,
-            children: [/*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsx("div", {})]
-          }), children]
-        })
+  }, {
+    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);
       });
-    };
-    if (this.scrollContainer) {
-      return renderRefresh(`${prefixCls}-content ${prefixCls}-down`);
     }
-    return /*#__PURE__*/jsx("pull-down-refresh", {
-      ref: el => {
-        if (forwardedRef) {
-          forwardedRef.current = el;
+  }, {
+    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);
         }
-        this.containerRef = el;
-      },
-      className: classNames(className, prefixCls, `${prefixCls}-down`),
-      ...restProps,
-      children: renderRefresh(`${prefixCls}-content`)
-    });
-  }
-}
+      }
+    }
+  }, {
+    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", {
+          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")));
+    }
+  }]);
+  return PullDownRefresh;
+}(React.Component);
 PullDownRefresh.defaultProps = {
   prefixCls: 'rmc-pull-to-refresh',
   distanceToRefresh: 50,
   damping: 100,
   indicator: INDICATOR
 };
-var index = createForwardRefComponent(PullDownRefresh);
 
-export { index as default };
+export { PullDownRefresh as default };
 //# sourceMappingURL=index.js.map