-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Tooltip with Radix and Tailwind (#709)
* Install @radix-ui/react-tooltip * Use SidebarButton directly * Make attribute value text medium font weight * Update Tooltip to Radix
- Loading branch information
Showing
18 changed files
with
174 additions
and
219 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 6 additions & 18 deletions
24
packages/graph-explorer/src/components/Tooltip/InfoTooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,14 @@ | ||
| import { PropsWithChildren } from "react"; | ||
| import { InfoIcon } from "@/components/icons"; | ||
| import Tooltip from "./Tooltip"; | ||
| import { useTheme } from "@/core"; | ||
| import { Tooltip, TooltipContent, TooltipTrigger } from "@/components"; | ||
|
|
||
| export default function InfoTooltip({ children }: PropsWithChildren) { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <Tooltip text={<div style={{ maxWidth: 300 }}>{children}</div>}> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| gap: 2, | ||
| alignItems: "center", | ||
| justifyItems: "center", | ||
| }} | ||
| > | ||
| <InfoIcon | ||
| color={theme.theme.palette.text.secondary} | ||
| style={{ width: 22, height: 22 }} | ||
| /> | ||
| </div> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <InfoIcon className="text-text-secondary size-6" /> | ||
| </TooltipTrigger> | ||
| <TooltipContent>{children}</TooltipContent> | ||
| </Tooltip> | ||
| ); | ||
| } |
13 changes: 0 additions & 13 deletions
13
packages/graph-explorer/src/components/Tooltip/Tooltip.styles.ts
This file was deleted.
Oops, something went wrong.
118 changes: 22 additions & 96 deletions
118
packages/graph-explorer/src/components/Tooltip/Tooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,29 @@ | ||
| import * as React from "react"; | ||
| import * as TooltipPrimitive from "@radix-ui/react-tooltip"; | ||
| import { cn } from "@/utils"; | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
| import type { PropsWithChildren, ReactNode } from "react"; | ||
| import { cloneElement, useEffect } from "react"; | ||
| import { Arrow, useHover, useLayer } from "react-laag"; | ||
| import type { PlacementType } from "react-laag/dist/PlacementType"; | ||
| import { useWithTheme } from "@/core"; | ||
| import usePrevious from "@/hooks/usePrevious"; | ||
| import { tooltipStyles } from "./Tooltip.styles"; | ||
|
|
||
| function isReactText(children: ReactNode) { | ||
| return ["string", "number"].includes(typeof children); | ||
| } | ||
| const TooltipProvider = TooltipPrimitive.Provider; | ||
|
|
||
| export type TooltipProps = { | ||
| text: ReactNode; | ||
| placement?: PlacementType; | ||
| delayEnter?: number; | ||
| delayLeave?: number; | ||
| triggerOffset?: number; | ||
| className?: string; | ||
| disabled?: boolean; | ||
| onHoverChange?: (isOver: boolean) => void; | ||
| }; | ||
| const Tooltip = TooltipPrimitive.Root; | ||
|
|
||
| export const Tooltip = ({ | ||
| children, | ||
| text, | ||
| placement = "bottom-center", | ||
| delayEnter = 100, | ||
| delayLeave = 300, | ||
| triggerOffset = 8, | ||
| className, | ||
| disabled, | ||
| onHoverChange, | ||
| }: PropsWithChildren<TooltipProps>) => { | ||
| const [isOver, hoverProps] = useHover({ delayEnter, delayLeave }); | ||
| const [isOverTooltip, hoverTooltipProps] = useHover({ | ||
| delayEnter, | ||
| delayLeave, | ||
| }); | ||
| const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({ | ||
| isOpen: !disabled && (isOver || isOverTooltip), | ||
| auto: true, | ||
| placement, | ||
| triggerOffset, | ||
| }); | ||
| const TooltipTrigger = TooltipPrimitive.Trigger; | ||
|
|
||
| const prevIsOver = usePrevious(isOver); | ||
|
|
||
| useEffect(() => { | ||
| if (prevIsOver !== isOver) onHoverChange?.(isOver); | ||
| }, [isOver, onHoverChange, prevIsOver]); | ||
| // when children equals text (string | number), we need to wrap it in an | ||
| // extra span-element in order to attach props | ||
| let trigger; | ||
| if (isReactText(children)) { | ||
| trigger = ( | ||
| <div className="tooltip-text-wrapper" {...triggerProps} {...hoverProps}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } else { | ||
| // In case of an react-element, we need to clone it in order to attach our own props | ||
| trigger = cloneElement(children as any, { | ||
| ...triggerProps, | ||
| ...hoverProps, | ||
| }); | ||
| } | ||
|
|
||
| const stylesWithTheme = useWithTheme(); | ||
|
|
||
| return ( | ||
| <> | ||
| {trigger} | ||
| {renderLayer( | ||
| <AnimatePresence> | ||
| {!disabled && (isOver || isOverTooltip) && ( | ||
| <motion.div | ||
| className={cn(stylesWithTheme(tooltipStyles), className)} | ||
| initial={{ opacity: 0, scale: 0.9 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.9 }} | ||
| transition={{ duration: 0.1 }} | ||
| {...layerProps} | ||
| style={{ pointerEvents: "none", ...layerProps.style }} | ||
| > | ||
| <span {...hoverTooltipProps}>{text}</span> | ||
| <Arrow | ||
| {...arrowProps} | ||
| backgroundColor="rgb(78, 78, 78)" | ||
| borderColor="transparent" | ||
| size={6} | ||
| /> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ className, sideOffset = 4, ...props }, ref) => ( | ||
| <TooltipPrimitive.Portal> | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "bg-text-primary text-background-default animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-tooltip max-w-96 overflow-hidden rounded-md px-3 py-1.5 text-sm", | ||
| className | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
| {...props} | ||
| /> | ||
| </TooltipPrimitive.Portal> | ||
| )); | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName; | ||
|
|
||
| export default Tooltip; | ||
| export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,2 @@ | ||
| export { default as Tooltip } from "./Tooltip"; | ||
| export * from "./Tooltip"; | ||
| export { default as InfoTooltip } from "./InfoTooltip"; | ||
| export type { TooltipProps } from "./Tooltip"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.