Walidoux
d26b429ee8
BREAKING CHANGES - Refactored `App.tsx` to import `Component` from `solid-js`, and use a new component `TitleBar`. - Added new component `AnimateView` under `src/components/design`, and renamed old `AnimateView` to `Loader`. - Added new component `Button` under `src/components/design`. - Added new component `Image` under `src/components/design`. - Moved old `Image`, `Loader`, and `Button` components under `src/components/design`. - Refactored `Downloader` component to use `Motion` from `@motionone/solid`, moved it under `Downloader` folder, and used it to create a slick hover effect. - Removed `Downloaders/Button`. Notes: - Used `createSignal` instead of `useState` for SolidJS in `Downloaders.tsx`. - Used `type` keyword to explicitly define the type of the component props or objects where it makes the code clearer.
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import type { RefObject } from 'react'
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
export const useOutSideClickEventHandler = (callback: () => void): RefObject<HTMLDivElement> => {
|
|
const wrapper = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: KeyboardEvent | MouseEvent): void => {
|
|
const currentEvent = event as KeyboardEvent
|
|
|
|
if (
|
|
wrapper.current == null ||
|
|
Boolean(wrapper.current.contains(currentEvent.target as Node)) ||
|
|
currentEvent.key !== 'Escape'
|
|
)
|
|
return
|
|
|
|
return callback()
|
|
}
|
|
|
|
window.addEventListener('click', (event) => {
|
|
return handleClickOutside(event)
|
|
})
|
|
|
|
window.addEventListener('keydown', (event) => {
|
|
return handleClickOutside(event)
|
|
})
|
|
|
|
return () => {
|
|
window.removeEventListener('click', (event) => {
|
|
return handleClickOutside(event)
|
|
})
|
|
|
|
window.removeEventListener('keydown', (event) => {
|
|
return handleClickOutside(event)
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
return wrapper
|
|
}
|