/
gsam
/
ui-kit-ce
Обзор
Документация
Войти
/
gsam
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/hooks/src/useOutsideClick/useOutsideClick.ts
60 строк
2 KB
Владислав Полюхов
fix(dropdown,hooks): исправлено поведение закрытия компонента
02 дек 2025, 10:16
02 дек 2025, 10:16
8a2bd46
Код
Авторство
О чём код?
'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) { return } const isInside = e.composedPath().some((element) => { if (!(element instanceof Node)) { return false } if (ref.current?.contains(element)) { return true } const id = element instanceof HTMLElement && element.id return id && ref.current?.querySelector(`[aria-controls~="${id}"]`) }) if (!isInside) { 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 }