feat(@vtmn/react, @vtmn/vue): timeout enhancement

Decathlon · Feb 15, 2024 · 0fb0d05 · 0fb0d05
1 parent a87f7ea
commit 0fb0d05
Show file tree

Hide file tree

Showing 16 changed files with 152 additions and 27 deletions.
diff --git a/packages/showcases/core/csf/components/overlays/alert.csf.js b/packages/showcases/core/csf/components/overlays/alert.csf.js
@@ -32,4 +32,13 @@ export const argTypes = {
     defaultValue: undefined,
     control: { type: 'text' },
   },
+
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 8000,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/core/csf/components/overlays/snackbar.csf.js b/packages/showcases/core/csf/components/overlays/snackbar.csf.js
@@ -31,4 +31,12 @@ export const argTypes = {
       type: 'text',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/core/csf/components/overlays/toast.csf.js b/packages/showcases/core/csf/components/overlays/toast.csf.js
@@ -31,4 +31,12 @@ export const argTypes = {
       type: 'boolean',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnAlert } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showAlert) {
       const timeout = setTimeout(() => {
         setShowAlert(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showAlert]);

diff --git a/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnSnackbar } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showSnackbar) {
       const timeout = setTimeout(() => {
         setshowSnackbar(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showSnackbar]);

diff --git a/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnToast } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showToast) {
       const timeout = setTimeout(() => {
         setshowToast(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showToast]);

diff --git a/...ges/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte b/...ges/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
@@ -11,17 +11,7 @@
 <Meta
   title="Components / Overlays / VtmnSnackbar"
   component={VtmnSnackbar}
-  argTypes={{
-    ...argTypes,
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  }}
+  {argTypes}
   parameters={{
     ...parameters,
     readme: {

diff --git a/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
@@ -5,6 +5,8 @@ import {
   parameters,
 } from '@vtmn/showcase-core/csf/components/overlays/alert.csf';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -23,7 +25,7 @@ const Template = (args) => ({
         showAlert.value = true;
         setTimeout(() => {
           showAlert.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

diff --git a/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
@@ -2,6 +2,8 @@ import { ref } from 'vue';
 import { VtmnSnackbar, VtmnButton } from '@vtmn/vue';
 import { parameters } from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
@@ -22,6 +24,14 @@ export default {
         type: 'text',
       },
     },
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
   },
   parameters,
 };
@@ -37,7 +47,7 @@ const Template = (args) => ({
         showSnackbar.value = true;
         setTimeout(() => {
           showSnackbar.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

diff --git a/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
@@ -2,6 +2,8 @@ import { ref } from 'vue';
 import { VtmnToast, VtmnButton } from '@vtmn/vue';
 import { parameters } from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
@@ -22,6 +24,14 @@ export default {
         type: 'boolean',
       },
     },
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
   },
   parameters,
 };
@@ -37,7 +47,7 @@ const Template = (args) => ({
         showToast.value = true;
         setTimeout(() => {
           showToast.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -4,6 +4,8 @@ import { VtmnAlertVariant } from './types';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnAlertProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -48,14 +50,20 @@ export const VtmnAlert = ({
   timeout = 8000,
   className,
 }: VtmnAlertProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_alert-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       aria-label={title}
       role="dialog"
+      style={propertyStyle}
       className={clsx(
         'vtmn-alert',
         `vtmn-alert_variant--${variant}`,
-        timeout > 0 && 'show',
+        timeout > 0 && 'show animate-delay',
         className,
       )}
     >

diff --git a/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx b/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx
@@ -3,6 +3,8 @@ import '@vtmn/css-snackbar/dist/index-with-vars.css';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnSnackbarProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -20,6 +22,11 @@ export interface VtmnSnackbarProps
    */
   withCloseButton?: boolean;
 
+  /**
+   * Duration of the snackbar in ms
+   */
+  timeout?: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,11 +40,22 @@ export const VtmnSnackbar = ({
   withCloseButton = false,
   onClose,
   className,
+  timeout = 4500,
 }: VtmnSnackbarProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_overlay-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       role="status"
-      className={clsx('vtmn-snackbar', 'show', className)}
+      style={propertyStyle}
+      className={clsx(
+        'vtmn-snackbar',
+        timeout > 0 && 'show animate-delay',
+        className,
+      )}
       onClick={onClose}
     >
       <div className="vtmn-snackbar_content">{content}</div>

diff --git a/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx b/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx
@@ -3,6 +3,8 @@ import '@vtmn/css-toast/dist/index-with-vars.css';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnToastProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -20,6 +22,11 @@ export interface VtmnToastProps
    */
   withCloseButton?: boolean;
 
+  /**
+   * Duration of the toast in ms
+   */
+  timeout?: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,13 +40,20 @@ export const VtmnToast = ({
   withCloseButton = false,
   onClose,
   className,
+  timeout = 4500,
 }: VtmnToastProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_overlay-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       role="status"
+      style={propertyStyle}
       className={clsx(
         'vtmn-toast',
-        'show',
+        timeout > 0 && 'show animate-delay',
         withIcon && 'vtmn-toast--with-icon-info',
         className,
       )}

diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -4,6 +4,8 @@ import { computed, defineComponent, PropType, reactive } from 'vue';
 import { VtmnAlertVariant } from './types';
 import { VtmnButton } from '../../index';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export default /*#__PURE__*/ defineComponent({
   name: 'VtmnAlert',
   components: { VtmnButton },
@@ -49,17 +51,30 @@ export default /*#__PURE__*/ defineComponent({
     return {
       classes: computed(() => ({
         'vtmn-alert': true,
-        show: props.timeout > 0,
+        'show animate-delay': props.timeout > 0,
         [`vtmn-alert_variant--${props.variant}`]: props.variant,
       })),
+      style: {
+        '--vtmn-animation_alert-duration': `${
+          typeof props.timeout === 'number' && props.timeout < Infinity
+            ? props.timeout
+            : INFINITE_TIMEOUT_MS
+        }ms`,
+      },
       handleClose,
     };
   },
 });
 </script>
 
 <template>
-  <div :class="classes" role="alert" tabindex="-1" v-bind="$attrs">
+  <div
+    :class="classes"
+    :style="style"
+    role="alert"
+    tabindex="-1"
+    v-bind="$attrs"
+  >
     <div class="vtmn-alert_content" role="document">
       <div class="vtmn-alert_content-title">
         {{ title }}