add placement option for popover

GooeyAI · Dec 8, 2024 · 58735a7 · 58735a7
1 parent bb736aa
commit 58735a7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/app/components/GooeyPopover.tsx b/app/components/GooeyPopover.tsx
@@ -2,18 +2,21 @@ import Tippy from "@tippyjs/react";
 import { useState } from "react";
 import { OnChange } from "~/app";
 import { RenderedChildren, TreeNode } from "~/renderer";
+import { TooltipPlacement } from "./GooeyTooltip";
 
 export default function GooeyPopover({
   content,
   children,
   onChange,
   state,
+  placement,
   ...props
 }: {
   content: Array<TreeNode>;
   children: Array<TreeNode>;
   onChange: OnChange;
   state: Record<string, any>;
+  placement?: TooltipPlacement;
 }) {
   const [visible, setVisible] = useState(false);
 
@@ -33,6 +36,7 @@ export default function GooeyPopover({
       }
       animation="scale"
       duration={100}
+      placement={placement || "auto"}
       {...props}
     >
       <button type="button" onClick={() => setVisible(!visible)}>

diff --git a/app/renderer.tsx b/app/renderer.tsx
@@ -470,13 +470,14 @@ function RenderedTreeNode({
         </GooeyTooltip>
       );
     case "popover": {
-      const { content, ...args } = props;
+      const { content, placement, ...args } = props;
       return (
         <GooeyPopover
           content={content}
           children={children}
           onChange={onChange}
           state={state}
+          placement={placement}
           {...args}
         />
       );

diff --git a/py/gooey_gui/components/common.py b/py/gooey_gui/components/common.py
@@ -829,11 +829,14 @@ def plotly_chart(figure_or_data, **kwargs):
     ).mount()
 
 
-def popover(**props) -> tuple[core.NestingCtx, core.NestingCtx]:
+def popover(
+    *, placement: TooltipPlacement | None = None, **props
+) -> tuple[core.NestingCtx, core.NestingCtx]:
     content = core.RenderTreeNode(name="content")
 
     popover = core.RenderTreeNode(
-        name="popover", props=props | dict(content=content.children)
+        name="popover",
+        props=props | dict(content=content.children, placement=placement),
     )
     popover.mount()