Close #113 Add itemSizeEstimator prop

Author: caseywebdev

README.md

@@ -70,12 +70,6 @@ The axis that this list scrolls on.
 
 An index to scroll to after mounting.
 
-##### itemSizeGetter(index)
-
-A function that receives an item index and returns the size (height for y-axis
-lists and width for x-axis lists) of that item at that index. This prop is only
-used when the prop `type` is set to `variable`.
-
 ##### itemRenderer(index, key)
 
 A function that receives an index and a key and returns the content to be
@@ -88,6 +82,21 @@ is just a `<div>`. Generally it only needs to be overridden for use in a
 `<table>` or other special case. **NOTE: You must set ref={ref} on the component
 that contains the `items` so the correct item sizing calculations can be made.**
 
+##### itemSizeEstimator(index, cache)
+
+A function that receives an item index and the cached known item sizes and
+returns an estimated size (height for y-axis lists and width for x-axis lists)
+of that item at that index. This prop is only used when the prop `type` is set
+to `variable` and `itemSizeGetter` is not defined. Use this property when you
+can't know the exact size of an item before rendering it, but want it to take up
+space in the list regardless.
+
+##### itemSizeGetter(index)
+
+A function that receives an item index and returns the size (height for y-axis
+lists and width for x-axis lists) of that item at that index. This prop is only
+used when the prop `type` is set to `variable`.
+
 ##### length (defaults to `0`)
 
 The number of items in the list.

react-list.es6

@@ -28,8 +28,9 @@ export default class extends Component {
   static propTypes = {
     axis: PropTypes.oneOf(['x', 'y']),
     initialIndex: PropTypes.number,
-    itemSizeGetter: PropTypes.func,
     itemRenderer: PropTypes.func,
+    itemSizeEstimator: PropTypes.func,
+    itemSizeGetter: PropTypes.func,
     itemsRenderer: PropTypes.func,
     length: PropTypes.number,
     pageSize: PropTypes.number,
@@ -41,13 +42,10 @@ export default class extends Component {
 
   static defaultProps = {
     axis: 'y',
-    initialIndex: null,
-    itemSizeGetter: null,
     itemRenderer: (index, key) => <div key={key}>{index}</div>,
     itemsRenderer: (items, ref) => <div ref={ref}>{items}</div>,
     length: 0,
     pageSize: 10,
-    scrollParentGetter: null,
     threshold: 100,
     type: 'simple',
     useTranslate3d: false
@@ -323,7 +321,7 @@ export default class extends Component {
 
   getSizeOf(index) {
     const {cache, items} = this;
-    const {axis, itemSizeGetter, type} = this.props;
+    const {axis, itemSizeGetter, itemSizeEstimator, type} = this.props;
     const {from, itemSize, size} = this.state;
 
     // Try the static itemSize.
@@ -340,6 +338,9 @@ export default class extends Component {
       const itemEl = findDOMNode(items).children[index - from];
       if (itemEl) return itemEl[OFFSET_SIZE_KEYS[axis]];
     }
+
+    // Try the itemSizeEstimator.
+    if (itemSizeEstimator) return itemSizeEstimator(index, cache);
   }
 
   constrain(from, size, itemsPerRow, {length, pageSize, type}) {

react-list.js

@@ -63,8 +63,9 @@
       value: {
         axis: _react.PropTypes.oneOf(['x', 'y']),
         initialIndex: _react.PropTypes.number,
-        itemSizeGetter: _react.PropTypes.func,
         itemRenderer: _react.PropTypes.func,
+        itemSizeEstimator: _react.PropTypes.func,
+        itemSizeGetter: _react.PropTypes.func,
         itemsRenderer: _react.PropTypes.func,
         length: _react.PropTypes.number,
         pageSize: _react.PropTypes.number,
@@ -78,8 +79,6 @@
       key: 'defaultProps',
       value: {
         axis: 'y',
-        initialIndex: null,
-        itemSizeGetter: null,
         itemRenderer: function itemRenderer(index, key) {
           return _React['default'].createElement(
             'div',
@@ -96,7 +95,6 @@
         },
         length: 0,
         pageSize: 10,
-        scrollParentGetter: null,
         threshold: 100,
         type: 'simple',
         useTranslate3d: false
@@ -445,6 +443,7 @@
         var _props6 = this.props;
         var axis = _props6.axis;
         var itemSizeGetter = _props6.itemSizeGetter;
+        var itemSizeEstimator = _props6.itemSizeEstimator;
         var type = _props6.type;
         var _state3 = this.state;
         var from = _state3.from;
@@ -465,6 +464,9 @@
           var itemEl = findDOMNode(items).children[index - from];
           if (itemEl) return itemEl[OFFSET_SIZE_KEYS[axis]];
         }
+
+        // Try the itemSizeEstimator.
+        if (itemSizeEstimator) return itemSizeEstimator(index, cache);
       }
     }, {
       key: 'constrain',