2022-11-21

king

2022-11-21 f6626b05f1275cc2f8ca77f773d4f6a6af1b0a89

 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'
@@ -26,7 +27,6 @@
  }

  state = {
    editor: null,   // code对象
    defaultVal: '', // 初始值
    value: '',      // 实时内容
    options: null,  // mode : text/xml, text/css, text/javascript、text/x-mysql ; theme : cobalt - 黑底
@@ -34,6 +34,8 @@
    style: {fontSize: '18px', lineHeight: '32px'},
    display: true
  }

  editor = null

  UNSAFE_componentWillMount () {
    let options = {
@@ -55,15 +57,15 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { value, editor } = this.state
    const { value } = this.state

    if (value !== nextProps.value) {
      this.setState({
        value: nextProps.value || ''
      })

      if (editor && editor.setValue) {
        editor.setValue(nextProps.value || '')
      if (this.editor && this.editor.setValue) {
        this.editor.setValue(nextProps.value || '')
      } else {
        this.setState({
          defaultVal: nextProps.value || ''
@@ -73,7 +75,7 @@
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS({...this.state, value: '', editor: ''}), fromJS({...nextState, value: '', editor: ''}))
    return !is(fromJS({...this.state, value: ''}), fromJS({...nextState, value: ''}))
  }

  fullScreenChange = () => {
@@ -99,12 +101,52 @@
    }

    // 切换字体大小，刷新编辑器窗口，解决调整后的选择区域错乱问题
    this.setState({style: _style, display: false, editor: null, defaultVal: this.state.value}, () => {
    this.setState({style: _style, display: false, defaultVal: this.state.value}, () => {
      this.setState({display: true})
    })
  }

  handleFormat = () => {
    let _sql = this.state.value
    
    if (!_sql) return

    let getuuid = () => {
      let uuid = []
      let _options = '0123456789abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
      }
      return '\'' + uuid.join('') + '\''
    }

    let arr = []
    _sql = _sql.replace(/@[0-9a-zA-Z_]+@/g, (word) => {
      let uuid = getuuid()
      arr.push({id: uuid, value: word})
      return uuid
    })

    _sql = sqlFormatter.format(_sql.replace(/\s{2,}/g, ' '))
    // _sql = _sql.replace(/case\n\s+when\s/ig, (word) => {
    //   return word.replace(/case/, '').replace(/when/, 'case when')
    // })
    
    _sql = _sql.replace(/\$\s\*\s\//g, '$*/').replace(/\*\s\//g, '*/')

    arr.forEach(item => {
      _sql = _sql.replace(item.id, item.value)
    })

    this.setState({display: false, 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 +191,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">
@@ -158,8 +201,9 @@
          className="code-mirror-area"
          value={defaultVal}
          options={options}
          editorDidMount={editor => { this.editor = editor }}
          onChange={(editor, data, value) => {
            this.setState({editor, value})
            this.setState({value})
            this.props.onChange(value)
          }}
        /> : null}