platform-bi-web/src/components/dataSourceDetail/headerCreate.jsx

import React from 'react'
import { Button, Popconfirm } from 'antd'
import { connect } from 'dva'
import './headerCreate.less'

class DataSourceCreateHeader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visibleConfirm: false,
        }
    }

    handleVisibleChange = (visible) => {
        this.setState({ visibleConfirm: visible });
    }

    render() {
        const { dataSourceDetail, dispatch } = this.props;
        const { visibleConfirm } = this.state;

        return (
            <div className='header-datasource-create'>
                <div className='title'>
                    <span>创建数据源</span>
                </div>
                <div>
                    <Popconfirm
                        placement="bottomLeft"
                        title="确定不保存直接退出吗？"
                        visible={visibleConfirm}
                        onVisibleChange={this.handleVisibleChange}
                        onConfirm={() => {
                            dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                            this.setState({
                                visibleConfirm: false
                            });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                        }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button onClick={(e) => {
                            if(!dataSourceDetail.dirty) {
                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                            }
                        }}>
                            取消
                        </Button>
                    </Popconfirm>
                </div>
            </div>
        );
    }
}

export default connect(({ present: { dataSourceDetail } }) => ({ dataSourceDetail }))(DataSourceCreateHeader);