forked from crowetic/commerce
43 lines
938 B
TypeScript
43 lines
938 B
TypeScript
import React, { useRef, useEffect, MouseEvent } from 'react'
|
|
import hasParent from './has-parent'
|
|
|
|
interface ClickOutsideProps {
|
|
active: boolean
|
|
onClick: (e?: MouseEvent) => void
|
|
children: any
|
|
}
|
|
|
|
const ClickOutside = ({
|
|
active = true,
|
|
onClick,
|
|
children,
|
|
}: ClickOutsideProps) => {
|
|
const innerRef = useRef()
|
|
|
|
const handleClick = (event: any) => {
|
|
if (!hasParent(event.target, innerRef?.current)) {
|
|
if (typeof onClick === 'function') {
|
|
onClick(event)
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (active) {
|
|
document.addEventListener('mousedown', handleClick)
|
|
document.addEventListener('touchstart', handleClick)
|
|
}
|
|
|
|
return () => {
|
|
if (active) {
|
|
document.removeEventListener('mousedown', handleClick)
|
|
document.removeEventListener('touchstart', handleClick)
|
|
}
|
|
}
|
|
})
|
|
|
|
return React.cloneElement(children, { ref: innerRef })
|
|
}
|
|
|
|
export default ClickOutside
|