2022-10-28

king

2022-10-28 aa41be24e83653077d85860cb70882551912af24

 src/templates/zshare/codemirror/index.jsx

@@ -1,11 +1,15 @@
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'
import 'codemirror/mode/css/css'
import 'codemirror/addon/display/fullscreen.js'

import 'codemirror/addon/display/fullscreen.css'
@@ -26,9 +30,9 @@
    editor: null,   // code对象
    defaultVal: '', // 初始值
    value: '',      // 实时内容
    options: null,  // mode : text/javascript、text/x-mysql ; theme : cobalt - 黑底
    options: null,  // mode : text/xml, text/css, text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: null,
    style: {fontSize: '18px', lineHeight: '32px'},
    display: true
  }

@@ -89,6 +93,10 @@
      _style = {fontSize: '18px', lineHeight: '32px'}
    } else if (size === 20) {
      _style = {fontSize: '20px', lineHeight: '34px'}
    } else if (size === 22) {
      _style = {fontSize: '22px', lineHeight: '36px'}
    } else if (size === 24) {
      _style = {fontSize: '24px', lineHeight: '40px'}
    }

    // 切换字体大小，刷新编辑器窗口，解决调整后的选择区域错乱问题
@@ -97,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>
@@ -125,15 +151,28 @@
        >
          <span style={{padding: '0 10px 0px 5px'}}>20px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '22px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.changeSize(22)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>22px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '24px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.changeSize(24)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>24px</span>
        </Menu.Item>
      </Menu>
    )

    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"