1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react'
import { Tree,Upload,Icon,Button,message,Modal} from 'antd';
import "brace/mode/javascript";
import AceEditor from "react-ace";
import FormulaForm from './FormulaForm'
export default class FormulaAll extends React.Component {
constructor(props){
super(props)
const value = props.value;
this.state = {
isFormula: false, // 是否展示公式选择栏
isOne: false, // 是否为用户点击,排除渲染时重复展示
content: value
}
}
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(changedValue);
}
}
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState({content:value});
}
}
change=(value)=>{
if (!('value' in this.props)) {
this.setState({content:value});
}
this.triggerChange(value);
}
cutFormula = () => {
this.setState({
isFormula:true,
isOne:true,
})
}
// 关闭公式选择栏操作函数
cutCloseFormula = () => {
this.setState({
isFormula:false,
})
}
append=(func)=>{
const newC=this.state.content!=null?(this.state.content+func):(func!=null?func+"":"")
if (!('value' in this.props)) {
this.setState({content:newC});
}
this.triggerChange(newC);
}
render() {
const {content,isFormula,isOne}= this.state
const xxx= <AceEditor height={isFormula?600:300} width={isFormula?1200:"100%"}
placeholder="请输入公式"
mode={"javascript"}
theme={"textmate"}
fontSize={14}
onChange={this.change}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={content}
name="UNIQUE_ID_OF_DIV"
// keyboardHandler="vim"
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2,
}}
editorProps={{ $blockScrolling: true }}
/>
return (
<div>
<Button icon="fullscreen" size="small" type="danger" onClick={this.cutFormula}>全屏编辑</Button>
{isFormula?<Modal
width="1200px"
destroyOnClose
title={'公式编辑'}
visible={isFormula}
footer={null}
onCancel={() => this.setState({ isFormula: false })}
>
<FormulaForm editor={xxx} append={this.append} cutCloseFormula={this.cutCloseFormula} isOne={isOne} isFormula={true}/>
</Modal>:xxx}
</div>
);
}
}