Use shouldLoadNodes option to determine whether to load nodes on-demand (#30)

Author: cheton

README.md

@@ -66,7 +66,13 @@ const tree = new InfiniteTree({
         drop: function(event, options) {
         }
     },
-    loadNodes: function(parentNode, next) { // Load node on demand
+    shouldLoadNodes: function(parentNode) {
+        if (!parentNode.hasChildren() && parentNode.loadOnDemand) {
+            return true;
+        }
+        return false;
+    },
+    loadNodes: function(parentNode, next) {
         // Loading...
         const nodes = [];
         nodes.length = 1000;

dist/infinite-tree.js

@@ -1,4 +1,4 @@
-/*! infinite-tree v1.15.0 | (c) 2018 Cheton Wu <cheton@gmail.com> | MIT | https://github.com/cheton/infinite-tree */
+/*! infinite-tree v1.16.0 | (c) 2018 Cheton Wu <cheton@gmail.com> | MIT | https://github.com/cheton/infinite-tree */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -919,6 +919,7 @@ var InfiniteTree = function (_events$EventEmitter) {
         _this.options = {
             autoOpen: false,
             droppable: false,
+            shouldLoadNodes: null,
             loadNodes: null,
             rowRenderer: _renderer.defaultRowRenderer,
             selectable: true,
@@ -2068,7 +2069,9 @@ var InfiniteTree = function (_events$EventEmitter) {
             return true;
         }
 
-        if (!node.hasChildren() && node.loadOnDemand) {
+        var shouldLoadNodes = typeof this.options.shouldLoadNodes === 'function' ? !!this.options.shouldLoadNodes(node) : !node.hasChildren() && node.loadOnDemand;
+
+        if (shouldLoadNodes) {
             if (typeof this.options.loadNodes !== 'function') {
                 return false;
             }

dist/infinite-tree.min.js

@@ -1,6 +1,6 @@
 {
   "name": "infinite-tree",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.",
   "homepage": "https://github.com/cheton/infinite-tree",
   "main": "lib/index.js",
@@ -44,32 +44,32 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.1",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^8.2.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-0": "^6.24.1",
     "coveralls": "^3.0.0",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.15.0",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
     "eslint-config-trendmicro": "^1.3.0",
     "eslint-import-resolver-webpack": "^0.8.4",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
-    "file-loader": "^1.1.6",
-    "jsdom": "^11.5.1",
+    "eslint-plugin-react": "^7.7.0",
+    "file-loader": "^1.1.11",
+    "jsdom": "^11.6.2",
     "json-loader": "^0.5.7",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.5",
     "nib": "^1.1.2",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.20.3",
     "stylint": "^1.5.9",
     "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "tap": "^11.0.1",
-    "url-loader": "^0.6.2",
+    "stylus-loader": "^3.0.2",
+    "tap": "^11.1.3",
+    "url-loader": "^1.0.1",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.11.0"
   },

docs/common.js

@@ -66,6 +66,7 @@ class InfiniteTree extends events.EventEmitter {
     options = {
         autoOpen: false,
         droppable: false,
+        shouldLoadNodes: null,
         loadNodes: null,
         rowRenderer: defaultRowRenderer,
         selectable: true,
@@ -1150,7 +1151,11 @@ class InfiniteTree extends events.EventEmitter {
             return true;
         }
 
-        if (!node.hasChildren() && node.loadOnDemand) {
+        const shouldLoadNodes = (typeof this.options.shouldLoadNodes === 'function')
+            ? !!(this.options.shouldLoadNodes(node))
+            : !node.hasChildren() && node.loadOnDemand;
+
+        if (shouldLoadNodes) {
             if (typeof this.options.loadNodes !== 'function') {
                 return false;
             }

docs/examples.js

@@ -164,6 +164,45 @@ test('loadOnDemand', (t) => {
     t.ok(tree.openNode(tree.getNodeById('<root>')));
 });
 
+test('shouldLoadNodes', (t) => {
+    const el = getTreeElement();
+    const tree = new InfiniteTree(el, {
+        autoOpen: true,
+        data: {
+            id: '<root>',
+            loadNodes: true
+        },
+        shouldLoadNodes: (node) => {
+            return !node.hasChildren() && node.loadNodes;
+        },
+        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(tree.state.openNodes.length, 1);
+                    t.equal(node.state.open, true);
+                    t.end();
+                });
+            }, 250);
+
+            // Asynchronous
+            setTimeout(() => {
+                const data = getTreeData();
+                next(null, data.children, () => {
+                    t.equal(tree.getNodeById('<root>').getChildren().length, 2);
+                    t.equal(tree.state.openNodes.length, 1);
+                    t.end();
+                });
+            }, 500);
+        }
+    });
+
+    t.ok(tree.openNode(tree.getNodeById('<root>')));
+});
+
 test('tree.destroy', (t) => {
     const el = getTreeElement();
     const tree = new InfiniteTree(el, {