Modal 弹窗

打断用户的当前操作流程，获取用户视觉焦点的对话框。

class DetailModal extends React.Component {
    render() {
        return (
            <Modal
                visible
                footer={
                    <div>
                        <Button styleType="primary" onClick={this.props.onClose}>
                            确定
                        </Button>
                    </div>
                }
                onClose={this.props.onClose}
            >
                <Modal.Content>This is the detail for {this.props.detail.title}</Modal.Content>
            </Modal>
        );
    }
}
DetailModal.propTypes = {
    onClose: PropTypes.func.isRequired,
    detail: PropTypes.object.isRequired
};

const dataSource = new Array(100).fill(null).map((item, i) => ({
    key: i,
    title: `item ${i}`
}));
const columns = [
    {
        title: 'title',
        key: 'title',
        dataIndex: 'title'
    }
];

class IDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.columns = [
            ...columns,
            {
                title: 'action',
                key: 'action',
                render: item => {
                    return <ActionList actionList={[{ label: 'detail', onClick: () => this.showDetail(item) }]} />;
                }
            }
        ];
    }
    showDetail(item) {
        this.modal = Modal.openModal(<DetailModal detail={item} onClose={() => this.closeDetail()} />);
    }
    closeDetail() {
        this.modal.destroy();
    }
    onEnd(result) {
        if (!this.modal) return;
        console.log(result);
        this.modal.destroy();
    }
    render() {
        return (
            <div>
                <Table dataSource={dataSource} columns={this.columns} />
            </div>
        );
    }
}

class SDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.columns = [
            ...columns,
            {
                title: 'action',
                key: 'action',
                render: item => {
                    return <ActionList actionList={[{ label: 'detail', onClick: () => this.showDetail(item) }]} />;
                }
            }
        ];
    }
    showDetail(item) {
        this.setState({ detailModal: item });
    }
    closeDetail() {
        this.setState({ detailModal: null });
    }
    render() {
        return (
            <div>
                <Table dataSource={dataSource} columns={this.columns} />
                {this.state.detailModal && (
                    <DetailModal detail={this.state.detailModal} onClose={() => this.closeDetail()} />
                )}
            </div>
        );
    }
}

<div>
    <h2 style={{ color: 'red' }}>命令式</h2>
    <IDemo />
    <h2 style={{ color: 'green' }}>声明式</h2>
    <SDemo />
</div>;

const Demo = () => {
    const modal = useModal();
    const showDetail = () => modal.openModal(<DetailModal detail={item} onClose={() => this.closeDetail()} />);
};