Merge pull request #38 from developerdizzle/HOC

WIP - Version 2 - HOC

Author: developerdizzle

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "stage-0",
+    "react"
+  ]
+}

.travis.yml

@@ -1,2 +1,7 @@
 language: node_js
-node_js: stable
+node_js: stable
+after_success:
+  bash ./deploy-to-gh-pages.sh
+env:
+  global:
+    secure: eel7PQWWJmM2gyxTCiUzv/4GYfDfKqrPTcEZOFYGgF0JkdgAqwowvnbw9B8Oexwhp8z/4hPwZNaeZnOAUlUekTJhpMItRcw6egyPyRxzgw2Uk1JC5JU6WVZdjjqQ4GJ+N6Spt56HGiEnTBtVAo2z1deah6s2Z9ZFnc/wqfz/Y/tE5NWE1ePD3cfqnf35yZ2jQkaOMPUS36inYRm+Fjc3IdCEH0OE/IsKYW00MLWlCyN/OkhElMW9kcjpzfpfdSjsyWNnAZF9BZykD053bh+R8gkKkFdyHzkA/w5wQoXAkRkz7ONkDOYXHNQK4VFwT0sl8+WU2tccmKFM9YGxnwLcBCF4ZUxoUNGaWsZsF9xlDZ0ZaV7/ySYyqpFZtfJvv42R1bx7wbIz8PVWqL2/Tl+HMU47X+L6ukDz3yZPFI/3Dcr0ksMU6/YmQR3yoBlTRyX7eJKjO3hiDHys1lFEsA6gCh9IU43a00msAHXOBJ171OL0SDn5qbeUhSS2LRnwXTBh5HZ9b5o7Zrj9nFtaL450kAXBoE5aulI+hAixce7tPNL7fLs+/WRKnYwxLyrjQ7aiv3NVJbZc3RkdheGVB8Wo15mAZZ6cJKCjChfJTPpIM92ZrFFi45dOa8KhVwll1+vqMv6P0fWXHXvBIItPMrGbMrGz0vzUvpePiEMhX2MjtO8=

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Dizzle
+Copyright (c) 2017 Dizzle
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,58 +1,102 @@
 # [react-virtual-list](http://developerdizzle.github.io/react-virtual-list/) [![Build Status](https://travis-ci.org/developerdizzle/react-virtual-list.svg?branch=master)](https://travis-ci.org/developerdizzle/react-virtual-list)
 
-Super simple virtualized list [React](https://github.com/facebook/react) component
+Super simple virtualized list [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) for [React](https://github.com/facebook/react) version `^15.0.0`.
 
 [Check out the demo here](http://developerdizzle.github.io/react-virtual-list)
 
-This React component allows you to display a large list of fixed-height items in your document, while only rendering the items visible in the viewport.  This allows a large list to be rendered with much fewer DOM elements.
+`react-virtual-list` allows you to display a large list of fixed-height items, while only rendering the items visible on the screen.  This allows a large list to be rendered with much fewer DOM elements.
+
+### Some other benefits:
+* Zero dependencies
+* Small - `~4.2k` gzipped & minified, `~4.9k` minified [http://i.imgur.com/DxRCuLv.png](http://i.imgur.com/DxRCuLv.png)
+* Decent performance - demo page almost always stays over 60fps [http://i.imgur.com/CHVCK9x.png](http://i.imgur.com/CHVCK9x.png)
+* Keeps your components separate - as a higher-order component
+* Gives you control - doesn't force any particular markup, but gives you the necessary styles and data to use.
+
+## Legacy
+
+If you're looking for documentation on version 1, supporting React `~0.13.x`, it's [here](README.v1.md).
 
 ## Installation
 
-You can use NPM to install react-virtual-list:
+You can use [npm](https://npmjs.org) to install [react-virtual-list](https://www.npmjs.com/package/react-virtual-list).
 
 ```console
-$ npm install react-virtual-list --save
+> npm install react-virtual-list --save
 ```
 
 ## Usage
 
-The `./dist/VirtualList.js` module exports a single React component.
+The `./lib/VirtualList.js` module exports a single, ES5-compatible, CommonJS-accessible, component factory.
 
+```js
+import VirtualList from 'react-virtual-list';
 ```
-var VirtualList = require('react-virtual-list');
+
+Your inner list component uses the `virtual` property to render the visible items, and set a style to set the overall list height and padding.
+
+```js
+const MyList = ({
+  virtual,
+  itemHeight,
+}) => (
+  <ul style={virtual.style}>
+    {virtual.items.map(item => (
+      <li key={`item_${item.id}`} style={{height: itemHeight}}>
+        Lorem ipsum dolor sit amet
+      </li>
+    ))}
+  </ul>
+);
 ```
 
-#### JSX
+**Note:** You should set [keys](https://facebook.github.io/react/docs/lists-and-keys.html) on your list items.
 
+Create the virtualized component.
+
+```js
+const MyVirtualList = VirtualList()(MyList);
 ```
-<VirtualList items={this.props.items} renderItem={this.renderItem} itemHeight={this.props.itemHeight} />
+
+Write the JSX for the virtualized component with the necessary [properties](#properties).
+
+```js
+<MyVirtualList
+  items={myBigListOfItems}
+  itemHeight={100}
+/>
 ```
 
-#### Properties
+#### Options
 
-* `items` the full array of list items.  Only the visible subset of these will be rendered.
-* `renderItem` a function to render a single item, passed as argument `item`.  Must return a single React element (`React.createElement(...)`)
-* `itemHeight` the height in pixels of a single item.  **You must have a CSS rule that sets the height of each list item to this value.**
-* `container` the scrollable element that contains the list.  Defaults to `window`.  Use this if you have a list inside an element with `overflow: scroll`.
-* `tagName` the tagName for the root element that surrounds the items rendered by renderItem.  Defaults to `div`.  Use this if you want to render a list with `ul` and `li`, or any other elements.
-* `scrollDelay` the delay in milliseconds after scroll to recalculate.  Defaults to `0`.  Can be used to throttle recalculation.
-* `itemBuffer` the number of items that should be rendered before and after the visible viewport.  Defaults to `0`.
- 
-Any other properties set on `VirtualList`, such as `className`, will be reflected on the component's root element.
+Options are used before the virtualized component can be created.  This means that if you need to change an option after the initial render, you will need to recreate the virtualized component.
 
-#### Functions
+```js
+const options = {
+  container: this.refs.container
+};
 
-* `visibleItems` the currently visible array of items.  Can be used to figure out which items are in the viewport.  Eg: `var items = this.refs.list.visibleItems()` 
+const MyVirtualList = VirtualList(options)(MyList);
+```
 
-#### Example Usage
+Name | Type | Default | Description
+--- | --- | --- | ---
+`container` | DOM Element | window | Scrollable element that contains the list.  Use this if you have a list inside an element with `overflow: scroll`.
 
-Check out [https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx](https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx) for the example used in the demo.
+#### Properties
 
-## Tests
+These properties and any others set on your virtual component, such as `className`, will be passed down to the inner component.
 
-Use `npm test` to run the tests using [jasmine-node](https://github.com/mhevery/jasmine-node).  Currently only the math calculations are tested.  Hoping to add some DOM tests as well.
+Name | Type | Default | Description
+--- | --- | --- | ---
+`items` | Array | - | Full array of list items.  Only the visible subset of these will be rendered.
+`itemHeight` | Number | - | Height in pixels of a single item.  **You must have a CSS rule that sets the height of each list item to this value.**
+`itemBuffer` | Number | 0 | Number of items that should be rendered before and after the visible viewport.  Try using this if you have a complex list that suffers from a bit of lag when scrolling.
 
-## To Do
+#### Example Usage
+
+Check out [demo/src/app.js](demo/src/app.js) and [demo/src/ConfigurableExample.js](demo/src/ConfigurableExample.js) for the example used in the [demo](http://developerdizzle.github.io/react-virtual-list).
+
+## Tests
 
-* ES6/2015
-* [Known issue with mobile scroll event](https://github.com/developerdizzle/react-virtual-list/issues/1)
+Use `npm test` to run the tests using [Jest](https://github.com/facebook/jest).  Not everything is currently tested yet!

README.v1.md

@@ -0,0 +1,59 @@
+# [react-virtual-list](http://developerdizzle.github.io/react-virtual-list/) [![Build Status](https://travis-ci.org/developerdizzle/react-virtual-list.svg?branch=master)](https://travis-ci.org/developerdizzle/react-virtual-list)
+# Legacy (version 1)
+
+Super simple virtualized list [React](https://github.com/facebook/react) component
+
+[Check out the demo here](http://developerdizzle.github.io/react-virtual-list)
+
+This React component allows you to display a large list of fixed-height items in your document, while only rendering the items visible in the viewport.  This allows a large list to be rendered with much fewer DOM elements.
+
+## Installation
+
+You can use NPM to install react-virtual-list:
+
+```console
+$ npm install react-virtual-list --save
+```
+
+## Usage
+
+The `./dist/VirtualList.js` module exports a single React component.
+
+```
+var VirtualList = require('react-virtual-list');
+```
+
+#### JSX
+
+```
+<VirtualList items={this.props.items} renderItem={this.renderItem} itemHeight={this.props.itemHeight} />
+```
+
+#### Properties
+
+* `items` the full array of list items.  Only the visible subset of these will be rendered.
+* `renderItem` a function to render a single item, passed as argument `item`.  Must return a single React element (`React.createElement(...)`)
+* `itemHeight` the height in pixels of a single item.  **You must have a CSS rule that sets the height of each list item to this value.**
+* `container` the scrollable element that contains the list.  Defaults to `window`.  Use this if you have a list inside an element with `overflow: scroll`.
+* `tagName` the tagName for the root element that surrounds the items rendered by renderItem.  Defaults to `div`.  Use this if you want to render a list with `ul` and `li`, or any other elements.
+* `scrollDelay` the delay in milliseconds after scroll to recalculate.  Defaults to `0`.  Can be used to throttle recalculation.
+* `itemBuffer` the number of items that should be rendered before and after the visible viewport.  Defaults to `0`.
+ 
+Any other properties set on `VirtualList`, such as `className`, will be reflected on the component's root element.
+
+#### Functions
+
+* `visibleItems` the currently visible array of items.  Can be used to figure out which items are in the viewport.  Eg: `var items = this.refs.list.visibleItems()` 
+
+#### Example Usage
+
+Check out [https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx](https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx) for the example used in the demo.
+
+## Tests
+
+Use `npm test` to run the tests using [jasmine-node](https://github.com/mhevery/jasmine-node).  Currently only the math calculations are tested.  Hoping to add some DOM tests as well.
+
+## To Do
+
+* ES6/2015
+* [Known issue with mobile scroll event](https://github.com/developerdizzle/react-virtual-list/issues/1)

demo/src/ConfigurableExample.js

@@ -0,0 +1,120 @@
+import React, { PureComponent, PropTypes } from 'react';
+import VirtualList from '../../src/VirtualList';
+
+const makeItem = (i) => ({
+  id: i,
+  title: `Media heading #${i+1}`,
+  text: 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.',
+});
+
+const ConfigurableExample = (MyList) => {
+  return class MyConfigurableList extends PureComponent {
+    constructor() {
+      super();
+
+      const defaultItemCount = 100000;
+
+      const items = [];
+
+      for (let i = 0; i < defaultItemCount; i++) {
+        items[i] = makeItem(i);
+      }
+      
+      const state = {
+        itemHeight: 100,
+        itemCount: defaultItemCount,
+        items: items,
+        contained: false,
+        containerHeight: 250,
+        itemBuffer: 0,
+      };
+      
+      this.state = state;
+
+      this.update = this.update.bind(this);
+
+      this.MyVirtualList = VirtualList()(MyList);
+    };
+
+    update() {
+      console.log('update');
+
+      const items = [];
+      const itemCount = parseInt(this.refs.itemCount.value, 10);
+
+      for (var i = 0; i < itemCount; i++) {
+        items[i] = makeItem(i);
+      }
+      
+      const contained = this.refs.contained.checked;
+      
+      const state = {
+        itemHeight: parseInt(this.refs.itemHeight.value, 10),
+        itemCount: itemCount,
+        items: items,
+        contained: contained,
+        container: this.refs.container,
+        containerHeight: parseInt(this.refs.containerHeight.value, 10),
+        itemBuffer: parseInt(this.refs.itemBuffer.value, 10),
+      };
+
+      if (state.contained !== this.state.contained) {
+        const options = {
+          container: state.contained ? state.container : window,
+        };
+
+        this.MyVirtualList = VirtualList(options)(MyList);
+      }
+      
+      this.setState(state);
+    };
+
+    render() {
+      const MyVirtualList = this.MyVirtualList;
+
+      return (
+        <div>
+          <div role="form" className="form-horizontal">
+            <div className="form-group">
+              <label className="col-xs-6 col-sm-2" htmlFor="contained">Contained</label>
+              <div className="col-xs-6 col-sm-4">
+                <input onChange={this.update} className="form-control" type="checkbox" checked ={this.state.contained} id="contained" ref="contained" />
+              </div>
+              <label className="col-xs-6 col-sm-2" htmlFor="containerHeight">Container Height</label>
+              <div className="col-xs-6 col-sm-4">
+                <input onChange={this.update} className="form-control" type="number" min="0" max="10000" value={this.state.containerHeight} id="containerHeight" ref="containerHeight" />
+              </div>
+            </div>
+            <div className="form-group">
+              <label className="col-xs-6 col-sm-2" htmlFor="itemHeight">Item Height</label>
+              <div className="col-xs-6 col-sm-4">
+                <input onChange={this.update} className="form-control" type="number" min="0" value={this.state.itemHeight} id="itemHeight" ref="itemHeight" />
+              </div>
+              <label className="col-xs-6 col-sm-2" htmlFor="itemCount">Item Count</label>
+              <div className="col-xs-6 col-sm-4">
+                <input onChange={this.update} className="form-control" type="number" min="0" value={this.state.itemCount} id="itemCount" ref="itemCount" />
+              </div>
+            </div>
+            <div className="form-group">
+              <label className="col-xs-6 col-sm-2" htmlFor="scrollDelay">Item Buffer</label>
+              <div className="col-xs-6 col-sm-4">
+                <input onChange={this.update} className="form-control" type="number" min="0" value={this.state.itemBuffer} id="itemBuffer" ref="itemBuffer" />
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-xs-12" id="container" ref="container" style={this.state.contained ? { overflow: 'scroll', height: this.state.containerHeight } : {}}>
+              <MyVirtualList
+                items={this.state.items}
+                itemBuffer={this.state.itemBuffer}
+                itemHeight={this.state.itemHeight}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    };
+  };
+};
+
+export default ConfigurableExample;

demo/src/app.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ConfigurableExample from './ConfigurableExample';
+
+require('file?name=[name].[ext]!./index.html');
+
+const MyList = ({
+  virtual,
+  itemHeight,
+}) => (
+  <ul className="media-list list-group" style={virtual.style}>
+    {virtual.items.map((item) => (
+      <li key={`item${item.id}`} className="list-group-item" style={{height: itemHeight }}>
+        <div className="media-left">
+          <img className="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2ODc1IiB5PSIzMiIgc3R5bGU9ImZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0O2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjY0eDY0PC90ZXh0PjwvZz48L3N2Zz4=" />
+        </div>
+        <div className="media-body">
+          <h4 className="media-heading">{item.title}</h4>
+          <p>{item.text}</p>
+        </div>
+      </li>
+    ))}
+  </ul>
+);
+
+const MyConfigurableExample = ConfigurableExample(MyList);
+
+render(
+  <MyConfigurableExample />,
+  document.getElementById('app')
+);
+