weex-nuke/lib/RefreshControl/view/web.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeEnv = require('../../Env/index.js');

var _nukeView = require('../../View/index.js');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _addStyle = require('./add-style.js');

var _addStyle2 = _interopRequireDefault(_addStyle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** @jsx createElement */

var defaultStyle = {
  flexShrink: 0,
  flexDirection: 'column-reverse',
  display: 'flex',
  overflow: 'hidden',
  height: 0
};
var FULL_WIDTH = 750;
var defaultHeight = 150;

var RefreshControl = function (_Component) {
  _inherits(RefreshControl, _Component);

  function RefreshControl(props) {
    _classCallCheck(this, RefreshControl);

    var _this = _possibleConstructorReturn(this, (RefreshControl.__proto__ || Object.getPrototypeOf(RefreshControl)).call(this, props));

    _this.setWebRefreshHeight = function () {
      _this.setStyle({
        height: Math.floor(_this.move / 3) + 'px'
      });
    };

    _this.resetWebRefresh = function () {
      if (_this.move / 3 >= _this.height) {
        _this.addAnim();
        var list = (0, _rax.findDOMNode)(_this.props.listId);
        _this.props.onRefresh && _this.props.onRefresh();
      } else {
        _this.removeAnim();
        _this.setStyle({
          height: '0px'
        });
      }
    };

    _this.addAnimStyle = function () {
      // 下拉刷新 css 动画效果
      var animTime = _this.props.animationTime;

      var animStr = '0% {height: ' + _this.height + 'px} 40% {height: ' + _this.height + 'px} 100% {height: 0px}';
      var strHTML = '.refreshAnim { animation:runWebRefresh ' + animTime + 's; -moz-animation:runWebRefresh ' + animTime + 's; -webkit-animation:runWebRefresh ' + animTime + 's; -o-animation:runWebRefresh ' + animTime + 's; } @keyframes runWebRefresh {' + animStr + '} @-moz-keyframes runWebRefresh {' + animStr + '} @-webkit-keyframes runWebRefresh {' + animStr + '} @-o-keyframes runWebRefresh {' + animStr + '}';
      (0, _addStyle2.default)(strHTML);
    };

    _this.setListEvent = function () {
      var listId = _this.props.listId;
      // 绑定下拉刷新事件
      setTimeout(function () {
        var list = (0, _rax.findDOMNode)(listId);
        list.addEventListener('touchstart', function (e) {
          _this.startY = e.changedTouches[0].pageY;
        }, false);
        list.addEventListener('touchmove', function (e) {
          _this.moveY = e.changedTouches[0].pageY;
          if (list.scrollTop == 0) {
            _this.move = _this.moveY - _this.startY;
            _this.setWebRefreshHeight();
            if (_this.move > 0) {
              e.preventDefault();
            }
          }
        }, false);
        list.addEventListener('touchend', function (e) {
          _this.endY = e.changedTouches[0].pageY;
          if (list.scrollTop == 0 && _this.startY < _this.endY) {
            _this.resetWebRefresh();
          }
        }, false);
      }, 300);
    };

    _this.getHeightPxValue();
    _this.addAnimStyle();
    return _this;
  }

  _createClass(RefreshControl, [{
    key: 'findDom',
    value: function findDom() {
      if (!this.dom) {
        this.dom = (0, _rax.findDOMNode)(this.refs.webRefresh);
      }
      return this.dom;
    }
  }, {
    key: 'setStyle',
    value: function setStyle(styleData) {
      var elementStyle = this.findDom().style;
      for (var styleName in styleData) {
        elementStyle[styleName] = styleData[styleName];
      }
    }
  }, {
    key: 'getHeightPxValue',
    value: function getHeightPxValue() {
      var _props$style = this.props.style,
          style = _props$style === undefined ? {} : _props$style;

      var height = parseInt(style.height || defaultHeight, 10);
      if (window.devicePixelRatio) {
        if (typeof height === 'number') {
          this.height = height * window.screen.width / FULL_WIDTH;
        }
        this.height = height * window.screen.width / FULL_WIDTH;
      }
    }
  }, {
    key: 'addAnim',
    value: function addAnim() {
      (0, _rax.setNativeProps)(this.refs.webRefresh, { className: 'refreshAnim' });
    }
  }, {
    key: 'removeAnim',
    value: function removeAnim() {
      (0, _rax.setNativeProps)(this.refs.webRefresh, { className: 'empty' });
    }

    // 展开下拉动画


    // 收起下拉动画

    /**
     * 仿 iOS 下拉刷新逻辑
     * 只有超过 refreshControl 的高度后才可以触发时间。
     * 并执行快速回弹到固定高度的，继而按照动画回弹。
     */

  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.setListEvent();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // if (nextProps.refreshing !== this.props.refreshing) {
      if (!nextProps.refreshing) {
        this.removeAnim();
        this.setStyle({ height: '0px', overflow: 'hidden' });
      }
      // }
    }
  }, {
    key: 'render',
    value: function render() {
      var style = this.props.style;

      var refreshStyle = Object.assign({}, defaultStyle, style, { height: 0 });
      if (_nukeEnv.isWeb) {
        return (0, _rax.createElement)(
          _nukeView2.default,
          { ref: 'webRefresh', style: refreshStyle },
          this.props.children
        );
      }
      return null;
    }
  }]);

  return RefreshControl;
}(_rax.Component);

RefreshControl.propTypes = {
  animationTime: _rax.PropTypes.float,
  isRefreshing: _rax.PropTypes.boolean,
  onRefresh: _rax.PropTypes.func
};
RefreshControl.defaultProps = {
  animationTime: 1.5,

  style: {}
};

RefreshControl.displayName = 'RefreshControl';

exports.default = RefreshControl;
module.exports = exports['default'];