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

Unified Component Library - Hooks

import { useState } from 'react';
import getCustomBoundingClientRect from '@zohodesk/utils/es/getCustomBoundingClientRect';
import useFloating from "../floating/useFloatingLayer";
import useEvent from "../utils/useEvent";
export default function usePopupFloating(_ref) {
  let {
    getTargetElement,
    getDropdownElement,
    defaultPosition = 'bottomCenter',
    isAbsolutePosition = true,
    isArrow = true,
    customPositionOrder,
    onTargetMovement
  } = _ref;
  const [floating, setFloating] = useState({}); // --- Floating data ---

  const getFloatingData = useFloating(getTargetElement, getDropdownElement, {
    defaultPosition,
    isAbsolute: isAbsolutePosition,
    needArrow: isArrow,
    preferredPositions: customPositionOrder
  });
  const reCalcFloating = useEvent(() => {
    const floatingDataObj = getFloatingData();

    if (JSON.stringify(floating) !== JSON.stringify(floatingDataObj)) {
      setFloating(floatingDataObj);
    }

    const measurement = getCustomBoundingClientRect(getTargetElement());
    onTargetMovement && onTargetMovement(measurement);
  });
  return {
    floating,
    reCalcFloating
  };
}