react-virtualized-sticky-tree - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/commonjs/StickyTree.js

@@ -46,3 +46,5 @@ 'use strict';
             scrollTop: 0,
-            currNodePos: 0
+            currNodePos: 0,
+            // used to know when an update was caused by a scroll so that we don't unnecessarily re-render.
+            scrollTick: false
         };
@@ -126,2 +128,3 @@
                 this.refreshCachedMetadata(this.props);
+                this.storeRenderTree(this.props, this.state);
             }
@@ -156,3 +159,14 @@
         }()
+    }, {
+        key: 'componentWillUpdate',
+        value: function () {
+            function componentWillUpdate(newProps, newState) {
+                if (newState.scrollTick === this.state.scrollTick || newState.currNodePos !== this.state.currNodePos) {
+                    this.storeRenderTree(newProps, newState);
+                }
+            }
 
+            return componentWillUpdate;
+        }()
+
         /**
@@ -470,6 +484,15 @@ * Returns the index of the node in a flat list tree (post-order traversal).
     }, {
+        key: 'storeRenderTree',
+        value: function () {
+            function storeRenderTree(props, state) {
+                this.treeToRender = this.renderParentTree(props, state);
+            }
+
+            return storeRenderTree;
+        }()
+    }, {
         key: 'renderParentTree',
         value: function () {
-            function renderParentTree() {
-                this.rowRenderRange = this.getRenderRowRange();
+            function renderParentTree(props, state) {
+                this.rowRenderRange = this.getRenderRowRange(props, state);
                 var path = this.getParentPath(this.rowRenderRange.start);
@@ -492,6 +515,6 @@
                         { className: 'rv-sticky-node-list', style: { width: '100%', position: 'absolute', top: 0 } },
-                        this.renderChildWithChildren(this.nodePosCache[0], 0, indexesToRender)
+                        this.renderChildWithChildren(props, state, this.nodePosCache[0], 0, indexesToRender)
                     );
                 }
-                return this.renderParentContainer(this.nodePosCache[0], indexesToRender);
+                return this.renderParentContainer(props, state, this.nodePosCache[0], indexesToRender);
             }
@@ -504,3 +527,3 @@
         value: function () {
-            function renderParentContainer(parent, indexesToRender) {
+            function renderParentContainer(props, state, parent, indexesToRender) {
                 return _react2['default'].createElement(
@@ -512,3 +535,3 @@ 'div',
                     },
-                    this.renderChildren(parent, indexesToRender)
+                    this.renderChildren(props, state, parent, indexesToRender)
                 );
@@ -531,3 +554,3 @@ }
         value: function () {
-            function renderChildWithChildren(child, top, indexesToRender) {
+            function renderChildWithChildren(props, state, child, top, indexesToRender) {
                 return _react2['default'].createElement(
@@ -537,4 +560,4 @@ 'div',
                         style: this.getChildContainerStyle(child, top) },
-                    this.renderNode(child, this.getClientNodeStyle(child)),
-                    this.renderParentContainer(child, indexesToRender)
+                    this.renderNode(props, state, child, this.getClientNodeStyle(child)),
+                    this.renderParentContainer(props, state, child, indexesToRender)
                 );
@@ -578,3 +601,3 @@ }
         value: function () {
-            function renderChildren(parent, indexesToRender) {
+            function renderChildren(props, state, parent, indexesToRender) {
                 var _this2 = this;
@@ -589,7 +612,7 @@
                         if (child.children && child.children.length > 0) {
-                            nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
+                            nodes.push(_this2.renderChildWithChildren(props, state, child, top, indexesToRender));
                         } else {
                             // Sticky nodes will need a container so that their top is correct. The sticky node itself will have a top
                             // of the offset where it should stick, which would conflict with the absolute position of the node.
-                            if (child.isSticky || _this2.props.wrapAllLeafNodes) {
+                            if (child.isSticky || props.wrapAllLeafNodes) {
                                 nodes.push(_react2['default'].createElement(
@@ -601,6 +624,6 @@ 'div',
                                         style: _this2.getChildContainerStyle(child, top) },
-                                    _this2.renderNode(child, _this2.getClientNodeStyle(child))
+                                    _this2.renderNode(props, state, child, _this2.getClientNodeStyle(child))
                                 ));
                             } else {
-                                nodes.push(_this2.renderNode(child, _this2.getClientLeafNodeStyle(child, top)));
+                                nodes.push(_this2.renderNode(props, state, child, _this2.getClientLeafNodeStyle(child, top)));
                             }
@@ -621,4 +644,4 @@ }
         value: function () {
-            function renderNode(nodeInfo, style) {
-                return this.props.rowRenderer({ id: nodeInfo.id, nodeInfo: nodeInfo, style: style });
+            function renderNode(props, state, nodeInfo, style) {
+                return props.rowRenderer({ id: nodeInfo.id, nodeInfo: nodeInfo, style: style });
             }
@@ -637,12 +660,12 @@
         value: function () {
-            function getRenderRowRange() {
+            function getRenderRowRange(props, state) {
                 // Needs to be at least 1
-                var overscanRowCount = this.props.overscanRowCount > 0 ? this.props.overscanRowCount : 1;
-                var start = this.state.currNodePos - overscanRowCount;
+                var overscanRowCount = props.overscanRowCount > 0 ? props.overscanRowCount : 1;
+                var start = state.currNodePos - overscanRowCount;
                 if (start < 0) {
                     start = 0;
                 }
-                var visibleEnd = this.state.currNodePos + 1;
+                var visibleEnd = state.currNodePos + 1;
 
-                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.state.scrollTop + this.props.height) {
+                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < state.scrollTop + props.height) {
                     visibleEnd++;
@@ -656,3 +679,3 @@ }
 
-                return { start: start, end: end, visibleStart: this.state.currNodePos, visibleEnd: visibleEnd };
+                return { start: start, end: end, visibleStart: state.currNodePos, visibleEnd: visibleEnd };
             }
@@ -770,3 +793,3 @@
 
-                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED });
+                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED, scrollTick: !this.state.scrollTick });
 
@@ -803,3 +826,3 @@ if (this.props.onScroll !== undefined) {
                         }(), className: 'rv-sticky-tree', style: style, onScroll: this.onScroll },
-                    this.renderParentTree()
+                    this.treeToRender
                 );
@@ -806,0 +829,0 @@ }

dist/es/StickyTree.js

@@ -46,3 +46,5 @@ 'use strict';
             scrollTop: 0,
-            currNodePos: 0
+            currNodePos: 0,
+            // used to know when an update was caused by a scroll so that we don't unnecessarily re-render.
+            scrollTick: false
         };
@@ -126,2 +128,3 @@
                 this.refreshCachedMetadata(this.props);
+                this.storeRenderTree(this.props, this.state);
             }
@@ -156,3 +159,14 @@
         }()
+    }, {
+        key: 'componentWillUpdate',
+        value: function () {
+            function componentWillUpdate(newProps, newState) {
+                if (newState.scrollTick === this.state.scrollTick || newState.currNodePos !== this.state.currNodePos) {
+                    this.storeRenderTree(newProps, newState);
+                }
+            }
 
+            return componentWillUpdate;
+        }()
+
         /**
@@ -470,6 +484,15 @@ * Returns the index of the node in a flat list tree (post-order traversal).
     }, {
+        key: 'storeRenderTree',
+        value: function () {
+            function storeRenderTree(props, state) {
+                this.treeToRender = this.renderParentTree(props, state);
+            }
+
+            return storeRenderTree;
+        }()
+    }, {
         key: 'renderParentTree',
         value: function () {
-            function renderParentTree() {
-                this.rowRenderRange = this.getRenderRowRange();
+            function renderParentTree(props, state) {
+                this.rowRenderRange = this.getRenderRowRange(props, state);
                 var path = this.getParentPath(this.rowRenderRange.start);
@@ -492,6 +515,6 @@
                         { className: 'rv-sticky-node-list', style: { width: '100%', position: 'absolute', top: 0 } },
-                        this.renderChildWithChildren(this.nodePosCache[0], 0, indexesToRender)
+                        this.renderChildWithChildren(props, state, this.nodePosCache[0], 0, indexesToRender)
                     );
                 }
-                return this.renderParentContainer(this.nodePosCache[0], indexesToRender);
+                return this.renderParentContainer(props, state, this.nodePosCache[0], indexesToRender);
             }
@@ -504,3 +527,3 @@
         value: function () {
-            function renderParentContainer(parent, indexesToRender) {
+            function renderParentContainer(props, state, parent, indexesToRender) {
                 return _react2['default'].createElement(
@@ -512,3 +535,3 @@ 'div',
                     },
-                    this.renderChildren(parent, indexesToRender)
+                    this.renderChildren(props, state, parent, indexesToRender)
                 );
@@ -531,3 +554,3 @@ }
         value: function () {
-            function renderChildWithChildren(child, top, indexesToRender) {
+            function renderChildWithChildren(props, state, child, top, indexesToRender) {
                 return _react2['default'].createElement(
@@ -537,4 +560,4 @@ 'div',
                         style: this.getChildContainerStyle(child, top) },
-                    this.renderNode(child, this.getClientNodeStyle(child)),
-                    this.renderParentContainer(child, indexesToRender)
+                    this.renderNode(props, state, child, this.getClientNodeStyle(child)),
+                    this.renderParentContainer(props, state, child, indexesToRender)
                 );
@@ -578,3 +601,3 @@ }
         value: function () {
-            function renderChildren(parent, indexesToRender) {
+            function renderChildren(props, state, parent, indexesToRender) {
                 var _this2 = this;
@@ -589,7 +612,7 @@
                         if (child.children && child.children.length > 0) {
-                            nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
+                            nodes.push(_this2.renderChildWithChildren(props, state, child, top, indexesToRender));
                         } else {
                             // Sticky nodes will need a container so that their top is correct. The sticky node itself will have a top
                             // of the offset where it should stick, which would conflict with the absolute position of the node.
-                            if (child.isSticky || _this2.props.wrapAllLeafNodes) {
+                            if (child.isSticky || props.wrapAllLeafNodes) {
                                 nodes.push(_react2['default'].createElement(
@@ -601,6 +624,6 @@ 'div',
                                         style: _this2.getChildContainerStyle(child, top) },
-                                    _this2.renderNode(child, _this2.getClientNodeStyle(child))
+                                    _this2.renderNode(props, state, child, _this2.getClientNodeStyle(child))
                                 ));
                             } else {
-                                nodes.push(_this2.renderNode(child, _this2.getClientLeafNodeStyle(child, top)));
+                                nodes.push(_this2.renderNode(props, state, child, _this2.getClientLeafNodeStyle(child, top)));
                             }
@@ -621,4 +644,4 @@ }
         value: function () {
-            function renderNode(nodeInfo, style) {
-                return this.props.rowRenderer({ id: nodeInfo.id, nodeInfo: nodeInfo, style: style });
+            function renderNode(props, state, nodeInfo, style) {
+                return props.rowRenderer({ id: nodeInfo.id, nodeInfo: nodeInfo, style: style });
             }
@@ -637,12 +660,12 @@
         value: function () {
-            function getRenderRowRange() {
+            function getRenderRowRange(props, state) {
                 // Needs to be at least 1
-                var overscanRowCount = this.props.overscanRowCount > 0 ? this.props.overscanRowCount : 1;
-                var start = this.state.currNodePos - overscanRowCount;
+                var overscanRowCount = props.overscanRowCount > 0 ? props.overscanRowCount : 1;
+                var start = state.currNodePos - overscanRowCount;
                 if (start < 0) {
                     start = 0;
                 }
-                var visibleEnd = this.state.currNodePos + 1;
+                var visibleEnd = state.currNodePos + 1;
 
-                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.state.scrollTop + this.props.height) {
+                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < state.scrollTop + props.height) {
                     visibleEnd++;
@@ -656,3 +679,3 @@ }
 
-                return { start: start, end: end, visibleStart: this.state.currNodePos, visibleEnd: visibleEnd };
+                return { start: start, end: end, visibleStart: state.currNodePos, visibleEnd: visibleEnd };
             }
@@ -770,3 +793,3 @@
 
-                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED });
+                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED, scrollTick: !this.state.scrollTick });
 
@@ -803,3 +826,3 @@ if (this.props.onScroll !== undefined) {
                         }(), className: 'rv-sticky-tree', style: style, onScroll: this.onScroll },
-                    this.renderParentTree()
+                    this.treeToRender
                 );
@@ -806,0 +829,0 @@ }

package.json

 {
   "name": "react-virtualized-sticky-tree",
   "description": "A React component for efficiently rendering tree like structures with support for position: sticky",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "Marc McIntyre <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

88753

increased by2.43%

Lines of code

1744

increased by2.47%

No dependency changes