Merge remote-tracking branch 'upstream/master' into feature/issue-559-add-raw-geojson-as-source

src/components/inputs/EnumInput.jsx

@@ -42,4 +42,4 @@ class EnumInput extends React.Component {
   }
 }
 
-export default StringInput
+export default EnumInput

src/components/layers/JSONEditor.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -26,36 +26,82 @@ class JSONEditor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      code: JSON.stringify(props.layer, null, 2)
-    }
+      isEditing: false,
+      prevValue: this.getValue(),
+    };
+  }
+
+  getValue () {
+    return JSON.stringify(this.props.layer, null, 2);
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.getValue(),
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.layer !== this.props.layer) {
-      this.setState({
-        code: JSON.stringify(this.props.layer, null, 2)
-      })
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc.setValue(
+        this.getValue(),
+      )
     }
   }
 
-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
+      try {
+        const parsedLayer = JSON.parse(newCode)
+        this.props.onChange(parsedLayer)
+      } catch(err) {
+        console.warn(err)
+      }
     }
-  }
 
-  resetValue() {
-    console.log('reset')
     this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
-    })
+      prevValue: newCode,
+    });
   }
 
   render() {
@@ -75,14 +121,11 @@ class JSONEditor extends React.Component {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div className="CodeMirror-wrapper" style={style}>
-      <CodeMirror
-        value={this.state.code}
-        onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-        onFocusChange={focused => focused ? true : this.resetValue()}
-        options={codeMirrorOptions}
-      />
-    </div>
+    return <div
+      className="codemirror-container"
+      ref={(el) => this._el = el}
+      style={style}
+    />
   }
 }
 

src/components/layers/LayerEditor.jsx

@@ -141,7 +141,7 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
         <LayerSourceLayerBlock
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}

src/styles/_codemirror.scss

@@ -2,7 +2,8 @@
   z-index: 2000 !important;
 }
 
-.CodeMirror-wrapper {
+.codemirror-container {
+  max-width: 100%;
   position: relative;
   overflow: auto;
 }

src/styles/_react-codemirror.scss

@@ -1,3 +0,0 @@
-.react-codemirror2 {
-  max-width: 100%;
-}

src/styles/index.scss

@@ -39,7 +39,7 @@ $toolbar-offset: 0;
 @import 'map';
 @import 'codemirror';
 @import 'react-collapse';
-@import 'react-codemirror';
+@import 'codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport