rmc-pull-to-refresh@1.0.13

React Mobile Pull To Refresh Component

import '../assets/index.less';
import PullToRefresh from '../src';
import React from 'react';
import ReactDOM from 'react-dom';

class Lv extends React.Component {
  componentDidMount() {
    if (this.props.pullToRefresh) {
      this.forceUpdate();
    }
  }
  render() {
    let child = this.props.children;
    if (this.props.pullToRefresh) {
      child = React.cloneElement(this.props.pullToRefresh, {
        getScrollContainer: () => this.lv,
      }, child);
    }
    return (
      <div ref={el => this.lv = el} style={{ height: 200, border: 1, overflow: 'auto' }}>
        {child}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    refreshing: false,
  };
  componentDidMount() {
    document.body.style.overflowY =
      navigator.userAgent.match(/Android|iPhone|iPad|iPod/i) ? 'hidden' : 'auto';
  }
  render() {
    return (
      <Lv
        pullToRefresh={
          <PullToRefresh
            className="forTest"
            direction="up"
            refreshing={this.state.refreshing}
            onRefresh={() => {
              this.setState({ refreshing: true });
              setTimeout(() => {
                this.setState({ refreshing: false });
              }, 1000);
            }}
          />
        }
      >
        {[1, 2, 3, 4, 5, 6, 7].map(i =>
          <div key={i} style={{ textAlign: 'center', padding: 20 }}>item {i}</div>)}
      </Lv>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('__react-content'));
Fork me on GitHub