forked from crowetic/commerce
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import React, {
|
|
FunctionComponent,
|
|
MutableRefObject,
|
|
useEffect,
|
|
useRef,
|
|
} from 'react'
|
|
|
|
import { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
export interface ClickOutsideProps {
|
|
onClickOutside: (e?: MouseEvent) => void
|
|
children: React.ReactNode | any
|
|
render: () => void
|
|
}
|
|
|
|
export default class ClickOutside extends Component<ClickOutsideProps> {
|
|
public domNode: Element | null = null
|
|
|
|
handleRef = (element) => {
|
|
this.domNode = element
|
|
}
|
|
|
|
public componentDidMount() {
|
|
document.addEventListener('click', this.handleClick, true)
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
document.removeEventListener('mousedown', this.handleClick, true)
|
|
document.removeEventListener('touchstart', this.handleClick, true)
|
|
}
|
|
|
|
public handleClick = (event) => {
|
|
function hasParent(element, root) {
|
|
return root && root.contains(element)
|
|
}
|
|
|
|
if (!hasParent(event.target, this.domNode)) {
|
|
if (typeof this.props.onClickOutside === 'function') {
|
|
this.props.onClickOutside(event)
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return null
|
|
// return this.props.render({
|
|
// innerRef: this.handleRef,
|
|
// });
|
|
}
|
|
}
|