Now able to close AnnotationModal on story

mParticle · Jan 16, 2024 · 8fdc4db · 8fdc4db
1 parent 1f64fe2
commit 8fdc4db
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/src/components/feedback/AnnotationModal/AnnotationModal.stories.tsx b/src/components/feedback/AnnotationModal/AnnotationModal.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { type Meta , type StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 
 import { Button } from "src/components/general/Button/Button";
 import { AnnotationModal } from "src/components/feedback/AnnotationModal/AnnotationModal";
@@ -22,13 +22,23 @@ const BaseTemplate = () => {
     setIsModalOpen(true);
   };
 
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <>
       <Button type="primary" onClick={showModal}>
         Open Annotation Modal
       </Button>
 
-      {isModalOpen && <AnnotationModal />}
+      {isModalOpen && (
+        <AnnotationModal
+          onOk={closeModal}
+          onCancel={closeModal}
+          open={isModalOpen}
+        />
+      )}
     </>
   );
 };

diff --git a/src/components/feedback/AnnotationModal/AnnotationModal.tsx b/src/components/feedback/AnnotationModal/AnnotationModal.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import { LoadingModal , type ILoadingModalProps } from "src/components/feedback/LoadingModal/LoadingModal";
+import {
+  LoadingModal,
+  type ILoadingModalProps,
+} from "src/components/feedback/LoadingModal/LoadingModal";
 
 import { DatePicker } from "src/components/data-entry/DatePicker/DatePicker";
 import { Dropdown } from "src/components/navigation/Dropdown/Dropdown";
@@ -24,16 +27,14 @@ interface iAnnotationModel {
 export function AnnotationModal(props: IAnnotationModalProps) {
   const fetchAnnotations = async () =>
     await new Promise<iAnnotationModel>((resolve, reject) =>
-      setTimeout(
-        () =>
-          { resolve({
-            title: "title",
-            description: "description",
-            startDate: new Date(),
-            events: [{ name: "event1" }, { name: "event2" }],
-          }); },
-        500,
-      ),
+      setTimeout(() => {
+        resolve({
+          title: "title",
+          description: "description",
+          startDate: new Date(),
+          events: [{ name: "event1" }, { name: "event2" }],
+        });
+      }, 500),
     );
 
   return (
@@ -57,10 +58,9 @@ export function AnnotationModal(props: IAnnotationModalProps) {
                   items: initData.events.map(
                     (event) =>
                       ({
-                        value: event.name,
                         label: event.name,
                         type: "group",
-                      }) as ItemType,
+                      }) satisfies ItemType,
                   ),
                 }}
               >