mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-21 23:18:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Move tooltip provider to app root instead of component root (#1439)

Browse Source 
move tooltip provider to app root instead of component root
This commit is contained in:
Brendan Allan
2023-10-07 11:46:44 +08:00
committed by GitHub
parent 97a86a9fbb
commit 3624c8f4e2
2 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
interface/index.tsx
View File

@@ -16,6 +16,7 @@ import {
useDebugState,
useLoadBackendFeatureFlags
} from '@sd/client';
import { TooltipProvider } from '@sd/ui';
import { P2P } from './app/p2p';
import { WithPrismTheme } from './components/TextViewer/prism';
@@ -59,14 +60,16 @@ export const SpacedriveInterface = (props: { router: RouterProviderProps['router
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<P2PContextProvider>
<NotificationContextProvider>
<P2P />
<Devtools />
<WithPrismTheme />
<RouterProvider router={props.router} />
</NotificationContextProvider>
</P2PContextProvider>
<TooltipProvider>
<P2PContextProvider>
<NotificationContextProvider>
<P2P />
<Devtools />
<WithPrismTheme />
<RouterProvider router={props.router} />
</NotificationContextProvider>
</P2PContextProvider>
</TooltipProvider>
</ErrorBoundary>
);
};

79
packages/ui/src/Tooltip.tsx
View File

@@ -11,7 +11,6 @@ export interface TooltipProps extends PropsWithChildren {
tooltipClassName?: string;
labelClassName?: string;
asChild?: boolean;
hoverable?: boolean;
keybinds?: Array<String | keyof typeof ModifierKeys>;
}
@@ -30,45 +29,45 @@ const separateKeybinds = (keybinds: TooltipProps['keybinds']): TooltipProps['key
return arr;
};
export const Tooltip = ({ position = 'bottom', hoverable = true, ...props }: TooltipProps) => {
export const Tooltip = ({ position = 'bottom', ...props }: TooltipProps) => {
return (
<TooltipPrimitive.Provider disableHoverableContent={!hoverable}>
<TooltipPrimitive.Root>
<TooltipPrimitive.Trigger asChild>
{props.asChild ? (
props.children
) : (
<span className={props.className}>{props.children}</span>
)}
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Portal>
{props.label && (
<TooltipPrimitive.Content
side={position}
className={clsx(
'TooltipContent z-50 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
props.tooltipClassName
)}
>
<p className={props.labelClassName}>{props.label}</p>
{props.keybinds && (
<div className="flex items-center justify-center gap-1">
{separateKeybinds(props.keybinds)?.map((k, _) => (
<kbd
key={k.toString()}
className={
'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
}
>
<p>{k}</p>
</kbd>
))}
</div>
)}
</TooltipPrimitive.Content>
)}
</TooltipPrimitive.Portal>
</TooltipPrimitive.Root>
</TooltipPrimitive.Provider>
<TooltipPrimitive.Root>
<TooltipPrimitive.Trigger asChild>
{props.asChild ? (
props.children
) : (
<span className={props.className}>{props.children}</span>
)}
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Portal>
{props.label && (
<TooltipPrimitive.Content
side={position}
className={clsx(
'TooltipContent z-50 m-2 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
props.tooltipClassName
)}
>
<p className={props.labelClassName}>{props.label}</p>
{props.keybinds && (
<div className="flex items-center justify-center gap-1">
{separateKeybinds(props.keybinds)?.map((k, _) => (
<kbd
key={k.toString()}
className={
'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
}
>
<p>{k}</p>
</kbd>
))}
</div>
)}
</TooltipPrimitive.Content>
)}
</TooltipPrimitive.Portal>
</TooltipPrimitive.Root>
);
};
export const TooltipProvider = TooltipPrimitive.Provider;