2023-06-14

king

2023-06-14 08cce3334a2dc81d690b518136b0aaea64e48b0b

 src/templates/zshare/codemirror/index.jsx

@@ -1,11 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Dropdown, Menu } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined, FormatPainterOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Modal, notification } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined, FormatPainterOutlined, SwapOutlined } from '@ant-design/icons'

import {UnControlled as CodeMirror} from 'react-codemirror2'
import sqlFormatter from '@/utils/sqlFormatter.js'
import ReplaceForm from './replaceform'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/xml/xml'
@@ -33,7 +34,8 @@
    options: null,  // mode : text/xml, text/css, text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: {fontSize: '18px', lineHeight: '32px'},
    display: true
    display: true,
    visible: false
  }

  editor = null
@@ -149,9 +151,45 @@
    this.props.onChange(_sql)
  }

  submit = () => {
    let _sql = this.state.value

    this.ReplaceRef.handleConfirm().then(res => {
      let reg = new RegExp(res.origin, 'ig')
      let times = _sql.match(reg)

      if (!times) {
        notification.warning({
          top: 92,
          message: '未查询到字符《' + res.origin + '》。',
          duration: 5
        })
        return
      }

      let _href = window.location.href.split('#')[0]
      localStorage.setItem(_href + 'sql_char', JSON.stringify([res.origin, res.value]))

      _sql = _sql.replace(reg, res.value)

      this.setState({display: false, defaultVal: _sql}, () => {
        this.setState({display: true})
      })
      
      this.props.onChange(_sql)

      notification.success({
        top: 92,
        message: `共替换${times.length}处字符《${res.origin}》。`,
        duration: 5
      })
      this.setState({ visible: false })
    })
  }

  render() {
    const { mode, func } = this.props
    const { defaultVal, options, fullScreen, style, display } = this.state
    const { defaultVal, options, fullScreen, style, display, visible } = this.state
    const menu = (
      <Menu>
        <Menu.Item
@@ -194,24 +232,39 @@
    )

    return (
      <div className="code-mirror-wrap" style={fullScreen || func ? style : null}>
        {!mode && !fullScreen ? <FormatPainterOutlined onClick={this.handleFormat}/> : null}
        {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen || func ? <Dropdown overlayClassName="mk-mirror-font" overlay={menu} placement="bottomRight">
          <FontSizeOutlined />
        </Dropdown> : null}
        {display ? <CodeMirror
          className="code-mirror-area"
          value={defaultVal}
          options={options}
          editorDidMount={editor => { this.editor = editor }}
          onChange={(editor, data, value) => {
            this.setState({value})
            this.props.onChange(value)
          }}
        /> : null}
      </div>
      <>
        <div className={'code-mirror-wrap ' + (fullScreen ? 'mk-fullscreen' : '')} style={fullScreen || func ? style : null}>
          {!mode ? <FormatPainterOutlined title="格式化" onClick={this.handleFormat}/> : null}
          <FullscreenOutlined title="最大化" onClick={this.fullScreenChange}/>
          <FullscreenExitOutlined title="向下还原" onClick={this.fullScreenChange}/>
          {fullScreen || func ? <Dropdown overlayClassName="mk-mirror-font" overlay={menu} placement="bottomRight">
            <FontSizeOutlined />
          </Dropdown> : null}
          <SwapOutlined title="字符替换" onClick={() => this.setState({visible: true})}/>
          {display ? <CodeMirror
            className="code-mirror-area"
            value={defaultVal}
            options={options}
            editorDidMount={editor => { this.editor = editor }}
            onChange={(editor, data, value) => {
              this.setState({value})
              this.props.onChange(value)
            }}
          /> : null}
        </div>
        <Modal
          title="字符替换"
          visible={visible}
          width={500}
          maskClosable={false}
          okText="替换"
          onOk={this.submit}
          onCancel={() => {this.setState({ visible: false })}}
          destroyOnClose
        >
          <ReplaceForm inputSubmit={this.submit} wrappedComponentRef={(inst) => this.ReplaceRef = inst}/>
        </Modal>
      </>
    )
  }
}