platform-bi-web/src/components/dashboardDesigner/viewLayout.jsx

import React from "react"
import "./viewLayout.less"
import ReactGridLayout from 'react-grid-layout'
import { Icon, Modal, Tooltip } from 'antd'
import { connect } from 'dva'
import ChartView from './chartView'

class ViewLayout extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visiblePreviewBox: false,
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        };
    }

    componentDidMount() {
        window.addEventListener('resize', this.onWindowResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize);
    }

    onWindowResize = () => {
        this.setState({
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        });
    }

    createElement = (item, isPreview) => {
        const { dispatch, main, dashboardDesigner } = this.props;
        const { currentUser } = main;
        const { editMode } = dashboardDesigner;
        const { code, name, viewType, layout, chartCode, filters } = item;
        return (
            <div className={`chartview${editMode ? ' chartview-edit' : ''}`} key={code} data-grid={layout}>
                <div className='chartview-toolbar mover'>
                    <div className='chart-title'><span>{name}</span></div>
                    <div className='chart-tools'>
                        {viewType !== 'richText' && !!filters && filters.length > 0 && <Tooltip title={'默认过滤条件: 【' + filters.map((f, i) => f.filterLabel).join(',') + '】'}>
                            <Icon className='visible-icon' type="info-circle" theme="outlined" />
                        </Tooltip>}
                        {!isPreview && viewType !== 'richText' && <Icon type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
                        {editMode && item.creatorCode === currentUser.code && viewType !== 'richText' &&  <Icon type='edit' onClick={() => {
                            dispatch({ type: 'dashboard/remoteModify' });
                            dispatch({ type: 'chartDesigner/reset' });
                            dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
                        }}/>}
                        {!isPreview && editMode && item.creatorCode === currentUser.code && <Icon type='delete' onClick={() => {
                            dispatch({ type: 'dashboardDesigner/deleteItem', item });
                        }} />}
                        {isPreview && <Icon type="close" onClick={this.hidePreviewBox}/>}
                    </div>
                </div>
                <ChartView tableBodyHeight={isPreview ? (this.state.screenHeight * 0.8 - 24 - 40 - 50 - 38) : 50 * layout.h - 30 - 50 -38} editMode={isPreview ? false : editMode} item={{...item}}/>
            </div>
        )
    }

    onLayoutChange = (layout) => {
        const { dispatch, reset } = this.props;
        dispatch({ type: 'dashboardDesigner/changeLayout', layout });
        setTimeout(() => {
            reset();
        }, 500)
    }

    onResize = () => {
        const { reset } = this.props;
        reset();
    }

    showPreviewBox = (item) => {
        this.setState({
            previewItem: item,
            visiblePreviewBox: true
        });
    }

    hidePreviewBox = () => {
        this.setState({
            visiblePreviewBox: false
        });
    }

    render() {
        const { dashboardDesigner, contentSize } = this.props;
        const { editMode } = dashboardDesigner;
        const { visiblePreviewBox, previewItem } = this.state;
        const children = dashboardDesigner.items.map((item) => this.createElement(item));
        return (<div>
            <ReactGridLayout
                width={contentSize.width}
                autoSize={true}
                cols={12}
                margin = {editMode ? [2, 2] : [0, 0]}
                rowHeight = {50}
                isDraggable={editMode}
                isResizable={editMode}
                draggableHandle='.mover'
                onLayoutChange={this.onLayoutChange}
                onResize={this.onResize}
                onBreakpointChange={this.onBreakpointChange}
                verticalCompact={true}
                compactType='vertical'
            >
                {children}
            </ReactGridLayout>
            <Modal
                className='previewbox'
                width='80%'
                height='80%'
                visible={visiblePreviewBox}
                onCancel={this.hidePreviewBox}
                footer={null}
                keyboard={true}
                maskClosable={true}
                >
                {previewItem && this.createElement(previewItem, true)}
            </Modal>
        </div>);
    }
}

export default connect(({ present: { main, dashboardDesigner } }) => ({ main, dashboardDesigner }))(ViewLayout);