Upgrade to React 15 and fix deprecation warnings

example/app.js

@@ -1,19 +1,18 @@
+var React = require('react');
 var render = require('react-dom').render;
-var createFactory = require('react').createFactory;
 
 var Inspector = require('..');
-var inspector = createFactory(Inspector);
 var InteractiveSelection = require('./interactive-selection');
-var interactiveSelection = createFactory(InteractiveSelection);
 
+var h = React.createElement;
 var data = require('./data.json');
 
 document.addEventListener('DOMContentLoaded', function() {
     render(
-        inspector({
+        h(Inspector, {
             data: data,
             onClick: console.log.bind(console),
-            interactiveLabel: interactiveSelection
+            interactiveLabel: InteractiveSelection
         }),
         document.getElementById('inspector')
     );

example/interactive-selection.js

@@ -1,14 +1,15 @@
 var React = require('react');
-var input = React.DOM.input;
+var createReactClass = require('create-react-class');
+var h = React.createElement;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     getDefaultProps: function() {
         return {
             value: ''
         };
     },
     render: function() {
-        return input({
+        return h('input', {
             className: 'json-inspector__selection',
             value: this.props.value,
             size: Math.max(1, this.props.value.length),

json-inspector.js

@@ -1,35 +1,35 @@
 var React = require('react');
-var D = React.DOM;
+var createReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 
+var h = React.createElement;
 var Leaf = require('./lib/leaf');
-var leaf = React.createFactory(Leaf);
 var SearchBar = require('./lib/search-bar');
-var searchBar = React.createFactory(SearchBar);
 
 var filterer = require('./lib/filterer');
 var isEmpty = require('./lib/is-empty');
 var lens = require('./lib/lens');
 var noop = require('./lib/noop');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     propTypes: {
-        data: React.PropTypes.any.isRequired,
+        data: PropTypes.any.isRequired,
         // For now it expects a factory function, not element.
-        search: React.PropTypes.oneOfType([
-            React.PropTypes.func,
-            React.PropTypes.bool
+        search: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.bool
         ]),
-        onClick: React.PropTypes.func,
-        validateQuery: React.PropTypes.func,
-        isExpanded: React.PropTypes.func,
-        filterOptions: React.PropTypes.object,
-        query: React.PropTypes.string
+        onClick: PropTypes.func,
+        validateQuery: PropTypes.func,
+        isExpanded: PropTypes.func,
+        filterOptions: PropTypes.object,
+        query: PropTypes.string
     },
 
     getDefaultProps: function() {
         return {
             data: null,
-            search: searchBar,
+            search: SearchBar,
             className: '',
             id: 'json-' + Date.now(),
             onClick: noop,
@@ -74,12 +74,12 @@ module.exports = React.createClass({
             isEmpty(data)
         );
 
-        return D.div({ className: 'json-inspector ' + p.className },
+        return h('div', { className: 'json-inspector ' + p.className },
             this.renderToolbar(),
             (
                 isNotFound ?
-                    D.div({ className: 'json-inspector__not-found' }, 'Nothing found') :
-                    leaf({
+                    h('div', { className: 'json-inspector__not-found' }, 'Nothing found') :
+                    h(Leaf, {
                         data: data,
                         onClick: p.onClick,
                         id: p.id,
@@ -104,8 +104,8 @@ module.exports = React.createClass({
         var search = this.props.search;
 
         if (search) {
-            return D.div({ className: 'json-inspector__toolbar' },
-                search({
+            return h('div', { className: 'json-inspector__toolbar' },
+                h(search, {
                     onChange: this.search,
                     data: this.props.data,
                     query: this.state.query

lib/highlighter.js

@@ -1,7 +1,8 @@
 var React = require('react');
-var span = React.DOM.span;
+var createReactClass = require('create-react-class');
+var h = React.createElement;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     getDefaultProps: function() {
         return {
             string: '',
@@ -16,15 +17,15 @@ module.exports = React.createClass({
             highlightStart = p.string.search(p.highlight);
 
         if (!p.highlight || highlightStart === -1) {
-            return span(null, p.string);
+            return h('span', null, p.string);
         }
         var highlightLength = p.highlight.source.length,
             highlightString = p.string.substr(highlightStart, highlightLength);
-        return span(null,
+        return h('span', null,
             p.string.split(p.highlight).map(function(part, index) {
-                return span({ key: index },
+                return h('span', { key: index },
                     index > 0 ?
-                        span({ className: 'json-inspector__hl' }, highlightString) :
+                        h('span', { className: 'json-inspector__hl' }, highlightString) :
                         null,
                     part);
             }));

lib/leaf.js

@@ -1,5 +1,5 @@
 var React = require('react');
-var D = React.DOM;
+var createReactClass = require('create-react-class');
 
 var md5omatic = require('md5-o-matic');
 
@@ -8,11 +8,11 @@ var type = require('./type');
 var isPrimitive = require('./is-primitive');
 
 var Highlighter = require('./highlighter');
-var highlighter = React.createFactory(Highlighter);
 
+var h = React.createElement;
 var PATH_PREFIX = '.root.';
 
-var Leaf = React.createClass({
+var Leaf = createReactClass({
     getInitialState: function() {
         return {
             expanded: this._isInitiallyExpanded(this.props)
@@ -36,12 +36,12 @@ var Leaf = React.createClass({
 
         var onLabelClick = this._onClick.bind(this, d);
 
-        return D.div({ className: this.getClassName(), id: 'leaf-' + this._rootPath() },
-            D.input({ className: 'json-inspector__radio', type: 'radio', name: p.id, id: id, tabIndex: -1 }),
-            D.label({ className: 'json-inspector__line', htmlFor: id, onClick: onLabelClick },
-                D.div({ className: 'json-inspector__flatpath' },
+        return h('div', { className: this.getClassName(), id: 'leaf-' + this._rootPath() },
+            h('input', { className: 'json-inspector__radio', type: 'radio', name: p.id, id: id, tabIndex: -1 }),
+            h('label', { className: 'json-inspector__line', htmlFor: id, onClick: onLabelClick },
+                h('div', { className: 'json-inspector__flatpath' },
                     d.path),
-                D.span({ className: 'json-inspector__key' },
+                h('span', { className: 'json-inspector__key' },
                     this.format(d.key),
                     ':',
                     this.renderInteractiveLabel(d.key, true)),
@@ -55,13 +55,13 @@ var Leaf = React.createClass({
 
         switch (t) {
             case 'Array':
-                return D.span({ className: 'json-inspector__value json-inspector__value_helper' },
+                return h('span', { className: 'json-inspector__value json-inspector__value_helper' },
                     '[] ' + items(data.length));
             case 'Object':
-                return D.span({ className: 'json-inspector__value json-inspector__value_helper' },
+                return h('span', { className: 'json-inspector__value json-inspector__value_helper' },
                     '{} ' + items(Object.keys(data).length));
             default:
-                return D.span({ className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() },
+                return h('span', { className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() },
                     this.format(String(data)),
                     this.renderInteractiveLabel(data, false));
         }
@@ -75,7 +75,7 @@ var Leaf = React.createClass({
             return Object.keys(data).map(function(key) {
                 var value = data[key];
 
-                return leaf({
+                return h(Leaf, {
                     data: value,
                     label: key,
                     prefix: childPrefix,
@@ -99,14 +99,14 @@ var Leaf = React.createClass({
             return null;
         }
 
-        return D.span({
+        return h('span', {
             className: 'json-inspector__show-original',
             onClick: this._onShowOriginalClick
         });
     },
     renderInteractiveLabel: function(originalValue, isKey) {
         if (typeof this.props.interactiveLabel === 'function') {
-            return this.props.interactiveLabel({
+            return h(this.props.interactiveLabel, {
                 // The distinction between `value` and `originalValue` is
                 // provided to have backwards compatibility.
                 value: String(originalValue),
@@ -143,7 +143,7 @@ var Leaf = React.createClass({
         return this.state.original || this.props.data;
     },
     format: function(string) {
-        return highlighter({
+        return h(Highlighter, {
             string: string,
             highlight: this.props.query
         });
@@ -205,10 +205,6 @@ var Leaf = React.createClass({
     }
 });
 
-// FIXME: There should be a better way to call a component factory from inside
-// component definition.
-var leaf = React.createFactory(Leaf);
-
 function items(count) {
     return count + (count === 1 ? ' item' : ' items');
 }

lib/search-bar.js

@@ -1,17 +1,18 @@
 var debounce = require('debounce');
 var React = require('react');
-var input = React.DOM.input;
+var createReactClass = require('create-react-class');
 
+var h = React.createElement;
 var noop = require('./noop');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     getDefaultProps: function() {
         return {
             onChange: noop
         };
     },
     render: function() {
-        return input({
+        return h('input', {
             className: 'json-inspector__search',
             type: 'search',
             placeholder: 'Search',

package.json

@@ -14,18 +14,22 @@
   },
   "license": "MIT",
   "dependencies": {
+    "create-react-class": "^15.6.0",
     "debounce": "1.0.0",
     "md5-o-matic": "^0.1.1",
-    "object-assign": "2.0.0"
+    "object-assign": "2.0.0",
+    "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "browserify": "^6.1.0",
     "chai": "3.5.0",
-    "enzyme": "2.4.1",
+    "enzyme": "^2.9.1",
     "http-server": "^0.7.2",
     "mocha": "3.0.2",
+    "react": "^15.6.1",
     "react-addons-test-utils": "15.0.0",
-    "react-dom": "^15.0.0",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1",
     "watchify": "^2.0.0"
   },
   "peerDependencies": {