Toggler doesn't disappear if no data loaded for loadOnDemand node (#23)

Fixing the issue with not opening toggler when no children lazy loaded
cheton · Jan 29, 2018 · a2354e1 · a2354e1
1 parent d827e93
commit a2354e1
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/dist/infinite-tree.js b/dist/infinite-tree.js
@@ -1977,11 +1977,17 @@ var InfiniteTree = function (_events$EventEmitter) {
 
                     nodes = (0, _ensureArray2['default'])(nodes);
 
+                    var currentNodeIndex = _this6.nodes.indexOf(node);
+
+                    if (nodes.length === 0 && currentNodeIndex >= 0) {
+                        node.state.open = true;
+                    }
+
                     if (err || nodes.length === 0) {
                         // Toggle the loading state
                         node.state.loading = false;
                         // Update the row corresponding to the node
-                        _this6.rows[nodeIndex] = _this6.options.rowRenderer(node, _this6.options);
+                        _this6.rows[currentNodeIndex] = _this6.options.rowRenderer(node, _this6.options);
                         // Update list
                         _this6.update();
 
@@ -2001,9 +2007,9 @@ var InfiniteTree = function (_events$EventEmitter) {
                             asyncCallback: function asyncCallback() {
                                 // Toggle the loading state
                                 node.state.loading = false;
-                                var nodeIndex = _this6.nodes.indexOf(node);
+                                var openedNodeIndex = _this6.nodes.indexOf(node);
                                 // Update the row corresponding to the node
-                                _this6.rows[nodeIndex] = _this6.options.rowRenderer(node, _this6.options);
+                                _this6.rows[openedNodeIndex] = _this6.options.rowRenderer(node, _this6.options);
                                 // Update list
                                 _this6.update();
 
@@ -2016,7 +2022,7 @@ var InfiniteTree = function (_events$EventEmitter) {
                         // Toggle the loading state
                         node.state.loading = false;
                         // Update the row corresponding to the node
-                        _this6.rows[nodeIndex] = _this6.options.rowRenderer(node, _this6.options);
+                        _this6.rows[currentNodeIndex] = _this6.options.rowRenderer(node, _this6.options);
                         // Update list
                         _this6.update();
 

diff --git a/dist/infinite-tree.min.js b/dist/infinite-tree.min.js
diff --git a/docs/examples.js b/docs/examples.js
diff --git a/src/infinite-tree.js b/src/infinite-tree.js
@@ -1063,11 +1063,17 @@ class InfiniteTree extends events.EventEmitter {
                 this.options.loadNodes(node, (err, nodes, done = noop) => {
                     nodes = ensureArray(nodes);
 
+                    const currentNodeIndex = this.nodes.indexOf(node);
+
+                    if (nodes.length === 0 && currentNodeIndex >= 0) {
+                        node.state.open = true;
+                    }
+
                     if (err || nodes.length === 0) {
                         // Toggle the loading state
                         node.state.loading = false;
                         // Update the row corresponding to the node
-                        this.rows[nodeIndex] = this.options.rowRenderer(node, this.options);
+                        this.rows[currentNodeIndex] = this.options.rowRenderer(node, this.options);
                         // Update list
                         this.update();
 
@@ -1088,9 +1094,9 @@ class InfiniteTree extends events.EventEmitter {
                             asyncCallback: () => {
                                 // Toggle the loading state
                                 node.state.loading = false;
-                                const nodeIndex = this.nodes.indexOf(node);
+                                const openedNodeIndex = this.nodes.indexOf(node);
                                 // Update the row corresponding to the node
-                                this.rows[nodeIndex] = this.options.rowRenderer(node, this.options);
+                                this.rows[openedNodeIndex] = this.options.rowRenderer(node, this.options);
                                 // Update list
                                 this.update();
 
@@ -1103,7 +1109,7 @@ class InfiniteTree extends events.EventEmitter {
                         // Toggle the loading state
                         node.state.loading = false;
                         // Update the row corresponding to the node
-                        this.rows[nodeIndex] = this.options.rowRenderer(node, this.options);
+                        this.rows[currentNodeIndex] = this.options.rowRenderer(node, this.options);
                         // Update list
                         this.update();
 

diff --git a/test/index.js b/test/index.js
@@ -7,7 +7,7 @@ import { Node } from 'flattree';
 const virtualConsole = new VirtualConsole();
 virtualConsole.sendTo(console);
 
-const dom = new JSDOM(``, { virtualConsole });
+const dom = new JSDOM('', { virtualConsole });
 
 global.window = dom.window;
 global.document = dom.window.document;
@@ -139,14 +139,22 @@ test('loadOnDemand', (t) => {
         loadNodes: (node, next) => {
             t.equal(tree.getNodeById('<root>').getChildren().length, 0);
 
+            // Asynchronous
+            setTimeout(() => {
+                next(null, [], () => {
+                    t.equal(tree.getNodeById('<root>').getChildren().length, 0);
+                    t.equal(node.state.open, true);
+                });
+            }, 250);
+
             // Asynchronous
             setTimeout(() => {
                 const data = getTreeData();
                 next(null, data.children, () => {
                     t.equal(tree.getNodeById('<root>').getChildren().length, 2);
                     t.end();
                 });
-            }, 250);
+            }, 500);
         }
     });