plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
76 lines (75 loc) • 2.58 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactAce from 'react-ace';
import debounce from 'lodash/debounce';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-github';
class InputJson extends Component {
constructor() {
super(...arguments);
this.state = {
text: this.props.value || '',
};
this.onChange = (value) => {
if (this.debouncedValidate) {
this.debouncedValidate();
}
this.setState({
text: value,
});
};
this.onValidate = (annotations) => {
if (annotations.length) {
const errors = annotations
.filter((annotation) => annotation.type === 'error')
.map((annotation) => {
return new Error(`${annotation.row}:${annotation.column} ${annotation.text} error`);
});
this.debouncedValidate(errors);
}
};
}
componentDidMount() {
this.debouncedValidate = debounce((errors) => {
const { onValidate } = this.props;
if (onValidate) {
onValidate(errors);
}
const { onChange } = this.props;
if (onChange) {
onChange(this.state.text);
}
}, 200);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.props.value) {
this.setState({
text: nextProps.value,
});
}
}
render() {
const { defaultValue, width, height, disabled } = this.props;
const { text } = this.state;
return (React.createElement(ReactAce, { ref: (c) => {
this.aceRef = c;
}, mode: "json", theme: "github", width: width, height: height, defaultValue: defaultValue || text, value: text, editorProps: {
$blockScrolling: true,
}, onChange: this.onChange, onValidate: this.onValidate, readOnly: disabled }));
}
}
InputJson.propTypes = {
defaultValue: PropTypes.string,
value: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func,
onValidate: PropTypes.func,
disabled: PropTypes.bool,
};
InputJson.defaultProps = {
width: '100%',
height: '200px',
disabled: false,
};
export default InputJson;