webapp/src/components/Nav/Modal/Modal.tsx

56 lines
1.6 KiB
TypeScript
Raw Normal View History

2022-11-10 12:50:47 +00:00
import { createEffect, createSignal, Show } from 'solid-js'
2022-10-25 16:25:42 +00:00
import type { JSX } from 'solid-js'
import { hideModal, useModalStore } from '../../../stores/ui'
import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
2022-11-27 05:49:48 +00:00
import { clsx } from 'clsx'
import styles from './Modal.module.scss'
2022-09-09 11:53:35 +00:00
interface ModalProps {
name: string
2022-11-27 05:49:48 +00:00
variant: 'narrow' | 'wide'
2022-10-25 16:25:42 +00:00
children: JSX.Element
onClose?: () => void
2022-10-25 16:25:42 +00:00
}
2022-09-09 11:53:35 +00:00
export const Modal = (props: ModalProps) => {
2022-10-25 16:25:42 +00:00
const { modal } = useModalStore()
2022-09-09 11:53:35 +00:00
const handleHide = () => {
if (modal()) {
hideModal()
props.onClose && props.onClose()
}
2022-09-09 11:53:35 +00:00
}
useEscKeyDownHandler(handleHide)
2022-09-09 11:53:35 +00:00
const [visible, setVisible] = createSignal(false)
2022-10-25 16:25:42 +00:00
2022-09-09 11:53:35 +00:00
createEffect(() => {
2022-10-25 16:25:42 +00:00
setVisible(modal() === props.name)
2022-09-09 11:53:35 +00:00
})
return (
<Show when={visible()}>
<div class={styles.backdrop} onClick={handleHide}>
2022-11-27 05:49:48 +00:00
<div
class={clsx(styles.modal, {
[styles.narrow]: props.variant === 'narrow'
})}
onClick={(event) => event.stopPropagation()}
>
2022-09-09 11:53:35 +00:00
{props.children}
<div class={styles.close} onClick={handleHide}>
2022-09-09 11:53:35 +00:00
<svg width="16" height="18" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.99987 7.52552L14.1871 0.92334L15.9548 2.80968L9.76764 9.41185L15.9548 16.014L14.1871 17.9004L7.99987 11.2982L1.81269 17.9004L0.0449219 16.014L6.23211 9.41185L0.0449225 2.80968L1.81269 0.92334L7.99987 7.52552Z"
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</Show>
)
}