FormulaAll.jsx 2.8 KB
Newer Older
徐立's avatar
徐立 committed
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>

          );

    }
}