fixup! Feat(web-react): Add autoclose feature to Toast component

lmc-eu · May 16, 2024 · f52aa03 · f52aa03
1 parent 0d4003a
commit f52aa03
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx b/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx
@@ -1,19 +1,22 @@
-import React from 'react';
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
-import { ToastColorType, UncontrolledToastProps } from '../../../types';
+import { ToastProvider, UncontrolledToast } from '..';
 import { AlignmentX, EmotionColors } from '../../../constants';
+import { ToastColorType, UncontrolledToastProps } from '../../../types';
 import { Button } from '../../Button';
 import ReadMe from '../README.md';
+import { TOAST_AUTOCLOSE_TIMEOUT } from '../constants';
 import { useToast } from '../useToast';
-import { ToastProvider, UncontrolledToast } from '..';
 
 interface UncontrolledToastPlaygroundProps extends UncontrolledToastProps {
   color: ToastColorType;
   hasIcon: boolean;
   isDismissible: boolean;
   iconName: string;
+  enableAutoClose: boolean;
+  autoCloseInterval: number;
 }
 
 const meta: Meta<UncontrolledToastPlaygroundProps> = {
@@ -64,6 +67,12 @@ const meta: Meta<UncontrolledToastPlaygroundProps> = {
     isCollapsible: {
       control: 'boolean',
     },
+    enableAutoClose: {
+      control: 'boolean',
+    },
+    autoCloseInterval: {
+      control: 'number',
+    },
   },
   args: {
     children: 'Hello, World!',
@@ -75,6 +84,8 @@ const meta: Meta<UncontrolledToastPlaygroundProps> = {
     color: 'inverted',
     iconName: '',
     isCollapsible: true,
+    enableAutoClose: true,
+    autoCloseInterval: TOAST_AUTOCLOSE_TIMEOUT,
   },
 };
 
@@ -87,15 +98,26 @@ const ShowButton = (props: {
   hasIcon: boolean;
   isDismissible: boolean;
   iconName: string;
+  enableAutoClose: boolean;
+  autoCloseInterval: number;
 }) => {
-  const { text, color, hasIcon, isDismissible, iconName } = props;
+  const { text, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval } = props;
   const { show, clear } = useToast();
 
   return (
     <>
       <Button
         type="button"
-        onClick={() => show(text, Date.now().toString(), { color, hasIcon, isDismissible, iconName })}
+        onClick={() =>
+          show(text, Date.now().toString(), {
+            color,
+            hasIcon,
+            isDismissible,
+            iconName,
+            enableAutoClose,
+            autoCloseInterval,
+          })
+        }
         marginBottom="space-400"
       >
         Show Toast
@@ -109,7 +131,7 @@ const ShowButton = (props: {
 };
 
 const UncontrolledToastComponent = (args: UncontrolledToastPlaygroundProps) => {
-  const { children, color, hasIcon, isDismissible, iconName } = args;
+  const { children, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval } = args;
 
   return (
     <ToastProvider>
@@ -119,6 +141,8 @@ const UncontrolledToastComponent = (args: UncontrolledToastPlaygroundProps) => {
         hasIcon={hasIcon}
         isDismissible={isDismissible}
         iconName={iconName}
+        enableAutoClose={enableAutoClose}
+        autoCloseInterval={autoCloseInterval}
       />
       <UncontrolledToast {...args} />
     </ToastProvider>