(feature) add editorPosition override property and set component wrapper to a fragment

Author: JeanBaptisteWATENBERG

README.md

@@ -40,6 +40,7 @@ class App extends Component {
 | 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            |
 
 [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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jsonpath-editor",
-  "version": "1.0.1",
+  "version": "1.1.0-beta",
   "description": "react-jsonpath-editor React component",
   "main": "lib/index.js",
   "module": "es/index.js",

src/index.js

@@ -7,6 +7,7 @@ import Editor from './components/Editor'
  *  - value? -- input value
  *  - onChange? -- function called when input value change
  *  - json? -- json to edit
+ *  - editorPosition? -- {x,y} overrides the position of the editor 
 */
 export default class extends Component {
 
@@ -46,8 +47,12 @@ export default class extends Component {
   }
 
   updateEditorPosition() {
-    const inputBoundRect = this.inputRef.current.getBoundingClientRect();
-    this.setState({editorPosition: {x:inputBoundRect.left, y: inputBoundRect.top + inputBoundRect.height}});
+    if (this.props.editorPosition) {
+      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}});
+    }
   }
 
   componentWillReceiveProps(newProps) {
@@ -95,7 +100,7 @@ export default class extends Component {
   render() {
     const {inputProps, json} = this.props;
     const {value, editorOpened, editorPosition} = this.state;
-    return <span>
+    return <React.Fragment>
       <input ref={this.inputRef} type='text' value={value} onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur} {...inputProps} />
       {editorOpened && <Editor 
         input={this.inputRef.current}
@@ -105,6 +110,6 @@ export default class extends Component {
         onJsonPathChanged={this.changePath}
         onMouseEnter={this.disableBlur}
         onMouseLeave={this.onMouseLeaveFromEditor} />}
-    </span>
+    </React.Fragment>
   }
 }