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

Comparing version 2.0.2 to 2.0.3

dist/commonjs/StickyTree.js

@@ -250,26 +250,2 @@ 'use strict';
     }, {
-        key: 'getChildContainerStyle',
-        value: function () {
-            function getChildContainerStyle(child, top) {
-                return { position: 'absolute', top: top, height: child.totalHeight, width: '100%' };
-            }
-
-            return getChildContainerStyle;
-        }()
-    }, {
-        key: 'getClientNodeStyle',
-        value: function () {
-            function getClientNodeStyle(node) {
-                var style = { height: node.height };
-                if (node.isSticky) {
-                    style.position = 'sticky';
-                    style.top = node.stickyTop;
-                    style.zIndex = node.zIndex;
-                }
-                return style;
-            }
-
-            return getClientNodeStyle;
-        }()
-    }, {
         key: 'renderParentTree',
@@ -310,3 +286,3 @@ value: function () {
                     'div',
-                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%' } },
+                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - parent.height } },
                     this.renderChildren(parent, indexesToRender)
@@ -319,2 +295,11 @@ );
     }, {
+        key: 'getChildContainerStyle',
+        value: function () {
+            function getChildContainerStyle(child, top) {
+                return { position: 'absolute', top: top, height: child.totalHeight, width: '100%' };
+            }
+
+            return getChildContainerStyle;
+        }()
+    }, {
         key: 'renderChildWithChildren',
@@ -334,2 +319,32 @@ value: function () {
     }, {
+        key: 'getClientNodeStyle',
+        value: function () {
+            function getClientNodeStyle(node) {
+                var style = { height: node.height };
+                if (node.isSticky) {
+                    style.position = 'sticky';
+                    style.top = node.stickyTop;
+                    style.zIndex = node.zIndex;
+                }
+
+                return style;
+            }
+
+            return getClientNodeStyle;
+        }()
+    }, {
+        key: 'getClientLeafNodeStyle',
+        value: function () {
+            function getClientLeafNodeStyle(node, top) {
+                return {
+                    position: 'absolute',
+                    top: top,
+                    height: node.height,
+                    width: '100%'
+                };
+            }
+
+            return getClientLeafNodeStyle;
+        }()
+    }, {
         key: 'renderChildren',
@@ -349,9 +364,16 @@ value: function () {
                         } else {
-                            nodes.push(_react2['default'].createElement(
-                                'div',
-                                {
-                                    className: 'rv-sticky-leaf-node', key: child.id,
-                                    style: _this2.getChildContainerStyle(child, top) },
-                                _this2.props.rowRenderer({ id: child.id, style: _this2.getClientNodeStyle(child) })
-                            ));
+                            // 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) {
+                                nodes.push(_react2['default'].createElement(
+                                    'div',
+                                    {
+                                        className: 'rv-sticky-leaf-node',
+                                        key: child.id,
+                                        style: _this2.getChildContainerStyle(child, top) },
+                                    _this2.props.rowRenderer({ id: child.id, style: _this2.getClientNodeStyle(child) })
+                                ));
+                            } else {
+                                nodes.push(_this2.props.rowRenderer({ id: child.id, style: _this2.getClientLeafNodeStyle(child, top) }));
+                            }
                         }
@@ -378,3 +400,5 @@ }
             function getRenderRowRange() {
-                var start = this.state.currNodePos - this.props.overscanRowCount;
+                // Needs to be at least 1
+                var overscanRowCount = this.props.overscanRowCount > 0 ? this.props.overscanRowCount : 1;
+                var start = this.state.currNodePos - overscanRowCount;
                 if (start < 0) {
@@ -389,3 +413,3 @@ start = 0;
 
-                var end = visibleEnd + this.props.overscanRowCount;
+                var end = visibleEnd + overscanRowCount;
                 if (end > this.nodePosCache.length - 1) {
@@ -392,0 +416,0 @@ end = this.nodePosCache.length - 1;

dist/es/StickyTree.js

@@ -250,26 +250,2 @@ 'use strict';
     }, {
-        key: 'getChildContainerStyle',
-        value: function () {
-            function getChildContainerStyle(child, top) {
-                return { position: 'absolute', top: top, height: child.totalHeight, width: '100%' };
-            }
-
-            return getChildContainerStyle;
-        }()
-    }, {
-        key: 'getClientNodeStyle',
-        value: function () {
-            function getClientNodeStyle(node) {
-                var style = { height: node.height };
-                if (node.isSticky) {
-                    style.position = 'sticky';
-                    style.top = node.stickyTop;
-                    style.zIndex = node.zIndex;
-                }
-                return style;
-            }
-
-            return getClientNodeStyle;
-        }()
-    }, {
         key: 'renderParentTree',
@@ -310,3 +286,3 @@ value: function () {
                     'div',
-                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%' } },
+                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - parent.height } },
                     this.renderChildren(parent, indexesToRender)
@@ -319,2 +295,11 @@ );
     }, {
+        key: 'getChildContainerStyle',
+        value: function () {
+            function getChildContainerStyle(child, top) {
+                return { position: 'absolute', top: top, height: child.totalHeight, width: '100%' };
+            }
+
+            return getChildContainerStyle;
+        }()
+    }, {
         key: 'renderChildWithChildren',
@@ -334,2 +319,32 @@ value: function () {
     }, {
+        key: 'getClientNodeStyle',
+        value: function () {
+            function getClientNodeStyle(node) {
+                var style = { height: node.height };
+                if (node.isSticky) {
+                    style.position = 'sticky';
+                    style.top = node.stickyTop;
+                    style.zIndex = node.zIndex;
+                }
+
+                return style;
+            }
+
+            return getClientNodeStyle;
+        }()
+    }, {
+        key: 'getClientLeafNodeStyle',
+        value: function () {
+            function getClientLeafNodeStyle(node, top) {
+                return {
+                    position: 'absolute',
+                    top: top,
+                    height: node.height,
+                    width: '100%'
+                };
+            }
+
+            return getClientLeafNodeStyle;
+        }()
+    }, {
         key: 'renderChildren',
@@ -349,9 +364,16 @@ value: function () {
                         } else {
-                            nodes.push(_react2['default'].createElement(
-                                'div',
-                                {
-                                    className: 'rv-sticky-leaf-node', key: child.id,
-                                    style: _this2.getChildContainerStyle(child, top) },
-                                _this2.props.rowRenderer({ id: child.id, style: _this2.getClientNodeStyle(child) })
-                            ));
+                            // 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) {
+                                nodes.push(_react2['default'].createElement(
+                                    'div',
+                                    {
+                                        className: 'rv-sticky-leaf-node',
+                                        key: child.id,
+                                        style: _this2.getChildContainerStyle(child, top) },
+                                    _this2.props.rowRenderer({ id: child.id, style: _this2.getClientNodeStyle(child) })
+                                ));
+                            } else {
+                                nodes.push(_this2.props.rowRenderer({ id: child.id, style: _this2.getClientLeafNodeStyle(child, top) }));
+                            }
                         }
@@ -378,3 +400,5 @@ }
             function getRenderRowRange() {
-                var start = this.state.currNodePos - this.props.overscanRowCount;
+                // Needs to be at least 1
+                var overscanRowCount = this.props.overscanRowCount > 0 ? this.props.overscanRowCount : 1;
+                var start = this.state.currNodePos - overscanRowCount;
                 if (start < 0) {
@@ -389,3 +413,3 @@ start = 0;
 
-                var end = visibleEnd + this.props.overscanRowCount;
+                var end = visibleEnd + overscanRowCount;
                 if (end > this.nodePosCache.length - 1) {
@@ -392,0 +416,0 @@ end = this.nodePosCache.length - 1;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

65006

increased by3.68%

Lines of code

1260

increased by3.62%

No dependency changes