2022-10-28

king

2022-10-28 aa41be24e83653077d85860cb70882551912af24

 src/templates/zshare/codemirror/index.jsx

@@ -1,9 +1,11 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Dropdown, Menu } from 'antd'
import { Dropdown, Menu } from 'antd'
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'
@@ -103,7 +105,25 @@
    })
  }

  handleFormat = () => {
    let _sql = this.state.value
    
    if (!_sql) return
    
    _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')
    // })

    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>
@@ -148,10 +168,11 @@

    return (
      <div className="code-mirror-wrap" style={fullScreen ? style : null}>
        {!fullScreen ? <Icon type="fullscreen" onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Icon type="fullscreen-exit" onClick={this.fullScreenChange}/> : 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">
          <Icon type="font-size" />
          <FontSizeOutlined />
        </Dropdown> : null}
        {display ? <CodeMirror
          className="code-mirror-area"