FormulaAll.jsx 2.6 KB
Newer Older
1 2 3 4 5
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';
徐立's avatar
徐立 committed
6 7

export default class FormulaAll extends React.Component {
8 9 10 11 12 13 14 15 16
	constructor(props) {
		super(props);
		const value = props.value;
		this.state = {
			isFormula: false, // 是否展示公式选择栏
			isOne: false, // 是否为用户点击,排除渲染时重复展示
			content: value,
		};
	}
徐立's avatar
徐立 committed
17

18 19 20 21 22 23 24 25 26 27 28 29 30 31
	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 });
		}
	}
徐立's avatar
徐立 committed
32

33 34 35 36 37 38
	change = (value) => {
		if (!('value' in this.props)) {
			this.setState({ content: value });
		}
		this.triggerChange(value);
	};
徐立's avatar
徐立 committed
39

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
	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 + '' : '';
徐立's avatar
徐立 committed
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 112 113 114
		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>
		);
	}
徐立's avatar
徐立 committed
115
}