@wix/design-system
Version:
@wix/design-system
77 lines • 2.91 kB
JavaScript
import { useEffect, useMemo, useState } from 'react';
import { getByPredicate, getScrollParent } from '../utils/utils';
import { APPEND_TO } from '../PopoverNext.constants';
export const usePositioning = ({ flip = true, fixed = false, placement, appendTo, rootRef, }) => {
const [portalRoot, setPortalRoot] = useState(null);
// TODO: check if a rerender can be avoided
// https://github.com/wix-private/wix-design-systems/pull/14279#discussion_r1842099301
useEffect(() => {
if (typeof appendTo === 'function' && rootRef?.current) {
const parent = getByPredicate(appendTo, rootRef.current);
setPortalRoot(parent);
}
else if (appendTo === APPEND_TO.scrollParent && rootRef?.current) {
const parent = getScrollParent(rootRef.current);
setPortalRoot(parent);
}
}, [appendTo, rootRef]);
const shouldShiftByCrossAxis = useMemo(() => {
if (typeof appendTo === 'function') {
return false;
}
if (appendTo === APPEND_TO.viewport) {
return true;
}
return false;
}, [appendTo]);
const isMainAxis = placement.includes('left') || placement.includes('right');
const isFlipPlacement = (placement) => {
// PopperJS placement options that are not supported in floating-ui placement
const unsupportedPlacements = ['auto', 'auto-start', 'auto-end'];
return !unsupportedPlacements.find((unsupported) => unsupported === placement);
};
const getAutoPlacement = (placement) => {
switch (placement) {
case 'auto-end':
return 'end';
case 'auto-start':
return 'start';
default:
return undefined;
}
};
const flipPlacement = isFlipPlacement(placement) ? placement : undefined;
const getFallbackPlacements = (placement) => {
if (fixed) {
return flip ? undefined : [placement];
}
return placement === 'bottom' ? ['bottom', 'top'] : undefined;
};
return {
...(!!flipPlacement
? {
flip: {
fallbackAxisSideDirection: 'end',
mainAxis: isMainAxis || (flip && !fixed),
padding: 5,
crossAxis: false,
fallbackPlacements: getFallbackPlacements(flipPlacement),
},
}
: {
autoPlacement: {
padding: 5,
autoAlignment: false,
alignment: getAutoPlacement(placement),
},
}),
shift: {
padding: 5,
crossAxis: shouldShiftByCrossAxis,
mainAxis: !fixed,
},
portalRoot,
placement: flipPlacement,
};
};
//# sourceMappingURL=usePositioning.js.map