# InfiniteScroll

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import List from '../../list'

class Example extends React.Component<any, any> {
  state = {
    param: {
      hasMore: true,
      pageSize: 10,
      pageNo: 1,
    },
  }
  count: number = 0
  loadMore = () => {
    if (this.count >= 3) {
      this.setState({
        param: {
          hasMore: false,
          pageSize: 10,
          pageNo: 1,
        },
      })
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            hasMore: false,
          })
        }, 5000)
      })
    }
    this.count++
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          list: allList,
          hasMore: true,
        })
      }, 5000)
    })
  }

  render() {
    return (
      <InfiniteScroll
        loadMore={() => this.loadMore()}
        render={(list, noData) => (
          <div>
            {list.length > 0 && (
              <List>
                {list.map((item, index) => (
                  <List.Item key={`${item.no}${index}`}>
                    {item.area_name}
                  </List.Item>
                ))}
              </List>
            )}
            {noData && (
              <div>
                <p>您当前还没有数据哦～</p>
              </div>
            )}
          </div>
        )}
      />
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('root'))