vitalif-js
/
prettier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

optimize panel updates

master
Lucas Duailibe 2018-04-17 14:50:53 -03:00
parent a398ec31b8
commit fc52887e94
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
website/playground/panels.js
View File

@ -6,17 +6,19 @@ class CodeMirrorPanel extends React.Component {
super(); super();
this._textareaRef = React.createRef(); this._textareaRef = React.createRef();
this._codeMirror = null; this._codeMirror = null;
this._cached = "";
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
} }
componentDidMount() { componentDidMount() {
const { mode, rulerColumn: column, rulerColor: color } = this.props; const { mode, rulerColumn: column, rulerColor: color, value } = this.props;
this._codeMirror = CodeMirror.fromTextArea( this._codeMirror = CodeMirror.fromTextArea(
this._textareaRef.current, this._textareaRef.current,
Object.assign({ mode, rulers: [{ column, color }] }, this.props.options) Object.assign({ mode, rulers: [{ column, color }] }, this.props.options)
); );
this._codeMirror.on("change", this.handleChange); this._codeMirror.on("change", this.handleChange);
this._codeMirror.setValue(this.props.value || "");
this.updateValue(value || "");
} }
componentWillUnmount() { componentWillUnmount() {
@ -24,8 +26,8 @@ class CodeMirrorPanel extends React.Component {
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.value !== this._codeMirror.getValue()) { if (this.props.options.readOnly && this.props.value !== this._cached) {
this._codeMirror.setValue(this.props.value); this.updateValue(this.props.value);
} }
if (this.props.mode !== prevProps.mode) { if (this.props.mode !== prevProps.mode) {
this._codeMirror.setOption("mode", this.props.mode); this._codeMirror.setOption("mode", this.props.mode);
@ -36,9 +38,15 @@ class CodeMirrorPanel extends React.Component {
} }
} }
updateValue(value) {
this._cached = value;
this._codeMirror.setValue(value);
}
handleChange(doc, change) { handleChange(doc, change) {
if (change.origin !== "setValue") { if (change.origin !== "setValue") {
this.props.onChange(doc.getValue()); this._cached = doc.getValue();
this.props.onChange(this._cached);
} }
} }