apple2js/js/components/Modal.tsx

143 lines
3.4 KiB
TypeScript
Raw Normal View History

import { h, ComponentChildren } from 'preact';
import { createPortal } from 'preact/compat';
import { useCallback } from 'preact/hooks';
import { useHotKey } from './hooks/useHotKey';
import styles from './css/Modal.module.css';
/**
* ModalOverlay creates a semi-transparent overlay in which the
* modal is centered.
*
* @returns ModalOverlay component
*/
export const ModalOverlay = ({ children }: { children: ComponentChildren }) => {
return (
<div className={styles.modalOverlay}>
{children}
</div>
);
};
/**
* ModalContent provides a styled container for modal content
*
* @returns ModalContent component
*/
export const ModalContent = ({ children }: { children: ComponentChildren }) => {
return (
<div className={styles.modalContent}>
{children}
</div>
);
};
/**
* ModalFooter provides a right-aligned container for modal buttons.
*
* @returns ModalFooter component
*/
export const ModalFooter = ({ children }: { children: ComponentChildren }) => {
return (
<footer className={styles.modalFooter}>
{children}
</footer>
);
};
/**
* ModalCloseButton component properties
*/
interface ModalCloseButtonProp {
onClose: (closeBox?: boolean) => void;
}
/**
* Renders a close button and registers a global Escape key
* hook to trigger it.
*
* @param onClose Close callback
* @returns ModalClose component
*/
export const ModalCloseButton = ({ onClose }: ModalCloseButtonProp) => {
const doClose = useCallback(() => onClose(true), [onClose]);
useHotKey('Escape', doClose);
return (
<button onClick={doClose} title="Close">
{'\u2715'}
</button>
);
};
type OnCloseCallback = (closeBox?: boolean) => void;
/**
* ModalHeader component properties
*/
export interface ModalHeaderProps {
onClose?: OnCloseCallback;
title: string;
icon?: string;
}
/**
* Header used internally for Modal component
*
* @param onClose Close callback
* @param title Modal title
* @returns ModalHeader component
*/
export const ModalHeader = ({ onClose, title, icon }: ModalHeaderProps) => {
return (
<header className={styles.modalHeader}>
<span className={styles.modalTitle}>
{icon && <i className={`fa-solid fa-${icon}`} role="img" />}
{' '}
{title}
</span>
{onClose && <ModalCloseButton onClose={onClose} />}
</header>
);
};
/**
* Modal component properties
*/
export interface ModalProps {
2022-05-10 15:04:20 +00:00
onClose?: (closeBox?: boolean) => void;
isOpen: boolean;
title: string;
children: ComponentChildren;
icon?: string;
}
/**
* Very simple modal component, provides a transparent overlay, title bar
* with optional close box if onClose is provided. ModalContent and
* ModalFooter components are provided for convenience but not required.
*
* @param isOpen true to show modal
* @param title Modal title
* @param onClose Close callback
* @returns Modal component
*/
export const Modal = ({
isOpen,
children,
title,
...props
}: ModalProps) => {
return (
isOpen ? createPortal((
<ModalOverlay>
<div className={styles.modal} role="dialog">
{title && <ModalHeader title={title} {...props} />}
{children}
</div>
</ModalOverlay>
), document.body) : null
);
};