mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
tooltip component
This commit is contained in:
Red Adaya
parent
7bca363932
commit
65a802b005
10
frontend/app/element/tooltip.scss
Normal file
10
frontend/app/element/tooltip.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// Copyright 2024, Command Line Inc.
|
||||||
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
width: max-content;
|
||||||
|
background-color: rgb(from var(--block-bg-color) r g b / 70%);
|
||||||
|
color: var(--main-text-color);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
113
frontend/app/element/tooltip.stories.tsx
Normal file
113
frontend/app/element/tooltip.stories.tsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
// Copyright 2024, Command Line Inc.
|
||||||
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
|
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
|
||||||
|
|
||||||
|
import "./tooltip.scss";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Tooltip> = {
|
||||||
|
title: "Elements/Tooltip",
|
||||||
|
component: Tooltip,
|
||||||
|
argTypes: {
|
||||||
|
placement: {
|
||||||
|
description: "Placement of the tooltip relative to the trigger",
|
||||||
|
control: {
|
||||||
|
type: "select",
|
||||||
|
options: ["top", "left", "bottom", "right"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
description: "Custom class for styling the tooltip content",
|
||||||
|
control: { type: "text" },
|
||||||
|
},
|
||||||
|
initialOpen: {
|
||||||
|
description: "Initial open state of the tooltip (uncontrolled mode)",
|
||||||
|
control: { type: "boolean" },
|
||||||
|
},
|
||||||
|
open: {
|
||||||
|
description: "Controlled open state of the tooltip",
|
||||||
|
control: { type: "boolean" },
|
||||||
|
},
|
||||||
|
showArrow: {
|
||||||
|
description: "Whether to show an arrow for the tooltip",
|
||||||
|
control: { type: "boolean" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Tooltip>;
|
||||||
|
|
||||||
|
export const Uncontrolled: Story = {
|
||||||
|
render: (args) => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "600px",
|
||||||
|
padding: "20px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="App">
|
||||||
|
<Tooltip {...args}>
|
||||||
|
<TooltipTrigger>Top</TooltipTrigger>
|
||||||
|
<TooltipContent className="tooltip">Top Tooltip</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip {...args} placement="left">
|
||||||
|
<TooltipTrigger>Left</TooltipTrigger>
|
||||||
|
<TooltipContent className="tooltip">Left Tooltip</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip {...args} placement="bottom">
|
||||||
|
<TooltipTrigger>Bottom</TooltipTrigger>
|
||||||
|
<TooltipContent className="tooltip">Bottom Tooltip</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip {...args} placement="right">
|
||||||
|
<TooltipTrigger>Right</TooltipTrigger>
|
||||||
|
<TooltipContent className="tooltip">Right Tooltip</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
args: {
|
||||||
|
initialOpen: false,
|
||||||
|
placement: "top",
|
||||||
|
className: "custom-tooltip",
|
||||||
|
showArrow: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Controlled Tooltip Example
|
||||||
|
export const Controlled: Story = {
|
||||||
|
render: (args) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "600px",
|
||||||
|
padding: "20px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="App">
|
||||||
|
<Tooltip {...args} open={open} onOpenChange={setOpen}>
|
||||||
|
<TooltipTrigger onClick={() => setOpen((v) => !v)}>My Trigger</TooltipTrigger>
|
||||||
|
<TooltipContent className="tooltip">My tooltip</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
placement: "top",
|
||||||
|
className: "custom-tooltip",
|
||||||
|
showArrow: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
191
frontend/app/element/tooltip.tsx
Normal file
191
frontend/app/element/tooltip.tsx
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
// Copyright 2024, Command Line Inc.
|
||||||
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
|
|
||||||
|
import type { Placement } from "@floating-ui/react";
|
||||||
|
import {
|
||||||
|
arrow,
|
||||||
|
autoUpdate,
|
||||||
|
flip,
|
||||||
|
FloatingPortal,
|
||||||
|
offset,
|
||||||
|
shift,
|
||||||
|
useDismiss,
|
||||||
|
useFloating,
|
||||||
|
useFocus,
|
||||||
|
useHover,
|
||||||
|
useInteractions,
|
||||||
|
useRole,
|
||||||
|
} from "@floating-ui/react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
interface TooltipOptions {
|
||||||
|
initialOpen?: boolean;
|
||||||
|
placement?: Placement;
|
||||||
|
open?: boolean;
|
||||||
|
className?: string;
|
||||||
|
showArrow?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTooltip({
|
||||||
|
initialOpen = false,
|
||||||
|
placement = "top",
|
||||||
|
open: controlledOpen,
|
||||||
|
onOpenChange: setControlledOpen,
|
||||||
|
}: TooltipOptions = {}) {
|
||||||
|
const arrowRef = React.useRef(null);
|
||||||
|
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
|
||||||
|
|
||||||
|
const open = controlledOpen ?? uncontrolledOpen;
|
||||||
|
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
||||||
|
|
||||||
|
const data = useFloating({
|
||||||
|
placement,
|
||||||
|
open,
|
||||||
|
onOpenChange: setOpen,
|
||||||
|
whileElementsMounted: autoUpdate,
|
||||||
|
middleware: [offset(5), flip(), shift(), arrow({ element: arrowRef })],
|
||||||
|
});
|
||||||
|
|
||||||
|
const context = data.context;
|
||||||
|
|
||||||
|
const hover = useHover(context, {
|
||||||
|
move: false,
|
||||||
|
enabled: controlledOpen == null,
|
||||||
|
});
|
||||||
|
const focus = useFocus(context, {
|
||||||
|
enabled: controlledOpen == null,
|
||||||
|
});
|
||||||
|
const dismiss = useDismiss(context);
|
||||||
|
const role = useRole(context, { role: "tooltip" });
|
||||||
|
|
||||||
|
const interactions = useInteractions([hover, focus, dismiss, role]);
|
||||||
|
|
||||||
|
return React.useMemo(
|
||||||
|
() => ({
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
arrowRef,
|
||||||
|
...interactions,
|
||||||
|
...data,
|
||||||
|
}),
|
||||||
|
[open, setOpen, arrowRef, interactions, data]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type ContextType = ReturnType<typeof useTooltip> | null;
|
||||||
|
|
||||||
|
const TooltipContext = React.createContext<ContextType>(null);
|
||||||
|
|
||||||
|
export const useTooltipState = () => {
|
||||||
|
const context = React.useContext(TooltipContext);
|
||||||
|
|
||||||
|
if (context == null) {
|
||||||
|
throw new Error("Tooltip components must be wrapped in <Tooltip />");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Tooltip({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {
|
||||||
|
// This can accept any props as options, e.g. `placement`,
|
||||||
|
// or other positioning options.
|
||||||
|
const tooltip = useTooltip(options);
|
||||||
|
return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
|
||||||
|
function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
|
||||||
|
const state = useTooltipState();
|
||||||
|
|
||||||
|
const setRefs = (node: HTMLElement | null) => {
|
||||||
|
state.refs.setReference(node); // Use Floating UI's ref for trigger
|
||||||
|
if (typeof propRef === "function") propRef(node);
|
||||||
|
else if (propRef) (propRef as React.MutableRefObject<HTMLElement | null>).current = node;
|
||||||
|
|
||||||
|
// Handle child ref only if it's not a ReactPortal
|
||||||
|
if (React.isValidElement(children) && children.type !== React.Fragment && "ref" in children) {
|
||||||
|
if (typeof children.ref === "function") children.ref(node);
|
||||||
|
else (children.ref as React.MutableRefObject<HTMLElement | null>).current = node;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Allow custom elements with asChild
|
||||||
|
if (asChild && React.isValidElement(children)) {
|
||||||
|
return React.cloneElement(
|
||||||
|
children,
|
||||||
|
state.getReferenceProps({
|
||||||
|
ref: setRefs,
|
||||||
|
...props,
|
||||||
|
...children.props,
|
||||||
|
"data-state": state.open ? "open" : "closed",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default trigger as a button
|
||||||
|
return (
|
||||||
|
<button ref={setRefs} data-state={state.open ? "open" : "closed"} {...state.getReferenceProps(props)}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
|
||||||
|
function TooltipContent(props, propRef) {
|
||||||
|
const state = useTooltipState();
|
||||||
|
|
||||||
|
const ref = React.useMemo(() => {
|
||||||
|
const setRef = (node: HTMLDivElement | null) => {
|
||||||
|
state.refs.setFloating(node); // Use `refs.setFloating` from `useFloating`
|
||||||
|
if (typeof propRef === "function") propRef(node);
|
||||||
|
else if (propRef) (propRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
|
||||||
|
};
|
||||||
|
return setRef;
|
||||||
|
}, [state.refs.setFloating, propRef]);
|
||||||
|
|
||||||
|
const { x: arrowX, y: arrowY } = state.middlewareData.arrow ?? {};
|
||||||
|
|
||||||
|
const staticSide =
|
||||||
|
{
|
||||||
|
top: "bottom",
|
||||||
|
right: "left",
|
||||||
|
bottom: "top",
|
||||||
|
left: "right",
|
||||||
|
}[state.placement.split("-")[0]] ?? "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FloatingPortal>
|
||||||
|
{state.open && (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
style={{
|
||||||
|
position: state.strategy,
|
||||||
|
top: state.y ?? 0,
|
||||||
|
left: state.x ?? 0,
|
||||||
|
visibility: state.x == null ? "hidden" : "visible",
|
||||||
|
...props.style,
|
||||||
|
}}
|
||||||
|
{...state.getFloatingProps(props)}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
<div
|
||||||
|
ref={state.arrowRef}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
width: "10px",
|
||||||
|
height: "10px",
|
||||||
|
background: "inherit",
|
||||||
|
left: arrowX != null ? `${arrowX}px` : "",
|
||||||
|
top: arrowY != null ? `${arrowY}px` : "",
|
||||||
|
[staticSide]: "-5px",
|
||||||
|
transform: "rotate(45deg)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FloatingPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
Loading…
Reference in New Issue
Block a user