2022-10-25

king

2022-10-25 373067f784dee77fa98b593992f8e324f9cde46d

 src/templates/zshare/codemirror/index.jsx

@@ -2,9 +2,10 @@
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'
@@ -104,7 +105,22 @@
    })
  }

  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>
@@ -149,6 +165,7 @@

    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">