diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx index 9c25c5c67ee0370c228ba6cdec58db1f86a753a7..03882af09220db4cd9057afde95000f0ee3c2268 100644 --- a/src/components/Alert.tsx +++ b/src/components/Alert.tsx @@ -10,6 +10,7 @@ type AlertProps = { message: string; alertType?: baseColorType; expireAfter?: number; + onExpire?: () => void; }; /** @@ -20,8 +21,9 @@ type AlertProps = { * @param message: string * @param alertType: "default" | "warning" | "positive" | "negative" * @param expireAfter: number + * @param onExpire: () => void */ -const Alert = ({ title, message, alertType = "primary", expireAfter }: AlertProps) => { +const Alert = ({ title, message, alertType = "primary", expireAfter, onExpire }: AlertProps) => { const [hasExpired, setHasExpired] = useState(false); const [shouldRemoveElement, setShouldRemoveElement] = useState(false); @@ -36,6 +38,7 @@ const Alert = ({ title, message, alertType = "primary", expireAfter }: AlertProp setHasExpired(true); setTimeout(() => { setShouldRemoveElement(true); + onExpire && onExpire(); }, 1000); }, expireAfter); } diff --git a/src/stories/Alert.stories.ts b/src/stories/Alert.stories.ts index cf207f859dcf91d5ba2184fd54190ca0a0afb3cd..1ac9efdbd2394e4bbba7e92c531354bb0b5c86e3 100644 --- a/src/stories/Alert.stories.ts +++ b/src/stories/Alert.stories.ts @@ -26,5 +26,6 @@ export const Toast: StoryObj = { title: "I will fade away in 5 seconds", message: "Bye bye", expireAfter: 5000, + onExpire: () => console.log("Alert expired, do some state changes now"), } } \ No newline at end of file