refactor(Tooltip): make Tooltip API simpler

bleu · Apr 15, 2024 · 096c9e0 · 096c9e0
1 parent 89df143
commit 096c9e0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 49 deletions.
diff --git a/src/components/Plot/index.tsx b/src/components/Plot/index.tsx
@@ -3,13 +3,7 @@ import { merge } from "lodash";
 import { PlotParams } from "react-plotly.js";
 import React, { Suspense, lazy } from "react";
 import { cn } from "#/lib";
-import {
-  ChartSkeleton,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "..";
+import { ChartSkeleton, Tooltip, TooltipTrigger } from "..";
 
 // @ts-ignore Type 'Promise<typeof /@types/react-plotly.js/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'
 const PlotPrimitive = lazy(() => import("react-plotly.js"));
@@ -76,22 +70,13 @@ export function PlotTitle({
     >
       <h2 className="text-lg font-semibold text-white">{title}</h2>
       {tooltip && (
-        <TooltipProvider>
-          <Tooltip>
-            {tooltip && (
-              <>
-                <div className="flex items-center gap-x-2">
-                  <TooltipTrigger disabled>
-                    <InfoCircledIcon />
-                  </TooltipTrigger>
-                </div>
-                <TooltipContent>
-                  <p>{tooltip}</p>
-                </TooltipContent>
-              </>
-            )}
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip content={tooltip}>
+          <div className="flex items-center gap-x-2">
+            <TooltipTrigger disabled>
+              <InfoCircledIcon />
+            </TooltipTrigger>
+          </div>
+        </Tooltip>
       )}
     </div>
   );

diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
@@ -13,7 +13,7 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
 import { cn } from "#/lib/utils";
 import { Label } from "#/components/ui/Label";
 import { useRailsApp } from "../RailsApp/context";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from ".";
+import { Tooltip } from ".";
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -125,28 +125,17 @@ const FormLabel = React.forwardRef<
   const { error, formItemId } = useFormField();
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <div className="flex items-center gap-x-2">
-          <Label
-            ref={ref}
-            className={cn(error && "text-destructive", className)}
-            htmlFor={formItemId}
-            {...props}
-          />
-          {tooltip && (
-            <TooltipTrigger disabled>
-              <InfoCircledIcon />
-            </TooltipTrigger>
-          )}
-        </div>
-        {tooltip && (
-          <TooltipContent>
-            <p>{tooltip}</p>
-          </TooltipContent>
-        )}
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip content={tooltip}>
+      <div className="flex items-center gap-x-2">
+        <Label
+          ref={ref}
+          className={cn(error && "text-destructive", className)}
+          htmlFor={formItemId}
+          {...props}
+        />
+        {tooltip && <InfoCircledIcon />}
+      </div>
+    </Tooltip>
   );
 });
 FormLabel.displayName = "FormLabel";

diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
@@ -5,7 +5,7 @@ import { cn } from "#/lib/utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root;
+const TooltipRoot = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
@@ -17,12 +17,45 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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-50 rounded-md bg-primary px-3 py-1.5 text-xs max-w-96 text-primary-foreground 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",
       className
     )}
     {...props}
   />
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+function Tooltip({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: TooltipPrimitive.TooltipContentProps & TooltipPrimitive.TooltipProps) {
+  if (!content) return children;
+
+  return (
+    <TooltipProvider>
+      <TooltipRoot
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+      >
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="top" align="center" {...props}>
+          {/* eslint-disable-next-line react/no-danger */}
+          <span dangerouslySetInnerHTML={{ __html: content }} />
+          {/* <TooltipPrimitive.Arrow color="primary" width={11} height={5} /> */}
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+}
+export {
+  Tooltip,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+};