60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { TooltipPositionContext } from "@root/src/contexts/TooltipPositionContext";
|
|
import {
|
|
ButtonHTMLAttributes,
|
|
ReactNode,
|
|
useCallback,
|
|
useContext,
|
|
useMemo,
|
|
} from "react";
|
|
|
|
interface RoundButtonBaseProps {
|
|
children: ReactNode;
|
|
buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
|
|
tooltipText?: string;
|
|
}
|
|
|
|
const RoundButtonBase: React.FC<RoundButtonBaseProps> = ({
|
|
children,
|
|
buttonProps,
|
|
tooltipText,
|
|
}) => {
|
|
const tooltipPosition = useContext(TooltipPositionContext);
|
|
const chooseTooltipPosition = useCallback(() => {
|
|
if (tooltipPosition === "top") return "tooltip-top";
|
|
if (tooltipPosition === "bottom") return "tooltip-bottom";
|
|
if (tooltipPosition === "left") return "tooltip-left";
|
|
if (tooltipPosition === "right") return "tooltip-right";
|
|
}, [tooltipPosition]);
|
|
|
|
const roundButtonBase = useMemo(() => {
|
|
const tooltipDivProps = {
|
|
className: "tooltip" + " " + chooseTooltipPosition(),
|
|
"data-tip": tooltipText,
|
|
};
|
|
if (!tooltipText || !tooltipPosition)
|
|
return (
|
|
<button className={"btn btn-outline btn-circle"} {...buttonProps}>
|
|
{children}
|
|
</button>
|
|
);
|
|
else {
|
|
return (
|
|
<div {...tooltipDivProps}>
|
|
<button className={"btn btn-outline btn-circle"} {...buttonProps}>
|
|
{children}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
}, [
|
|
buttonProps,
|
|
children,
|
|
chooseTooltipPosition,
|
|
tooltipPosition,
|
|
tooltipText,
|
|
]);
|
|
return roundButtonBase;
|
|
};
|
|
|
|
export default RoundButtonBase;
|