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