/**
 * Created by baoyinghai on 5/26/17.
 */
import React from 'react';
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import 'brace/theme/sqlserver';
import './SQLEditor.less';

export default class SQLEditor extends React.Component {

  onChange = newValue => {
    const { setSqlStr } = this.props;
    setSqlStr && setSqlStr(newValue);
  };

  render() {
    return (
      <div>
        <span>选择数据源:</span>
        <AceEditor
          wrapEnabled={true}
          mode="sql"
          theme="sqlserver"
          onChange={this.onChange}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{$blockScrolling: true}}
          showPrintMargin={false}
          width="100%"
          height="100px"
          highlightActiveLine={false}
          value={this.props.sqlStr}
        />
      </div>
    );
  }
}