@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
108 lines (105 loc) • 4.08 kB
JavaScript
'use client';
import { TooltipGroupHandleContext, TooltipGroupPropsContext } from "./groupContext.mjs";
import { placementMap } from "../utils/placement.mjs";
import { TooltipArrowIcon } from "./ArrowIcon.mjs";
import TooltipContent_default from "./TooltipContent.mjs";
import { useTooltipPortalContainer } from "./TooltipPortal.mjs";
import { styles } from "./style.mjs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { Tooltip } from "@base-ui/react/tooltip";
//#region src/Tooltip/TooltipGroup.tsx
const TooltipGroup = ({ children, layoutAnimation = false, ...sharedProps }) => {
const handle = useMemo(() => Tooltip.createHandle(), []);
const activeItemRef = useRef(null);
const [updateKey, setUpdateKey] = useState(0);
useEffect(() => {
setUpdateKey((prev) => prev + 1);
}, [handle]);
const handleOpenChange = useCallback((open) => {
activeItemRef.current?.onOpenChange?.(open);
}, []);
const portalContainer = useTooltipPortalContainer();
return /* @__PURE__ */ jsx(TooltipGroupHandleContext.Provider, {
value: handle,
children: /* @__PURE__ */ jsxs(TooltipGroupPropsContext.Provider, {
value: sharedProps,
children: [children, /* @__PURE__ */ jsx(Tooltip.Root, {
handle,
onOpenChange: handleOpenChange,
children: ({ payload }) => {
const item = payload ?? null;
activeItemRef.current = item;
if (!item || item.title == null && !item.hotkey) return null;
const arrow = item.arrow ?? true;
const placement = item.placement ?? "top";
const placementConfig = placementMap[placement] ?? placementMap.top;
const baseSideOffset = arrow ? 8 : 6;
const resolvedClassNames = {
arrow: cx(styles.arrow, item.classNames?.arrow),
popup: cx(styles.popup, item.className, item.classNames?.root, item.classNames?.container),
positioner: styles.positioner,
viewport: cx(styles.viewport, item.classNames?.content)
};
const resolvedStyleProps = (() => {
if (typeof item.styles === "function") return void 0;
return item.styles;
})();
const resolvedStyles = {
arrow: resolvedStyleProps?.arrow,
popup: {
...resolvedStyleProps?.root,
...resolvedStyleProps?.container
},
positioner: { zIndex: item.zIndex ?? 1100 },
viewport: resolvedStyleProps?.content
};
const body = layoutAnimation ? /* @__PURE__ */ jsx(Tooltip.Viewport, {
className: resolvedClassNames.viewport,
style: resolvedStyles.viewport,
children: /* @__PURE__ */ jsx(TooltipContent_default, {
hotkey: item.hotkey,
hotkeyProps: item.hotkeyProps,
title: item.title
})
}) : /* @__PURE__ */ jsx("div", {
className: resolvedClassNames.viewport,
style: resolvedStyles.viewport,
children: /* @__PURE__ */ jsx(TooltipContent_default, {
hotkey: item.hotkey,
hotkeyProps: item.hotkeyProps,
title: item.title
})
});
const popup = /* @__PURE__ */ jsx(Tooltip.Positioner, {
align: placementConfig.align,
className: resolvedClassNames.positioner,
"data-placement": placement,
side: placementConfig.side,
sideOffset: baseSideOffset,
style: resolvedStyles.positioner,
children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
className: resolvedClassNames.popup,
style: resolvedStyles.popup,
children: [arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, {
className: resolvedClassNames.arrow,
style: resolvedStyles.arrow,
children: TooltipArrowIcon
}), body]
})
});
return item.portalled ?? true ? portalContainer ? /* @__PURE__ */ jsx(Tooltip.Portal, {
container: portalContainer,
children: popup
}) : null : popup;
}
}, updateKey)]
})
});
};
TooltipGroup.displayName = "TooltipGroup";
var TooltipGroup_default = TooltipGroup;
//#endregion
export { TooltipGroup_default as default };
//# sourceMappingURL=TooltipGroup.mjs.map