feat: custom progress bar

Author: fkhadra

src/components/ProgressBar.tsx

@@ -41,7 +41,7 @@ export interface ProgressBarProps {
   className?: ToastClassName;
 
   /**
-   * Tell wether or not controlled progress bar is used
+   * Tell whether a controlled progress bar is used
    */
   controlledProgress?: boolean;
 

src/components/Toast.cy.tsx

@@ -248,6 +248,10 @@ describe('Toast', () => {
     {
       type: 'react element',
       value: <div>hello</div>
+    },
+    {
+      type: 'function',
+      value: () => <div>hello</div>
     }
   ]) {
     it(`render ${type}`, () => {

src/components/Toast.tsx

@@ -1,9 +1,9 @@
 import cx from 'clsx';
-import React, { cloneElement, isValidElement, ReactNode } from 'react';
+import React, { cloneElement, isValidElement } from 'react';
 
 import { useToast } from '../hooks/useToast';
 import { ToastProps } from '../types';
-import { Default, isFn } from '../utils';
+import { Default, isFn, renderContent } from '../utils';
 import { CloseButton } from './CloseButton';
 import { ProgressBar } from './ProgressBar';
 import { getIcon } from './Icons';
@@ -99,22 +99,24 @@ export const Toast: React.FC<ToastProps> = props => {
             {icon}
           </div>
         )}
-        {children as ReactNode}
+        {renderContent(children, props, !isRunning)}
         {Close}
-        <ProgressBar
-          {...(updateId && !isProgressControlled ? { key: `pb-${updateId}` } : {})}
-          rtl={rtl}
-          theme={theme}
-          delay={autoClose as number}
-          isRunning={isRunning}
-          isIn={isIn}
-          closeToast={closeToast}
-          hide={hideProgressBar}
-          type={type}
-          className={progressClassName}
-          controlledProgress={isProgressControlled}
-          progress={progress || 0}
-        />
+        {!props.customProgressBar && (
+          <ProgressBar
+            {...(updateId && !isProgressControlled ? { key: `p-${updateId}` } : {})}
+            rtl={rtl}
+            theme={theme}
+            delay={autoClose as number}
+            isRunning={isRunning}
+            isIn={isIn}
+            closeToast={closeToast}
+            hide={hideProgressBar}
+            type={type}
+            className={progressClassName}
+            controlledProgress={isProgressControlled}
+            progress={progress || 0}
+          />
+        )}
       </div>
     </Transition>
   );

src/components/ToastContainer.tsx

@@ -2,7 +2,7 @@ import cx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { toast } from '../core';
-import { useToastContainer } from '../hooks/useToastContainer';
+import { useToastContainer } from '../hooks';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { ToastContainerProps, ToastPosition } from '../types';
 import { Default, Direction, isFn, parseClassName } from '../utils';
@@ -137,7 +137,7 @@ export function ToastContainer(props: ToastContainerProps) {
             className={getClassName(position)}
             data-stacked={stacked}
             style={containerStyle}
-            key={`container-${position}`}
+            key={`c-${position}`}
           >
             {toastList.map(({ content, props: toastProps }) => {
               return (
@@ -146,7 +146,7 @@ export function ToastContainer(props: ToastContainerProps) {
                   stacked={stacked}
                   collapseAll={collapseAll}
                   isIn={isToastActive(toastProps.toastId, toastProps.containerId)}
-                  key={`toast-${toastProps.key}`}
+                  key={`t-${toastProps.key}`}
                 >
                   {content}
                 </Toast>

src/core/containerObserver.ts

@@ -1,15 +1,13 @@
-import { cloneElement, isValidElement, ReactElement } from 'react';
 import {
   Id,
   NotValidatedToastProps,
   OnChangeCallback,
   Toast,
   ToastContainerProps,
   ToastContent,
-  ToastContentProps,
   ToastProps
 } from '../types';
-import { canBeRendered, getAutoCloseDelay, isFn, isNum, isStr, parseClassName, toToastItem } from '../utils';
+import { canBeRendered, getAutoCloseDelay, isNum, parseClassName, toToastItem } from '../utils';
 
 type Notify = () => void;
 
@@ -89,10 +87,6 @@ export function createContainerObserver(
     if (shouldIgnoreToast(options)) return;
 
     const { toastId, updateId, data, staleId, delay } = options;
-    const closeToast = (removedByUser?: true) => {
-      toasts.get(toastId)!.removalReason = removedByUser;
-      removeToast(toastId);
-    };
 
     const isNotAnUpdate = updateId == null;
 
@@ -106,11 +100,14 @@ export function createContainerObserver(
       toastId,
       updateId,
       data,
-      closeToast,
       isIn: false,
       className: parseClassName(options.className || props.toastClassName),
       progressClassName: parseClassName(options.progressClassName || props.progressClassName),
       autoClose: options.isLoading ? false : getAutoCloseDelay(options.autoClose, props.autoClose),
+      closeToast(reason?: true) {
+        toasts.get(toastId)!.removalReason = reason;
+        removeToast(toastId);
+      },
       deleteToast() {
         const toastToRemove = toasts.get(toastId);
 
@@ -139,20 +136,8 @@ export function createContainerObserver(
       toastProps.closeButton = canBeRendered(props.closeButton) ? props.closeButton : true;
     }
 
-    let toastContent = content;
-
-    if (isValidElement(content) && !isStr(content.type)) {
-      toastContent = cloneElement<ToastContentProps>(content as ReactElement<any>, {
-        closeToast,
-        toastProps,
-        data
-      });
-    } else if (isFn(content)) {
-      toastContent = content({ closeToast, toastProps, data: data as TData });
-    }
-
     const activeToast = {
-      content: toastContent,
+      content,
       props: toastProps,
       staleId
     } as Toast;

src/types.ts

@@ -17,6 +17,7 @@ export type CloseToastFunc = (reason?: boolean | string) => void;
 export interface ToastContentProps<Data = unknown> {
   closeToast: CloseToastFunc;
   toastProps: ToastProps;
+  isPaused: boolean;
   data: Data;
 }
 
@@ -150,6 +151,8 @@ interface CommonOptions {
    * `Default: 'light'`
    */
   theme?: Theme;
+
+  customProgressBar?: boolean;
 }
 
 export interface ToastOptions<Data = unknown> extends CommonOptions {

src/utils/mapper.ts

@@ -1,8 +1,10 @@
-import { Toast, ToastItem, ToastItemStatus } from '../types';
+import { Toast, ToastContentProps, ToastItem, ToastItemStatus, ToastProps } from '../types';
+import { cloneElement, isValidElement, ReactElement } from 'react';
+import { isFn, isStr } from './propValidator';
 
 export function toToastItem(toast: Toast, status: ToastItemStatus): ToastItem {
   return {
-    content: toast.content,
+    content: renderContent(toast.content, toast.props),
     containerId: toast.props.containerId,
     id: toast.props.toastId,
     theme: toast.props.theme,
@@ -14,3 +16,23 @@ export function toToastItem(toast: Toast, status: ToastItemStatus): ToastItem {
     status
   };
 }
+
+export function renderContent(content: unknown, props: ToastProps, isPaused: boolean = false) {
+  if (isValidElement(content) && !isStr(content.type)) {
+    return cloneElement<ToastContentProps>(content as ReactElement<any>, {
+      closeToast: props.closeToast,
+      toastProps: props,
+      data: props.data,
+      isPaused
+    });
+  } else if (isFn(content)) {
+    return content({
+      closeToast: props.closeToast,
+      toastProps: props,
+      data: props.data,
+      isPaused
+    });
+  }
+
+  return content;
+}