mockapi/vendors/client/components/AceEditor/AceEditor.js

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;