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

Comparing version 2.0.0 to 2.0.1

dist/commonjs/StickyTree.js

@@ -51,4 +51,4 @@ 'use strict';
      *  [
-     *    { id: 'root', top: 0, index: 0, height: 100 },
-     *    { id: 'child1', top: 10, index: 0, parentIndex: 0 height: 10 },
+     *    { id: 'root', top: 0, index: 0, height: 100. isSticky: true , zIndex: 0, stickyTop: 10 },
+     *    { id: 'child1', top: 10, index: 1, parentIndex: 0 height: 10, isSticky: false },
      *    ...
@@ -63,4 +63,5 @@ *  ]
             function flattenTree(node) {
-                var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-                var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { totalHeight: 0, parentIndex: undefined };
+                var getChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.getChildren;
+                var nodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+                var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { totalHeight: 0, parentIndex: undefined };
 
@@ -89,3 +90,3 @@ var index = nodes.length;
 
-                var children = this.props.getChildren(node.id);
+                var children = getChildren(node.id);
                 if (Array.isArray(children)) {
@@ -97,3 +98,3 @@ nodeInfo.children = [];
                         var child = children[i];
-                        this.flattenTree(child, nodes, context);
+                        this.flattenTree(child, getChildren, nodes, context);
                     }
@@ -122,4 +123,5 @@ }
             function componentWillReceiveProps(newProps) {
-                if (newProps.root !== this.props.root) {
-                    this.nodePosCache = this.flattenTree(newProps.root);
+                // 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) {
+                    this.nodePosCache = this.flattenTree(newProps.root, newProps.getChildren);
                 }
@@ -229,3 +231,3 @@
             function recomputeTree() {
-                if (this.props.root !== undefined) {
+                if (this.props.root !== undefined && this.props.getChildren !== undefined) {
                     this.nodePosCache = this.flattenTree(this.props.root);
@@ -304,3 +306,3 @@ // Need to re-render as the curr node may not be in view
                     'div',
-                    { key: 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%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -318,3 +320,3 @@ );
                     'div',
-                    { className: 'rv-sticky-parent-node', key: child.id, style: this.getChildContainerStyle(child, top) },
+                    { key: 'rv-sticky-parent-node-' + child.id, className: 'rv-sticky-parent-node', style: this.getChildContainerStyle(child, top) },
                     this.props.rowRenderer({ id: child.id, style: this.getClientNodeStyle(child) }),
@@ -339,3 +341,3 @@ this.renderParentContainer(child, indexesToRender)
                     if (indexesToRender.has(index)) {
-                        if (child.children) {
+                        if (child.children && child.children.length > 0) {
                             nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
@@ -536,2 +538,22 @@ } else {
 StickyTree.propTypes = {
+
+    /**
+     * Returns an array of child objects that represent the children of a particular node.
+     * The returned object for each child should be in the form:
+     *
+     * { id: 'childId', height: [number], isSticky: [true|false], stickyTop: [number], zIndex: 0 }
+     *
+     * Where id and height are mandatory. If isSticky is true, stickyTop and zIndex should also be returned.
+     *
+     * Example:
+     *
+     * const getChildren = (id) => {
+     *    return myTree[id].children.map(childId => ({
+     *      id: childId
+     *      isSticky: nodeIsSticky(childId),
+     *      height: myTree[childId].height,
+     *      ...
+     *    }))
+     * }
+     */
     getChildren: _propTypes2['default'].func.isRequired,
@@ -562,5 +584,21 @@
     root: _propTypes2['default'].object.isRequired,
+
+    /**
+     * Lets StickyTree know how many rows above and below the visible area should be rendered, to improve performance.
+     */
     overscanRowCount: _propTypes2['default'].number.isRequired,
+
+    /**
+     * The height of the outer container.
+     */
     height: _propTypes2['default'].number,
+
+    /**
+     * The width of the outer container
+     */
     width: _propTypes2['default'].number,
+
+    /**
+     * if true, the root node will be rendered (by calling rowRenderer() for the root id). Otherwise no root node will be rendered.
+     */
     renderRoot: _propTypes2['default'].bool,
@@ -591,5 +629,5 @@
 StickyTree.defaultProps = {
-    overscanRowCount: 0,
+    overscanRowCount: 10,
     renderRoot: true
 };
 exports['default'] = StickyTree;

dist/es/StickyTree.js

@@ -51,4 +51,4 @@ 'use strict';
      *  [
-     *    { id: 'root', top: 0, index: 0, height: 100 },
-     *    { id: 'child1', top: 10, index: 0, parentIndex: 0 height: 10 },
+     *    { id: 'root', top: 0, index: 0, height: 100. isSticky: true , zIndex: 0, stickyTop: 10 },
+     *    { id: 'child1', top: 10, index: 1, parentIndex: 0 height: 10, isSticky: false },
      *    ...
@@ -63,4 +63,5 @@ *  ]
             function flattenTree(node) {
-                var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-                var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { totalHeight: 0, parentIndex: undefined };
+                var getChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.getChildren;
+                var nodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+                var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { totalHeight: 0, parentIndex: undefined };
 
@@ -89,3 +90,3 @@ var index = nodes.length;
 
-                var children = this.props.getChildren(node.id);
+                var children = getChildren(node.id);
                 if (Array.isArray(children)) {
@@ -97,3 +98,3 @@ nodeInfo.children = [];
                         var child = children[i];
-                        this.flattenTree(child, nodes, context);
+                        this.flattenTree(child, getChildren, nodes, context);
                     }
@@ -122,4 +123,5 @@ }
             function componentWillReceiveProps(newProps) {
-                if (newProps.root !== this.props.root) {
-                    this.nodePosCache = this.flattenTree(newProps.root);
+                // 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) {
+                    this.nodePosCache = this.flattenTree(newProps.root, newProps.getChildren);
                 }
@@ -229,3 +231,3 @@
             function recomputeTree() {
-                if (this.props.root !== undefined) {
+                if (this.props.root !== undefined && this.props.getChildren !== undefined) {
                     this.nodePosCache = this.flattenTree(this.props.root);
@@ -304,3 +306,3 @@ // Need to re-render as the curr node may not be in view
                     'div',
-                    { key: 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%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -318,3 +320,3 @@ );
                     'div',
-                    { className: 'rv-sticky-parent-node', key: child.id, style: this.getChildContainerStyle(child, top) },
+                    { key: 'rv-sticky-parent-node-' + child.id, className: 'rv-sticky-parent-node', style: this.getChildContainerStyle(child, top) },
                     this.props.rowRenderer({ id: child.id, style: this.getClientNodeStyle(child) }),
@@ -339,3 +341,3 @@ this.renderParentContainer(child, indexesToRender)
                     if (indexesToRender.has(index)) {
-                        if (child.children) {
+                        if (child.children && child.children.length > 0) {
                             nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
@@ -536,2 +538,22 @@ } else {
 StickyTree.propTypes = {
+
+    /**
+     * Returns an array of child objects that represent the children of a particular node.
+     * The returned object for each child should be in the form:
+     *
+     * { id: 'childId', height: [number], isSticky: [true|false], stickyTop: [number], zIndex: 0 }
+     *
+     * Where id and height are mandatory. If isSticky is true, stickyTop and zIndex should also be returned.
+     *
+     * Example:
+     *
+     * const getChildren = (id) => {
+     *    return myTree[id].children.map(childId => ({
+     *      id: childId
+     *      isSticky: nodeIsSticky(childId),
+     *      height: myTree[childId].height,
+     *      ...
+     *    }))
+     * }
+     */
     getChildren: _propTypes2['default'].func.isRequired,
@@ -562,5 +584,21 @@
     root: _propTypes2['default'].object.isRequired,
+
+    /**
+     * Lets StickyTree know how many rows above and below the visible area should be rendered, to improve performance.
+     */
     overscanRowCount: _propTypes2['default'].number.isRequired,
+
+    /**
+     * The height of the outer container.
+     */
     height: _propTypes2['default'].number,
+
+    /**
+     * The width of the outer container
+     */
     width: _propTypes2['default'].number,
+
+    /**
+     * if true, the root node will be rendered (by calling rowRenderer() for the root id). Otherwise no root node will be rendered.
+     */
     renderRoot: _propTypes2['default'].bool,
@@ -591,5 +629,5 @@
 StickyTree.defaultProps = {
-    overscanRowCount: 0,
+    overscanRowCount: 10,
     renderRoot: true
 };
 exports['default'] = StickyTree;

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

No alert changes

Improved metrics

Total package byte prevSize

62288

increased by5.36%

Lines of code

1200

increased by5.82%

No dependency changes