import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Dropdown, Menu } from 'antd'
|
|
import {UnControlled as CodeMirror} from 'react-codemirror2'
|
import 'codemirror/mode/javascript/javascript'
|
import 'codemirror/mode/sql/sql'
|
import 'codemirror/addon/display/fullscreen.js'
|
|
import 'codemirror/addon/display/fullscreen.css'
|
import 'codemirror/lib/codemirror.css'
|
import 'codemirror/theme/cobalt.css'
|
|
import './index.scss'
|
|
class CodeMirrorComponent extends Component {
|
static propTpyes = {
|
value: PropTypes.string, // 内容
|
mode: PropTypes.any, // 可选，语言模式，默认为sql
|
theme: PropTypes.any, // 可选，主题样式
|
onChange: PropTypes.func // 内容变化时回调
|
}
|
|
state = {
|
editor: null, // code对象
|
defaultVal: '', // 初始值
|
value: '', // 实时内容
|
options: null, // mode : text/javascript、text/x-mysql ; theme : cobalt - 黑底
|
fullScreen: false,
|
style: null
|
}
|
|
UNSAFE_componentWillMount () {
|
let options = {
|
lineNumbers: true,
|
lineWrapping: true,
|
fullScreen: false
|
}
|
|
options.mode = this.props.mode || 'text/x-mysql'
|
if (this.props.theme) {
|
options.theme = this.props.theme
|
}
|
|
this.setState({
|
value: this.props.value || '',
|
defaultVal: this.props.value || '',
|
options
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { value, editor } = this.state
|
|
if (value !== nextProps.value) {
|
this.setState({
|
value: nextProps.value || ''
|
})
|
|
if (editor && editor.setValue) {
|
editor.setValue(nextProps.value || '')
|
} else {
|
this.setState({
|
defaultVal: nextProps.value || ''
|
})
|
}
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS({...this.state, value: '', editor: ''}), fromJS({...nextState, value: '', editor: ''}))
|
}
|
|
fullScreenChange = () => {
|
const { options, fullScreen } = this.state
|
|
this.setState({options: {...options, fullScreen: !fullScreen}, fullScreen: !fullScreen})
|
}
|
|
changeSize = () => {
|
|
}
|
|
render() {
|
const { defaultVal, options, fullScreen, style } = this.state
|
const menu = (
|
<Menu>
|
<Menu.Item
|
style={!style || style.fontSize === '14px' ? {backgroundColor: '#bae7ff'} : ''}
|
onClick={() => {this.setState({style: {fontSize: '14px', lineHeight: '25px'}})}}
|
>
|
<span style={{padding: '0 10px 0px 5px'}}>14px</span>
|
</Menu.Item>
|
<Menu.Item
|
style={style && style.fontSize === '16px' ? {backgroundColor: '#bae7ff'} : ''}
|
onClick={() => {this.setState({style: {fontSize: '16px', lineHeight: '28px'}})}}
|
>
|
<span style={{padding: '0 10px 0px 5px'}}>16px</span>
|
</Menu.Item>
|
<Menu.Item
|
style={style && style.fontSize === '18px' ? {backgroundColor: '#bae7ff'} : ''}
|
onClick={() => {this.setState({style: {fontSize: '18px', lineHeight: '32px'}})}}
|
>
|
<span style={{padding: '0 10px 0px 5px'}}>18px</span>
|
</Menu.Item>
|
<Menu.Item
|
style={style && style.fontSize === '20px' ? {backgroundColor: '#bae7ff'} : ''}
|
onClick={() => {this.setState({style: {fontSize: '20px', lineHeight: '34px'}})}}
|
>
|
<span style={{padding: '0 10px 0px 5px'}}>20px</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}
|
{fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
|
<Icon type="font-size" />
|
</Dropdown> : null}
|
<CodeMirror
|
className="code-mirror-area"
|
value={defaultVal}
|
options={options}
|
onChange={(editor, data, value) => {
|
this.setState({editor, value})
|
this.props.onChange(value)
|
}}
|
/>
|
</div>
|
)
|
}
|
}
|
|
export default CodeMirrorComponent
|
