rmc-list-view/lib/ScrollView.js

m-list-view ui component for react

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _zscroller = require('zscroller');

var _zscroller2 = _interopRequireDefault(_zscroller);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _util = require('./util');

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

// import mixin from 'react-mixin';
// import PullUpLoadMoreMixin from './PullUpLoadMoreMixin';

var SCROLLVIEW = 'ScrollView';
var INNERVIEW = 'InnerScrollView';

// https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js
// https://facebook.github.io/react-native/docs/refreshcontrol.html

var propTypes = {
  contentContainerStyle: _react.PropTypes.object,
  onScroll: _react.PropTypes.func,
  scrollEventThrottle: _react.PropTypes.number,
  removeClippedSubviews: _react.PropTypes.bool, // offscreen views are removed
  refreshControl: _react.PropTypes.element
};
var styles = {
  base: {
    position: 'relative',
    overflow: 'auto',
    WebkitOverflowScrolling: 'touch',
    flex: 1
  },
  zScroller: {
    position: 'relative',
    overflow: 'hidden',
    flex: 1
  }
};

var ScrollView = function (_React$Component) {
  (0, _inherits3["default"])(ScrollView, _React$Component);

  function ScrollView() {
    var _temp, _this, _ret;

    (0, _classCallCheck3["default"])(this, ScrollView);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleScroll = function (e) {
      _this.props.onScroll && _this.props.onScroll(e);
    }, _this.throttleScroll = function () {
      var handleScroll = function handleScroll() {};
      if (_this.props.scrollEventThrottle && _this.props.onScroll) {
        handleScroll = (0, _util.throttle)(_this.handleScroll, _this.props.scrollEventThrottle);
      }
      return handleScroll;
    }, _temp), (0, _possibleConstructorReturn3["default"])(_this, _ret);
  }

  ScrollView.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    if (prevProps.refreshControl && this.props.refreshControl) {
      var preRefreshing = prevProps.refreshControl.props.refreshing;
      var nowRefreshing = this.props.refreshControl.props.refreshing;
      if (preRefreshing && !nowRefreshing && this.refreshControlRefresh) {
        this.refreshControlRefresh();
      } else if (!this.manuallyRefresh && !preRefreshing && nowRefreshing) {
        this.domScroller.scroller.triggerPullToRefresh();
      }
    }
  };

  ScrollView.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _props = this.props,
        stickyHeader = _props.stickyHeader,
        useBodyScroll = _props.useBodyScroll,
        useZscroller = _props.useZscroller,
        scrollerOptions = _props.scrollerOptions,
        refreshControl = _props.refreshControl;

    if (stickyHeader || useBodyScroll) {
      return;
    }
    this.tsExec = this.throttleScroll();
    if (useZscroller) {
      this.domScroller = new _zscroller2["default"](_reactDom2["default"].findDOMNode(this.refs[INNERVIEW]), (0, _objectAssign2["default"])({}, {
        scrollingX: false,
        onScroll: this.tsExec
      }, scrollerOptions));
      if (refreshControl) {
        (function () {
          var scroller = _this2.domScroller.scroller;
          var _refreshControl$props = refreshControl.props,
              distanceToRefresh = _refreshControl$props.distanceToRefresh,
              onRefresh = _refreshControl$props.onRefresh;

          scroller.activatePullToRefresh(distanceToRefresh, function () {
            _this2.manuallyRefresh = true;
            _this2.refs.refreshControl.setState({ active: true });
          }, function () {
            _this2.manuallyRefresh = false;
            _this2.refs.refreshControl.setState({ active: false, loadingState: false });
          }, function () {
            _this2.refs.refreshControl.setState({ loadingState: true });
            var finishPullToRefresh = function finishPullToRefresh() {
              scroller.finishPullToRefresh();
              _this2.refreshControlRefresh = null;
            };
            Promise.all([new Promise(function (resolve) {
              onRefresh();
              _this2.refreshControlRefresh = resolve;
            }),
            // at lease 1s for ux
            new Promise(function (resolve) {
              return setTimeout(resolve, 1000);
            })]).then(finishPullToRefresh, finishPullToRefresh);
          });
          if (refreshControl.props.refreshing) {
            scroller.triggerPullToRefresh();
          }
        })();
      }
      return;
    }
    _reactDom2["default"].findDOMNode(this.refs[SCROLLVIEW]).addEventListener('scroll', this.tsExec);
  };

  ScrollView.prototype.componentWillUnmount = function componentWillUnmount() {
    var _props2 = this.props,
        stickyHeader = _props2.stickyHeader,
        useBodyScroll = _props2.useBodyScroll,
        useZscroller = _props2.useZscroller;

    if (stickyHeader || useBodyScroll) {
      return;
    }
    if (useZscroller) {
      this.domScroller.destroy();
      return;
    }
    _reactDom2["default"].findDOMNode(this.refs[SCROLLVIEW]).removeEventListener('scroll', this.tsExec);
  };

  ScrollView.prototype.render = function render() {
    var _classNames, _classNames2;

    var _props3 = this.props,
        children = _props3.children,
        className = _props3.className,
        _props3$prefixCls = _props3.prefixCls,
        prefixCls = _props3$prefixCls === undefined ? '' : _props3$prefixCls,
        _props3$listPrefixCls = _props3.listPrefixCls,
        listPrefixCls = _props3$listPrefixCls === undefined ? '' : _props3$listPrefixCls,
        _props3$listViewPrefi = _props3.listViewPrefixCls,
        listViewPrefixCls = _props3$listViewPrefi === undefined ? 'rmc-list-view' : _props3$listViewPrefi,
        _props3$style = _props3.style,
        style = _props3$style === undefined ? {} : _props3$style,
        contentContainerStyle = _props3.contentContainerStyle,
        useZscroller = _props3.useZscroller,
        refreshControl = _props3.refreshControl,
        stickyHeader = _props3.stickyHeader,
        useBodyScroll = _props3.useBodyScroll;


    var styleBase = styles.base;
    if (stickyHeader || useBodyScroll) {
      styleBase = null;
    } else if (useZscroller) {
      styleBase = styles.zScroller;
    }

    var preCls = prefixCls || listViewPrefixCls || '';

    var containerProps = {
      ref: SCROLLVIEW,
      style: (0, _objectAssign2["default"])({}, styleBase, style),
      className: (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, className, !!className), (0, _defineProperty3["default"])(_classNames, preCls + '-scrollview', true), _classNames))
    };
    var contentContainerProps = {
      ref: INNERVIEW,
      style: (0, _objectAssign2["default"])({}, { position: 'absolute', minWidth: '100%' }, contentContainerStyle),
      className: (0, _classnames2["default"])((_classNames2 = {}, (0, _defineProperty3["default"])(_classNames2, preCls + '-scrollview-content', true), (0, _defineProperty3["default"])(_classNames2, listPrefixCls, !!listPrefixCls), _classNames2))
    };

    if (refreshControl) {
      return _react2["default"].createElement(
        'div',
        containerProps,
        _react2["default"].createElement(
          'div',
          contentContainerProps,
          _react2["default"].cloneElement(refreshControl, { ref: 'refreshControl' }),
          children
        )
      );
    }

    if (stickyHeader || useBodyScroll) {
      return _react2["default"].createElement(
        'div',
        containerProps,
        children
      );
    }
    return _react2["default"].createElement(
      'div',
      containerProps,
      _react2["default"].createElement(
        'div',
        contentContainerProps,
        children
      )
    );
  };

  return ScrollView;
}(_react2["default"].Component);
// mixin(ScrollView.prototype, PullUpLoadMoreMixin);


ScrollView.propTypes = propTypes;
exports["default"] = ScrollView;
module.exports = exports['default'];