36 lines
989 B
TypeScript
36 lines
989 B
TypeScript
import type { Component, ComponentProps } from 'solid-js'
|
|
import { onCleanup, onMount } from 'solid-js'
|
|
|
|
interface OutSideEventHandlerProps extends ComponentProps<'div'> {
|
|
onOutsideClick: () => void
|
|
}
|
|
|
|
export const OutSideEventHandler: Component<OutSideEventHandlerProps> = (props) => {
|
|
let ref: HTMLDivElement | undefined
|
|
|
|
const handleClickOutside = (event: MouseEvent | KeyboardEvent): void => {
|
|
const currentEvent = event as KeyboardEvent
|
|
|
|
if (ref == null) return
|
|
if (ref.contains(event.target as Node) || currentEvent.key !== 'Escape') return
|
|
|
|
return props.onOutsideClick()
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener('keydown', handleClickOutside)
|
|
return window.addEventListener('click', handleClickOutside)
|
|
})
|
|
|
|
onCleanup(() => {
|
|
window.removeEventListener('keydown', handleClickOutside)
|
|
return window.removeEventListener('click', handleClickOutside)
|
|
})
|
|
|
|
return (
|
|
<div {...props} ref={ref}>
|
|
{props.children}
|
|
</div>
|
|
)
|
|
}
|