68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
|
import React from "react";
|
||
|
|
import {X} from "@phosphor-icons/react";
|
||
|
|
import {useCurtains, useCurtain, useCallableCurtain} from "../Curtains/Curtains";
|
||
|
|
import {classes, Modify} from "../../Utils";
|
||
|
|
import {ModalType, ModalTypeIcon} from "./ModalsTypes";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* More natural name of useCurtains for modals.
|
||
|
|
* @see useCurtains
|
||
|
|
*/
|
||
|
|
export const useModals = useCurtains;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* More natural name of useCurtain for modals.
|
||
|
|
* @see useCurtain
|
||
|
|
*/
|
||
|
|
export const useModal = useCurtain;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* More natural name of useCallableCurtain for modals.
|
||
|
|
* @see useCallableCurtain
|
||
|
|
*/
|
||
|
|
export const useCallableModal = useCallableCurtain;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Modal main component.
|
||
|
|
*/
|
||
|
|
export function Modal({className, title, closable, type, children, ...props}: React.PropsWithChildren<Modify<React.HTMLAttributes<HTMLDivElement>, {
|
||
|
|
/**
|
||
|
|
* Modal title.
|
||
|
|
*/
|
||
|
|
title?: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Can disable close button.
|
||
|
|
*/
|
||
|
|
closable?: boolean;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Modal type. None by default.
|
||
|
|
*/
|
||
|
|
type?: ModalType;
|
||
|
|
}>>)
|
||
|
|
{
|
||
|
|
// Modal is closable by default.
|
||
|
|
closable = closable !== undefined ? closable : true;
|
||
|
|
|
||
|
|
// Modal type is NONE by default.
|
||
|
|
type = type !== undefined ? type : ModalType.NONE;
|
||
|
|
|
||
|
|
// Modal state.
|
||
|
|
const {close} = useModal();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classes("modal", type, className)} {...props}>
|
||
|
|
<header>
|
||
|
|
<h1>{ModalTypeIcon[type]} {title ?? ""}</h1>
|
||
|
|
|
||
|
|
<button className={"icon-only close"} onClick={close} disabled={!closable}><X size={20} /></button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
{children}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|