From c09162d30fd441d1b67413dd6fd330798179d066 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste WATENBERG Date: Fri, 15 Mar 2019 23:21:49 +0100 Subject: [PATCH 1/4] (feat) improve property matching suggestion for array of object --- src/components/suggestionBuilder.js | 146 +++++++++++++++++++++++++--- yarn.lock | 54 +--------- 2 files changed, 131 insertions(+), 69 deletions(-) diff --git a/src/components/suggestionBuilder.js b/src/components/suggestionBuilder.js index 6a2346d..fc081f7 100644 --- a/src/components/suggestionBuilder.js +++ b/src/components/suggestionBuilder.js @@ -15,31 +15,83 @@ export const suggestions = [ { 'description': 'access a specific property', 'value': '.', + 'setCarretAt': 1, 'scopes': ['array', 'object'] }, { 'description': 'search recursively for a property', 'value': '..', + 'setCarretAt': 2, 'scopes': ['array', 'object'] }, + { + 'description': 'filter a collection', + 'value': '?()', + 'setCarretAt': 2, + 'scopes': ['[]'] + }, + { + 'description': 'filter a collection - by one of it`s item value', + 'value': '@.', + 'setCarretAt': 2, + 'scopes': ['?()', '==='] + }, + { + 'value': ' ', + 'setCarretAt': 1, + 'scopes': [] + }, + { + 'description': 'equals', + 'value': '===', + 'scopes': [' '] + }, + { + 'description': 'lesser', + 'value': '<', + 'scopes': [' '] + }, + { + 'description': 'lesser or equals', + 'value': '<=', + 'scopes': [' '] + }, + { + 'description': 'greater', + 'value': '>', + 'scopes': [' '] + }, + { + 'description': 'greater or equals', + 'value': '>=', + 'scopes': [' '] + }, + { + 'description': 'and', + 'value': '&&', + 'scopes': [' '] + }, + { + 'description': 'or', + 'value': '||', + 'scopes': [' '] + }, { 'value': 'all_properties', 'scopes': ['.'] }, { - 'value': 'all_properties_recursively', - 'scopes': ['..'] + 'value': 'all_properties_of_parent_array', + 'scopes': ['@.'] }, { - 'description': 'filter a collection', - 'value': '?(@)', - 'setCarretAt': 3, - 'scopes': ['[]'] + 'value': 'all_properties_recursively', + 'scopes': ['..'] }, { 'description': 'select an item by it\'s index relatively to the size of the collection', 'value': '(@.length-1)', - 'setCarretAt': 10, + 'setCarretAt': 12, 'scopes': ['[]'] }, { @@ -67,6 +119,9 @@ export const suggestions = [ export const getSuggestions = (jsonPath, caretPosition, jsonToTestAgainst) => { try { + if (caretPosition !== jsonPath.length) { + throw new Error('Force to eval options according to carret positions'); + } const filteredJson = jp.query(jsonToTestAgainst, jsonPath)[0]; if (Array.isArray(filteredJson)) { return suggestions.filter(s => s.scopes.includes('array')); @@ -83,38 +138,62 @@ export const getSuggestions = (jsonPath, caretPosition, jsonToTestAgainst) => { return [...additionalSuggestions.filter(s => s.value.includes(filterSuggestionJsonPath) && s.value !== filterSuggestionJsonPath), ...suggestions.filter(s => s.scopes.includes('object'))]; } } catch (e) { - const appliableScopes = suggestions.filter(s => jsonPath.endsWith(s.value)); + const appliableScopes = suggestions.filter(s => { + if (typeof s.setCarretAt !== undefined) { + const valueToBeBeforeCarret = s.value.substring(0, s.setCarretAt); + const valueToBeAfterCarret = s.value.substring(s.setCarretAt); + const jsonPathPartBeforeCarret = jsonPath.substring(0, caretPosition); + const jsonPathPartAfterCarret = jsonPath.substring(caretPosition); + + return jsonPathPartBeforeCarret.endsWith(valueToBeBeforeCarret) && jsonPathPartAfterCarret.startsWith(valueToBeAfterCarret); + } + + return jsonPath.endsWith(s.value); + }); return guessSuggestionsFromScopes(appliableScopes, caretPosition, jsonPath, jsonToTestAgainst); } }; const guessSuggestionsFromScopes = (scopes, carretPosition, jsonPath, jsonToTestAgainst) => { - if (scopes.length > 0) { + if (!scopes || scopes.length === 0) { + return []; + } + + return flatten(scopes.map(appliableScope => { // Check if there is any conditions on carret position for appliableScope - const appliableScope = scopes[scopes.length - 1]; if (appliableScope.setCarretAt) { if (jsonPath.length - carretPosition === appliableScope.setCarretAt) { - return suggestions.filter(s => s.scopes.includes(appliableScope.value)); + return flatten(evalAllProperties( + suggestions.filter(s => s.scopes.includes(appliableScope.value)), + carretPosition, + jsonPath, + jsonToTestAgainst + )) || []; } else { - return []; + return flatten(evalAllProperties( + suggestions.filter(s => s.scopes.includes(appliableScope.value)), + carretPosition, + jsonPath, + jsonToTestAgainst + )) || []; } } else { return flatten(evalAllProperties( suggestions.filter(s => s.scopes.includes(appliableScope.value)), + carretPosition, jsonPath, jsonToTestAgainst )); } - } else { - return []; - } + })); }; const flatten = (arr) => { return [].concat(...arr); }; -export const evalAllProperties = (suggestions, jsonPath, jsonToTestAgainst) => { +export const evalAllProperties = (suggestions, carretPosition, jsonPath, jsonToTestAgainst) => { + //console.log({suggestions, carretPosition, jsonPath, jsonToTestAgainst}) return suggestions.map(s => { if (s.value === 'all_properties') { const jsonPathToObject = jsonPath.substring(0, jsonPath.length - 1); @@ -149,6 +228,28 @@ export const evalAllProperties = (suggestions, jsonPath, jsonToTestAgainst) => { // ignore error return []; } + } else if (s.value === 'all_properties_of_parent_array') { + //"$.d[1].df.f[?(@.t === 'tf' && @.{cursorHere}truc === 'd' && @.defined)]" + // 1. split at cursor, take first part + //"$.d[1].df.f[?(@.t === 'tf' && @." + const splittedJsonPathAtCursor = jsonPath.substring(0, carretPosition); + // 2. Search for last "[" index, then split at this index, take first part + //"$.d[1].df.f" + const lastIndexOfOpennedArray = splittedJsonPathAtCursor.lastIndexOf('['); + const jsonPathToParentArray = splittedJsonPathAtCursor.substring(0, lastIndexOfOpennedArray); + // 3. We then want to evaluate all unique properties in f array at first level + try { + const filteredJson = jp.query(jsonToTestAgainst, jsonPathToParentArray)[0]; + const properties = Array.from(new Set(getAllPropertiesAtFirstLevel(filteredJson))); + return properties.map(p => ({ + value: p + ' ', + setCarretAt: p.length-1, + description: 'property', + scopes: ['object'] + })); + } catch(e) { + return []; + } } else { return s; } @@ -169,4 +270,17 @@ const getAllPropertiesRecursively = (objectOrArray) => { } else { return null; } +}; + +const getAllPropertiesAtFirstLevel = (objectOrArray) => { + if (Array.isArray(objectOrArray)) { + return flatten(objectOrArray.map(arrayEntry => { + return getAllPropertiesAtFirstLevel(arrayEntry); + })).filter(p => p !== null && typeof p !== 'undefined'); + } else if (typeof objectOrArray === 'object') { + const keys = Object.keys(objectOrArray); + return flatten(keys).filter(p => p !== null && typeof p !== 'undefined'); + } else { + return null; + } }; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3a30a17..964692a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -808,10 +808,6 @@ escape-string-regexp "^1.0.5" lodash.deburr "^4.1.0" -"@sphinxxxx/color-conversion@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.1.1.tgz#da281a9641eb3f699979432fe531bba520e3ffbb" - "@svgr/core@^2.2.0": version "2.2.0" resolved "https://registry.yarnpkg.com/@svgr/core/-/core-2.2.0.tgz#59219d92b4c372bb925c4ad3ebc66ccd04e9d5c3" @@ -1123,7 +1119,7 @@ ajv-keywords@^3.0.0, ajv-keywords@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a" -ajv@5.5.2, ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.3.0: +ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.3.0: version "5.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965" dependencies: @@ -2516,10 +2512,6 @@ brace-expansion@^1.0.0, brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -brace@0.11.1: - version "0.11.1" - resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58" - braces@^0.1.2: version "0.1.5" resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6" @@ -4520,10 +4512,6 @@ double-ended-queue@^2.1.0-0: version "2.1.0-0" resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c" -drag-tracker@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/drag-tracker/-/drag-tracker-1.0.0.tgz#9bd33d380bc3056db69bd5b3cf6e062fec58bd64" - duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1" @@ -7104,10 +7092,6 @@ istanbul@^0.4.0: which "^1.1.1" wordwrap "^1.0.0" -javascript-natural-sort@0.7.1: - version "0.7.1" - resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59" - javascript-stringify@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3" @@ -7132,10 +7116,6 @@ jison@0.4.13: lex-parser "~0.1.3" nomnom "1.5.2" -jmespath@0.15.0: - version "0.15.0" - resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217" - js-base64@^2.1.8, js-base64@^2.1.9: version "2.4.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03" @@ -7249,10 +7229,6 @@ json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" -json-source-map@0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.4.0.tgz#eea837fe3ce2f2bfd5b13687779406354423c355" - json-stable-stringify-without-jsonify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" @@ -7275,19 +7251,6 @@ json5@^0.5.0, json5@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" -jsoneditor@^5.16.0: - version "5.24.5" - resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-5.24.5.tgz#de8bd89349345b3d43c3fa421edab5ee211ba721" - dependencies: - ajv "5.5.2" - brace "0.11.1" - javascript-natural-sort "0.7.1" - jmespath "0.15.0" - json-source-map "0.4.0" - mobius1-selectr "2.4.2" - picomodal "3.0.0" - vanilla-picker "2.4.2" - jsonfile@^2.1.0: version "2.4.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" @@ -8289,10 +8252,6 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi dependencies: minimist "0.0.8" -mobius1-selectr@2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.2.tgz#b8a619c8a0ed6234590e5e5a9e979e15d9b4b89a" - mocha@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/mocha/-/mocha-4.1.0.tgz#7d86cfbcf35cb829e2754c32e17355ec05338794" @@ -9359,10 +9318,6 @@ phantomjs-prebuilt@2.1.16, phantomjs-prebuilt@^2.1.7: request-progress "^2.0.1" which "^1.2.10" -picomodal@3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82" - pify@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" @@ -12835,13 +12790,6 @@ value-equal@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" -vanilla-picker@2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.4.2.tgz#830f1d23934c5eb25fc7b1d667aa8c21260f041c" - dependencies: - "@sphinxxxx/color-conversion" "^2.1.1" - drag-tracker "^1.0.0" - vary@^1.1.2, vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" From 69fb625d3b8bd3b0f76079e785a269709c4e527c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste WATENBERG Date: Sun, 31 Mar 2019 10:11:02 +0200 Subject: [PATCH 2/4] refacto(css + varNames) improve css isolation --- src/components/JsonPathPreviewer.css | 13 ++++++++++--- src/components/JsonPathPreviewer.js | 9 +++++---- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/JsonPathPreviewer.css b/src/components/JsonPathPreviewer.css index b0858e9..749f7a5 100644 --- a/src/components/JsonPathPreviewer.css +++ b/src/components/JsonPathPreviewer.css @@ -1,13 +1,20 @@ -.highlighted { +.react-json-path-editor-jsoneditor-container code .highlighted { color: green; font-weight: bold; } -code { +.react-json-path-editor-jsoneditor-container code p.selectable:hover { + background-color: grey; + color: white; + cursor: pointer; + font-weight: bold; +} + +.react-json-path-editor-jsoneditor-container code { color: #777; font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; } -code p { +.react-json-path-editor-jsoneditor-container code p { margin: 0; } \ No newline at end of file diff --git a/src/components/JsonPathPreviewer.js b/src/components/JsonPathPreviewer.js index 3a60fb8..25090b5 100644 --- a/src/components/JsonPathPreviewer.js +++ b/src/components/JsonPathPreviewer.js @@ -50,12 +50,13 @@ class JsonPathPreviewer extends Component { convertTaggedJsonAsReactComponent(taggedJSON) { let increments = 0; - let highlightBlock = false; + let isBlockHighlighted = false; return taggedJSON.split(carriageReturnTag).map(line => { if (line.includes(indentationIncrementationTag)) increments++; - if (line.includes(highlightingTags.start + '[') || line.includes(highlightingTags.start + '{')) highlightBlock = true; + if (line.includes(highlightingTags.start + '[') || line.includes(highlightingTags.start + '{')) isBlockHighlighted = true; + const isLineSelectable = line.includes(':'); const toReturn = -

+

{Array(increments).fill( )} {line.replace(new RegExp(indentationIncrementationTag,'g'), '').replace(new RegExp(indentationDecrementationTag,'g'), '') .split(highlightingTags.start).map(jsonPart => { @@ -68,7 +69,7 @@ class JsonPathPreviewer extends Component {

; if (line.includes(indentationDecrementationTag)) increments--; - if (line.includes(']' + highlightingTags.end) || line.includes('}' + highlightingTags.end)) highlightBlock = false; + if (line.includes(']' + highlightingTags.end) || line.includes('}' + highlightingTags.end)) isBlockHighlighted = false; return toReturn; }); } From afdb337362338e265fa55e681d4d3985f12c6f93 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste WATENBERG Date: Mon, 1 Apr 2019 00:04:28 +0200 Subject: [PATCH 3/4] feat(preview) add preview orientation prop --- README.md | 15 ++++++++------- demo/src/index.js | 1 + src/components/Editor.js | 7 +++---- src/components/JsonPathPreviewer.js | 30 +++++++++++++++-------------- src/components/editor.css | 3 ++- src/index.js | 11 ++++++++--- 6 files changed, 38 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index b1224c6..adbbffa 100644 --- a/README.md +++ b/README.md @@ -34,13 +34,14 @@ class App extends Component { ## Properties -| Props | Type | Required | Description | -|---------------|:-------------:|:---------:|-------------------------------------------------------| -| inputProps | `object` | `false` | Properties passed down to the input | -| value | `string` | `false` | input default value | -| json | `object` | `false` | json to test the json path and provide autocompletion | -| onChange | `function` | `false` | callback called when jsonPath changed | -| editorPosition| `object` | `false` | {x,y} overrides the position of the editor | +| Props | Type | Required | Description | +|-------------------|:----------------------:|:---------:|-------------------------------------------------------| +| inputProps | `object` | `false` | Properties passed down to the input | +| value | `string` | `false` | input default value | +| json | `object` | `false` | json to test the json path and provide autocompletion | +| onChange | `function` | `false` | callback called when jsonPath changed | +| editorPosition | `object` | `false` | {x,y} overrides the position of the editor | +| previewOrientation| `right` or `left` | `false` | Defines orientation of preview. default to right | [build-badge]: https://img.shields.io/travis/JeanBaptisteWATENBERG/react-jsonpath-editor/master.png?style=flat-square [build]: https://travis-ci.org/JeanBaptisteWATENBERG/react-jsonpath-editor diff --git a/demo/src/index.js b/demo/src/index.js index c2af270..da564aa 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -26,6 +26,7 @@ class Demo extends Component {

With a default value


+ {'------------------------------------------------------------------------------------------------------------------ '}

+ {previewOrientation && previewOrientation === 'left' && }
-
- -
+ {(!previewOrientation || previewOrientation === 'right') && } ; } } diff --git a/src/components/JsonPathPreviewer.js b/src/components/JsonPathPreviewer.js index 25090b5..daebcc0 100644 --- a/src/components/JsonPathPreviewer.js +++ b/src/components/JsonPathPreviewer.js @@ -16,7 +16,7 @@ class JsonPathPreviewer extends Component { evalJsonPath(json, jsonPath) { try { return jp.paths(json, jsonPath); - } catch(e) { + } catch (e) { return []; } } @@ -25,22 +25,22 @@ class JsonPathPreviewer extends Component { if (Array.isArray(jsonAsObject)) { const doesTraversingPathMatch = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === traversedPath.join(',')).length > 0; const isALengthPathMatchingThisCollection = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === [...traversedPath, 'length'].join(',')).length > 0; - return `${carriageReturnTag + indentationIncrementationTag}${doesTraversingPathMatch ? highlightingTags.start : ''}[${carriageReturnTag + indentationIncrementationTag}${jsonAsObject.map((item, index) => + return `${carriageReturnTag + indentationIncrementationTag}${doesTraversingPathMatch ? highlightingTags.start : ''}[${carriageReturnTag + indentationIncrementationTag}${jsonAsObject.map((item, index) => this.tagPartOfJsonToHighlight(item, paths, [...traversedPath, index]) ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}]${ - doesTraversingPathMatch ? highlightingTags.end : '' - }${isALengthPathMatchingThisCollection ? highlightingTags.start + '.length = ' + jsonAsObject.length + highlightingTags.end : ''}${indentationDecrementationTag}`; + doesTraversingPathMatch ? highlightingTags.end : '' + }${isALengthPathMatchingThisCollection ? highlightingTags.start + '.length = ' + jsonAsObject.length + highlightingTags.end : ''}${indentationDecrementationTag}`; } if (typeof jsonAsObject === 'object') { const doesTraversingPathMatch = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === traversedPath.join(',')).length > 0; - return `${doesTraversingPathMatch ? highlightingTags.start : ''}{${carriageReturnTag + indentationIncrementationTag}${Object.keys(jsonAsObject).map(key => + return `${doesTraversingPathMatch ? highlightingTags.start : ''}{${carriageReturnTag + indentationIncrementationTag}${Object.keys(jsonAsObject).map(key => `"${key}": ${this.tagPartOfJsonToHighlight(jsonAsObject[key], paths, [...traversedPath, key])}` ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}}${doesTraversingPathMatch ? highlightingTags.end : ''}`; } - + const doesTraversingPathMatch = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === traversedPath.join(',')).length > 0; - + if (typeof jsonAsObject === 'number') { return `${doesTraversingPathMatch ? highlightingTags.start : ''}${jsonAsObject}${doesTraversingPathMatch ? highlightingTags.end : ''}`; } else { @@ -54,11 +54,11 @@ class JsonPathPreviewer extends Component { return taggedJSON.split(carriageReturnTag).map(line => { if (line.includes(indentationIncrementationTag)) increments++; if (line.includes(highlightingTags.start + '[') || line.includes(highlightingTags.start + '{')) isBlockHighlighted = true; - const isLineSelectable = line.includes(':'); + // const isLineSelectable = line.includes(':'); const toReturn = -

+

{Array(increments).fill( )} - {line.replace(new RegExp(indentationIncrementationTag,'g'), '').replace(new RegExp(indentationDecrementationTag,'g'), '') + {line.replace(new RegExp(indentationIncrementationTag, 'g'), '').replace(new RegExp(indentationDecrementationTag, 'g'), '') .split(highlightingTags.start).map(jsonPart => { const parts = jsonPart.split(highlightingTags.end); if (parts.length === 2) { @@ -75,14 +75,16 @@ class JsonPathPreviewer extends Component { } render() { - const {json, jsonPath} = this.props; + const { json, jsonPath } = this.props; const pathsEvaluated = this.evalJsonPath(json, jsonPath); return ( - - {this.convertTaggedJsonAsReactComponent(this.tagPartOfJsonToHighlight(json, pathsEvaluated))} - +

+ + {this.convertTaggedJsonAsReactComponent(this.tagPartOfJsonToHighlight(json, pathsEvaluated))} + +
); } } diff --git a/src/components/editor.css b/src/components/editor.css index 02d5481..0535df2 100644 --- a/src/components/editor.css +++ b/src/components/editor.css @@ -7,7 +7,8 @@ } .react-json-path-editor-jsoneditor-container { - width: 500px; + width: 487px; + margin-right: 10px; max-height: 500px; overflow: auto; background: white; diff --git a/src/index.js b/src/index.js index 79e3283..95a09d0 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,7 @@ import JsonPathPreviewer from './components/JsonPathPreviewer'; * - onChange? -- function called when input value change * - json? -- json to edit * - editorPosition? -- {x,y} overrides the position of the editor + * - previewOrientation? -- left or rigth, default to rigth */ class ReactJsonPath extends Component { @@ -54,7 +55,8 @@ class ReactJsonPath extends Component { this.setState({editorPosition: this.props.editorPosition}); } else if (this.inputRef && this.inputRef.current) { const inputBoundRect = this.inputRef.current.getBoundingClientRect(); - this.setState({editorPosition: {x:inputBoundRect.left, y: inputBoundRect.top + inputBoundRect.height}}); + const xOffset = this.props.previewOrientation && this.props.previewOrientation === 'left' ? -500 : 0; + this.setState({editorPosition: {x:inputBoundRect.left + xOffset, y: inputBoundRect.top + inputBoundRect.height}}); } } @@ -101,7 +103,7 @@ class ReactJsonPath extends Component { } render() { - const {inputProps, json} = this.props; + const {inputProps, json, previewOrientation} = this.props; const {value, editorOpened, editorPosition} = this.state; return @@ -112,7 +114,8 @@ class ReactJsonPath extends Component { json={json} onJsonPathChanged={this.changePath} onMouseEnter={this.disableBlur} - onMouseLeave={this.onMouseLeaveFromEditor} />} + onMouseLeave={this.onMouseLeaveFromEditor} + previewOrientation={previewOrientation} />} ; } } @@ -131,6 +134,8 @@ ReactJsonPath.propTypes = { x: PropTypes.number, y: PropTypes.number }), + /** Defines orientation of preview. default to right */ + previewOrientation: PropTypes.oneOf(['left', 'right']) }; From 975c74f8215b09cabc95ea3821b5e316d792c48c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste WATENBERG Date: Mon, 1 Apr 2019 00:05:21 +0200 Subject: [PATCH 4/4] v1.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 561fce9..5250099 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-jsonpath-editor", - "version": "1.3.3", + "version": "1.4.0", "description": "react-jsonpath-editor React component", "main": "lib/index.js", "module": "es/index.js",