From aa41be24e83653077d85860cb70882551912af24 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 28 十月 2022 12:53:25 +0800
Subject: [PATCH] 2022-10-28
---
src/templates/zshare/codemirror/index.jsx | 51 +++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/src/templates/zshare/codemirror/index.jsx b/src/templates/zshare/codemirror/index.jsx
index 28cd658..a7ee8d3 100644
--- a/src/templates/zshare/codemirror/index.jsx
+++ b/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銆乼ext/x-mysql ; theme : cobalt - 榛戝簳
+ options: null, // mode : text/xml, text/css, text/javascript銆乼ext/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"
--
Gitblit v1.8.0