clarity-react-infinite-list
Version:
A browser efficient infinite list for React apps that allows loading of items with differing heights and sizes.
32 lines (25 loc) • 5.66 kB
HTML
<html>
<head>
</head>
<body style="background: transparent;">
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/lunr.min.js"></script>
<script src="scripts/fulltext-search.js"></script>
<script type="text/x-docstrap-searchdb">
{"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" Documentation Classes ListView Classes Classes ListView × Search results Close Documentation generated by JSDoc 3.4.3 on October 27th 2017, 3:19:51 pm using the DocStrap template. "},"index.html":{"id":"index.html","title":"Index","body":" Documentation Classes ListView clarity-react-infinite-list A browser efficient infinite list for React apps that allows loading of items with differing heights and sizes. The minimal API is to create a ListViewDataSource from clarity-react-infinite-list, populate it with an array of data, and add a ListView component with that data source and a renderRow callback which takes an item from the data source and returns a renderable component. Installnpm install clarity-react-infinite-listDemosGithub API Data Features Lazy load and fetch data from API requests in batches. Infinite number of items and batches Items can have dynamic heights and sizes, that do not have to be declared before hand. Add in a custom loading component. DependenciesVersion 15.x.x react react-dom Minimal Exampleimport React, { Component } from "react"; import { connect } from "react-redux"; import { getUsersBatch, setFetchingUsersStatus } from "../../actions"; import { ListView, ListViewDataSource } from "clarity-react-infinite-list"; import ListItem from "../layouts/ListItem"; const styles = {...}; class Main extends Component { constructor(props) { super(props); this.state = { dataSource: new ListViewDataSource(30), lastUserId: 0 }; this._renderRow = this._renderRow.bind(this); this._onEndReached = this._onEndReached.bind(this); this._loadingComponent = this._loadingComponent.bind(this); } _renderRow(rowData, rowId) { return ( <ListItem key={rowId} rowData={rowData} rowId={rowId} /> ); } _onEndReached() { if (!this.props.isFetchingUsers) { this.props.setFetchingUsersStatus(true); this.props.getUsersBatch(this.state.lastUserId); } } _loadingComponent() { return ( <div style={styles.loading}>Loading...</div> ); } componentWillMount() { this.props.setFetchingUsersStatus(true); this.props.getUsersBatch(this.state.lastUserId); } componentWillReceiveProps(nextProps) { if (nextProps.users[nextProps.users.length - 1] && this.state.lastUserId !== nextProps.users[nextProps.users.length - 1].id) { this.setState({ dataSource: this.state.dataSource.cloneWithRows(nextProps.users), lastUserId: nextProps.users[nextProps.users.length - 1].id, }); } } render() { return ( <div style={styles.container}> <div style={styles.header}> Clarity React Infinite Scroll Example </div> <ListView style={styles.listView} dataSource={this.state.dataSource} renderRow={this._renderRow} onEndReached={this._onEndReached} loadingComponent={this._loadingComponent} onEndReachedThreshold={5000} ref={listView => this.listView = listView} /> </div> ); } } const mapStateToProps = (state) => { return { users: state.users, isFetchingUsers: state.isFetchingUsers }; }; const mapDispatchToProps = { getUsersBatch, setFetchingUsersStatus }; export default connect(mapStateToProps, mapDispatchToProps)(Main);PropsdataSource ListViewDataSource An instance of ListViewDataSourceto use. renderRow function(rowData, rowId) => renderableComponent Takes a data entry from the data source and its id and should return a renderable component to be rendered as the row. onEndReached function() Called when the list has been scrolled to within the onEndReachedThreshold of the bottom. loadingComponent function() => renderableComponent Should return a renderable component, to be displayed at bottom of list when loading new batches. onEndReachedThreshold number Threshold in pixels for calling onEndReached MethodsscrollTo(topPosition: number) Scrolls to the given topPosition of the ListView. isScrollbarActive() Returns a boolean of whether or not the ListView has enough content to have an active vertical scrollbar. digBatches() Manually dig batches from the props.onEndReached function. × Search results Close Documentation generated by JSDoc 3.4.3 on October 27th 2017, 3:19:51 pm using the DocStrap template. "},"ListView.html":{"id":"ListView.html","title":"Class: ListView","body":" Documentation Classes ListView Class: ListView ListView Infinite List View new ListView() Methods digBatches() Manually dig batches from the props.onEndReached function. isScrollbarActive() Checks if content inside of scrollbar is long enough to have an active scrollbar. scrollTo(topPosition) Changes the scrollTop to the topPosition provided. Parameters: Name Type Description topPosition number The desired scroll top position. × Search results Close Documentation generated by JSDoc 3.4.3 on October 27th 2017, 3:19:51 pm using the DocStrap template. "}}
</script>
<script type="text/javascript">
$(document).ready(function() {
Searcher.init();
});
$(window).on("message", function(msg) {
var msgData = msg.originalEvent.data;
if (msgData.msgid != "docstrap.quicksearch.start") {
return;
}
var results = Searcher.search(msgData.searchTerms);
window.parent.postMessage({"results": results, "msgid": "docstrap.quicksearch.done"}, "*");
});
</script>
</body>
</html>