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

Comparing version 2.0.4 to 2.0.5

dist/commonjs/StickyTree.js

@@ -67,3 +67,3 @@ 'use strict';
                 var index = nodes.length;
-                var height = node.height;
+                var height = this.getNodeHeight(node);
 
@@ -121,3 +121,3 @@ var nodeInfo = {
                 // These two properties will change when the structure changes, so we need to re-build the tree when this happens.
-                if (newProps.root !== this.props.root || newProps.getChildren !== this.props.getChildren) {
+                if (newProps.root !== this.props.root || newProps.getChildren !== this.props.getChildren || newProps.defaultRowHeight !== this.props.defaultRowHeight) {
                     this.refreshCachedMetadata(newProps);
@@ -206,3 +206,3 @@ }
             function componentDidUpdate(prevProps, prevState) {
-                if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.props.currNodePos) {
+                if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.state.currNodePos) {
                     var range = this.rowRenderRange;
@@ -283,2 +283,11 @@ var visibleStartInfo = this.nodePosCache[range.visibleStart];
     }, {
+        key: 'getNodeHeight',
+        value: function () {
+            function getNodeHeight(node) {
+                return node.height !== undefined ? node.height : this.props.defaultRowHeight;
+            }
+
+            return getNodeHeight;
+        }()
+    }, {
         key: 'renderParentContainer',
@@ -289,3 +298,3 @@ value: function () {
                     'div',
-                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - parent.height } },
+                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - this.getNodeHeight(parent) } },
                     this.renderChildren(parent, indexesToRender)
@@ -324,3 +333,3 @@ );
             function getClientNodeStyle(node) {
-                var style = { height: node.height };
+                var style = { height: this.getNodeHeight(node) };
                 if (node.isSticky) {
@@ -344,3 +353,3 @@ style.position = 'sticky';
                     top: top,
-                    height: node.height,
+                    height: this.getNodeHeight(node),
                     width: '100%'
@@ -655,3 +664,8 @@ };
      */
-    onRowsRendered: _propTypes2['default'].func
+    onRowsRendered: _propTypes2['default'].func,
+
+    /**
+     * Specifies the default row height which will be used if the child or root object do not have a height specified.
+     */
+    defaultRowHeight: _propTypes2['default'].number
 };
@@ -658,0 +672,0 @@ StickyTree.defaultProps = {

dist/es/StickyTree.js

@@ -67,3 +67,3 @@ 'use strict';
                 var index = nodes.length;
-                var height = node.height;
+                var height = this.getNodeHeight(node);
 
@@ -121,3 +121,3 @@ var nodeInfo = {
                 // These two properties will change when the structure changes, so we need to re-build the tree when this happens.
-                if (newProps.root !== this.props.root || newProps.getChildren !== this.props.getChildren) {
+                if (newProps.root !== this.props.root || newProps.getChildren !== this.props.getChildren || newProps.defaultRowHeight !== this.props.defaultRowHeight) {
                     this.refreshCachedMetadata(newProps);
@@ -206,3 +206,3 @@ }
             function componentDidUpdate(prevProps, prevState) {
-                if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.props.currNodePos) {
+                if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.state.currNodePos) {
                     var range = this.rowRenderRange;
@@ -283,2 +283,11 @@ var visibleStartInfo = this.nodePosCache[range.visibleStart];
     }, {
+        key: 'getNodeHeight',
+        value: function () {
+            function getNodeHeight(node) {
+                return node.height !== undefined ? node.height : this.props.defaultRowHeight;
+            }
+
+            return getNodeHeight;
+        }()
+    }, {
         key: 'renderParentContainer',
@@ -289,3 +298,3 @@ value: function () {
                     'div',
-                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - parent.height } },
+                    { key: 'rv-sticky-node-list-' + parent.id, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%', height: parent.totalHeight - this.getNodeHeight(parent) } },
                     this.renderChildren(parent, indexesToRender)
@@ -324,3 +333,3 @@ );
             function getClientNodeStyle(node) {
-                var style = { height: node.height };
+                var style = { height: this.getNodeHeight(node) };
                 if (node.isSticky) {
@@ -344,3 +353,3 @@ style.position = 'sticky';
                     top: top,
-                    height: node.height,
+                    height: this.getNodeHeight(node),
                     width: '100%'
@@ -655,3 +664,8 @@ };
      */
-    onRowsRendered: _propTypes2['default'].func
+    onRowsRendered: _propTypes2['default'].func,
+
+    /**
+     * Specifies the default row height which will be used if the child or root object do not have a height specified.
+     */
+    defaultRowHeight: _propTypes2['default'].number
 };
@@ -658,0 +672,0 @@ StickyTree.defaultProps = {

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.4",
+  "version": "2.0.5",
   "author": "Marc McIntyre <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -17,3 +17,3 @@ # react-virtualized-sticky-tree
 ```js
-import StickyTree from 'react-virtualized-sticky-tree';
+import { StickyTree } from 'react-virtualized-sticky-tree';
 
@@ -29,3 +29,3 @@ const tree = {
 const getChildren = (id) => {
-  return tree[id].children.map(id => ({ id }));
+  return tree[id].children.map(id => ({ id, height: 30 }));
 };
@@ -38,11 +38,8 @@
 
-const getHeight = () => 30;
-
 render(
   <StickyTree
-    root={{ id: 'root' }}
+    root={{ id: 'root', height: 30 }}
     width={width}
     height={height}
     getChildren={getChildren}
-    getHeight={getHeight}
     rowRenderer={rowRenderer}
@@ -69,4 +66,4 @@ renderRoot={true}
          isSticky: true,
-         stickyTop: 10,
-         zIndex: 2, 
+         stickyTop: tree[childId].depth * 10,
+         zIndex: 30 - tree[childId].depth, 
          height: 10
@@ -108,3 +105,3 @@ }))
     className="tree"
-    root={{ id: 'root', isSticky: true, stickyTop: 0, zIndex: 300, height: PARENT_NODE_HEIGHT }}
+    root={{ id: 'root', isSticky: true, stickyTop: 0, zIndex: 3, height: 30 }}
     rowRenderer={rowRenderer}
@@ -125,5 +122,4 @@ getChildren={getChildren}
     <StickyTree
-      root="root"
+      root={{id: 0}}
       getChildren={getChildren}
-      getHeight={getHeight}
       rowRenderer={rowRenderer}
@@ -150,7 +146,6 @@ renderRoot={true}
                   height={this.state.dimensions.height}
-                  root={0}
+                  root={{id: 0 }}
                   renderRoot={true}
                   rowRenderer={this.rowRenderer}
                   getChildren={this.getChildren}
-                  getHeight={() => 30}
                   overscanRowCount={20}
@@ -157,0 +152,0 @@ />

No alert changes

Improved metrics

Total package byte prevSize

66433

increased by1.65%

Lines of code

1290

increased by1.9%

Worsened metrics

Number of lines in readme file

154

decreased by-3.14%

No dependency changes