feat(preview) add preview orientation prop

JeanBaptisteWATENBERG · JeanBaptisteWATENBERG · commit afdb33736233 · 2019-04-01T00:04:28.000+02:00
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/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.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 = <React.Fragment>
-                <p className={(isBlockHighlighted ? 'highlighted ' : '') + (isLineSelectable ? 'selectable' : '')}>
+                <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) {
@@ -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 (
-            <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;
diff --git 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 <React.Fragment>
             <input ref={this.inputRef} type='text' value={value} onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur} {...inputProps} />
@@ -112,7 +114,8 @@ class ReactJsonPath extends Component {
                 json={json}
                 onJsonPathChanged={this.changePath}
                 onMouseEnter={this.disableBlur}
-                onMouseLeave={this.onMouseLeaveFromEditor} />}
+                onMouseLeave={this.onMouseLeaveFromEditor}
+                previewOrientation={previewOrientation} />}
         </React.Fragment>;
     }
 }
@@ -131,6 +134,8 @@ ReactJsonPath.propTypes = {
         x: PropTypes.number,
         y: PropTypes.number
     }),
+    /** Defines orientation of preview. default to right */
+    previewOrientation: PropTypes.oneOf(['left', 'right'])
 };
 
 

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,8 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.react-json-path-editor-jsoneditor-container {`
`10`		`- width: 500px;`
	`10`	`+ width: 487px;`
	`11`	`+ margin-right: 10px;`
`11`	`12`	`max-height: 500px;`
`12`	`13`	`overflow: auto;`
`13`	`14`	`background: white;`