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

Comparing version 1.0.1 to 1.0.2

dist/commonjs/StickyTree.js

@@ -49,3 +49,2 @@ 'use strict';
      *  i.e:
-     *  <pre>
      *  [
@@ -56,4 +55,2 @@ *    { node: 'root', top: 0, index: 0, height: 100 },
      *  ]
-     *  </pre>
-     *
      */
@@ -101,3 +98,3 @@
             function componentWillMount() {
-                if (this.props.root) {
+                if (this.props.root !== undefined) {
                     this.nodePosCache = this.flattenTree(this.props.root);
@@ -149,8 +146,8 @@ }
                     return _react2['default'].createElement(
-                        'ul',
-                        { className: 'sticky-tree-list' },
+                        'div',
+                        { className: 'rv-sticky-node-list', style: { width: '100%', position: 'absolute', top: 0 } },
                         this.renderChildWithChildren(path[0], 0, indexesToRender)
                     );
                 }
-                return this.renderParentContainer(path[0], 'sticky-tree-list', indexesToRender);
+                return this.renderParentContainer(path[0], indexesToRender);
             }
@@ -163,6 +160,6 @@
         value: function () {
-            function renderParentContainer(parent, className, indexesToRender) {
+            function renderParentContainer(parent, indexesToRender) {
                 return _react2['default'].createElement(
-                    'ul',
-                    { key: parent.node, className: className, style: { position: 'absolute', width: '100%' } },
+                    'div',
+                    { key: parent.node, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -179,6 +176,6 @@ );
                 return _react2['default'].createElement(
-                    'li',
-                    { key: child.node, style: this.getChildContainerStyle(child, top) },
+                    'div',
+                    { className: 'rv-sticky-parent-node', key: child.node, style: this.getChildContainerStyle(child, top) },
                     this.props.rowRenderer(child.node),
-                    this.renderParentContainer(child, 'parent-node', indexesToRender)
+                    this.renderParentContainer(child, indexesToRender)
                 );
@@ -205,4 +202,6 @@ }
                             nodes.push(_react2['default'].createElement(
-                                'li',
-                                { key: child.node, style: _this2.getChildContainerStyle(child, top) },
+                                'div',
+                                {
+                                    className: 'rv-sticky-leaf-node', key: child.node,
+                                    style: _this2.getChildContainerStyle(child, top) },
                                 _this2.props.rowRenderer(child.node)
@@ -343,3 +342,3 @@ ));
             function getStyle() {
-                var style = {};
+                var style = { overflow: 'auto', position: 'relative' };
                 if (this.props.width) {
@@ -362,3 +361,3 @@ style.width = this.props.width;
                     'div',
-                    { className: 'sticky-tree', style: this.getStyle(), onScroll: this.onScroll },
+                    { className: 'rv-sticky-tree', style: this.getStyle(), onScroll: this.onScroll },
                     this.renderParentTree()
@@ -380,4 +379,6 @@ );
     root: _propTypes2['default'].any.isRequired,
+    overscanRowCount: _propTypes2['default'].number.isRequired,
     height: _propTypes2['default'].number,
-    width: _propTypes2['default'].number
+    width: _propTypes2['default'].number,
+    renderRoot: _propTypes2['default'].bool
 };
@@ -384,0 +385,0 @@ StickyTree.defaultProps = {

dist/es/StickyTree.js

@@ -49,3 +49,2 @@ 'use strict';
      *  i.e:
-     *  <pre>
      *  [
@@ -56,4 +55,2 @@ *    { node: 'root', top: 0, index: 0, height: 100 },
      *  ]
-     *  </pre>
-     *
      */
@@ -101,3 +98,3 @@
             function componentWillMount() {
-                if (this.props.root) {
+                if (this.props.root !== undefined) {
                     this.nodePosCache = this.flattenTree(this.props.root);
@@ -149,8 +146,8 @@ }
                     return _react2['default'].createElement(
-                        'ul',
-                        { className: 'sticky-tree-list' },
+                        'div',
+                        { className: 'rv-sticky-node-list', style: { width: '100%', position: 'absolute', top: 0 } },
                         this.renderChildWithChildren(path[0], 0, indexesToRender)
                     );
                 }
-                return this.renderParentContainer(path[0], 'sticky-tree-list', indexesToRender);
+                return this.renderParentContainer(path[0], indexesToRender);
             }
@@ -163,6 +160,6 @@
         value: function () {
-            function renderParentContainer(parent, className, indexesToRender) {
+            function renderParentContainer(parent, indexesToRender) {
                 return _react2['default'].createElement(
-                    'ul',
-                    { key: parent.node, className: className, style: { position: 'absolute', width: '100%' } },
+                    'div',
+                    { key: parent.node, className: 'rv-sticky-node-list', style: { position: 'absolute', width: '100%' } },
                     this.renderChildren(parent, indexesToRender)
@@ -179,6 +176,6 @@ );
                 return _react2['default'].createElement(
-                    'li',
-                    { key: child.node, style: this.getChildContainerStyle(child, top) },
+                    'div',
+                    { className: 'rv-sticky-parent-node', key: child.node, style: this.getChildContainerStyle(child, top) },
                     this.props.rowRenderer(child.node),
-                    this.renderParentContainer(child, 'parent-node', indexesToRender)
+                    this.renderParentContainer(child, indexesToRender)
                 );
@@ -205,4 +202,6 @@ }
                             nodes.push(_react2['default'].createElement(
-                                'li',
-                                { key: child.node, style: _this2.getChildContainerStyle(child, top) },
+                                'div',
+                                {
+                                    className: 'rv-sticky-leaf-node', key: child.node,
+                                    style: _this2.getChildContainerStyle(child, top) },
                                 _this2.props.rowRenderer(child.node)
@@ -343,3 +342,3 @@ ));
             function getStyle() {
-                var style = {};
+                var style = { overflow: 'auto', position: 'relative' };
                 if (this.props.width) {
@@ -362,3 +361,3 @@ style.width = this.props.width;
                     'div',
-                    { className: 'sticky-tree', style: this.getStyle(), onScroll: this.onScroll },
+                    { className: 'rv-sticky-tree', style: this.getStyle(), onScroll: this.onScroll },
                     this.renderParentTree()
@@ -380,4 +379,6 @@ );
     root: _propTypes2['default'].any.isRequired,
+    overscanRowCount: _propTypes2['default'].number.isRequired,
     height: _propTypes2['default'].number,
-    width: _propTypes2['default'].number
+    width: _propTypes2['default'].number,
+    renderRoot: _propTypes2['default'].bool
 };
@@ -384,0 +385,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": "1.0.1",
+  "version": "1.0.2",
   "author": "Marc McIntyre <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

 # react-virtualized-sticky-tree
-A React component for efficiently rendering tree like structures with support for position: sticky
+A React component for efficiently rendering tree like structures with support for position: sticky. `react-virtualized-sticky-tree` uses a similar API to [react-virtualized](https://github.com/bvaughn/react-virtualized).
 
@@ -48,3 +48,3 @@ ## Getting Started
 
-If the containing element of your tree has a dynamic height, you can use https://github.com/souporserious/react-measure to provide the width and height to sticky-tree so that it can resize to the available width.
+If the containing element of your tree has a dynamic height, you can use [react-measure](https://github.com/souporserious/react-measure) to provide the width and height to sticky-tree so that it can resize to the available width.
 
@@ -51,0 +51,0 @@ `npm install react-measure --save`

No alert changes

Improved metrics

Total package byte prevSize

33075

increased by2.29%

Lines of code

662

increased by0.3%

No dependency changes