@geneui/components/hooks/useClickOutside.js

The Gene UI components library designed for BI tools

import { useRef, useCallback, useEffect } from 'react';

function useClickOutside(callback, relativeElements) {
  const ref = useRef();
  const handleClickOutside = useCallback(e => {
    var _ref$current;
    const {
      target
    } = e;
    const isNotRelativeTarget = Array.isArray(relativeElements) && relativeElements.length ? relativeElements === null || relativeElements === void 0 ? void 0 : relativeElements.find(relativeRef => {
      var _relativeRef$current;
      return !((_relativeRef$current = relativeRef.current) !== null && _relativeRef$current !== void 0 && _relativeRef$current.contains(target));
    }) : true;
    if (ref.current && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && isNotRelativeTarget) {
      callback && callback(e);
    }
  }, [ref.current, callback, relativeElements]);
  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [handleClickOutside]);
  return node => ref.current = node;
}

export { useClickOutside as default };