@veracity/vui 1.4.0 → 1.5.0-beta.1

package/src/toast/useToast.tsx

@@ -3,16 +3,21 @@ import React, { ReactNode } from 'react'
 import { useVuiContext } from '../core'
 import { Notification, NotificationStatus } from '../notification'
 import { uid } from '../utils'
-import { ToastOptions, ToastSetup } from './toast.types'
+import { ToastDuration, ToastOptions, ToastSetup } from './toast.types'
+
+export const defaultDuration = 'fast'
+export const fastToastDuration = 4000
+export const slowToastDuration = 8000
 
 const setup: ToastSetup = {
   options: {
-    duration: 5000,
-    dismissible: true
+    duration: defaultDuration
   },
   componentList: []
 }
 
+const getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)
+
 export const useToast = () => {
   const { addToast, removeToast } = useVuiContext()
 
@@ -21,7 +26,6 @@ export const useToast = () => {
   const showToast = (options?: ToastOptions): void => {
     const id = options?.id ? options.id : uid('toast')
     const { duration = setup.options.duration } = options || {}
-    const { dismissible = setup.options.dismissible } = options || {}
     const { status = setup.options.duration } = options || {}
     const { action } = options || {}
     const { icon } = options || {}
@@ -38,7 +42,7 @@ export const useToast = () => {
           animation="fadeDown"
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
-          onClose={dismissible ? onClose : undefined}
+          onClose={onClose}
           shadow={1}
           status={status as NotificationStatus}
           text={text}
@@ -50,14 +54,19 @@ export const useToast = () => {
 
     addToast(toast)
 
-    if (duration !== 0) window.setTimeout(() => hideToast(id), duration)
+    if (duration && duration !== 'sticky') window.setTimeout(() => hideToast(id), getDurationTime(duration))
   }
 
-  const showInfo = (text: ReactNode) => showToast({ text, status: 'info' })
-  const showSuccess = (text: ReactNode) => showToast({ text, status: 'success' })
-  const showWarning = (text: ReactNode) => showToast({ text, status: 'warning' })
-  const showError = (text: ReactNode) => showToast({ text, status: 'error' })
-  const showLoading = (text: ReactNode) => showToast({ text, status: 'loading' })
+  const showInfo = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'info', duration })
+  const showSuccess = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'success', duration })
+  const showWarning = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'warning', duration })
+  const showError = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'error', duration })
+  const showLoading = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'loading', duration })
 
   return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading }
 }