78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import mockEditor from './mockEditor';
|
|
import PropTypes from 'prop-types';
|
|
import './AceEditor.scss';
|
|
|
|
const ModeMap = {
|
|
javascript: 'ace/mode/javascript',
|
|
json: 'ace/mode/json',
|
|
text: 'ace/mode/text',
|
|
xml: 'ace/mode/xml',
|
|
html: 'ace/mode/html'
|
|
};
|
|
|
|
const defaultStyle = { width: '100%', height: '200px' };
|
|
|
|
function getMode(mode) {
|
|
return ModeMap[mode] || ModeMap.text;
|
|
}
|
|
|
|
class AceEditor extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
static propTypes = {
|
|
data: PropTypes.any,
|
|
onChange: PropTypes.func,
|
|
className: PropTypes.string,
|
|
mode: PropTypes.string, //enum[json, text, javascript], default is javascript
|
|
readOnly: PropTypes.bool,
|
|
callback: PropTypes.func,
|
|
style: PropTypes.object,
|
|
fullScreen: PropTypes.bool,
|
|
insertCode: PropTypes.func
|
|
};
|
|
|
|
componentDidMount() {
|
|
this.editor = mockEditor({
|
|
container: this.editorElement,
|
|
data: this.props.data,
|
|
onChange: this.props.onChange,
|
|
readOnly: this.props.readOnly,
|
|
fullScreen: this.props.fullScreen
|
|
});
|
|
let mode = this.props.mode || 'javascript';
|
|
this.editor.editor.getSession().setMode(getMode(mode));
|
|
if (typeof this.props.callback === 'function') {
|
|
this.props.callback(this.editor.editor);
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (!this.editor) {
|
|
return;
|
|
}
|
|
if (nextProps.data !== this.props.data && this.editor.getValue() !== nextProps.data) {
|
|
this.editor.setValue(nextProps.data);
|
|
let mode = nextProps.mode || 'javascript';
|
|
this.editor.editor.getSession().setMode(getMode(mode));
|
|
this.editor.editor.clearSelection();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
className={this.props.className}
|
|
style={this.props.className ? undefined : this.props.style || defaultStyle}
|
|
ref={editor => {
|
|
this.editorElement = editor;
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default AceEditor;
|