yylib-quick-mobile/dist/yylib/pull-to-refresh/YYPullToRefresh.js

yylib-quick-mobile

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { PullToRefresh } from 'antd-mobile';
import './YYPullToRefresh.less';
import classnames from 'classnames';
class YYPullToRefresh extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      refreshing: false,
      height: 0,
    };
  }
  createDesignData() {
    const dataArr = [];
    for (let i = 0; i < 20; i++) {
      dataArr.push(i);
    }
    this.setState({
      data:dataArr
    });
  }
  onRefresh() {
    if(this.props.onRefresh){
      this.props.onRefresh();
    }
    else {
      this.setState({ refreshing: true });
      setTimeout(() => {
        this.setState({ refreshing: false });
      }, 1000);
    }
  }
  componentDidMount() {
    let {RunInDesign}=this.props;
    const hei = ReactDOM.findDOMNode(this.ptr).offsetTop;
    this.setState({
      height: hei
    });
    if(RunInDesign){
      this.createDesignData();
    }
  }
  componentWillReceiveProps(nextprops) {
    if (nextprops.refreshing!==this.state.refreshing) {
        this.setState({
          refreshing: nextprops.refreshing
        })
    }
    if(nextprops.RunInDesign){
      this.createDesignData();
    }
  }
  setRefreshing(flag) {
    this.setState({
      refreshing: flag
    });
  }
  render() {
    let {distanceToRefresh,direction,refreshing,children,findUI, offline,parentType,
            uiorigin, RunInDesign, uititle, uitype, uikey, nid,control_event,damping,...restProps} = this.props;
    let wrapClz = classnames('yy-pull-to-refresh', this.props.className);
    let {height} = this.state;
    var heightstr=`calc(100% - ${height}px)`;
    return (
      <PullToRefresh
        {...restProps}
        damping={damping}
        className={wrapClz}
        ref={el => this.ptr = el}
        style={{
          height: heightstr,
          overflow: 'auto',
        }}
        indicator={direction=='down' ? {} : { deactivate: '上拉可以刷新' }}
        direction={direction}
        distanceToRefresh={distanceToRefresh}
        refreshing={this.state.refreshing}
        onRefresh={this.onRefresh.bind(this)}>
        {this.props.RunInDesign&&!children?this.state.data.map(i => (
          <div key={i} style={{ textAlign: 'center', padding: 20 }}>
            {direction=='down' ? 'pull down' : 'pull up'} {i}
          </div>
        )):children}
      </PullToRefresh>
    );
  }
}
YYPullToRefresh.defaultProps = {
  damping:100,
  //设计器需要的props,不添加会warning
  findUI:'',
  offline:false,
  parentType:'',
  uiorigin:'',
  RunInDesign:false,
  uititle:'',
  uitype:'',
  uikey:'',
  nid:'',
  control_event:{}
}
export default YYPullToRefresh;