/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/hooks/src/useOutsideClick/useOutsideClick.ts
47 строк
1 KB
Урядышев Павел Александрович
fix(drawer): исправлена ошибка закрытия Drawer без backdrop в ShadowRoot
23 окт 2025, 15:51
23 окт 2025, 15:51
ca6bbdc
Код
Авторство
О чём код?
'use client' import { useCallback, useRef } from 'react' /** * Обработка события клика за пределами переданных элементов. * Targets - это элементы, за пределами которых необходимо отслеживать событие 'click'. * * @param handler */ export const useOutsideClick = <Ref extends HTMLElement>( handler: (e?: Event) => void ): ((node: Ref | null) => void) => { const ref = useRef<Ref | null>(null) const handleMouseDown = useCallback( (e: Event) => { // Если клик происходит за пределами целевого элемента, вызвать обработчик if ( !ref.current?.contains(e.target as Node) && !ref.current?.contains(e.composedPath()[0] as HTMLElement) ) { handler(e) } }, [handler] ) const callbackRef = useCallback<(node: Ref | null) => void>( (node) => { if (ref.current) { document.removeEventListener('mousedown', handleMouseDown, true) document.removeEventListener('touchstart', handleMouseDown, true) } ref.current = node if (ref.current) { document.addEventListener('mousedown', handleMouseDown, true) document.addEventListener('touchstart', handleMouseDown, true) } }, [handleMouseDown] ) return callbackRef }