chore: extract InfoTooltip to its own component

Change-Id: I394a3fe6a0eeef8cb579d61b710fe6e217fea015 GitOrigin-RevId: 3fca1dd90d790ac002345262eda7a1e2e19108e4
plasmicapp · Dec 16, 2024 · 77eecc5 · 77eecc5
1 parent 2a10fa0
commit 77eecc5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/platform/wab/src/wab/client/components/widgets/InfoTooltip.tsx b/platform/wab/src/wab/client/components/widgets/InfoTooltip.tsx
@@ -0,0 +1,30 @@
+import { InlineIcon } from "@/wab/client/components/widgets";
+import { Icon } from "@/wab/client/components/widgets/Icon";
+import InfoIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Info";
+import { Popover } from "antd";
+import { isFunction } from "lodash";
+import React, { ReactNode } from "react";
+
+export type InfoTooltipProps = {
+  tooltip: ReactNode | (() => React.ReactNode);
+};
+
+export function InfoTooltip({ tooltip }: InfoTooltipProps) {
+  return (
+    <InlineIcon>
+      <Popover
+        trigger={["hover", "click"]}
+        mouseEnterDelay={0.5}
+        // Place it over dropdown menus (1050), since it can be inside dropdown menus (default is 1030)
+        overlayStyle={{ zIndex: 1080 }}
+        content={() => (
+          <div style={{ maxWidth: 300 }}>
+            {isFunction(tooltip) ? tooltip() : tooltip}
+          </div>
+        )}
+      >
+        <Icon icon={InfoIcon} className="dimfg pointer" />
+      </Popover>
+    </InlineIcon>
+  );
+}
diff --git a/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx b/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx
@@ -1,8 +1,4 @@
-import { InlineIcon } from "@/wab/client/components/widgets";
-import { Icon } from "@/wab/client/components/widgets/Icon";
-import InfoIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Info";
-import { Popover } from "antd";
-import { isFunction } from "lodash";
+import { InfoTooltip } from "@/wab/client/components/widgets/InfoTooltip";
 import React, { ReactNode } from "react";
 
 export function LabelWithDetailedTooltip(props: {
@@ -13,21 +9,7 @@ export function LabelWithDetailedTooltip(props: {
     <div className={"flex flex-vcenter"}>
       {props.children}
       <div className={"ml-xsm inline-block"}>
-        <InlineIcon>
-          <Popover
-            trigger={["hover", "click"]}
-            mouseEnterDelay={0.5}
-            // Place it over dropdown menus (1050), since it can be inside dropdown menus (default is 1030)
-            overlayStyle={{ zIndex: 1080 }}
-            content={() => (
-              <div style={{ maxWidth: 300 }}>
-                {isFunction(props.tooltip) ? props.tooltip() : props.tooltip}
-              </div>
-            )}
-          >
-            <Icon icon={InfoIcon} className="dimfg pointer" />
-          </Popover>
-        </InlineIcon>
+        <InfoTooltip tooltip={props.tooltip} />
       </div>
     </div>
   );