add isLoading to icon #1003

fkhadra · Nov 3, 2023 · 53f8a73 · 53f8a73
1 parent a9d3256
commit 53f8a73
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 36 deletions.
diff --git a/src/components/Icons.cy.tsx b/src/components/Icons.cy.tsx
@@ -29,26 +29,6 @@ describe('Icons', () => {
     cy.findByText('icon').should('exist');
   });
 
-  it('handle string', () => {
-    const C = getIcon({
-      ...props,
-      icon: 'icon'
-    });
-
-    cy.mount(C);
-    cy.findByText('icon').should('exist');
-  });
-
-  it('handle number', () => {
-    const C = getIcon({
-      ...props,
-      icon: 123
-    });
-
-    cy.mount(C);
-    cy.findByText('123').should('exist');
-  });
-
   it('handle loader', () => {
     const C = getIcon({
       ...props,

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -1,14 +1,15 @@
 import React, { cloneElement, isValidElement } from 'react';
 
 import { Theme, ToastProps, TypeOptions } from '../types';
-import { Default, isFn, isNum, isStr } from '../utils';
+import { Default, isFn } from '../utils';
 
 /**
  * Used when providing custom icon
  */
 export interface IconProps {
   theme: Theme;
   type: TypeOptions;
+  isLoading?: boolean;
 }
 
 export type BuiltInIconProps = React.SVGProps<SVGSVGElement> & IconProps;
@@ -80,16 +81,14 @@ export type IconParams = Pick<
 
 export function getIcon({ theme, type, isLoading, icon }: IconParams) {
   let Icon: React.ReactNode = null;
-  const iconProps = { theme, type };
+  const iconProps = { theme, type, isLoading };
 
   if (icon === false) {
     // hide
   } else if (isFn(icon)) {
     Icon = icon(iconProps);
   } else if (isValidElement(icon)) {
     Icon = cloneElement(icon, iconProps);
-  } else if (isStr(icon) || isNum(icon)) {
-    Icon = icon;
   } else if (isLoading) {
     Icon = Icons.spinner();
   } else if (maybeIcon(type)) {

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -6,6 +6,7 @@ import { ToastProps } from '../types';
 import { Default, isFn } from '../utils';
 import { CloseButton } from './CloseButton';
 import { ProgressBar } from './ProgressBar';
+import { getIcon } from './Icons';
 
 export const Toast: React.FC<ToastProps> = props => {
   const {
@@ -39,7 +40,6 @@ export const Toast: React.FC<ToastProps> = props => {
     deleteToast,
     isIn,
     isLoading,
-    iconOut,
     closeOnClick,
     theme
   } = props;
@@ -62,6 +62,7 @@ export const Toast: React.FC<ToastProps> = props => {
         defaultClassName
       })
     : cx(defaultClassName, className);
+  const icon = getIcon(props);
   const isProgressControlled = !!progress || !autoClose;
 
   const closeButtonProps = { closeToast, type, theme };
@@ -104,14 +105,14 @@ export const Toast: React.FC<ToastProps> = props => {
           }
           style={bodyStyle}
         >
-          {iconOut != null && (
+          {icon != null && (
             <div
               className={cx(`${Default.CSS_NAMESPACE}__toast-icon`, {
                 [`${Default.CSS_NAMESPACE}--animate-icon ${Default.CSS_NAMESPACE}__zoom-enter`]:
                   !isLoading
               })}
             >
-              {iconOut}
+              {icon}
             </div>
           )}
           <div>{children as ReactNode}</div>

diff --git a/src/core/containerObserver.ts b/src/core/containerObserver.ts
@@ -1,5 +1,4 @@
 import { ReactElement, cloneElement, isValidElement } from 'react';
-import { getIcon } from '../components/Icons';
 import {
   Id,
   NotValidatedToastProps,
@@ -165,8 +164,6 @@ export function createContainerObserver({
       }
     } as ToastProps;
 
-    toastProps.iconOut = getIcon(toastProps);
-
     toastProps.closeButton = props.closeButton;
 
     if (options.closeButton === false || canBeRendered(options.closeButton)) {

diff --git a/src/types.ts b/src/types.ts
@@ -28,12 +28,9 @@ export type ToastContent<T = unknown> =
   | ((props: ToastContentProps<T>) => React.ReactNode);
 
 export type ToastIcon =
-  | boolean
+  | false
   | ((props: IconProps) => React.ReactNode)
-  | React.ReactElement<IconProps>
-  | string
-  | number
-  | React.ReactNode;
+  | React.ReactElement<IconProps>;
 
 export type Id = number | string;
 
@@ -319,7 +316,6 @@ export interface ToastProps extends ToastOptions {
   deleteToast: () => void;
   theme: Theme;
   type: TypeOptions;
-  iconOut?: React.ReactNode;
   collapseAll: () => void;
   stacked?: boolean;
 }