Make library more generic with option to inject components

example/interactive-selection.js

@@ -1,7 +1,8 @@
 var React = require('react');
-var input = React.DOM.input;
+var input = React.createElement('input');
+var createClass = require('create-react-class');
 
-module.exports = React.createClass({
+module.exports = createClass({
     getDefaultProps: function() {
         return {
             value: ''

json-inspector.js

@@ -1,5 +1,6 @@
 var React = require('react');
-var D = React.DOM;
+var PropTypes = require('prop-types');
+var createClass = require('create-react-class');
 
 var Leaf = require('./lib/leaf');
 var leaf = React.createFactory(Leaf);
@@ -11,129 +12,142 @@ var isEmpty = require('./lib/is-empty');
 var lens = require('./lib/lens');
 var noop = require('./lib/noop');
 
-module.exports = React.createClass({
-    propTypes: {
-        data: React.PropTypes.any.isRequired,
-        // For now it expects a factory function, not element.
-        search: React.PropTypes.oneOfType([
-            React.PropTypes.func,
-            React.PropTypes.bool
-        ]),
-        onClick: React.PropTypes.func,
-        validateQuery: React.PropTypes.func,
-        isExpanded: React.PropTypes.func,
-        filterOptions: React.PropTypes.object,
-        query: React.PropTypes.string
-    },
+module.exports = createClass({
+  propTypes: {
+    data: PropTypes.any.isRequired,
+    // For now it expects a factory function, not element.
+    search: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.bool
+    ]),
+    onClick: PropTypes.func,
+    validateQuery: PropTypes.func,
+    isExpanded: PropTypes.func,
+    isRootCollapsed: PropTypes.bool,
+    filterOptions: PropTypes.object,
+    query: PropTypes.string,
+    filterFunc: PropTypes.func,
+    shouldHighlight: PropTypes.func,
+    highlightRenderer: PropTypes.func
+  },
 
-    getDefaultProps: function() {
-        return {
-            data: null,
-            search: searchBar,
-            className: '',
-            id: 'json-' + Date.now(),
-            onClick: noop,
-            filterOptions: {},
-            validateQuery: function(query) {
-                return query.length >= 2;
-            },
-            /**
-             * Decide whether the leaf node at given `keypath` should be
-             * expanded initially.
-             * @param  {String} keypath
-             * @param  {Any} value
-             * @return {Boolean}
-             */
-            isExpanded: function(keypath, value) {
-                return false;
-            }
-        };
-    },
-    getInitialState: function() {
-        return {
-            query: this.props.query || ''
-        };
-    },
-    render: function() {
-        var p = this.props;
-        var s = this.state;
+  getDefaultProps: function() {
+    return {
+      data: null,
+      search: searchBar,
+      className: '',
+      id: 'json-' + Date.now(),
+      onClick: noop,
+      filterOptions: {},
+      validateQuery: function(query) {
+        return query !== null && query !== undefined;
+      },
+      /**
+       * Decide whether the leaf node at given `keypath` should be
+       * expanded initially.
+       * @param  {String} keypath
+       * @param  {Any} value
+       * @return {Boolean}
+       */
+      isExpanded: function(keypath, value) {
+        return false;
+      },
+      highlightRenderer: null
+    };
+  },
+  render: function() {
+    var p = this.props;
+    var s = this.state;
 
-        var isQueryValid = (
-            s.query !== '' &&
-            p.validateQuery(s.query)
-        );
+    var isQueryValid = (
+      p.query !== '' &&
+      p.validateQuery(p.query)
+    );
 
-        var data = (
-            isQueryValid ?
-                s.filterer(s.query) :
-                p.data
-        );
+    var data = (
+      isQueryValid ?
+        s.filterer(p.query) :
+        p.data
+    );
 
-        var isNotFound = (
-            isQueryValid &&
-            isEmpty(data)
-        );
+    var isNotFound = (
+      isQueryValid &&
+      isEmpty(data)
+    );
 
-        return D.div({ className: 'json-inspector ' + p.className },
-            this.renderToolbar(),
-            (
-                isNotFound ?
-                    D.div({ className: 'json-inspector__not-found' }, 'Nothing found') :
-                    leaf({
-                        data: data,
-                        onClick: p.onClick,
-                        id: p.id,
-                        getOriginal: this.getOriginal,
-                        query: (
-                            isQueryValid ?
-                                s.query :
-                                null
-                        ),
-                        label: 'root',
-                        root: true,
-                        isExpanded: p.isExpanded,
-                        interactiveLabel: p.interactiveLabel
-                    })
-            )
-        );
-    },
-    renderToolbar: function() {
-        var search = this.props.search;
+    return React.createElement('div', { className: 'json-inspector ' + p.className },
+      this.renderToolbar(),
+      (
+        isNotFound ?
+          React.createElement('div', { className: 'json-inspector__not-found' }, 'Nothing found') :
+          leaf({
+            data: data,
+            onClick: p.onClick,
+            id: p.id,
+            getOriginal: this.getOriginal,
+            query: (
+              isQueryValid ?
+                p.query :
+                null
+            ),
+            label: 'root',
+            root: true,
+            isRootCollapsed: p.isRootCollapsed,
+            isExpanded: p.isExpanded,
+            interactiveLabel: p.interactiveLabel,
+            shouldHighlight: p.shouldHighlight,
+            highlightRenderer: p.highlightRenderer,
+          })
+      )
+    );
+  },
+  renderToolbar: function() {
+    var search = this.props.search;
 
-        if (search) {
-            return D.div({ className: 'json-inspector__toolbar' },
-                search({
-                    onChange: this.search,
-                    data: this.props.data,
-                    query: this.state.query
-                })
-            );
-        }
-    },
-    search: function(query) {
-        this.setState({
-            query: query
-        });
-    },
-    componentWillMount: function() {
-        this.createFilterer(this.props.data, this.props.filterOptions);
-    },
-    componentWillReceiveProps: function(p) {
-        this.createFilterer(p.data, p.filterOptions);
-    },
-    shouldComponentUpdate: function (p, s) {
-        return (
-            s.query !== this.state.query ||
-            p.data !== this.props.data ||
-            p.onClick !== this.props.onClick
-        );
-    },
-    createFilterer: function(data, options) {
-        this.setState({
-            filterer: filterer(data, options)
-        });
-    },
-    getOriginal: function(path) {
-        return lens(this.props.data, path);
+    if (search) {
+      return React.createElement('div', { className: 'json-inspector__toolbar' },
+        search({
+          onChange: this.search,
+          data: this.props.data,
+          query: this.state.query
+        })
+      );
     }
+  },
+  search: function(query) {
+    this.setState({
+      query: query
+    });
+  },
+  componentWillMount: function() {
+    this.createFilterer(this.props.data, this.props.filterOptions, this.props.filterFunc);
+  },
+  componentWillReceiveProps: function(p) {
+    this.createFilterer(p.data, p.filterOptions, p.filterFunc);
+    this.setState({query: p.query});
+  },
+  shouldComponentUpdate: function (p, s) {
+    return (
+      p.filterFunc !== this.props.filterFunc ||
+      p.query !== this.props.query ||
+      p.data !== this.props.data ||
+      p.onClick !== this.props.onClick
+    );
+  },
+  getFilterer: function(pFilterFunc) {
+    var filterFunc = pFilterFunc;
+    if (!filterFunc) {
+      filterFunc = filterer
+    }
+    return filterFunc;
+  },
+  createFilterer: function(data, options, filterFunc) {
+    var f = this.getFilterer(filterFunc);
+    this.setState({
+      filterer: f(data, options)
+    });
+  },
+  getOriginal: function(path) {
+    return lens(this.props.data, path);
+  }
 });

lib/highlighter.js

@@ -1,30 +1,49 @@
 var React = require('react');
-var span = React.DOM.span;
+var createClass = require('create-react-class');
 
-module.exports = React.createClass({
+
+module.exports = createClass({
     getDefaultProps: function() {
         return {
             string: '',
-            highlight: ''
+            highlight: '',
+            fullKey: '',
+            shouldHighlight: null,
+            highlightRenderer: null
         };
     },
     shouldComponentUpdate: function(p) {
-        return p.highlight !== this.props.highlight;
+        return p.highlight !== this.props.highlight ||
+          p.shouldHighlight !== this.props.shouldHighlight ||
+          p.highlightRenderer !== this.props.highlightRenderer ||
+          p.fullKey !== this.props.fullKey;
     },
     render: function() {
         var p = this.props;
-
-        if (!p.highlight || p.string.indexOf(p.highlight) === -1) {
-            return span(null, p.string);
+        if (p.shouldHighlight) {
+            if (!p.shouldHighlight(p.string, p.highlight, p.fullKey)) {
+                return React.createElement('span', null, p.string);
+            } else {
+                if (p.highlightRenderer) {
+                    return React.createElement('span', null, p.highlightRenderer(p.string, p.highlight, p.fullKey));
+                } else {
+                    return React.createElement('span', {className: 'json-inspector__hl'}, p.string)
+                }
+            }
         }
+        else {
+            if (!p.highlight || p.string.indexOf(p.highlight) === -1) {
+                return React.createElement('span', null, p.string);
+            }
 
-        return span(null,
-            p.string.split(p.highlight).map(function(part, index) {
-                return span({ key: index },
+            return React.createElement('span', null,
+              p.string.split(p.highlight).map(function (part, index) {
+                  return React.createElement('span', {key: index},
                     index > 0 ?
-                        span({ className: 'json-inspector__hl' }, p.highlight) :
-                        null,
+                      React.createElement('span', {className: 'json-inspector__hl'}, p.highlight) :
+                      null,
                     part);
-            }));
+              }));
+        }
     }
 });