feat: Fast & efficient search rendering with large tree ✨ (#102)

.babelrc

@@ -1,12 +1,13 @@
 {
   "presets": [["es2015", { "modules": false }], "stage-0", "react"],
-  "plugins": [
-    "transform-class-properties"
-  ],
+  "plugins": ["transform-class-properties"],
   "env": {
-      "test": {
-        "presets": ["es2015", "stage-0", "react"],
-        "plugins": ["istanbul"]
-      }
+    "test": {
+      "presets": ["es2015", "stage-0", "react"],
+      "plugins": ["istanbul"]
+    },
+    "production": {
+      "plugins": ["transform-react-remove-prop-types"]
     }
-}
+  }
+}

.travis.yml

@@ -4,24 +4,25 @@ cache:
     - node_modules
 git:
   depth: 3
-node_js:
-  - '8'
-before_install:
-  - npm install -g greenkeeper-lockfile@1
-install:
-  - yarn install --ignore-engines
-before_script: greenkeeper-lockfile-update
-after_script: greenkeeper-lockfile-upload
-script:
-  - yarn coveralls
-branches:
-  except:
-    - /^v\d+\.\d+\.\d+$/
 jobs:
   include:
+    - stage: test
+      node_js:
+        - '8'
+      before_install:
+        - npm install -g greenkeeper-lockfile@1
+      install:
+        - yarn install --ignore-engines
+      before_script: greenkeeper-lockfile-update
+      after_script: greenkeeper-lockfile-upload
+      script:
+        - yarn coveralls
+      branches:
+        except:
+          - /^v\d+\.\d+\.\d+$/
     # Define the release stage that runs semantic-release
     - stage: release
-      if: branch = master
+      if: (NOT type IN (pull_request)) AND (branch = master)
       node_js: lts/*
       # overwrite default `script` step to skip the tests
       script: echo "Deploying to npm ..."

README.md

@@ -350,7 +350,7 @@ The tree debounces key presses to avoid costly search calculations. The default
 
 The dropdown renders only visible content and skips any nodes that are going to hidden from the user. E.g., if a parent node is not expanded, there is no point in rendering children since they will not be visible anyway.
 
-Planned feature: Use [react-virtualized](https://github.com/bvaughn/react-virtualized) to take this to the next level.
+~~Planned feature: Use [react-virtualized](https://github.com/bvaughn/react-virtualized) to take this to the next level.~~ The search tree now uses infinite scroll, limiting search results to 100 items initially (more load seamlessly as you scroll) - this results in super fast rendering even with large number of nodes (see [#80](https://github.com/dowjones/react-dropdown-tree-select/issues/80)).
 
 ### Reducing costly DOM manipulations
 

__snapshots__/src/index.test.js.md

@@ -99,7 +99,7 @@ Generated by [AVA](https://ava.li).
                   <input
                     className="search"
                     onBlur={Function {}}
-                    onChange={Function onInputChange {}}
+                    onChange={Function {}}
                     onFocus={Function {}}
                     placeholder="Choose..."
                     type="text"
@@ -253,6 +253,7 @@ Generated by [AVA](https://ava.li).
             onAction={Function {}}
             onCheckboxChange={Function {}}
             onNodeToggle={Function {}}
+            pageSize={100}
             searchModeOn={false}
           />
         </div>

__snapshots__/src/input/index.test.js.md

@@ -4,44 +4,26 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
-## renders tags
+## renders input when no tags are passed
 
 > Snapshot 1
 
     <ul
       className="tag-list"
     >
-      <li
-        className="tag-item"
-        key="tag-item-i1"
-      >
-        <Tag
-          id="i1"
-          label="l1"
-        />
-      </li>
-      <li
-        className="tag-item"
-        key="tag-item-i2"
-      >
-        <Tag
-          id="i2"
-          label="l2"
-        />
-      </li>
       <li
         className="tag-item"
       >
         <input
           className="search"
-          onChange={Function onInputChange {}}
+          onChange={Function {}}
           placeholder="Choose..."
           type="text"
         />
       </li>
-    </ul
+    </ul>
 
-## renders input when no tags are passed
+## renders placeholder
 
 > Snapshot 1
 
@@ -53,31 +35,49 @@ Generated by [AVA](https://ava.li).
       >
         <input
           className="search"
-          onChange={Function onInputChange {}}
-          placeholder="Choose..."
+          onChange={Function {}}
+          placeholder="select something"
           type="text"
         />
       </li>
-    </ul
+    </ul>
 
-## renders placeholder
+## renders tags
 
 > Snapshot 1
 
     <ul
       className="tag-list"
     >
+      <li
+        className="tag-item"
+        key="tag-item-i1"
+      >
+        <Tag
+          id="i1"
+          label="l1"
+        />
+      </li>
+      <li
+        className="tag-item"
+        key="tag-item-i2"
+      >
+        <Tag
+          id="i2"
+          label="l2"
+        />
+      </li>
       <li
         className="tag-item"
       >
         <input
           className="search"
-          onChange={Function onInputChange {}}
-          placeholder="select something"
+          onChange={Function {}}
+          placeholder="Choose..."
           type="text"
         />
       </li>
-    </ul
+    </ul>
 
 ## should render data attributes
 
@@ -102,9 +102,9 @@ Generated by [AVA](https://ava.li).
       >
         <input
           className="search"
-          onChange={Function onInputChange {}}
+          onChange={Function {}}
           placeholder="Choose..."
           type="text"
         />
       </li>
-    </ul>
+    </ul>

__snapshots__/src/tag/index.test.js.md

@@ -14,7 +14,7 @@ Generated by [AVA](https://ava.li).
       hello
       <button
         className="tag-remove"
-        onClick={Function onClick {}}
+        onClick={Function {}}
         type="button"
       >
         x

__snapshots__/src/tree-node/action.test.js.md

@@ -10,7 +10,7 @@ Generated by [AVA](https://ava.li).
 
     <i
       className="cn0-0-0"
-      onClick={Function onClick {}}
+      onClick={Function {}}
       title="action"
     >
       hello

__snapshots__/src/tree-node/index.test.js.md

@@ -16,51 +16,26 @@ Generated by [AVA](https://ava.li).
         }
       }
     >
-      <i
-        className="toggle"
-        onClick={Function onClick {}}
+      <Toggle
+        id="0-0-0"
+        isLeaf={true}
       />
       <NodeLabel
-        node={
-          {
-            _id: '0-0-0',
-            _parent: '0-0',
-            actions: [
-              {
-                className: 'fa fa-ban',
-                id: 'NOT',
-                title: 'NOT',
-              },
-            ],
-            className: 'cn0-0-0',
-            label: 'item1-1-1',
-            value: 'value1-1-1',
-          }
-        }
+        id="0-0-0"
+        label="item0-0-0"
+        value="value0-0-0"
       />
-      <Action
-        actionData={
-          {
-            action: 'NOT',
-            node: {
-              _id: '0-0-0',
-              _parent: '0-0',
-              actions: [
-                {
-                  className: 'fa fa-ban',
-                  id: 'NOT',
-                  title: 'NOT',
-                },
-              ],
-              className: 'cn0-0-0',
-              label: 'item1-1-1',
-              value: 'value1-1-1',
+      <Actions
+        actions={
+          [
+            {
+              className: 'fa fa-ban',
+              id: 'NOT',
+              title: 'NOT',
             },
-          }
+          ]
         }
-        className="fa fa-ban"
-        id="NOT"
-        key="action-0"
-        title="NOT"
+        id="0-0-0"
+        onAction={Function onAction {}}
       />
     </li>

__snapshots__/src/tree-node/node-label.test.js.md

@@ -4,43 +4,47 @@ The actual snapshot is saved in `node-label.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
-## renders  node label
+## disable checkbox if the node has disabled status
 
 > Snapshot 1
 
     <label
-      title="item1-1-1"
+      htmlFor="0-0-0"
+      title="item0-0-0"
     >
       <Checkbox
         className="checkbox-item"
+        disabled={true}
+        id="0-0-0"
         name="0-0-0"
-        onChange={Function onChange {}}
-        value="value1-1-1"
+        onChange={Function {}}
+        value="value0-0-0"
       />
       <span
         className="node-label"
       >
-        item1-1-1
+        item0-0-0
       </span>
-    </label
+    </label>
 
-## disable checkbox if the node has disabled status
+## renders node label
 
 > Snapshot 1
 
     <label
-      title="item1-1-1"
+      htmlFor="0-0-0"
+      title="item0-0-0"
     >
       <Checkbox
         className="checkbox-item"
-        disabled={true}
+        id="0-0-0"
         name="0-0-0"
-        onChange={Function onChange {}}
-        value="value1-1-1"
+        onChange={Function {}}
+        value="value0-0-0"
       />
       <span
         className="node-label"
       >
-        item1-1-1
+        item0-0-0
       </span>
-    </label>
+    </label>