Add search enhancements, showOriginal flexibility

* Added `searchOptions.debounceTime` prop for debouncing search action
for better user experience

* Added `filterOptions.cacheResults` prop option for added filterer
flexibility and possible performance gains

* Added `verboseShowOriginal` prop for smarter child expansion
during search

README.md

@@ -50,6 +50,12 @@ The class name to be added to the root component element.
 Search bar component that accepts `onChange`, `data` and `query` properties.
 Defaults to built-in search bar. Pass `false` to disable search.
 
+#### props.searchOptions
+
+Optional parameters for search (toolbar). Must be an object.
+
+- `debounceTime`, wait time (ms) between search field `onChange` events before actually performing search. This can help provide a better user experience when searching larger data sets. Defaults to `300`.
+
 #### props.query
 
 Optional initial search query, defaults to an empty string.
@@ -87,4 +93,9 @@ on initial render. Receives two arguments: `keypath` and `value`. Defaults to
 
 Optional parameters for filterer (search). Must be an object.
 
+- `cacheResults`, Set to `false` to disable the filterer cache. This can sometimes provide performance enhancements with larger data sets. Defaults to `true`.
 - `ignoreCase`, Set to `true` to enable case insensitivity in search. Defaults to `false`.
+
+#### props.verboseShowOriginal
+
+Set to `true` for full `showOriginal` expansion of children containing search term. Defaults to `false`.

json-inspector.js

@@ -1,6 +1,7 @@
 var React = require('react');
 var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
+var debounce = require('debounce');
 
 var h = React.createElement;
 var Leaf = require('./lib/leaf');
@@ -19,21 +20,33 @@ module.exports = createReactClass({
             PropTypes.func,
             PropTypes.bool
         ]),
+        searchOptions: PropTypes.shape({
+            debounceTime: PropTypes.number
+        }),
         onClick: PropTypes.func,
         validateQuery: PropTypes.func,
         isExpanded: PropTypes.func,
-        filterOptions: PropTypes.object,
-        query: PropTypes.string
+        filterOptions: PropTypes.shape({
+            cacheResults: PropTypes.bool,
+            ignoreCase: PropTypes.bool
+        }),
+        query: PropTypes.string,
+        verboseShowOriginal: PropTypes.bool
     },
-
     getDefaultProps: function() {
         return {
             data: null,
             search: SearchBar,
+            searchOptions: {
+                debounceTime: 300
+            },
             className: '',
             id: 'json-' + Date.now(),
             onClick: noop,
-            filterOptions: {},
+            filterOptions: {
+                cacheResults: true,
+                ignoreCase: false
+            },
             validateQuery: function(query) {
                 return query.length >= 2;
             },
@@ -46,7 +59,8 @@ module.exports = createReactClass({
              */
             isExpanded: function(keypath, value) {
                 return false;
-            }
+            },
+            verboseShowOriginal: false
         };
     },
     getInitialState: function() {
@@ -95,7 +109,8 @@ module.exports = createReactClass({
                         label: 'root',
                         root: true,
                         isExpanded: p.isExpanded,
-                        interactiveLabel: p.interactiveLabel
+                        interactiveLabel: p.interactiveLabel,
+                        verboseShowOriginal: p.verboseShowOriginal
                     })
             )
         );
@@ -106,7 +121,7 @@ module.exports = createReactClass({
         if (search) {
             return h('div', { className: 'json-inspector__toolbar' },
                 h(search, {
-                    onChange: this.search,
+                    onChange: debounce(this.search, this.props.searchOptions.debounceTime),
                     data: this.props.data,
                     query: this.state.query
                 })

lib/filterer.js

@@ -5,10 +5,15 @@ var isPrimitive = require('./is-primitive');
 var isEmpty = require('./is-empty');
 
 module.exports = function(data, options) {
-    options || (options = {});
+    options || (options = { cacheResults: true });
+
     var cache = {};
 
     return function(query) {
+        if (!options.cacheResults) {
+           return find(data, query, options);
+        }
+
         var subquery;
 
         if (!cache[query]) {

lib/leaf.js

@@ -75,14 +75,16 @@ var Leaf = createReactClass({
             return Object.keys(data).map(function(key) {
                 var value = data[key];
 
+                var shouldGetOriginal = !this.state.original || (p.verboseShowOriginal ? p.query : false);
+
                 return h(Leaf, {
                     data: value,
                     label: key,
                     prefix: childPrefix,
                     onClick: p.onClick,
                     id: p.id,
                     query: p.query,
-                    getOriginal: this.state.original ? null : p.getOriginal,
+                    getOriginal: shouldGetOriginal ? p.getOriginal : null,
                     key: getLeafKey(key, value),
                     isExpanded: p.isExpanded,
                     interactiveLabel: p.interactiveLabel

lib/search-bar.js

@@ -1,4 +1,3 @@
-var debounce = require('debounce');
 var React = require('react');
 var createReactClass = require('create-react-class');
 
@@ -16,7 +15,6 @@ module.exports = createReactClass({
             className: 'json-inspector__search',
             type: 'search',
             placeholder: 'Search',
-            value: this.props.query,
             onChange: this.onChange
         });
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-json-inspector",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "React JSON inspector component",
   "main": "json-inspector.js",
   "author": {