| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Dropdown, Menu } from 'antd' |
| | | import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined } from '@ant-design/icons' |
| | | import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined, FormatPainterOutlined } from '@ant-design/icons' |
| | | |
| | | import {UnControlled as CodeMirror} from 'react-codemirror2' |
| | | import sqlFormatter from '@/utils/sqlFormatter.js' |
| | | import 'codemirror/mode/javascript/javascript' |
| | | import 'codemirror/mode/sql/sql' |
| | | import 'codemirror/mode/xml/xml' |
| | |
| | | }) |
| | | } |
| | | |
| | | handleFormat = () => { |
| | | let _sql = this.state.value |
| | | |
| | | if (!_sql) return |
| | | |
| | | _sql = sqlFormatter.format(_sql.replace(/\s{2,}/g, ' ')) |
| | | |
| | | this.setState({display: false, editor: null, defaultVal: _sql}, () => { |
| | | this.setState({display: true}) |
| | | }) |
| | | |
| | | this.props.onChange(_sql) |
| | | } |
| | | |
| | | render() { |
| | | const { mode } = this.props |
| | | const { defaultVal, options, fullScreen, style, display } = this.state |
| | | const menu = ( |
| | | <Menu> |
| | |
| | | |
| | | return ( |
| | | <div className="code-mirror-wrap" style={fullScreen ? style : null}> |
| | | {!mode && !fullScreen ? <FormatPainterOutlined onClick={this.handleFormat}/> : null} |
| | | {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null} |
| | | {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null} |
| | | {fullScreen ? <Dropdown overlay={menu} placement="bottomRight"> |