封装全局modal

使用方式

openModal ({
   title: 'Modal',
   content: <RealationInfo node={node} />
});

封裝方法

import { newInstance } from '../components/sideModal/index';
import { history } from '../../store/createStore';

let sideModal = null;

history.listen(() => {
    if (sideModal) {
        sideModal.destroy();
        sideModal = null;
    }
});

export const openModal = async (params, callback, getContainer) => {
    if (!sideModal) {
        newInstance({}, n => (sideModal = n));
    }
    const fallback = () => {
        sideModal.destroy();
        sideModal = null;
        if (_.isFunction(callback)) {
            callback();
        }
    };

    sideModal.open({
        getContainer,
        title: 'MyModal',
        content: <MyModal />
    });
};

newInstance 文件

import { ConnectedRouter } from 'connected-react-router';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { getCookie } from '~/common/utils';
import store, { history } from '../../store/createStore';
import SideModalList from './SideModalList';
import RequestProvider from './RequestProvider';
import request from '~/common/request';

export const newInstance = function newModalInstance(props, callback) {
    const div = document.createElement('div');
    document.body.appendChild(div);
    let called = false;
    function ref(sideModal) {
        if (called) {
            return;
        }
        called = true;
        callback({
            open(props) {
                sideModal.add(props);
            },
            remove(key) {
                sideModal.remove(key);
            },
            destroy() {
                const unmountResult = ReactDOM.unmountComponentAtNode(div);
                if (unmountResult && div.parentNode) {
                    div.parentNode.removeChild(div);
                }
            }
        });
    }
    ReactDOM.render(
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <RequestProvider value={request}>
                        <SideModalList {...props} ref={ref} />
                    </RequestProvider>
                </ConnectedRouter>
            </Provider>,
        div
    );
};

SideModalList

import React from 'react';
import { Drawer, ConfigProvider } from 'antd';
 
let seed = 0;
const now = Date.now();

function getUuid() {
    return `sideModal_${now}_${seed++}`;
}

class SideModalList extends React.Component {
    drawer = [];
    state = {
        data: []
    };
    add = notice => {
        notice.key = getUuid();
        notice.visible = true;
        this.setState(previousState => {
            const data = previousState.data;
            const updatedData = data.concat();
            updatedData.push(notice);
            return {
                data: updatedData
            };
        });
    };

    remove = key => {
        this.setState(previousState => {
            return {
                data: previousState.data.map(item => {
                    if (item.key === key) {
                        return { ...item, visible: false };
                    } else {
                        return item;
                    }
                })
            };
        });
    };
    saveDrawer = index => node => {
        this.drawer[index] = node;
    };
    render() {
        return this.state.data.map((item, i) => {
            return (
                <Drawer
                    getContainer={item.getContainer}
                    visible={item.visible}
                    key={item.key}
                    title={item.title}
                    ref={this.saveDrawer(i)}
                    onClose={() => this.remove(item.key)}
                >
                    <ConfigProvider getPopupContainer={() => this.drawer[i].bodyNode}>{item.content}</ConfigProvider>
                </Drawer>
            );
        });
    }
}

export default SideModalList;