Merge pull request #8 from JeanBaptisteWATENBERG/improve-property-mat…

…ching (feat) improve property matching suggestion for array of object
JeanBaptisteWATENBERG · Mar 31, 2019 · 8961a8d · 8961a8d
2 parents ecba2d7 + 975c74f
commit 8961a8d
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 104 deletions.
diff --git 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
@@ -26,6 +26,7 @@ class Demo extends Component {
             <h2>With a default value</h2>
             <JsonPathEditor value='$.store.book'/>
             <br/>
+            {'------------------------------------------------------------------------------------------------------------------  '}<JsonPathEditor value='$.store.book' previewOrientation='left'/>
             <br/>
             <br/>
             <Previewer json={{

diff --git 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",

diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -150,20 +150,19 @@ class Editor extends Component {
             left: this.props.position.x,
         };
 
-        const {jsonpath} = this.props;
+        const {jsonpath, previewOrientation} = this.props;
         const {jsonToFilter, suggestions} = this.state;
 
         return <div className='react-json-path-editor-container' style={style} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
+            {previewOrientation && previewOrientation === 'left' && <JsonPathPreviewer json={jsonToFilter} jsonPath={jsonpath}/>}
             <div className='react-json-path-editor-intellisense'>
                 <SuggestionList
                     suggestions={suggestions}
                     onSelectSuggestion={this.onSelectSuggestion}
                 // onSelectSuggestionToSimulate={}
                 />
             </div>
-            <div className='react-json-path-editor-jsoneditor-container'>
-                <JsonPathPreviewer json={jsonToFilter} jsonPath={jsonpath}/>
-            </div>
+            {(!previewOrientation || previewOrientation === 'right') && <JsonPathPreviewer json={jsonToFilter} jsonPath={jsonpath}/>}
         </div>;
     }
 }

diff --git 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;
 }
diff --git 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 {
@@ -50,14 +50,15 @@ 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 = <React.Fragment>
-                <p className={highlightBlock ? 'highlighted' : ''}>
+                <p className={(isBlockHighlighted ? 'highlighted ' : '') /*+ (isLineSelectable ? 'selectable' : '')*/}>
                     {Array(increments).fill(<React.Fragment>&nbsp;</React.Fragment>)}
-                    {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) {
@@ -68,20 +69,22 @@ class JsonPathPreviewer extends Component {
                 </p>
             </React.Fragment>;
             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;
         });
     }
 
     render() {
-        const {json, jsonPath} = this.props;
+        const { json, jsonPath } = this.props;
 
         const pathsEvaluated = this.evalJsonPath(json, jsonPath);
 
         return (
-            <code>
-                {this.convertTaggedJsonAsReactComponent(this.tagPartOfJsonToHighlight(json, pathsEvaluated))}
-            </code>
+            <div className='react-json-path-editor-jsoneditor-container'>
+                <code>
+                    {this.convertTaggedJsonAsReactComponent(this.tagPartOfJsonToHighlight(json, pathsEvaluated))}
+                </code>
+            </div>
         );
     }
 }

diff --git 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;