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

Comparing version 1.0.0 to 1.0.1

dist/commonjs/StickyTree.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -22,4 +26,4 @@
 
-var StickyTree = function (_React$Component) {
-    _inherits(StickyTree, _React$Component);
+var StickyTree = function (_React$PureComponent) {
+    _inherits(StickyTree, _React$PureComponent);
 
@@ -38,32 +42,52 @@ function StickyTree(props) {
 
-        console.time('flatten');
-        var innerScrollHeight = _this.calculateHeight(_this.props.tree.root);
-        var nodes = [{ id: 'root', top: 0, node: _this.props.tree.root, index: 0, height: innerScrollHeight, children: [] }];
-        _this.nodePosCache = _this.flattenTree(_this.props.tree, _this.props.tree.root, nodes);
-        console.timeEnd('flatten');
-        console.info(_this.nodePosCache);
+        _this.nodePosCache = [];
         return _this;
     }
 
+    /**
+     *  Converts the consumer's tree structure into a flat array with root at index: 0,
+     *  including information about the top and height of each node.
+     *
+     *  i.e:
+     *  <pre>
+     *  [
+     *    { node: 'root', top: 0, index: 0, height: 100 },
+     *    { node: 'child1', top: 10, index: 0, parentIndex: 0 height: 10 },
+     *    ...
+     *  ]
+     *  </pre>
+     *
+     */
+
+
     _createClass(StickyTree, [{
         key: 'flattenTree',
         value: function () {
-            function flattenTree(tree, parent) {
-                var nodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-                var params = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { totalHeight: 0 };
+            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 parentIndex = nodes.length - 1;
-                for (var i = 0; i < parent.children.length; i++) {
-                    var child = tree[parent.children[i]];
-                    var childInfo = { id: child.id, top: params.totalHeight, parentIndex: parentIndex, index: nodes.length, children: [] };
-                    params.totalHeight += this.props.getHeight(child.id);
+                var index = nodes.length;
+                var nodeInfo = { node: node, top: context.totalHeight, parentIndex: context.parentIndex, index: index };
+                nodes.push(nodeInfo);
 
-                    nodes.push(childInfo);
-                    nodes[parentIndex].children.push(childInfo.index);
+                if (context.parentIndex !== undefined) {
+                    nodes[context.parentIndex].children.push(index);
+                }
 
-                    if (child.children.length > 0) {
-                        this.flattenTree(tree, child, nodes, params);
+                context.totalHeight += this.props.getHeight(node);
+
+                var children = this.props.getChildren(node);
+                if (Array.isArray(children)) {
+                    nodeInfo.children = [];
+
+                    for (var i = 0; i < children.length; i++) {
+                        // Need to reset parentIndex here as we are recursive.
+                        context.parentIndex = index;
+                        var child = children[i];
+                        this.flattenTree(child, nodes, context);
                     }
-                    childInfo.height = params.totalHeight - childInfo.top;
                 }
+                nodeInfo.height = context.totalHeight - nodeInfo.top;
+
                 return nodes;
@@ -75,9 +99,11 @@ }
     }, {
-        key: 'shouldComponentUpdate',
+        key: 'componentWillMount',
         value: function () {
-            function shouldComponentUpdate(newProps, newState) {
-                return this.state.currNodePos !== newState.currNodePos || this.props.width !== newProps.width || this.props.height !== newProps.height || this.props.tree !== newProps.tree;
+            function componentWillMount() {
+                if (this.props.root) {
+                    this.nodePosCache = this.flattenTree(this.props.root);
+                }
             }
 
-            return shouldComponentUpdate;
+            return componentWillMount;
         }()
@@ -88,4 +114,4 @@ }, {
             function componentWillReceiveProps(newProps) {
-                if (newProps.tree !== this.props.tree) {
-                    console.info('new Tree');
+                if (newProps.root !== this.props.root) {
+                    this.nodePosCache = this.flattenTree(newProps.root);
                 }
@@ -97,21 +123,2 @@ }
     }, {
-        key: 'calculateHeight',
-        value: function () {
-            function calculateHeight(parent) {
-                var _this2 = this;
-
-                var height = 0;
-                parent.children.forEach(function (id) {
-                    height += _this2.props.getHeight(parent.id);
-                    if (_this2.props.tree[id].children.length > 0) {
-                        height += _this2.calculateHeight(_this2.props.tree[id]);
-                    }
-                });
-
-                return height;
-            }
-
-            return calculateHeight;
-        }()
-    }, {
         key: 'getChildContainerStyle',
@@ -132,2 +139,3 @@ value: function () {
 
+                // Parent nodes to the current range.
                 var indexesToRender = new Set();
@@ -137,5 +145,8 @@ for (var i = 0; i < path.length; i++) {
                 }
+
+                // The rest of the nodes within the range.
                 for (var _i = rowRenderRange.start; _i <= rowRenderRange.end; _i++) {
                     indexesToRender.add(this.nodePosCache[_i].index);
                 }
+
                 if (this.props.renderRoot) {
@@ -159,3 +170,3 @@ return _react2['default'].createElement(
                     'ul',
-                    { key: parent.id, className: className, style: { position: 'absolute', width: '100%' } },
+                    { key: parent.node, className: className, style: { position: 'absolute', width: '100%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -173,4 +184,4 @@ );
                     'li',
-                    { key: child.id, style: this.getChildContainerStyle(child, top) },
-                    this.props.rowRenderer(child.id),
+                    { key: child.node, style: this.getChildContainerStyle(child, top) },
+                    this.props.rowRenderer(child.node),
                     this.renderParentContainer(child, 'parent-node', indexesToRender)
@@ -186,3 +197,3 @@ );
             function renderChildren(parent, indexesToRender) {
-                var _this3 = this;
+                var _this2 = this;
 
@@ -192,12 +203,12 @@ var nodes = [];
                 parent.children.forEach(function (index) {
-                    var child = _this3.nodePosCache[index];
+                    var child = _this2.nodePosCache[index];
 
                     if (indexesToRender.has(index)) {
-                        if (child.children && child.children.length > 0) {
-                            nodes.push(_this3.renderChildWithChildren(child, top, indexesToRender));
+                        if (child.children) {
+                            nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
                         } else {
                             nodes.push(_react2['default'].createElement(
                                 'li',
-                                { key: child.id, style: _this3.getChildContainerStyle(child, top) },
-                                _this3.props.rowRenderer(child.id)
+                                { key: child.node, style: _this2.getChildContainerStyle(child, top) },
+                                _this2.props.rowRenderer(child.node)
                             ));
@@ -215,2 +226,8 @@ }
         }()
+
+        /**
+         * Determines the start and end number of the range to be rendered.
+         * @returns {{start: number, end: number}} Indexes within nodePosCache
+         */
+
     }, {
@@ -240,2 +257,9 @@ key: 'getRenderRowRange',
         }()
+
+        /**
+         * Returns the parent path for the specified index within nodePosCache.
+         * @param nodeIndex
+         * @returns {Array<Node>}
+         */
+
     }, {
@@ -288,2 +312,8 @@ key: 'getParentPath',
         }()
+
+        /**
+         * Returns the closest node within nodePosCache.
+         * @param scrollTop
+         */
+
     }, {
@@ -349,4 +379,12 @@ key: 'findClosestNode',
     return StickyTree;
-}(_react2['default'].Component);
+}(_react2['default'].PureComponent);
 
+StickyTree.propTypes = {
+    getChildren: _propTypes2['default'].func.isRequired,
+    getHeight: _propTypes2['default'].func.isRequired,
+    rowRenderer: _propTypes2['default'].func.isRequired,
+    root: _propTypes2['default'].any.isRequired,
+    height: _propTypes2['default'].number,
+    width: _propTypes2['default'].number
+};
 StickyTree.defaultProps = {
@@ -353,0 +391,0 @@ overscanRowCount: 0,

dist/es/StickyTree.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -22,4 +26,4 @@
 
-var StickyTree = function (_React$Component) {
-    _inherits(StickyTree, _React$Component);
+var StickyTree = function (_React$PureComponent) {
+    _inherits(StickyTree, _React$PureComponent);
 
@@ -38,32 +42,52 @@ function StickyTree(props) {
 
-        console.time('flatten');
-        var innerScrollHeight = _this.calculateHeight(_this.props.tree.root);
-        var nodes = [{ id: 'root', top: 0, node: _this.props.tree.root, index: 0, height: innerScrollHeight, children: [] }];
-        _this.nodePosCache = _this.flattenTree(_this.props.tree, _this.props.tree.root, nodes);
-        console.timeEnd('flatten');
-        console.info(_this.nodePosCache);
+        _this.nodePosCache = [];
         return _this;
     }
 
+    /**
+     *  Converts the consumer's tree structure into a flat array with root at index: 0,
+     *  including information about the top and height of each node.
+     *
+     *  i.e:
+     *  <pre>
+     *  [
+     *    { node: 'root', top: 0, index: 0, height: 100 },
+     *    { node: 'child1', top: 10, index: 0, parentIndex: 0 height: 10 },
+     *    ...
+     *  ]
+     *  </pre>
+     *
+     */
+
+
     _createClass(StickyTree, [{
         key: 'flattenTree',
         value: function () {
-            function flattenTree(tree, parent) {
-                var nodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-                var params = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { totalHeight: 0 };
+            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 parentIndex = nodes.length - 1;
-                for (var i = 0; i < parent.children.length; i++) {
-                    var child = tree[parent.children[i]];
-                    var childInfo = { id: child.id, top: params.totalHeight, parentIndex: parentIndex, index: nodes.length, children: [] };
-                    params.totalHeight += this.props.getHeight(child.id);
+                var index = nodes.length;
+                var nodeInfo = { node: node, top: context.totalHeight, parentIndex: context.parentIndex, index: index };
+                nodes.push(nodeInfo);
 
-                    nodes.push(childInfo);
-                    nodes[parentIndex].children.push(childInfo.index);
+                if (context.parentIndex !== undefined) {
+                    nodes[context.parentIndex].children.push(index);
+                }
 
-                    if (child.children.length > 0) {
-                        this.flattenTree(tree, child, nodes, params);
+                context.totalHeight += this.props.getHeight(node);
+
+                var children = this.props.getChildren(node);
+                if (Array.isArray(children)) {
+                    nodeInfo.children = [];
+
+                    for (var i = 0; i < children.length; i++) {
+                        // Need to reset parentIndex here as we are recursive.
+                        context.parentIndex = index;
+                        var child = children[i];
+                        this.flattenTree(child, nodes, context);
                     }
-                    childInfo.height = params.totalHeight - childInfo.top;
                 }
+                nodeInfo.height = context.totalHeight - nodeInfo.top;
+
                 return nodes;
@@ -75,9 +99,11 @@ }
     }, {
-        key: 'shouldComponentUpdate',
+        key: 'componentWillMount',
         value: function () {
-            function shouldComponentUpdate(newProps, newState) {
-                return this.state.currNodePos !== newState.currNodePos || this.props.width !== newProps.width || this.props.height !== newProps.height || this.props.tree !== newProps.tree;
+            function componentWillMount() {
+                if (this.props.root) {
+                    this.nodePosCache = this.flattenTree(this.props.root);
+                }
             }
 
-            return shouldComponentUpdate;
+            return componentWillMount;
         }()
@@ -88,4 +114,4 @@ }, {
             function componentWillReceiveProps(newProps) {
-                if (newProps.tree !== this.props.tree) {
-                    console.info('new Tree');
+                if (newProps.root !== this.props.root) {
+                    this.nodePosCache = this.flattenTree(newProps.root);
                 }
@@ -97,21 +123,2 @@ }
     }, {
-        key: 'calculateHeight',
-        value: function () {
-            function calculateHeight(parent) {
-                var _this2 = this;
-
-                var height = 0;
-                parent.children.forEach(function (id) {
-                    height += _this2.props.getHeight(parent.id);
-                    if (_this2.props.tree[id].children.length > 0) {
-                        height += _this2.calculateHeight(_this2.props.tree[id]);
-                    }
-                });
-
-                return height;
-            }
-
-            return calculateHeight;
-        }()
-    }, {
         key: 'getChildContainerStyle',
@@ -132,2 +139,3 @@ value: function () {
 
+                // Parent nodes to the current range.
                 var indexesToRender = new Set();
@@ -137,5 +145,8 @@ for (var i = 0; i < path.length; i++) {
                 }
+
+                // The rest of the nodes within the range.
                 for (var _i = rowRenderRange.start; _i <= rowRenderRange.end; _i++) {
                     indexesToRender.add(this.nodePosCache[_i].index);
                 }
+
                 if (this.props.renderRoot) {
@@ -159,3 +170,3 @@ return _react2['default'].createElement(
                     'ul',
-                    { key: parent.id, className: className, style: { position: 'absolute', width: '100%' } },
+                    { key: parent.node, className: className, style: { position: 'absolute', width: '100%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -173,4 +184,4 @@ );
                     'li',
-                    { key: child.id, style: this.getChildContainerStyle(child, top) },
-                    this.props.rowRenderer(child.id),
+                    { key: child.node, style: this.getChildContainerStyle(child, top) },
+                    this.props.rowRenderer(child.node),
                     this.renderParentContainer(child, 'parent-node', indexesToRender)
@@ -186,3 +197,3 @@ );
             function renderChildren(parent, indexesToRender) {
-                var _this3 = this;
+                var _this2 = this;
 
@@ -192,12 +203,12 @@ var nodes = [];
                 parent.children.forEach(function (index) {
-                    var child = _this3.nodePosCache[index];
+                    var child = _this2.nodePosCache[index];
 
                     if (indexesToRender.has(index)) {
-                        if (child.children && child.children.length > 0) {
-                            nodes.push(_this3.renderChildWithChildren(child, top, indexesToRender));
+                        if (child.children) {
+                            nodes.push(_this2.renderChildWithChildren(child, top, indexesToRender));
                         } else {
                             nodes.push(_react2['default'].createElement(
                                 'li',
-                                { key: child.id, style: _this3.getChildContainerStyle(child, top) },
-                                _this3.props.rowRenderer(child.id)
+                                { key: child.node, style: _this2.getChildContainerStyle(child, top) },
+                                _this2.props.rowRenderer(child.node)
                             ));
@@ -215,2 +226,8 @@ }
         }()
+
+        /**
+         * Determines the start and end number of the range to be rendered.
+         * @returns {{start: number, end: number}} Indexes within nodePosCache
+         */
+
     }, {
@@ -240,2 +257,9 @@ key: 'getRenderRowRange',
         }()
+
+        /**
+         * Returns the parent path for the specified index within nodePosCache.
+         * @param nodeIndex
+         * @returns {Array<Node>}
+         */
+
     }, {
@@ -288,2 +312,8 @@ key: 'getParentPath',
         }()
+
+        /**
+         * Returns the closest node within nodePosCache.
+         * @param scrollTop
+         */
+
     }, {
@@ -349,4 +379,12 @@ key: 'findClosestNode',
     return StickyTree;
-}(_react2['default'].Component);
+}(_react2['default'].PureComponent);
 
+StickyTree.propTypes = {
+    getChildren: _propTypes2['default'].func.isRequired,
+    getHeight: _propTypes2['default'].func.isRequired,
+    rowRenderer: _propTypes2['default'].func.isRequired,
+    root: _propTypes2['default'].any.isRequired,
+    height: _propTypes2['default'].number,
+    width: _propTypes2['default'].number
+};
 StickyTree.defaultProps = {
@@ -353,0 +391,0 @@ overscanRowCount: 0,

package.json

 {
   "name": "react-virtualized-sticky-tree",
   "description": "A React component for efficiently rendering tree like structures with support for position: sticky",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Marc McIntyre <[e-mail]>",
@@ -36,2 +36,3 @@ "license": "MIT",
   "dependencies": {
+    "prop-types": "^15.5.10",
     "react": "^15.6.1"
@@ -38,0 +39,0 @@ },

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32334

increased by10.93%

Number of package files

6

increased by20%

Lines of code

660

increased by8.55%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

72

increased byInfinity%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedprop-types@^15.5.10