Merge pull request #562 from orangemug/feature/json-editor-perf-improvements

react-codemirror2 -> codemirror directly
This commit is contained in:
pathmapper 2019-10-19 21:56:59 +02:00 committed by GitHub
commit ee9e055af3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 37 deletions

5
package-lock.json generated
View file

@ -9069,11 +9069,6 @@
"prop-types": "^15.5.10"
}
},
"react-codemirror2": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.0.tgz",
"integrity": "sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag=="
},
"react-collapse": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",

View file

@ -48,7 +48,6 @@
"react-aria-modal": "^4.0.0",
"react-autobind": "^1.0.6",
"react-autocomplete": "^1.8.1",
"react-codemirror2": "^6.0.0",
"react-collapse": "^4.0.3",
"react-color": "^2.17.3",
"react-dom": "^16.10.2",

View file

@ -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'
@ -25,36 +25,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) {
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)
} finally {
this.setState({
code: newCode
})
}
}
resetValue() {
console.log('reset')
this.setState({
code: JSON.stringify(this.props.layer, null, 2)
})
prevValue: newCode,
});
}
render() {
@ -69,11 +115,9 @@ class JSONEditor extends React.Component {
scrollbarStyle: "null",
}
return <CodeMirror
value={this.state.code}
onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
onFocusChange={focused => focused ? true : this.resetValue()}
options={codeMirrorOptions}
return <div
className="codemirror-container"
ref={(el) => this._el = el}
/>
}
}

View file

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

View file

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

View file

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