@wix/design-system
Version:
@wix/design-system
47 lines • 1.38 kB
JavaScript
import { useRef } from 'react';
import { arrow as createArrow, } from '@floating-ui/react';
const ARROW_HEIGHT_PX = 6;
const ARROW_WIDTH_PX = 12;
const getContentOffset = (placement) => {
if (!placement || placement.includes('auto'))
return {};
const contentPlacement = placement.split('-')[0].trim();
if (contentPlacement === 'auto')
return {};
const cssFieldFor = {
top: 'top',
bottom: 'top',
right: 'left',
left: 'left',
};
const offsetFor = {
top: -ARROW_HEIGHT_PX,
bottom: ARROW_HEIGHT_PX,
left: -ARROW_HEIGHT_PX,
right: ARROW_HEIGHT_PX,
};
return {
[cssFieldFor[contentPlacement]]: `${offsetFor[contentPlacement]}px`,
};
};
export const useArrow = (showArrow) => {
const arrowRef = useRef(null);
const getArrowProps = (context) => ({
ref: arrowRef,
context,
width: ARROW_WIDTH_PX,
height: ARROW_HEIGHT_PX,
});
const getContentWithArrowStyles = (floatingPlacement) => (showArrow ? getContentOffset(floatingPlacement) : {});
return {
getArrowProps,
arrowMiddleware: showArrow
? createArrow({
element: arrowRef,
padding: 6,
})
: undefined,
getContentWithArrowStyles,
};
};
//# sourceMappingURL=useArrow.js.map