All files / javascripts/SqlLab/components AceEditorWrapper.jsx

66.67% Statements 10/15
0% Branches 0/2
33.33% Functions 1/3
66.67% Lines 10/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 521x 1x 1x 1x 1x   1x         1x 1x                                                                     1x 1x      
import React from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import 'brace/theme/github';
import 'brace/ext/language_tools';
 
const propTypes = {
  sql: React.PropTypes.string.isRequired,
  onBlur: React.PropTypes.func,
};
 
const defaultProps = {
  onBlur: () => {},
};
 
class AceEditorWrapper extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      sql: props.sql,
    };
  }
  textChange(text) {
    this.setState({ sql: text });
  }
  onBlur() {
    this.props.onBlur(this.state.sql);
  }
 
  render() {
    return (
      <AceEditor
        mode="sql"
        theme="github"
        onBlur={this.onBlur.bind(this)}
        minLines={8}
        maxLines={30}
        onChange={this.textChange.bind(this)}
        height="200px"
        width="100%"
        editorProps={{ $blockScrolling: true }}
        enableBasicAutocompletion
        value={this.state.sql}
      />
    );
  }
}
AceEditorWrapper.defaultProps = defaultProps;
AceEditorWrapper.propTypes = propTypes;
 
export default AceEditorWrapper;