# PullToRefresh 拉动刷新

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/pulltorefresh/freepass)
- 平台：PC
- 维护者：许平源
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[PullToRefresh]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { CSSProperties } from 'react';
import { PullToRefresh } from '@weapp/ui';

const style = { border: 1 }
const style1: CSSProperties = { textAlign: 'center', padding: 20 }
class Lv extends React.Component<any> {
  lv?: HTMLDivElement;
  // componentDidMount() {
  //   if (this.props.pullToRefresh) {
  //     this.forceUpdate();
  //   }
  // }
  getLv = (el: HTMLDivElement) => {
    this.lv = el
  }
  render() {
    let child = this.props.children;
    if (this.props.pullToRefresh) {
      child = React.cloneElement(this.props.pullToRefresh, {
        getScrollContainer: () => this.lv,
      }, child);
    }
    return (
      <div ref={this.getLv} style={style}>
        {child}
      </div>
    );
  }
}

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

### 上拉刷新

```jsx
import React, { Component, CSSProperties } from 'react';
import { PullToRefresh, Table } from '@weapp/ui';
import { getLabel } from '@weapp/utils';
import json from './json.json';

class TableContainer extends Component<any> {
  lv?: HTMLDivElement;
  getLv = (el: HTMLDivElement) => {
    this.lv = el
  }

  render() {
    let child = this.props.children;
    if (this.props.pullToRefresh) {
      child = React.cloneElement(this.props.pullToRefresh, {
        getScrollContainer: () => this.lv,
      }, child);
    }

    return (
      <div ref={this.getLv} className={`demo-summary`} style={{
        overflowY: 'auto',
        padding: '10px 0',
        height: 300
      }}>
        {child}
      </div>
    );
  }
}

export default class App extends React.Component {
  onWorkhourRefresh = () => {
    console.error('onWorkhourRefresh')
  }
  render() {
    return (
      <div>
        <TableContainer pullToRefresh={
          <PullToRefresh
            direction="up"
            refreshing={false}
            onRefresh={this.onWorkhourRefresh}
          />
        }>
          <MWorkHourTable  {...this.props} />
        </TableContainer>
      </div>
    );
  }
}

class MWorkHourTable extends Component<any> {

  render() {
    return (
      <>
        <Table
          columns={(json.data.columns as any)}
          data={json.data.data}
          className={'demo-table'}
          bordered
        />
        {/* {!workhourtHasMore && <div className={`${statisticsClsPrefix}-nomore`}>已加载所有数据</div>} */}
      </>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| direction | 拉动方向，可以是 `up` 或 `down` | String | `down` |  |
| distanceToRefresh | 刷新距离 | number | 25 |  |
| refreshing | 是否显示刷新状态 | bool | false |  |
| onRefresh | 必选, 刷新回调函数 | () => void | - |  |
| indicator | 指示器配置 `{ activate: ReactNode, deactivate: ReactNode, release: ReactNode, finish: ReactNode }` | Object | - |  |
| damping | 拉动距离限制, 建议小于 200 | number | 100 |  |
