feat: toast

coingaming · Dec 1, 2020 · 7e5c490 · 7e5c490
1 parent cccd804
commit 7e5c490
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/packages/notifications/src/index.ts b/packages/notifications/src/index.ts
@@ -14,7 +14,7 @@ export { default as ToastIcon } from './toast/ToastIcon';
 export * from './toast/ToastIcon';
 export { default as ToastMessage } from './toast/ToastMessage';
 export * from './toast/ToastMessage';
-export { default as useInterval } from './useToast/useInterval';
-export * from './useToast/useInterval';
+export { default as useTimeout } from './useToast/useTimeout';
+export * from './useToast/useTimeout';
 export { default as useToast } from './useToast/useToast';
 export * from './useToast/useToast';
diff --git a/packages/notifications/src/toast/README.mdx b/packages/notifications/src/toast/README.mdx
@@ -100,7 +100,7 @@ By default it's a 5 seconds.
 () => {
   const [Toast, display] = useToast({
     message: <p>Appearing and disappearing works!</p>,
-    timeout: 14000,
+    timeout: 1000,
     variant: 'success',
     position: 'top',
     isCloseable: true,

diff --git a/...otifications/src/useToast/useInterval.tsx → ...notifications/src/useToast/useTimeout.tsx b/...otifications/src/useToast/useInterval.tsx → ...notifications/src/useToast/useTimeout.tsx
@@ -3,9 +3,9 @@ import { useEffect, useRef } from 'react';
 /** keep typescript happy */
 const noop = () => {};
 
-function useInterval(
+function useTimeout(
   callback: () => void,
-  delay: number | null | false,
+  delay: number | null | false | undefined,
   immediate?: boolean
 ) {
   const savedCallback = useRef(noop);
@@ -32,9 +32,9 @@ function useInterval(
       return undefined;
     }
     const tick = () => savedCallback.current();
-    const id = setInterval(tick, delay);
-    return () => clearInterval(id);
+    const id = setTimeout(tick, delay);
+    return () => clearTimeout(id);
   }, [delay]);
 }
 
-export default useInterval;
+export default useTimeout;
diff --git a/packages/notifications/src/useToast/useToast.tsx b/packages/notifications/src/useToast/useToast.tsx
@@ -2,10 +2,35 @@ import React, { useEffect } from 'react';
 
 import Toast from '../toast/Toast';
 
-import useInterval from './useInterval';
-
-const useToast = ({ timeout, onClose, ...rest }: any): any => {
+interface ToastProps {
+  message: React.Component;
+  variant?: 'error' | 'warning' | 'info' | 'success';
+  action?: React.Component;
+  position?: 'bottom' | 'top';
+  onClose?: any;
+  isCloseable?: boolean;
+  timeout?: number;
+}
+
+const noop: any = () => {};
+
+const useToast = ({ onClose, timeout, ...rest }: ToastProps): any => {
   const [visible, setVisibility] = React.useState(false);
+  const timeoutRef = React.useRef<any>(noop);
+
+  useEffect(() => {
+    if (timeout) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = null;
+        setVisibility(false);
+      }, timeout);
+      return () => clearTimeout(timeoutRef.current);
+    }
+    return noop;
+  }, [visible]);
 
   const hide = () => {
     setVisibility(false);
@@ -18,12 +43,6 @@ const useToast = ({ timeout, onClose, ...rest }: any): any => {
     setVisibility(true);
   };
 
-  useInterval(hide, timeout);
-
-  // useEffect(() => {
-  //   setTimeout(hide, timeout);
-  // }, [timeout]);
-
   const ToastWithTimeout = visible ? <Toast onClose={hide} {...rest} /> : null;
 
   return [ToastWithTimeout, display, hide];