38 lines
899 B
TypeScript
38 lines
899 B
TypeScript
|
import { createEffect, createSignal, onMount, Show } from 'solid-js'
|
||
|
|
import style from './Popup.module.scss'
|
||
|
|
import { hideModal, useModalStore } from '../../stores/ui'
|
||
|
|
import {clsx} from 'clsx';
|
||
|
|
|
||
|
|
interface PopupProps {
|
||
|
|
name: string
|
||
|
|
children: any
|
||
|
|
class?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Popup = (props: PopupProps) => {
|
||
|
|
const { getModal } = useModalStore()
|
||
|
|
|
||
|
|
const wrapClick = (ev: Event) => {
|
||
|
|
if ((ev.target as HTMLElement).classList.contains('popup')) hideModal()
|
||
|
|
}
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
window.addEventListener('keydown', (e: KeyboardEvent) => {
|
||
|
|
if (e.key === 'Escape') hideModal()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const [visible, setVisible] = createSignal(false)
|
||
|
|
createEffect(() => {
|
||
|
|
setVisible(getModal() === props.name)
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Show when={visible()}>
|
||
|
|
<div class={clsx(style.popup, props.class)} onClick={wrapClick}>
|
||
|
|
{props.children}
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
)
|
||
|
|
}
|