import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js' import type { JSX } from 'solid-js' import { getLogger } from '../../utils/logger' import './Modal.scss' import { hideModal, useModalStore } from '../../stores/ui' const log = getLogger('modal') interface ModalProps { name: string children: JSX.Element } const keydownHandler = (e: KeyboardEvent) => { if (e.key === 'Escape') hideModal() } export const Modal = (props: ModalProps) => { const { modal } = useModalStore() const wrapClick = (event: { target: Element }) => { if (event.target.classList.contains('modalwrap')) hideModal() } onMount(() => { window.addEventListener('keydown', keydownHandler) onCleanup(() => { window.removeEventListener('keydown', keydownHandler) }) }) const [visible, setVisible] = createSignal(false) createEffect(() => { setVisible(modal() === props.name) log.debug(`${props.name} is ${modal() === props.name ? 'visible' : 'hidden'}`) }) return (
{props.children}
) }