@zohodesk/hooks/es/popup/usePopupObservers.js

Unified Component Library - Hooks

import useEvent from "../utils/useEvent";
import useWindowResize from "../utils/useWindowResize";
import useIntersectionObserver from "../utils/useIntersectionObserver";
import useResizeObserver from "../utils/useResizeObserver";
/**
 * @param  {Boolean} {isObserve
 * @param  {Boolean} isAbsolutePosition
 * @param  {Function} handleClosePopup
 * @param  {Function} reCalcFloating
 * @param  {Function} getTargetElement
 * @param  {Function} getDropdownElement}
 */

export default function usePopupObservers(_ref) {
  let {
    isObserve,
    isAbsolutePosition,
    handleClosePopup,
    reCalcFloating,
    getTargetElement,
    getDropdownElement
  } = _ref;
  useWindowResize({
    isObserve,
    callback: reCalcFloating
  });
  const checkVisibility = useEvent((elem, entry) => {
    const isVisible = entry.intersectionRatio > 0;

    if (!isVisible && !isAbsolutePosition) {
      handleClosePopup();
    }
  });
  useIntersectionObserver({
    getElement: getTargetElement,
    callback: checkVisibility,
    isObserve
  });
  const reCalcDropboxPosition = useEvent((elem, entry) => {
    if (!entry.isIntersecting) {
      reCalcFloating();
    }
  });
  useIntersectionObserver({
    getElement: getDropdownElement,
    callback: reCalcDropboxPosition,
    isObserve,
    options: {
      isStartIntersecting: true
    }
  });
  useResizeObserver({
    getElement: getTargetElement,
    callback: reCalcFloating,
    isObserve
  });
  useResizeObserver({
    getElement: getDropdownElement,
    callback: reCalcFloating,
    isObserve
  });
}