AIO-Modal

Github

https://github.com/marvin-season/aio-modal

Preview

https://marvin-season.github.io/danny-website/docs/react/advanced/use-helper

install

pnpm add aio-modal

config

Adding node_modules/aio-modal/**/* to your Tailwind config. Note: node_modules/aio-modal/**/* is the path where aio-modal is installed

export default {
  content: ['node_modules/aio-modal/**/*'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Context

import { ModalHelperProvider, useModalHelper } from "aio-modal";

function App() {
    const modalHelper = useModalHelper();
    return (
        <>
            <ModalHelperProvider>
                {'your comp'}
            </ModalHelperProvider>
        </>
    );
}

Modal

const openYourModal = async () =>  await modalHelper.modal.open({
    title: "The InfiniteModal",
    render: InfiniteModal
});

Customize

Whole

 <ModalHelperProvider
    modalCustomizeRender={({ modal, closeModal, confirmModal, loading }) => {
        return (
            <div>
                {modal.headerRender?.({ closeModal, title: modal.title })}
                {modal.render()}
                {modal.footerRender?.({
                    closeModal,
                    confirmModal,
                    loading,
                })}
            </div>
        );
    }}
>
    <UseCase />
</ModalHelperProvider>

Partial

const openYourModal = async () =>  await modalHelper.modal.open({
    title: "The InfiniteModal",
    render: () => <div></div>,
    headerRender: ({closeModal}) =>  <div className={"text-lg font-bold flex justify-between"}>
        <span>Custom Title</span>
        <span className={"cursor-pointer"} onClick={closeModal}>X</span>
    </div>,
    footerRender: ({ closeModal, confirmModal, loading }) => {
        return (
            <div className={"flex gap-2"}>
                <button onClick={closeModal}>cancel</button>
                <button onClick={confirmModal}>
                    {loading ? "loading" : "confirm"}
                </button>
            </div>
        );
    },
    onBeforeConfirm: () => {
        console.log("onBeforeConfirm");
        return new Promise((resolve) =>
            setTimeout(resolve, 1000),
        );
    },
    onConfirm() {
        console.log("onConfirm");
    },
});

Others(Experimental)

Warning

const openYourNotification = () => modalHelper.notification.warning("网络异常");

Confirm

const openYourNotification = async () => await modalHelper.confirm.warning({
    content: <>Are you sure?</>,
    onBeforeConfirm: () => {
        console.log("onBeforeConfirm");
        return new Promise((resolve) =>
            setTimeout(resolve, 1000),
        );
    },
    onConfirm() {
        console.log("onConfirm");
    }
});