clarity-react-infinite-list
Version:
A browser efficient infinite list for React apps that allows loading of items with differing heights and sizes.
352 lines (256 loc) • 10.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Documentation Index</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Documentation</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="ListView.html">ListView</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<section class="readme-section">
<article><h1>clarity-react-infinite-list</h1><p><img src="https://img.shields.io/npm/v/clarity-react-infinite-list.svg?style=flat" alt="NPM version">
<img src="https://img.shields.io/npm/l/clarity-react-infinite-list.svg?style=flat" alt="NPM license">
<img src="https://img.shields.io/npm/dt/clarity-react-infinite-list.svg?style=flat" alt="NPM total downloads">
<img src="https://img.shields.io/npm/dm/clarity-react-infinite-list.svg?style=flat" alt="NPM monthly downloads"></p>
<p>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 <code>ListViewDataSource</code> from <code>clarity-react-infinite-list</code>, populate it with an array of data, and add a <code>ListView</code> component
with that data source and a <code>renderRow</code> callback which takes an item from the data source and returns a renderable component.</p>
<h2>Install</h2><pre class="prettyprint source lang-bash"><code>npm install clarity-react-infinite-list</code></pre><h2>Demos</h2><p><a href="https://sourcedecoded.github.io/clarity-react-infinite-list/demos/build/index.html">Github API Data</a></p>
<h2>Features</h2><ul>
<li>Lazy load and fetch data from API requests in batches.</li>
<li>Infinite number of items and batches</li>
<li>Items can have dynamic heights and sizes, that do not have to be declared before hand.</li>
<li>Add in a custom loading component.</li>
</ul>
<h2>Dependencies</h2><h3>Version 15.x.x</h3><ul>
<li><code>react</code></li>
<li><code>react-dom</code></li>
</ul>
<h2>Minimal Example</h2><pre class="prettyprint source lang-js"><code>import 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);</code></pre><h2>Props</h2><h4><code>dataSource</code> ListViewDataSource</h4><ul>
<li>An instance of <code>ListViewDataSource</code>to use.</li>
</ul>
<h4><code>renderRow</code> function(rowData, rowId) => renderableComponent</h4><ul>
<li>Takes a data entry from the data source and its id and should return a renderable component to be rendered as the row.</li>
</ul>
<h4><code>onEndReached</code> function()</h4><ul>
<li>Called when the list has been scrolled to within the <code>onEndReachedThreshold</code> of the bottom.</li>
</ul>
<h4><code>loadingComponent</code> function() => renderableComponent</h4><ul>
<li>Should return a renderable component, to be displayed at bottom of list when loading new batches.</li>
</ul>
<h4><code>onEndReachedThreshold</code> number</h4><ul>
<li>Threshold in pixels for calling <code>onEndReached</code></li>
</ul>
<h2>Methods</h2><h4><code>scrollTo(topPosition: number)</code></h4><ul>
<li>Scrolls to the given topPosition of the <code>ListView</code>.</li>
</ul>
<h4><code>isScrollbarActive()</code></h4><ul>
<li>Returns a boolean of whether or not the <code>ListView</code> has enough content to have an active vertical scrollbar.</li>
</ul>
<h4><code>digBatches()</code></h4><ul>
<li>Manually dig batches from the props.onEndReached function.</li>
</ul></article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
on October 27th 2017, 3:19:51 pm
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : true,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>