mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
33 lines (32 loc) • 962 B
JavaScript
import { arrow, autoPlacement, flip, offset, shift } from '@floating-ui/react';
/**
* @see https://floating-ui.com/docs/middleware
*/
export const getMiddleware = ({ arrowRef, placement, }) => {
const middleware = [];
//eslint-disable-next-line
//@ts-ignore
middleware.push(offset(8));
//eslint-disable-next-line
//@ts-ignore
middleware.push(placement === 'auto' ? autoPlacement() : flip());
//eslint-disable-next-line
//@ts-ignore
middleware.push(shift({ padding: 8 }));
if (arrowRef?.current) {
//@ts-ignore
middleware.push(arrow({ element: arrowRef.current }));
}
return middleware;
};
export const getPlacement = ({ placement }) => {
return placement === 'auto' ? undefined : placement;
};
export const getArrowPlacement = ({ placement }) => {
return {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
}[placement.split('-')[0]];
};