react-refresh-infinite-tableView
A Subclass-able React Component to make a simple Pull-To-Refresh and Infinite TableView
Last updated 4 years ago by calvinchankf .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-refresh-infinite-tableView 
SYNC missed versions from official npm registry.

React-Refresh-Infinite-TableView


demo

Features ????

  • Pull to Refresh
  • Pull to Load More
  • Fully Customizable Loading Indicator
  • Subclass-able React Component

How to Use ?????

import ReactRefreshInfiniteTableView from 'ReactRefreshInfiniteTableView.js'
  • Use Default Spinners

    • subclass the ReactRefreshInfiniteTableView
    class ExampleTableView extends ReactRefreshInfiniteTableView {
      //...
    }
    
  • attach an scroll event listener to your scrollview

<div className="tableView" onScroll={this.viewDidScroll}>
  • set props to your tableview component
<ExampleTableView
  dataSource={this.state.data}
  onScrollToTop={this.handleScrollToTop}
  onScrollToBottom={this.handleScrollToBottom}
/>
  • handle scroll events
// handle onScrollToTop
handleScrollToTop(completed) {
  // refresh data
  // ...

  // once received data
  completed()
  this.setState({data: newData})
}
// handle onScrollToBottom
handleScrollToBottom(completed) {
  // load more data
  // ...

  // once received data
  completed()
  this.setState({data1: newData})
}
  • see ExampleTableView1 for details

  • Use your own loading indicators

    • first, you need to follow the basic set up as the above(use default spinner)
    • set useDefaultIndicator to false for your component
    useDefaultIndicator={false}
    
    • construct your own indicators with jsx
    // customize your Refresh Indicator here
    refreshIndicator() {
      if (this.state.isRefreshing) {
        return (
          <div className="list-group-item text-center indicator">????...</div>
        )
      }
      return
    }
    // customize your Load-more Indicator here
    loadMoreIndicator() {
      if (this.state.isLoadingMore) {
        return (
          <div className="list-group-item text-center indicator">...????</div>
        )
      }
      return
    }
    
    • render your indicators with your tableview
    <div className="tableView" onScroll={this.viewDidScroll}>
      {this.refreshIndicator()}
      {cells}
      {this.loadMoreIndicator()}
    </div>
    
    • see ExampleTableView2 for details
  • You can also disable the scrollToTop or scrollToBottom by just by just not setting the props.

<ExampleTableView
  dataSource={this.state.data}
  onScrollToBottom={this.handleScrollToBottom}
/>

Demo

  • run the demo
npm install
npm start

Current Tags

  • 1.0.0                                ...           latest (4 years ago)

1 Versions

  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (16)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |