rmc-list-view/es/RefreshControl.js

m-list-view ui component for react

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

var propTypes = {
  prefixCls: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  icon: PropTypes.any,
  loading: PropTypes.any,
  distanceToRefresh: PropTypes.number,
  refreshing: PropTypes.bool,
  onRefresh: PropTypes.func.isRequired
};

var RefreshControl = function (_React$Component) {
  _inherits(RefreshControl, _React$Component);

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

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

    _this.state = {
      active: false,
      deactive: false,
      loadingState: false
    };
    return _this;
  }

  _createClass(RefreshControl, [{
    key: 'render',
    value: function render() {
      var _classNames,
          _this2 = this;

      var _props = this.props,
          prefixCls = _props.prefixCls,
          className = _props.className,
          style = _props.style,
          icon = _props.icon,
          loading = _props.loading,
          refreshing = _props.refreshing;
      var _state = this.state,
          active = _state.active,
          deactive = _state.deactive,
          loadingState = _state.loadingState;

      var wrapCls = classNames(className, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-indicator', true), _defineProperty(_classNames, prefixCls + '-active', active), _defineProperty(_classNames, prefixCls + '-deactive', deactive), _defineProperty(_classNames, prefixCls + '-loading', loadingState || refreshing), _classNames));
      return React.createElement(
        'div',
        { ref: function ref(el) {
            return _this2.ptrRef = el;
          }, className: wrapCls, style: style },
        React.createElement(
          'div',
          { className: prefixCls + '-indicator-icon-wrapper' },
          icon
        ),
        React.createElement(
          'div',
          { className: prefixCls + '-indicator-loading-wrapper' },
          loading
        )
      );
    }
  }]);

  return RefreshControl;
}(React.Component);

RefreshControl.propTypes = propTypes;
RefreshControl.defaultProps = {
  prefixCls: 'list-view-refresh-control',
  distanceToRefresh: 50,
  refreshing: false,
  icon: [React.createElement(
    'div',
    { key: '0', className: 'list-view-refresh-control-pull' },
    '\u2193 \u4E0B\u62C9'
  ), React.createElement(
    'div',
    { key: '1', className: 'list-view-refresh-control-release' },
    '\u2191 \u91CA\u653E'
  )],
  loading: React.createElement(
    'div',
    null,
    'loading...'
  )
};
export default RefreshControl;