前端项目实战叁佰捌拾叁react-admin和material ui-自定义一个render弹框

最新推荐文章于 2024-09-28 19:02:04 发布

前端歌谣

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量47

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132453755

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏


import React from 'react';
import { createRoot } from 'react-dom/client';

const containerCssText = `
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 999;
cursor: auto;
background-color: rgba(128, 128, 128, 0.6);
`;

const divCssText = `
position: relative;
overflow: auto;
text-align: left;
z-index: 200;
top: calc((100vh - 600px) / 3);
left: calc((100vw - 600px) / 2);
width: 600px;
height: 600px;
border: 2px solid black;
border-radius: 8px;
color: #000;
background-color: #ffffff;
pointer-events: auto;
z-index: 25;        
`;

const DEFAULT_DESRUCTION_DELAY = 3000;
const noop = () => {}

interface IAsyncCommonOptions {
    destructionDelay: number;
}

const DEFAULT_OPTIONS: IAsyncCommonOptions = {
    destructionDelay: DEFAULT_DESRUCTION_DELAY
}

interface ICommonProps {
    onSubmit: (p: any) => void;
    onDismiss: () => void;
    show: boolean;
}

const asyncCommon = async (component: React.FC<ICommonProps>, options?: IAsyncCommonOptions) => {
    const {destructionDelay} = {...DEFAULT_OPTIONS, ...options};

    const container = document.createElement('div');
    container.style.cssText =  containerCssText;

    document.body.appendChild(container);

    const div = document.createElement('div');
    div.style.cssText = divCssText;

    container.appendChild(div);

    const root = createRoot(div);

    const renderComponent = (params: ICommonProps) => {
        const {show, onSubmit, onDismiss} = params;
        root.render(component({onSubmit, onDismiss, show}));
    }

    const hideComponent = (param: ICommonProps, callback: () => void) => {
        root.render(component(param));
        container.style.display = 'none';
        callback();
    }

    const destroyComponent = () => {
        root.unmount();
        container.removeChild(div);
        document.body.removeChild(container);
    }

    const confirmation = new Promise(resolve => {
        const onSubmit = (result: any) => resolve(result);
        const onDismiss = () => resolve(undefined);

        renderComponent({onSubmit, onDismiss, show: true});
    })

    confirmation.finally(() => {
        const onSubmit = noop;
        const onDismiss = noop;

        hideComponent({onSubmit, onDismiss, show: false}, () => {
            setTimeout(destroyComponent, destructionDelay);
        })
    })

    return confirmation;
}
 
export default asyncCommon;