Support delayed stabilisation for simple list

In order to allow items animation

Author: albertogasparin

examples/index.es6

@@ -56,6 +56,12 @@ const examples = [
     length: 10000,
     itemRenderer: renderVariableHeightItem
   },
+  {
+    length: 10000,
+    itemRenderer: renderVariableHeightItem,
+    className: 'is-animated',
+    stableFrameDelay: 500
+  },
   {
     axis: 'x',
     length: 10000,
@@ -126,9 +132,13 @@ const examples = [
 export default class extends React.Component {
   renderExamples() {
     return examples.map((props, key) =>
-      <div key={key} className={`example axis-${props.axis}`}>
+      <div key={key}
+        className={`example axis-${props.axis} ${props.className}`}
+      >
         <strong>Props</strong>
-        <pre className='props'>{JSON.stringify(props, null, 2)}</pre>
+        <pre className='props'>{
+          JSON.stringify(props, null, 2).replace(/\\n\s+/g, ' ')
+        }</pre>
         <strong>Component</strong>
         <div className='component'><ReactList {...props} /></div>
       </div>

examples/index.js

@@ -159,6 +159,11 @@
   var examples = [{
     length: 10000,
     itemRenderer: renderVariableHeightItem
+  }, {
+    length: 10000,
+    itemRenderer: renderVariableHeightItem,
+    className: 'is-animated',
+    stableFrameDelay: 500
   }, {
     axis: 'x',
     length: 10000,
@@ -230,7 +235,9 @@
         return examples.map(function (props, key) {
           return _react2.default.createElement(
             'div',
-            { key: key, className: 'example axis-' + props.axis },
+            { key: key,
+              className: 'example axis-' + props.axis + ' ' + props.className
+            },
             _react2.default.createElement(
               'strong',
               null,
@@ -239,7 +246,7 @@
             _react2.default.createElement(
               'pre',
               { className: 'props' },
-              JSON.stringify(props, null, 2)
+              JSON.stringify(props, null, 2).replace(/\\n\s+/g, ' ')
             ),
             _react2.default.createElement(
               'strong',

index.html

@@ -81,6 +81,17 @@
       .even {
         background: linear-gradient(#ddd, #ccc);
       }
+
+      @keyframes grow {
+        0% { max-height: 0; }
+        100% { max-height: 120px; }
+      }
+
+      .is-animated .item {
+        line-height: 120px;
+        overflow: hidden;
+        animation: grow 0.5s ease 0s;
+      }
     </style>
   </head>
 

react-list.es6

@@ -55,6 +55,7 @@ module.exports = class ReactList extends Component {
     length: PropTypes.number,
     pageSize: PropTypes.number,
     scrollParentGetter: PropTypes.func,
+    stableFrameDelay: PropTypes.number,
     threshold: PropTypes.number,
     type: PropTypes.oneOf(['simple', 'variable', 'uniform']),
     useStaticSize: PropTypes.bool,
@@ -87,6 +88,7 @@ module.exports = class ReactList extends Component {
 
   componentWillReceiveProps(next) {
     let {from, size, itemsPerRow} = this.state;
+    clearTimeout(this.updateFrameTimeoutId);
     this.maybeSetState(this.constrain(from, size, itemsPerRow, next), NOOP);
   }
 
@@ -97,6 +99,7 @@ module.exports = class ReactList extends Component {
   }
 
   componentDidUpdate() {
+    let {stableFrameDelay, type} = this.props;
 
     // If the list has reached an unstable state, prevent an infinite loop.
     if (this.unstable) return;
@@ -113,7 +116,14 @@ module.exports = class ReactList extends Component {
       }, 0);
     }
 
-    this.updateFrame();
+    if (type === 'simple' && stableFrameDelay) {
+      this.updateFrameTimeoutId = setTimeout(
+        this.updateFrame, stableFrameDelay
+      );
+    } else {
+      this.updateFrame();
+    }
+
   }
 
   maybeSetState(b, cb) {
@@ -126,6 +136,7 @@ module.exports = class ReactList extends Component {
     window.removeEventListener('resize', this.updateFrame);
     this.scrollParent.removeEventListener('scroll', this.updateFrame, PASSIVE);
     this.scrollParent.removeEventListener('mousewheel', NOOP, PASSIVE);
+    clearTimeout(this.updateFrameTimeoutId);
   }
 
   getOffset(el) {

react-list.js

@@ -148,6 +148,7 @@
             size = _state.size,
             itemsPerRow = _state.itemsPerRow;
 
+        clearTimeout(this.updateFrameTimeoutId);
         this.maybeSetState(this.constrain(from, size, itemsPerRow, next), NOOP);
       }
     }, {
@@ -162,6 +163,11 @@
       value: function componentDidUpdate() {
         var _this2 = this;
 
+        var _props = this.props,
+            stableFrameDelay = _props.stableFrameDelay,
+            type = _props.type;
+
+
         // If the list has reached an unstable state, prevent an infinite loop.
         if (this.unstable) return;
 
@@ -177,7 +183,11 @@
           }, 0);
         }
 
-        this.updateFrame();
+        if (type === 'simple' && stableFrameDelay) {
+          this.updateFrameTimeoutId = setTimeout(this.updateFrame, stableFrameDelay);
+        } else {
+          this.updateFrame();
+        }
       }
     }, {
       key: 'maybeSetState',
@@ -192,6 +202,7 @@
         window.removeEventListener('resize', this.updateFrame);
         this.scrollParent.removeEventListener('scroll', this.updateFrame, PASSIVE);
         this.scrollParent.removeEventListener('mousewheel', NOOP, PASSIVE);
+        clearTimeout(this.updateFrameTimeoutId);
       }
     }, {
       key: 'getOffset',
@@ -208,9 +219,9 @@
     }, {
       key: 'getScrollParent',
       value: function getScrollParent() {
-        var _props = this.props,
-            axis = _props.axis,
-            scrollParentGetter = _props.scrollParentGetter;
+        var _props2 = this.props,
+            axis = _props2.axis,
+            scrollParentGetter = _props2.scrollParentGetter;
 
         if (scrollParentGetter) return scrollParentGetter();
         var el = findDOMNode(this);
@@ -274,9 +285,9 @@
     }, {
       key: 'hasDeterminateSize',
       value: function hasDeterminateSize() {
-        var _props2 = this.props,
-            itemSizeGetter = _props2.itemSizeGetter,
-            type = _props2.type;
+        var _props3 = this.props,
+            itemSizeGetter = _props3.itemSizeGetter,
+            type = _props3.type;
 
         return type === 'uniform' || itemSizeGetter;
       }
@@ -296,9 +307,9 @@
     }, {
       key: 'getItemSizeAndItemsPerRow',
       value: function getItemSizeAndItemsPerRow() {
-        var _props3 = this.props,
-            axis = _props3.axis,
-            useStaticSize = _props3.useStaticSize;
+        var _props4 = this.props,
+            axis = _props4.axis,
+            useStaticSize = _props4.useStaticSize;
         var _state2 = this.state,
             itemSize = _state2.itemSize,
             itemsPerRow = _state2.itemsPerRow;
@@ -375,9 +386,9 @@
 
         if (elEnd > end) return cb();
 
-        var _props4 = this.props,
-            pageSize = _props4.pageSize,
-            length = _props4.length;
+        var _props5 = this.props,
+            pageSize = _props5.pageSize,
+            length = _props5.length;
 
         var size = Math.min(this.state.size + pageSize, length);
         this.maybeSetState({ size: size }, cb);
@@ -391,9 +402,9 @@
             start = _getStartAndEnd2.start,
             end = _getStartAndEnd2.end;
 
-        var _props5 = this.props,
-            length = _props5.length,
-            pageSize = _props5.pageSize;
+        var _props6 = this.props,
+            length = _props6.length,
+            pageSize = _props6.pageSize;
 
         var space = 0;
         var from = 0;
@@ -488,11 +499,11 @@
       value: function getSizeOf(index) {
         var cache = this.cache,
             items = this.items;
-        var _props6 = this.props,
-            axis = _props6.axis,
-            itemSizeGetter = _props6.itemSizeGetter,
-            itemSizeEstimator = _props6.itemSizeEstimator,
-            type = _props6.type;
+        var _props7 = this.props,
+            axis = _props7.axis,
+            itemSizeGetter = _props7.itemSizeGetter,
+            itemSizeEstimator = _props7.itemSizeEstimator,
+            type = _props7.type;
         var _state4 = this.state,
             from = _state4.from,
             itemSize = _state4.itemSize,
@@ -579,9 +590,9 @@
       value: function renderItems() {
         var _this3 = this;
 
-        var _props7 = this.props,
-            itemRenderer = _props7.itemRenderer,
-            itemsRenderer = _props7.itemsRenderer;
+        var _props8 = this.props,
+            itemRenderer = _props8.itemRenderer,
+            itemsRenderer = _props8.itemsRenderer;
         var _state6 = this.state,
             from = _state6.from,
             size = _state6.size;
@@ -596,11 +607,11 @@
     }, {
       key: 'render',
       value: function render() {
-        var _props8 = this.props,
-            axis = _props8.axis,
-            length = _props8.length,
-            type = _props8.type,
-            useTranslate3d = _props8.useTranslate3d;
+        var _props9 = this.props,
+            axis = _props9.axis,
+            length = _props9.length,
+            type = _props9.type,
+            useTranslate3d = _props9.useTranslate3d;
         var _state7 = this.state,
             from = _state7.from,
             itemsPerRow = _state7.itemsPerRow;
@@ -649,6 +660,7 @@
     length: _react.PropTypes.number,
     pageSize: _react.PropTypes.number,
     scrollParentGetter: _react.PropTypes.func,
+    stableFrameDelay: _react.PropTypes.number,
     threshold: _react.PropTypes.number,
     type: _react.PropTypes.oneOf(['simple', 'variable', 'uniform']),
     useStaticSize: _react.PropTypes.bool,