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

Comparing version 2.0.16 to 2.1.0

dist/commonjs/StickyTree.js

@@ -29,2 +29,7 @@ 'use strict';
 
+var SCROLL_REASON = {
+    OBSERVED: 'observed',
+    REQUESTED: 'requested'
+};
+
 var StickyTree = function (_React$PureComponent) {
@@ -41,6 +46,6 @@ _inherits(StickyTree, _React$PureComponent);
         _this.state = {
+            scrollTop: 0,
             currNodePos: 0
         };
 
-        _this.scrollTop = 0;
         _this.nodePosCache = [];
@@ -136,6 +141,2 @@ _this.rowRenderRange = undefined;
 
-                if (newProps.scrollTop !== undefined && newProps.scrollTop >= 0 && newProps.scrollTop !== this.scrollTop) {
-                    this.elem.scrollTop = newProps.scrollTop;
-                }
-
                 if (newProps.scrollIndex !== undefined && newProps.scrollIndex >= 0) {
@@ -282,22 +283,2 @@ this.scrollIndexIntoView(newProps.scrollIndex);
         /**
-         * Scrolls the node into view so that it is visible.
-         *
-         * @param nodeId The node id of the node to scroll into view.
-         * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
-         * be aligned with the bottom of the viewport.
-         */
-
-    }, {
-        key: 'scrollNodeIntoView',
-        value: function () {
-            function scrollNodeIntoView(nodeId) {
-                var alignToTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-                this.scrollIndexIntoView(this.getNodeIndex(nodeId), alignToTop);
-            }
-
-            return scrollNodeIntoView;
-        }()
-
-        /**
          * Returns the top of the node with the specified id.
@@ -355,3 +336,5 @@ * @param nodeId
             function setScrollTop(scrollTop) {
-                this.elem.scrollTop = scrollTop;
+                if (!isNaN(scrollTop)) {
+                    this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.REQUESTED });
+                }
             }
@@ -365,2 +348,22 @@
          *
+         * @param nodeId The node id of the node to scroll into view.
+         * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
+         * be aligned with the bottom of the viewport.
+         */
+
+    }, {
+        key: 'scrollNodeIntoView',
+        value: function () {
+            function scrollNodeIntoView(nodeId) {
+                var alignToTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+                this.scrollIndexIntoView(this.getNodeIndex(nodeId), alignToTop);
+            }
+
+            return scrollNodeIntoView;
+        }()
+
+        /**
+         * Scrolls the node into view so that it is visible.
+         *
          * @param index The index of the node.
@@ -379,5 +382,6 @@ * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
                 if (node !== undefined) {
+                    var scrollTop = void 0;
                     if (alignToTop) {
                         if (node.isSticky) {
-                            this.elem.scrollTop = node.top - node.stickyTop;
+                            scrollTop = node.top - node.stickyTop;
                         } else {
@@ -388,12 +392,15 @@ var path = this.getParentPath(index, false);
                                 if (ancestor.isSticky) {
-                                    this.elem.scrollTop = node.top - ancestor.stickyTop - ancestor.height;
-                                    return;
+                                    scrollTop = node.top - ancestor.stickyTop - ancestor.height;
+                                    break;
                                 }
                             }
-                            // Fallback if nothing is sticky.
-                            this.elem.scrollTop = node.top;
+                            if (scrollTop === undefined) {
+                                // Fallback if nothing is sticky.
+                                scrollTop = node.top;
+                            }
                         }
                     } else {
-                        this.elem.scrollTop = node.top - this.props.height + node.height;
+                        scrollTop = node.top - this.props.height + node.height;
                     }
+                    this.setScrollTop(scrollTop);
                 }
@@ -408,2 +415,8 @@ }
             function componentDidUpdate(prevProps, prevState) {
+                if (this.state.scrollReason === SCROLL_REASON.REQUESTED) {
+                    if (this.state.scrollTop >= 0 && this.state.scrollTop !== this.elem.scrollTop) {
+                        this.elem.scrollTop = this.state.scrollTop;
+                    }
+                }
+
                 if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.state.currNodePos) {
@@ -621,3 +634,3 @@ var range = this.rowRenderRange;
 
-                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.scrollTop + this.props.height) {
+                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.state.scrollTop + this.props.height) {
                     visibleEnd++;
@@ -723,6 +736,6 @@ }
                 var pos = void 0;
-                if (scrollTop > this.scrollTop || currNodePos === 0) {
+                if (scrollTop > this.state.scrollTop || currNodePos === 0) {
                     pos = this.forwardSearch(scrollTop, currNodePos);
                 }
-                if (scrollTop < this.scrollTop || pos === undefined) {
+                if (scrollTop < this.state.scrollTop || pos === undefined) {
                     pos = this.backwardSearch(scrollTop, currNodePos);
@@ -744,6 +757,7 @@ }
                 this.findClosestNode(scrollTop, this.state.currNodePos);
-                this.scrollTop = scrollTop;
 
+                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED });
+
                 if (this.props.onScroll !== undefined) {
-                    this.props.onScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+                    this.props.onScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft, scrollReason: SCROLL_REASON.OBSERVED });
                 }
@@ -750,0 +764,0 @@ }

dist/es/StickyTree.js

@@ -29,2 +29,7 @@ 'use strict';
 
+var SCROLL_REASON = {
+    OBSERVED: 'observed',
+    REQUESTED: 'requested'
+};
+
 var StickyTree = function (_React$PureComponent) {
@@ -41,6 +46,6 @@ _inherits(StickyTree, _React$PureComponent);
         _this.state = {
+            scrollTop: 0,
             currNodePos: 0
         };
 
-        _this.scrollTop = 0;
         _this.nodePosCache = [];
@@ -136,6 +141,2 @@ _this.rowRenderRange = undefined;
 
-                if (newProps.scrollTop !== undefined && newProps.scrollTop >= 0 && newProps.scrollTop !== this.scrollTop) {
-                    this.elem.scrollTop = newProps.scrollTop;
-                }
-
                 if (newProps.scrollIndex !== undefined && newProps.scrollIndex >= 0) {
@@ -282,22 +283,2 @@ this.scrollIndexIntoView(newProps.scrollIndex);
         /**
-         * Scrolls the node into view so that it is visible.
-         *
-         * @param nodeId The node id of the node to scroll into view.
-         * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
-         * be aligned with the bottom of the viewport.
-         */
-
-    }, {
-        key: 'scrollNodeIntoView',
-        value: function () {
-            function scrollNodeIntoView(nodeId) {
-                var alignToTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-                this.scrollIndexIntoView(this.getNodeIndex(nodeId), alignToTop);
-            }
-
-            return scrollNodeIntoView;
-        }()
-
-        /**
          * Returns the top of the node with the specified id.
@@ -355,3 +336,5 @@ * @param nodeId
             function setScrollTop(scrollTop) {
-                this.elem.scrollTop = scrollTop;
+                if (!isNaN(scrollTop)) {
+                    this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.REQUESTED });
+                }
             }
@@ -365,2 +348,22 @@
          *
+         * @param nodeId The node id of the node to scroll into view.
+         * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
+         * be aligned with the bottom of the viewport.
+         */
+
+    }, {
+        key: 'scrollNodeIntoView',
+        value: function () {
+            function scrollNodeIntoView(nodeId) {
+                var alignToTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+                this.scrollIndexIntoView(this.getNodeIndex(nodeId), alignToTop);
+            }
+
+            return scrollNodeIntoView;
+        }()
+
+        /**
+         * Scrolls the node into view so that it is visible.
+         *
          * @param index The index of the node.
@@ -379,5 +382,6 @@ * @param alignToTop if true, the node will aligned to the top of viewport, or sticky parent. If false, the bottom of the node will
                 if (node !== undefined) {
+                    var scrollTop = void 0;
                     if (alignToTop) {
                         if (node.isSticky) {
-                            this.elem.scrollTop = node.top - node.stickyTop;
+                            scrollTop = node.top - node.stickyTop;
                         } else {
@@ -388,12 +392,15 @@ var path = this.getParentPath(index, false);
                                 if (ancestor.isSticky) {
-                                    this.elem.scrollTop = node.top - ancestor.stickyTop - ancestor.height;
-                                    return;
+                                    scrollTop = node.top - ancestor.stickyTop - ancestor.height;
+                                    break;
                                 }
                             }
-                            // Fallback if nothing is sticky.
-                            this.elem.scrollTop = node.top;
+                            if (scrollTop === undefined) {
+                                // Fallback if nothing is sticky.
+                                scrollTop = node.top;
+                            }
                         }
                     } else {
-                        this.elem.scrollTop = node.top - this.props.height + node.height;
+                        scrollTop = node.top - this.props.height + node.height;
                     }
+                    this.setScrollTop(scrollTop);
                 }
@@ -408,2 +415,8 @@ }
             function componentDidUpdate(prevProps, prevState) {
+                if (this.state.scrollReason === SCROLL_REASON.REQUESTED) {
+                    if (this.state.scrollTop >= 0 && this.state.scrollTop !== this.elem.scrollTop) {
+                        this.elem.scrollTop = this.state.scrollTop;
+                    }
+                }
+
                 if (this.props.onRowsRendered !== undefined && prevState.currNodePos !== this.state.currNodePos) {
@@ -621,3 +634,3 @@ var range = this.rowRenderRange;
 
-                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.scrollTop + this.props.height) {
+                while (this.nodePosCache[visibleEnd] && this.nodePosCache[visibleEnd].top < this.state.scrollTop + this.props.height) {
                     visibleEnd++;
@@ -723,6 +736,6 @@ }
                 var pos = void 0;
-                if (scrollTop > this.scrollTop || currNodePos === 0) {
+                if (scrollTop > this.state.scrollTop || currNodePos === 0) {
                     pos = this.forwardSearch(scrollTop, currNodePos);
                 }
-                if (scrollTop < this.scrollTop || pos === undefined) {
+                if (scrollTop < this.state.scrollTop || pos === undefined) {
                     pos = this.backwardSearch(scrollTop, currNodePos);
@@ -744,6 +757,7 @@ }
                 this.findClosestNode(scrollTop, this.state.currNodePos);
-                this.scrollTop = scrollTop;
 
+                this.setState({ scrollTop: scrollTop, scrollReason: SCROLL_REASON.OBSERVED });
+
                 if (this.props.onScroll !== undefined) {
-                    this.props.onScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+                    this.props.onScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft, scrollReason: SCROLL_REASON.OBSERVED });
                 }
@@ -750,0 +764,0 @@ }

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

README.md

@@ -153,2 +153,6 @@ # react-virtualized-sticky-tree
 
-Rendering tree structures is supported in all modern browsers. position: sticky has only been tested in Chrome 59 and Firefox 54, but should work in Edge, Safari and Opera. See http://caniuse.com/#search=position%3Asticky
+* Tested with Chrome 59+
+* Tested with Safari 11+
+* Tested with Firefox 54+
+
+Rendering tree structures is supported in all modern browsers. For position: sticky, See http://caniuse.com/#search=position%3Asticky

No alert changes

Improved metrics

Total package byte prevSize

86093

increased by2.52%

Number of package files

11

increased by10%

Lines of code

1688

increased by1.44%

Number of lines in readme file

158

increased by2.6%

No dependency changes