@primer/components
Version:
Primer react components
35 lines (34 loc) • 1.75 kB
JavaScript
import React from 'react';
import { getAnchoredPosition } from '../behaviors/anchoredPosition';
import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
import { useResizeObserver } from './useResizeObserver';
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect';
/**
* Calculates the top and left values for an absolutely-positioned floating element
* to be anchored to some anchor element. Returns refs for the floating element
* and the anchor element, along with the position.
* @param settings Settings for calculating the anchored position.
* @param dependencies Dependencies to determine when to re-calculate the position.
* @returns An object of {top: number, left: number} to absolutely-position the
* floating element.
*/
export function useAnchoredPosition(settings, dependencies = []) {
const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
const [position, setPosition] = React.useState(undefined);
const updatePosition = React.useCallback(() => {
if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
setPosition(getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings));
} else {
setPosition(undefined);
}
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[floatingElementRef, anchorElementRef, ...dependencies]);
useLayoutEffect(updatePosition, [updatePosition]);
useResizeObserver(updatePosition);
return {
floatingElementRef,
anchorElementRef,
position
};
}