@zohodesk/hooks/es/utils/useClickOutside.js

Unified Component Library - Hooks

import { useEffect } from 'react';
import useEvent from "./useEvent";
let clickOutsideHandlers = [];

function handleClick(eve) {
  let fn = clickOutsideHandlers[clickOutsideHandlers.length - 1];
  fn(eve);
}

function addClickOutsideHandler(handler) {
  if (clickOutsideHandlers.length === 0) {
    document.addEventListener('click', handleClick);
  }

  clickOutsideHandlers.push(handler);
}

function removeClickOutsideHandler(handler) {
  clickOutsideHandlers = clickOutsideHandlers.filter(escHanlder => escHanlder !== handler);

  if (clickOutsideHandlers.length === 0) {
    document.removeEventListener('click', handleClick);
  }
}

export default function useClickOutside(_ref) {
  let {
    getElements,
    callback,
    isRegister
  } = _ref;
  const clickOutside = useEvent(event => {
    const elements = getElements() || [];
    let isTargetContains = false;
    elements.length > 0 && elements.map(elem => {
      if (elem.contains(event.target)) {
        isTargetContains = true;
      }
    });

    if (isTargetContains) {
      return;
    }

    callback(event);
  });
  useEffect(() => {
    if (isRegister) {
      addClickOutsideHandler(clickOutside);
    } else {
      removeClickOutsideHandler(clickOutside);
    }

    return () => removeClickOutsideHandler(clickOutside);
  }, [isRegister]);
}