feat(common): move confirmation modal to his own store, and add 'onClosed' event

2025-12-30 00:37:39 +01:00
parent 98b2959501
commit 6d1edc1b8a
5 changed files with 116 additions and 109 deletions
--- a/app/stores/confirmationModal.ts
+++ b/app/stores/confirmationModal.ts
@@ -0,0 +1,100 @@
+import gsap from "gsap";
+
+const MODAL_MAX_Y_OFFSET = 106;
+const BUTTONS_MAX_Y_OFFSET = 20;
+const BUTTONS_TIME = 0.1;
+const MODAL_TIME = 0.225;
+
+export const useConfirmationModal = defineStore("confirmationModal", {
+  state: () => ({
+    isOpen: false,
+    text: "",
+    onConfirm: null as (() => void) | null,
+    onClosed: null as (() => void) | null,
+    offsetY: MODAL_MAX_Y_OFFSET,
+    buttonsYOffset: 0,
+    modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+    isVisible: false,
+    isClosing: false,
+  }),
+
+  actions: {
+    open(options: {
+      text: string;
+      onConfirm?: () => void;
+      onClosed?: () => void;
+    }) {
+      gsap.killTweensOf(this);
+      this.text = options.text;
+      this.onConfirm = options.onConfirm ?? null;
+      this.onClosed = options.onClosed ?? null;
+      this.isVisible = true;
+      this.isClosing = false;
+      this.isOpen = true;
+
+      gsap
+        .timeline()
+        // standard buttons down
+        .fromTo(
+          this,
+          { buttonsYOffset: 0 },
+          {
+            buttonsYOffset: BUTTONS_MAX_Y_OFFSET,
+            duration: BUTTONS_TIME,
+            ease: "none",
+          },
+        )
+        // modal up
+        .fromTo(
+          this,
+          { offsetY: MODAL_MAX_Y_OFFSET },
+          { offsetY: 0, duration: MODAL_TIME, ease: "none" },
+        )
+        // modal buttons up
+        .fromTo(
+          this,
+          { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
+          { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
+        );
+    },
+
+    close() {
+      if (!this.isVisible || this.isClosing) return;
+
+      this.isClosing = true;
+
+      gsap
+        .timeline()
+        // modal buttons down
+        .to(this, {
+          modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+          duration: BUTTONS_TIME,
+          ease: "none",
+        })
+        // modal down
+        .to(this, {
+          offsetY: MODAL_MAX_Y_OFFSET,
+          duration: MODAL_TIME,
+          ease: "none",
+        })
+        // standard buttons up
+        .to(this, {
+          buttonsYOffset: 0,
+          duration: BUTTONS_TIME,
+          ease: "none",
+        })
+        .call(() => {
+          const closedCallback = this.onClosed;
+
+          this.isVisible = false;
+          this.isClosing = false;
+          this.isOpen = false;
+          this.text = "";
+          this.onConfirm = null;
+          this.onClosed = null;
+
+          closedCallback?.();
+        });
+    },
+  },
+});