42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { useAtomValue } from "jotai";
|
|
import type { ComponentType } from "react";
|
|
import { useCallback } from "react";
|
|
import { dialogsAtom, hideDialog } from "../lib/dialog";
|
|
import { Dialog, type DialogProps } from "./core/Dialog";
|
|
import { ErrorBoundary } from "./ErrorBoundary";
|
|
|
|
export type DialogInstance = {
|
|
id: string;
|
|
render: ComponentType<{ hide: () => void }>;
|
|
} & Omit<DialogProps, "open" | "children">;
|
|
|
|
export function Dialogs() {
|
|
const dialogs = useAtomValue(dialogsAtom);
|
|
return (
|
|
<>
|
|
{dialogs.map(({ id, ...props }) => (
|
|
<DialogInstance key={id} id={id} {...props} />
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DialogInstance({ render: Component, onClose, id, ...props }: DialogInstance) {
|
|
const hide = useCallback(() => {
|
|
hideDialog(id);
|
|
}, [id]);
|
|
|
|
const handleClose = useCallback(() => {
|
|
onClose?.();
|
|
hideDialog(id);
|
|
}, [id, onClose]);
|
|
|
|
return (
|
|
<Dialog open onClose={handleClose} {...props}>
|
|
<ErrorBoundary name={`Dialog ${id}`}>
|
|
<Component hide={hide} {...props} />
|
|
</ErrorBoundary>
|
|
</Dialog>
|
|
);
|
|
}
|