43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import {
|
|
TooltipPositionContext,
|
|
TooltipPositionContextType,
|
|
} from "@root/src/contexts/TooltipPositionContext";
|
|
import React, { useCallback } from "react";
|
|
// Local Interfaces
|
|
interface OverlayButtonContainerProps {
|
|
children: React.ReactNode;
|
|
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
horizontal?: boolean;
|
|
tooltipPosition?: TooltipPositionContextType;
|
|
}
|
|
|
|
const MenuContainer: React.FC<OverlayButtonContainerProps> = ({
|
|
children,
|
|
position = "top-right",
|
|
horizontal,
|
|
tooltipPosition = undefined,
|
|
}) => {
|
|
const chooseContainerPosition = useCallback(() => {
|
|
const commonClasses = `z-50 menu bg-base-300 rounded-box gap-4 absolute ${horizontal ? "menu-horizontal" : ""} `;
|
|
if (position === "top-left") return commonClasses + "top-2 left-2";
|
|
if (position === "top-right") return commonClasses + "top-2 right-2";
|
|
if (position === "bottom-left") return commonClasses + "bottom-2 left-2";
|
|
if (position === "bottom-right") return commonClasses + "bottom-2 right-2";
|
|
}, [horizontal, position]);
|
|
|
|
const overlayButtonContainer = () => {
|
|
const divProps = {
|
|
className: chooseContainerPosition(),
|
|
};
|
|
return (
|
|
<TooltipPositionContext.Provider value={tooltipPosition}>
|
|
<div {...divProps}>{children}</div>
|
|
</TooltipPositionContext.Provider>
|
|
);
|
|
};
|
|
|
|
return overlayButtonContainer();
|
|
};
|
|
|
|
export default MenuContainer;
|