| | |
| | | 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' |
| | |
| | | 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 |
| | |
| | | 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 |
| | |
| | | ) |
| | | |
| | | 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> |
| | | </> |
| | | ) |
| | | } |
| | | } |