From 9b4ed9c65b1afd67a96e8066958061d3ad394f01 Mon Sep 17 00:00:00 2001 From: Aviad Lichtenstadt Date: Tue, 26 Jan 2016 15:55:33 +0200 Subject: [PATCH 1/8] Added option to inject filterer Added option to inject highlighter condition --- json-inspector.js | 92 ++++++++++++++++++++++++++-------------------- lib/highlighter.js | 34 +++++++++++------ lib/leaf.js | 37 ++++++++++--------- 3 files changed, 95 insertions(+), 68 deletions(-) diff --git a/json-inspector.js b/json-inspector.js index 9b3c0f3..910f7c2 100644 --- a/json-inspector.js +++ b/json-inspector.js @@ -23,7 +23,9 @@ module.exports = React.createClass({ validateQuery: React.PropTypes.func, isExpanded: React.PropTypes.func, filterOptions: React.PropTypes.object, - query: React.PropTypes.string + query: React.PropTypes.string, + filterFunc: React.PropTypes.func, + shouldHighlight: React.PropTypes.func }, getDefaultProps: function() { @@ -59,42 +61,43 @@ module.exports = React.createClass({ var s = this.state; var isQueryValid = ( - s.query !== '' && - p.validateQuery(s.query) + s.query !== '' && + p.validateQuery(s.query) ); var data = ( - isQueryValid ? - s.filterer(s.query) : - p.data + isQueryValid ? + s.filterer(s.query) : + p.data ); var isNotFound = ( - isQueryValid && - isEmpty(data) + 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 - }) - ) + 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, + shouldHighlight: p.shouldHighlight, + }) + ) ); }, renderToolbar: function() { @@ -102,11 +105,11 @@ module.exports = React.createClass({ if (search) { return D.div({ className: 'json-inspector__toolbar' }, - search({ - onChange: this.search, - data: this.props.data, - query: this.state.query - }) + search({ + onChange: this.search, + data: this.props.data, + query: this.state.query + }) ); } }, @@ -116,21 +119,30 @@ module.exports = React.createClass({ }); }, componentWillMount: function() { - this.createFilterer(this.props.data, this.props.filterOptions); + this.createFilterer(this.props.data, this.props.filterOptions, this.props.filterFunc); }, componentWillReceiveProps: function(p) { - this.createFilterer(p.data, p.filterOptions); + this.createFilterer(p.data, p.filterOptions, p.filterFunc); }, shouldComponentUpdate: function (p, s) { return ( - s.query !== this.state.query || - p.data !== this.props.data || - p.onClick !== this.props.onClick + p.filterFunc !== this.props.filterFunc || + s.query !== this.state.query || + p.data !== this.props.data || + p.onClick !== this.props.onClick ); }, - createFilterer: function(data, options) { + 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: filterer(data, options) + filterer: f(data, options) }); }, getOriginal: function(path) { diff --git a/lib/highlighter.js b/lib/highlighter.js index 2cd3904..0203123 100644 --- a/lib/highlighter.js +++ b/lib/highlighter.js @@ -5,26 +5,38 @@ module.exports = React.createClass({ getDefaultProps: function() { return { string: '', - highlight: '' + highlight: '', + fullKey: '', + shouldHighlight: null }; }, shouldComponentUpdate: function(p) { - return p.highlight !== this.props.highlight; + return p.highlight !== this.props.highlight || + p.shouldHighlight !== this.props.shouldHighlight || + 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 span(null, p.string); + } else { + return span({className: 'json-inspector__hl'}, p.string) + } } + else { + if (!p.highlight || p.string.indexOf(p.highlight) === -1) { + return span(null, p.string); + } - return span(null, - p.string.split(p.highlight).map(function(part, index) { - return span({ key: index }, + return span(null, + p.string.split(p.highlight).map(function (part, index) { + return span({key: index}, index > 0 ? - span({ className: 'json-inspector__hl' }, p.highlight) : - null, + span({className: 'json-inspector__hl'}, p.highlight) : + null, part); - })); + })); + } } }); diff --git a/lib/leaf.js b/lib/leaf.js index 0d13a9b..9dbf647 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -37,17 +37,17 @@ 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' }, - d.path), - D.span({ className: 'json-inspector__key' }, - this.format(d.key), - ':', - this.renderInteractiveLabel(d.key, true)), - this.renderTitle(), - this.renderShowOriginalButton()), - this.renderChildren()); + 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' }, + d.path), + D.span({ className: 'json-inspector__key' }, + this.format(d.key), + ':', + this.renderInteractiveLabel(d.key, true)), + this.renderTitle(), + this.renderShowOriginalButton()), + this.renderChildren()); }, renderTitle: function() { var data = this.data(); @@ -56,14 +56,14 @@ var Leaf = React.createClass({ switch (t) { case 'Array': return D.span({ className: 'json-inspector__value json-inspector__value_helper' }, - '[] ' + items(data.length)); + '[] ' + items(data.length)); case 'Object': return D.span({ className: 'json-inspector__value json-inspector__value_helper' }, - '{} ' + items(Object.keys(data).length)); + '{} ' + items(Object.keys(data).length)); default: return D.span({ className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() }, - this.format(String(data)), - this.renderInteractiveLabel(data, false)); + this.format(String(data)), + this.renderInteractiveLabel(data, false)); } }, renderChildren: function() { @@ -85,7 +85,8 @@ var Leaf = React.createClass({ getOriginal: this.state.original ? null : p.getOriginal, key: getLeafKey(key, value), isExpanded: p.isExpanded, - interactiveLabel: p.interactiveLabel + interactiveLabel: p.interactiveLabel, + shouldHighlight: p.shouldHighlight }); }, this); } @@ -145,7 +146,9 @@ var Leaf = React.createClass({ format: function(string) { return highlighter({ string: string, - highlight: this.props.query + highlight: this.props.query, + shouldHighlight: this.props.shouldHighlight, + fullKey: this.keypath() }); }, getClassName: function() { From 72c6b51a3e3a67a4bafd19b442750fc95fc16a77 Mon Sep 17 00:00:00 2001 From: Nitzperetz Date: Wed, 24 Feb 2016 13:44:01 +0200 Subject: [PATCH 2/8] Adding isRootCollapsed prop --- json-inspector.js | 2 ++ lib/leaf.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/json-inspector.js b/json-inspector.js index 910f7c2..19b9ebc 100644 --- a/json-inspector.js +++ b/json-inspector.js @@ -22,6 +22,7 @@ module.exports = React.createClass({ onClick: React.PropTypes.func, validateQuery: React.PropTypes.func, isExpanded: React.PropTypes.func, + isRootCollapsed: React.PropTypes.bool, filterOptions: React.PropTypes.object, query: React.PropTypes.string, filterFunc: React.PropTypes.func, @@ -93,6 +94,7 @@ module.exports = React.createClass({ ), label: 'root', root: true, + isRootCollapsed: p.isRootCollapsed, isExpanded: p.isExpanded, interactiveLabel: p.interactiveLabel, shouldHighlight: p.shouldHighlight, diff --git a/lib/leaf.js b/lib/leaf.js index 9dbf647..911badb 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -190,7 +190,7 @@ var Leaf = React.createClass({ var keypath = this.keypath(); if (p.root) { - return true; + return !p.isRootCollapsed; } if (!p.query) { From 4bdd7650a4ade0f5b6a1d89479c95fc92127fc5b Mon Sep 17 00:00:00 2001 From: Aviad Lichtenstadt Date: Wed, 24 Feb 2016 14:17:41 +0200 Subject: [PATCH 3/8] change version to 6.1.2 --- package.json | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 25653ca..a33134d 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,15 @@ { - "name": "react-json-inspector", - "version": "6.1.1", + "name": "demisto-react-json-inspector", + "version": "6.1.2", "description": "React JSON inspector component", "main": "json-inspector.js", "author": { - "name": "Aziz Yuldoshev", - "email": "yuldoshev.aziz@gmail.com", - "url": "http://lapple.me" + "name": "Aviad Lichtenstadt", + "email": "aviad.lich@gmail.com" }, "repository": { "type": "git", - "url": "git://github.com/Lapple/react-json-inspector.git" + "url": "git://github.com/aviadl/react-json-inspector.git" }, "license": "MIT", "dependencies": { From 170a7eda1c034bdea837e2118e659259ac5f2c4b Mon Sep 17 00:00:00 2001 From: Aviad Lichtenstadt Date: Sun, 28 Feb 2016 01:24:45 +0200 Subject: [PATCH 4/8] Fixes on search Fixes on highlights --- json-inspector.js | 8 ++++++-- lib/highlighter.js | 10 ++++++++-- lib/leaf.js | 4 +++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/json-inspector.js b/json-inspector.js index 19b9ebc..0bb8f61 100644 --- a/json-inspector.js +++ b/json-inspector.js @@ -26,7 +26,8 @@ module.exports = React.createClass({ filterOptions: React.PropTypes.object, query: React.PropTypes.string, filterFunc: React.PropTypes.func, - shouldHighlight: React.PropTypes.func + shouldHighlight: React.PropTypes.func, + highlightRenderer: React.PropTypes.func }, getDefaultProps: function() { @@ -49,7 +50,8 @@ module.exports = React.createClass({ */ isExpanded: function(keypath, value) { return false; - } + }, + highlightRenderer: null }; }, getInitialState: function() { @@ -98,6 +100,7 @@ module.exports = React.createClass({ isExpanded: p.isExpanded, interactiveLabel: p.interactiveLabel, shouldHighlight: p.shouldHighlight, + highlightRenderer: p.highlightRenderer, }) ) ); @@ -125,6 +128,7 @@ module.exports = React.createClass({ }, componentWillReceiveProps: function(p) { this.createFilterer(p.data, p.filterOptions, p.filterFunc); + this.setState({query: p.query}); }, shouldComponentUpdate: function (p, s) { return ( diff --git a/lib/highlighter.js b/lib/highlighter.js index 0203123..3a46aeb 100644 --- a/lib/highlighter.js +++ b/lib/highlighter.js @@ -7,12 +7,14 @@ module.exports = React.createClass({ string: '', highlight: '', fullKey: '', - shouldHighlight: null + shouldHighlight: null, + highlightRenderer: null }; }, shouldComponentUpdate: function(p) { return p.highlight !== this.props.highlight || p.shouldHighlight !== this.props.shouldHighlight || + p.highlightRenderer !== this.props.highlightRenderer || p.fullKey !== this.props.fullKey; }, render: function() { @@ -21,7 +23,11 @@ module.exports = React.createClass({ if (!p.shouldHighlight(p.string, p.highlight, p.fullKey)) { return span(null, p.string); } else { - return span({className: 'json-inspector__hl'}, p.string) + if (p.highlightRenderer) { + return span(null, p.highlightRenderer(p.string, p.highlight, p.fullKey)); + } else { + return span({className: 'json-inspector__hl'}, p.string) + } } } else { diff --git a/lib/leaf.js b/lib/leaf.js index 911badb..6bb09ca 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -86,7 +86,8 @@ var Leaf = React.createClass({ key: getLeafKey(key, value), isExpanded: p.isExpanded, interactiveLabel: p.interactiveLabel, - shouldHighlight: p.shouldHighlight + shouldHighlight: p.shouldHighlight, + highlightRenderer: p.highlightRenderer, }); }, this); } @@ -148,6 +149,7 @@ var Leaf = React.createClass({ string: string, highlight: this.props.query, shouldHighlight: this.props.shouldHighlight, + highlightRenderer: this.props.highlightRenderer, fullKey: this.keypath() }); }, From a283c40395f54763733231a305b51c9c2aad81e7 Mon Sep 17 00:00:00 2001 From: Aviad Lichtenstadt Date: Sun, 28 Feb 2016 01:27:29 +0200 Subject: [PATCH 5/8] fix version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a33134d..43a0960 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "demisto-react-json-inspector", - "version": "6.1.2", + "version": "6.1.3", "description": "React JSON inspector component", "main": "json-inspector.js", "author": { From 3a9731165a49e6b642089f2b3dd38f64d1b829c2 Mon Sep 17 00:00:00 2001 From: Aviad Lichtenstadt Date: Sun, 28 Feb 2016 02:52:18 +0200 Subject: [PATCH 6/8] fix version --- json-inspector.js | 265 +++++++++++++++++++++++----------------------- package.json | 4 +- 2 files changed, 132 insertions(+), 137 deletions(-) diff --git a/json-inspector.js b/json-inspector.js index 0bb8f61..6db15df 100644 --- a/json-inspector.js +++ b/json-inspector.js @@ -12,146 +12,141 @@ 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, - isRootCollapsed: React.PropTypes.bool, - filterOptions: React.PropTypes.object, - query: React.PropTypes.string, - filterFunc: React.PropTypes.func, - shouldHighlight: React.PropTypes.func, - highlightRenderer: React.PropTypes.func - }, + 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, + isRootCollapsed: React.PropTypes.bool, + filterOptions: React.PropTypes.object, + query: React.PropTypes.string, + filterFunc: React.PropTypes.func, + shouldHighlight: React.PropTypes.func, + highlightRenderer: React.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; - }, - highlightRenderer: null - }; - }, - 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, - isRootCollapsed: p.isRootCollapsed, - isExpanded: p.isExpanded, - interactiveLabel: p.interactiveLabel, - shouldHighlight: p.shouldHighlight, - highlightRenderer: p.highlightRenderer, - }) - ) - ); - }, - renderToolbar: function() { - var search = this.props.search; + 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 ? + 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, 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 || - s.query !== this.state.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); + 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, 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); + } }); diff --git a/package.json b/package.json index 43a0960..8ea481b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "demisto-react-json-inspector", - "version": "6.1.3", + "name": "generic-react-json-inspector", + "version": "6.1.4", "description": "React JSON inspector component", "main": "json-inspector.js", "author": { From f95697b8e3e1f096434816fe918b581e51bcde0f Mon Sep 17 00:00:00 2001 From: Nitzperetz Date: Mon, 20 Nov 2017 19:32:22 +0200 Subject: [PATCH 7/8] Upgrade to react 16 --- example/interactive-selection.js | 5 +++-- json-inspector.js | 37 ++++++++++++++++---------------- lib/highlighter.js | 6 ++++-- lib/leaf.js | 22 +++++++++---------- lib/search-bar.js | 5 +++-- package.json | 12 +++++------ 6 files changed, 46 insertions(+), 41 deletions(-) diff --git a/example/interactive-selection.js b/example/interactive-selection.js index 928fed9..58dac8d 100644 --- a/example/interactive-selection.js +++ b/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: '' diff --git a/json-inspector.js b/json-inspector.js index 6db15df..461c5fb 100644 --- a/json-inspector.js +++ b/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,23 +12,23 @@ var isEmpty = require('./lib/is-empty'); var lens = require('./lib/lens'); var noop = require('./lib/noop'); -module.exports = React.createClass({ +module.exports = createClass({ 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, - isRootCollapsed: React.PropTypes.bool, - filterOptions: React.PropTypes.object, - query: React.PropTypes.string, - filterFunc: React.PropTypes.func, - shouldHighlight: React.PropTypes.func, - highlightRenderer: React.PropTypes.func + 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() { @@ -74,11 +75,11 @@ module.exports = React.createClass({ isEmpty(data) ); - return D.div({ className: 'json-inspector ' + p.className }, + return React.createElement('div', { className: 'json-inspector ' + p.className }, this.renderToolbar(), ( isNotFound ? - D.div({ className: 'json-inspector__not-found' }, 'Nothing found') : + React.createElement('div', { className: 'json-inspector__not-found' }, 'Nothing found') : leaf({ data: data, onClick: p.onClick, @@ -104,7 +105,7 @@ module.exports = React.createClass({ var search = this.props.search; if (search) { - return D.div({ className: 'json-inspector__toolbar' }, + return React.createElement('div', { className: 'json-inspector__toolbar' }, search({ onChange: this.search, data: this.props.data, diff --git a/lib/highlighter.js b/lib/highlighter.js index 3a46aeb..bbd3c7e 100644 --- a/lib/highlighter.js +++ b/lib/highlighter.js @@ -1,7 +1,9 @@ var React = require('react'); -var span = React.DOM.span; +var createClass = require('create-react-class'); +var span = React.createElement('span'); -module.exports = React.createClass({ + +module.exports = createClass({ getDefaultProps: function() { return { string: '', diff --git a/lib/leaf.js b/lib/leaf.js index 6bb09ca..7bcb7f9 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -1,5 +1,5 @@ var React = require('react'); -var D = React.DOM; +var createClass = require('create-react-class'); var md5omatic = require('md5-o-matic'); @@ -12,7 +12,7 @@ var highlighter = React.createFactory(Highlighter); var PATH_PREFIX = '.root.'; -var Leaf = React.createClass({ +var Leaf = createClass({ 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 React.createElement('div', { className: this.getClassName(), id: 'leaf-' + this._rootPath() }, + React.createElement('input', { className: 'json-inspector__radio', type: 'radio', name: p.id, id: id, tabIndex: -1 }), + React.createElement('label', { className: 'json-inspector__line', htmlFor: id, onClick: onLabelClick }, + React.createElement('div', { className: 'json-inspector__flatpath' }, d.path), - D.span({ className: 'json-inspector__key' }, + React.createElement('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 React.createElement('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 React.createElement('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 React.createElement('span', { className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() }, this.format(String(data)), this.renderInteractiveLabel(data, false)); } @@ -101,7 +101,7 @@ var Leaf = React.createClass({ return null; } - return D.span({ + return React.createElement('span', { className: 'json-inspector__show-original', onClick: this._onShowOriginalClick }); diff --git a/lib/search-bar.js b/lib/search-bar.js index 4d4e7ab..e48eaea 100644 --- a/lib/search-bar.js +++ b/lib/search-bar.js @@ -1,10 +1,11 @@ var debounce = require('debounce'); var React = require('react'); -var input = React.DOM.input; +var createClass = require('create-react-class'); +var input = React.createElement('input'); var noop = require('./noop'); -module.exports = React.createClass({ +module.exports = createClass({ getDefaultProps: function() { return { onChange: noop diff --git a/package.json b/package.json index 8ea481b..3ab7c75 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,10 @@ { - "name": "generic-react-json-inspector", - "version": "6.1.4", + "name": "react-json-inspector-demisto", + "version": "1.0.0", "description": "React JSON inspector component", "main": "json-inspector.js", "author": { - "name": "Aviad Lichtenstadt", - "email": "aviad.lich@gmail.com" + "name": "Demisto" }, "repository": { "type": "git", @@ -20,11 +19,12 @@ "devDependencies": { "browserify": "^6.1.0", "http-server": "^0.7.2", - "react-dom": "^0.14.0", "watchify": "^2.0.0" }, "peerDependencies": { - "react": "^0.14.0" + "react": "^16.1.1", + "prop-types": "^15.6.0", + "create-react-class": "^15.6.2" }, "keywords": [ "react-component" From 2123522c808478e2c2e81bc70911493ec2cdd1f2 Mon Sep 17 00:00:00 2001 From: Nitzperetz Date: Tue, 21 Nov 2017 13:29:00 +0200 Subject: [PATCH 8/8] Upgrade fixes --- lib/highlighter.js | 15 +++++++-------- lib/search-bar.js | 3 +-- package.json | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/lib/highlighter.js b/lib/highlighter.js index bbd3c7e..2ac8575 100644 --- a/lib/highlighter.js +++ b/lib/highlighter.js @@ -1,6 +1,5 @@ var React = require('react'); var createClass = require('create-react-class'); -var span = React.createElement('span'); module.exports = createClass({ @@ -23,25 +22,25 @@ module.exports = createClass({ var p = this.props; if (p.shouldHighlight) { if (!p.shouldHighlight(p.string, p.highlight, p.fullKey)) { - return span(null, p.string); + return React.createElement('span', null, p.string); } else { if (p.highlightRenderer) { - return span(null, p.highlightRenderer(p.string, p.highlight, p.fullKey)); + return React.createElement('span', null, p.highlightRenderer(p.string, p.highlight, p.fullKey)); } else { - return span({className: 'json-inspector__hl'}, p.string) + return React.createElement('span', {className: 'json-inspector__hl'}, p.string) } } } else { if (!p.highlight || p.string.indexOf(p.highlight) === -1) { - return span(null, p.string); + return React.createElement('span', null, p.string); } - return span(null, + return React.createElement('span', null, p.string.split(p.highlight).map(function (part, index) { - return span({key: index}, + return React.createElement('span', {key: index}, index > 0 ? - span({className: 'json-inspector__hl'}, p.highlight) : + React.createElement('span', {className: 'json-inspector__hl'}, p.highlight) : null, part); })); diff --git a/lib/search-bar.js b/lib/search-bar.js index e48eaea..19d40fc 100644 --- a/lib/search-bar.js +++ b/lib/search-bar.js @@ -1,7 +1,6 @@ var debounce = require('debounce'); var React = require('react'); var createClass = require('create-react-class'); -var input = React.createElement('input'); var noop = require('./noop'); @@ -12,7 +11,7 @@ module.exports = createClass({ }; }, render: function() { - return input({ + return React.createElement('input',{ className: 'json-inspector__search', type: 'search', placeholder: 'Search', diff --git a/package.json b/package.json index 3ab7c75..7c5bcdf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-json-inspector-demisto", - "version": "1.0.0", + "version": "1.0.1", "description": "React JSON inspector component", "main": "json-inspector.js", "author": {