update popover example

1 files changed, 21 insertions, 81 deletions

diff --git a/examples/gtk3/js/popover/app.tsx b/examples/gtk3/js/popover/app.tsx
index 6358297..6b0286f 100644
--- a/examples/gtk3/js/popover/app.tsx
+++ b/examples/gtk3/js/popover/app.tsx
@@ -1,75 +1,12 @@
-import { App, Astal, Gdk, Gtk } from "astal/gtk3"
-
-const { TOP, RIGHT, BOTTOM, LEFT } = Astal.WindowAnchor
-
-type PopupProps = {
-    child?: unknown
-    marginBottom?: number
-    marginTop?: number
-    marginLeft?: number
-    marginRight?: number
-    halign?: Gtk.Align
-    valign?: Gtk.Align
-}
-
-function Popup({
-    child,
-    marginBottom,
-    marginTop,
-    marginLeft,
-    marginRight,
-    halign = Gtk.Align.CENTER,
-    valign = Gtk.Align.CENTER,
-}: PopupProps) {
-    return (
-        <window
-            visible={false}
-            css="background-color: transparent"
-            keymode={Astal.Keymode.EXCLUSIVE}
-            anchor={TOP | RIGHT | BOTTOM | LEFT}
-            exclusivity={Astal.Exclusivity.IGNORE}
-            // close when click occurs otside of child
-            onButtonPressEvent={(self, event) => {
-                const [, _x, _y] = event.get_coords()
-                const { x, y, width, height } = self
-                    .get_child()!
-                    .get_allocation()
-
-                const xOut = _x < x || _x > x + width
-                const yOut = _y < y || _y > y + height
-
-                // clicked outside
-                if (xOut || yOut) self.hide()
-            }}
-            // close when hitting Escape
-            onKeyPressEvent={(self, event: Gdk.Event) => {
-                if (event.get_keyval()[1] === Gdk.KEY_Escape) {
-                    self.hide()
-                }
-            }}
-        >
-            <box
-                className="Popup"
-                onButtonPressEvent={() => true} // make sure click event does not bubble up
-                // child can be positioned with `halign` `valign` and margins
-                expand
-                halign={halign}
-                valign={valign}
-                marginBottom={marginBottom}
-                marginTop={marginTop}
-                marginStart={marginLeft}
-                marginEnd={marginRight}
-            >
-                {child}
-            </box>
-        </window>
-    )
-}
+import { App, Astal, Gtk } from "astal/gtk3"
+import { Variable } from "astal"
+import Popup from "./Popover"
+const { TOP, RIGHT, LEFT } = Astal.WindowAnchor
 
 App.start({
     instanceName: "popup-example",
     css: `
-        .Popup {
+        .Popup>box {
             background-color: @theme_bg_color;
             box-shadow: 2px 3px 7px 0 rgba(0,0,0,0.4);
             border-radius: 12px;
@@ -77,25 +14,28 @@ App.start({
         }
     `,
     main() {
-        const popup = (
-            <Popup
-                marginTop={36}
-                marginRight={60}
-                valign={Gtk.Align.START}
-                halign={Gtk.Align.END}
-            >
-                <button onClicked={() => popup.hide()}>
-                    Click me to close the popup
-                </button>
-            </Popup>
-        )
+        const visible = Variable(false);
+
+        <Popup
+            className="Popup"
+            onClose={() => visible.set(false)}
+            visible={visible()}
+            marginTop={36}
+            marginRight={60}
+            valign={Gtk.Align.START}
+            halign={Gtk.Align.END}
+        >
+            <button onClicked={() => visible.set(false)}>
+                Click me to close the popup
+            </button>
+        </Popup>
 
         return (
             <window
                 anchor={TOP | LEFT | RIGHT}
                 exclusivity={Astal.Exclusivity.EXCLUSIVE}
             >
-                <button onClicked={() => popup.show()} halign={Gtk.Align.END}>
+                <button onClicked={() => visible.set(true)} halign={Gtk.Align.END}>
                     Click to open popup
                 </button>
             </window>