Merge pull request #41 from vinnymac/map-virtual-to-props

map virtual object to props
developerdizzle · Mar 16, 2017 · 94652ab · 94652ab
2 parents 487d78b + 39653e9
commit 94652ab
Show file tree

Hide file tree

Showing 13 changed files with 274 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,17 @@ Name | Type | Default | Description
 `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.
 
+#### Mapping
+
+`VirtualList` allows a second, optional, parameter, named `mapVirtualToProps`, which functions similarly to [Redux's `mapStateToProps`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options).  This function can be provided to change the properties passed to `MyList`.  Its arguments are:
+
+Name | Description
+--- | ---
+`props` | Includes all properties passed to `MyVirtualList`
+`state` | Includes `firstItemIndex` and `lastItemIndex`; array indexes of the visible bounds of `items`
+
+The default `mapVirtualToProps` can be found [here](/src/utils/defaultMapVirtualToProps.js).
+
 #### 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).

diff --git a/demo/dist/app.js b/demo/dist/app.js
diff --git a/demo/dist/index.html b/demo/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
+        <style>
+            h1, h2 {
+                font-weight: bold;
+            }
+
+            body {
+                padding-bottom: 20em;
+            }
+        </style>
+    </head>
+    <body>
+        <header class="jumbotron">
+            <h1 class="container">React Virtual List</h1>
+        </header>
+        <main>
+            <section class="container" id="app">
+            </section>
+        </main>
+
+        <script src="react.js"></script>
+        <script src="virtualList.js"></script>
+        <script src="app.js"></script>
+
+        <a href="https://github.com/developerdizzle/react-virtual-list"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+    </body>
+</html>
diff --git a/demo/dist/react.js b/demo/dist/react.js
diff --git a/demo/dist/virtualList.js b/demo/dist/virtualList.js