platform-bi-web/app/components/dashboardDesigner/elementConfig.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import dashboardDesigner from '../../models/dashboardDesigner'
import { Modal, Select } from 'antd'
import { connect } from 'dva'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'
const Option = Select.Option

const ElementConfig = ({operation, visibleBox, hideElementConfigBox, dashboardDesigner, dispatch}) => {
   
    const okHandler = (model) => {
        if(operation == 'create') {
            
        }else if(operation == 'modify') {
            
        }
    }

    const handleChange = (content) => {
    console.log(content)
    }

    const handleRawChange = (rawContent) => {
    console.log(rawContent)
    }

    
    const editorProps = {
        height: 300,
        contentFormat: 'raw',
        initialContent: '<p>Hello World!</p>',
        onChange: handleChange(),
        onRawChange: handleRawChange()
    }

        
    return (
        <Modal
            className='element-config'
            title={`${operation=='create'?'新增':'修改'}元素`}
            visible={visibleBox}
            onOk={() => {okHandler()}}
            onCancel={hideElementConfigBox}
            maskClosable={false}
            destroyOnClose={true}
            width="925px"
        >
            <div>
                <Select defaultValue={dashboardDesigner.configBoxForm.type} style={{ width: 120 }} 
                    onChange={(value) => { dispatch( {type: 'dashboardDesigner/handleFieldChange', name: 'type', value: value})}}>
                    <Option value="chart">图表</Option>
                    <Option value="simple">基础元素</Option>
                </Select>
            </div>
            <div style={{display: `${dashboardDesigner.configBoxForm.type == "simple" ? "inline":"none"}`}}>
                <BraftEditor {...editorProps}/>
            </div>
        </Modal>
    )
}



    




function mapStateToProps({ present: { dashboardDesigner } }) {
    return { dashboardDesigner: dashboardDesigner };
}

export default connect(mapStateToProps)(ElementConfig)