enhance(Toast): generalize interface to use arbitrary open attribute …

…and on close function
uzh-bf · Oct 10, 2024 · ace91f7 · ace91f7
1 parent 590e932
commit ace91f7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 20 deletions.
diff --git a/packages/design-system/src/Toast.stories.tsx b/packages/design-system/src/Toast.stories.tsx
@@ -47,7 +47,11 @@ export const ExternalState = () => {
         not hover on it.
       </div>
       <Button onClick={() => setOpen(true)}>Trigger now is a Button</Button>
-      <Toast duration={5000} openExternal={open} setOpenExternal={setOpen}>
+      <Toast
+        duration={5000}
+        openExternal={open}
+        onCloseExternal={() => setOpen(false)}
+      >
         Content as Children
       </Toast>
     </div>

diff --git a/packages/design-system/src/Toast.tsx b/packages/design-system/src/Toast.tsx
@@ -7,7 +7,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import * as RadixToast from '@radix-ui/react-toast'
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Button from './Button'
 
@@ -21,7 +21,7 @@ interface ToastProps {
   actionOnClick?: () => void
   position?: string
   openExternal?: boolean
-  setOpenExternal?: (open: boolean) => void
+  onCloseExternal?: () => void
   type?: 'default' | 'success' | 'warning' | 'error'
   children?: React.ReactNode
   className?: {
@@ -50,23 +50,23 @@ interface ToastPropsWithChildren extends ToastProps {
 export interface ToastPropsWithTitleTrigger extends ToastPropsWithTitle {
   triggerText: string
   openExternal?: never
-  setOpenExternal?: never
+  onCloseExternal?: never
 }
 export interface ToastPropsWithTitleNoTrigger extends ToastPropsWithTitle {
   triggerText?: never
   openExternal: boolean
-  setOpenExternal: (open: boolean) => void
+  onCloseExternal: () => void
 }
 export interface ToastPropsWithChildrenTrigger extends ToastPropsWithChildren {
   triggerText: string
   openExternal?: never
-  setOpenExternal?: never
+  onCloseExternal?: never
 }
 export interface ToastPropsWithChildrenNoTrigger
   extends ToastPropsWithChildren {
   triggerText?: never
   openExternal: boolean
-  setOpenExternal: (open: boolean) => void
+  onCloseExternal: () => void
 }
 
 export function Toast({
@@ -79,7 +79,7 @@ export function Toast({
   actionOnClick,
   position = 'topRight',
   openExternal,
-  setOpenExternal,
+  onCloseExternal,
   type = 'default',
   children,
   className,
@@ -89,7 +89,6 @@ export function Toast({
   | ToastPropsWithChildrenTrigger
   | ToastPropsWithChildrenNoTrigger): React.ReactElement {
   const [open, setOpen] = useState(false)
-  const eventDateRef = useRef(new Date())
   const timerRef = useRef(0)
   const defaultDuration = dismissible ? 60000 : 4000
 
@@ -100,27 +99,22 @@ export function Toast({
     bottomLeft: 'bottom-0 left-0',
   }
 
-  useEffect(() => {
-    return () => clearTimeout(timerRef.current)
-  }, [])
-
   return (
     <RadixToast.Provider swipeDirection="right">
-      {!openExternal && !setOpenExternal && (
+      {!openExternal && !onCloseExternal ? (
         <Button
           onClick={() => {
             setOpen(false)
             window.clearTimeout(timerRef.current)
             timerRef.current = window.setTimeout(() => {
-              eventDateRef.current = new Date('2020-01-01T00:00:00')
               setOpen(true)
             }, 100)
           }}
           className={{ root: className?.trigger }}
         >
           {triggerText}
         </Button>
-      )}
+      ) : null}
 
       <RadixToast.Root
         className={twMerge(
@@ -131,16 +125,14 @@ export function Toast({
           className?.root
         )}
         open={openExternal || open}
-        onOpenChange={setOpenExternal || setOpen}
+        onOpenChange={onCloseExternal || setOpen}
         duration={duration || defaultDuration}
       >
         {dismissible && (
           <Button
             className={{ root: 'fixed right-6 top-4 hidden group-hover:block' }}
             basic
-            onClick={() =>
-              setOpenExternal ? setOpenExternal(false) : setOpen(false)
-            }
+            onClick={() => onCloseExternal?.() ?? setOpen(false)}
           >
             <Button.Icon>
               <FontAwesomeIcon