@helpwave/hightide
Version:
helpwave's component and theming library
113 lines (112 loc) • 3.51 kB
JavaScript
// src/hooks/useHoverState.ts
import { useEffect, useState } from "react";
var defaultUseHoverStateProps = {
closingDelay: 200,
isDisabled: false
};
var useHoverState = (props = void 0) => {
const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
const [isHovered, setIsHovered] = useState(false);
const [timer, setTimer] = useState();
const onMouseEnter = () => {
if (isDisabled) {
return;
}
clearTimeout(timer);
setIsHovered(true);
};
const onMouseLeave = () => {
if (isDisabled) {
return;
}
setTimer(setTimeout(() => {
setIsHovered(false);
}, closingDelay));
};
useEffect(() => {
if (timer) {
return () => {
clearTimeout(timer);
};
}
});
useEffect(() => {
if (timer) {
clearTimeout(timer);
}
}, [isDisabled]);
return {
isHovered,
setIsHovered,
handlers: { onMouseEnter, onMouseLeave }
};
};
// src/components/user-action/Tooltip.tsx
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
var Tooltip = ({
tooltip,
children,
animationDelay = 650,
tooltipClassName = "",
containerClassName = "",
position = "bottom",
zIndex = 10
}) => {
const { isHovered, handlers } = useHoverState();
const positionClasses = {
top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
};
const triangleSize = 6;
const triangleClasses = {
top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
};
const triangleStyle = {
top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
};
return /* @__PURE__ */ jsxs(
"div",
{
className: clsx("relative inline-block", containerClassName),
...handlers,
children: [
children,
isHovered && /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
`opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
positionClasses[position],
tooltipClassName
),
style: { zIndex, animationDelay: animationDelay + "ms" },
children: [
tooltip,
/* @__PURE__ */ jsx(
"div",
{
className: clsx(`absolute w-0 h-0`, triangleClasses[position]),
style: { ...triangleStyle[position], zIndex: zIndex + 1 }
}
)
]
}
)
]
}
);
};
export {
Tooltip
};
//# sourceMappingURL=Tooltip.mjs.map