Component `Modal ` provider a API `Model.open` to create and open a new instance of `Modal `

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

i have a list or table. every list item (row) have a action list. there are some feature in action list:

• open a modal to edit this row
• open a modal to show details of this row
• do some thing need to input password or key word to confirm …

if there are too many action need to open a Modal, i need to maintain stateA, stateB, stateC… And some time i need to clear this state after close Modal instance.

it is too heavy…

This API is not recommended, but it is still necessary for implementation.

What does the proposed API look like?

Modal.open(props). like Modal.warn

Model.open({
    title: 'title',
    onConfirm: () => {},
    onCancel: () => {},
    children: () => <div></div>
    ......
})

[qiqiboy]

import Modal from './MyModal';

const modal = Modal.open({
    compoennt: MyPage,
    //component: <Mypage otherProp="..." />
    //component: ({ close, dismiss }) => <div />
});

modal.result.then(resolveCallback, rejectCallback);
modal.close(); // close with resolved
modal.dismiss(); // close with rejected

MyModal.js

import React, { Children, cloneElement } from 'react';
import { render as reactRender, unmountComponentAtNode } from 'react-dom';
import { Modal } from 'antd';

export default Modal;

const defaultSettings = {
    destroyOnClose: true,
    footer: null,
    maskClosable: false,
    closable: false
};

export const open = (Modal.open = (props = {}) => {
    let destroyed, withResolve, withReject;

    const settings = { ...defaultSettings, ...props };

    if (settings.footer === true) {
        delete settings.footer;
    }

    if (props.onOk) {
        settings.onOk = ev => props.onOk(ev, { close, dismiss });
    }

    if (props.onCancel) {
        settings.onCancel = ev => props.onCancel(ev, { close, dismiss });
    }

    const div = document.createElement('div');
    document.body.appendChild(div);

    function destroy() {
        if (!destroyed) {
            destroyed = true;

            unmountComponentAtNode(div);

            document.body.removeChild(div);
        }
    }

    function close(data) {
        render(false, () => withResolve(data));
    }

    function dismiss(reason) {
        render(false, () => withReject(reason));
    }

    function render(visible, callback) {
        const { component: TheComponent, ...props } = settings;
        const childProps = {
            close,
            dismiss
        };

        let children;
        if (typeof TheComponent === 'function') {
            children = <TheComponent />;
        } else {
            children = TheComponent;
        }

        reactRender(
            <Modal
                onCancel={dismiss}
                onOk={close}
                {...props}
                visible={visible}
                afterClose={() => {
                    if (!callback) {
                        callback = withReject;
                    }

                    callback();
                    destroy();
                }}>
                {Children.map(children, child => cloneElement(child, childProps))}
            </Modal>,
            div
        );
    }

    render(true);

    return {
        close,
        dismiss,
        result: new Promise((resolve, reject) => {
            withResolve = resolve;
            withReject = reject;
        })
    };
});

[tinybull]

angular version of antd provides an open method, while the imperative call is not recommended in React, it is not means that React prohibit using it. And also why are you provide Modal.info, Modal.success, Modal.error,Modal.warning and Modal.confirm methods? These methods do not violate the recommendation?