refactor(CToast): simplify props; update animations

Author: mrholek

src/components/toast/CToast.tsx

@@ -1,22 +1,16 @@
 import React, {
-  CSSProperties,
-  ElementType,
+  createContext,
   forwardRef,
   HTMLAttributes,
   useEffect,
   useRef,
   useState,
 } from 'react'
-import { Transition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
-import { useForkedRef } from '../../utils/hooks'
-
-import { CButtonClose } from '../button/CButtonClose'
-import { CToastBody } from './CToastBody'
-import { CToastHeader } from './CToastHeader'
 
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -25,10 +19,18 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
    * @default true
    */
   autohide?: boolean
+  /**
+   * A string of all className you want applied to the body wrapper. [docs]
+   */
+  bodyWrapperClassName?: string
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
+  /**
+   * A string of all className you want applied to the close button. [docs]
+   */
+  closeButtonClassName?: string
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
    *
@@ -40,28 +42,10 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
    * Delay hiding the toast (ms). [docs]
    */
   delay?: number
-  /**
-   * Optionally add a close button to component and allow it to self dismiss. [docs]
-   *
-   * @default true
-   */
-  dismissible?: boolean
-  /**
-   * Set component's icon. [docs]
-   */
-  icon?: string | ElementType
   /**
    * @ignore
    */
   key?: number
-  /**
-   * Time node for your component. [docs]
-   */
-  time?: string | ElementType
-  /**
-   * Title node for your component. [docs]
-   */
-  title?: string | ElementType
   /**
    * Toggle the visibility of component. [docs]
    *
@@ -74,32 +58,40 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   onDismiss?: () => void
 }
 
+interface ContextProps extends CToastProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CToastContext = createContext({} as ContextProps)
+
 export const CToast = forwardRef<HTMLDivElement, CToastProps>(
   (
     {
       children,
       autohide = true,
-      delay = 5000,
-      dismissible = true,
+      bodyWrapperClassName,
       className,
+      closeButtonClassName,
       color,
-      icon,
+      delay = 5000,
       key,
-      time,
-      title,
       visible = true,
       onDismiss,
       ...rest
     },
     ref,
   ) => {
     const [_visible, setVisible] = useState(visible)
-    const [height, setHeight] = useState<number>()
-
-    const toastRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, toastRef)
+    // const toastRef = useRef<HTMLDivElement>(null)
+    // const forkedRef = useForkedRef(ref, toastRef)
     const timeout = useRef<number>()
 
+    const contextValues = {
+      visible: _visible,
+      setVisible,
+    }
+
     //triggered on mount and destroy
     useEffect(() => () => clearTimeout(timeout.current), [])
 
@@ -116,88 +108,37 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       }
     }
 
-    const duration = 150
-
-    const defaultStyle: CSSProperties = {
-      transition: `opacity ${duration}ms linear, height ${duration}ms linear`,
-      opacity: 1,
-    }
-
-    const transitionStyles = {
-      entering: { opacity: 0, height: 0 },
-      entered: { opacity: 1, height: height },
-      exiting: { opacity: 1, height: height },
-      exited: { opacity: 0, height: 0 },
-    }
-
-    const onEntering = () => {
-      toastRef && toastRef.current && setHeight(toastRef.current.scrollHeight)
-    }
-
-    const onEntered = () => {
-      setHeight(0)
-    }
-
-    const onExit = () => {
-      toastRef && toastRef.current && setHeight(toastRef.current.scrollHeight)
-      onDismiss && onDismiss()
-    }
-
-    const onExiting = () => {
-      // @ts-expect-error
-      const reflow = toastRef && toastRef.current && toastRef.current.offsetHeight
-      setHeight(0)
-    }
-
-    const onExited = () => {
-      setHeight(0)
-    }
-
     const _className = classNames(
       'toast fade',
       {
         show: _visible,
         [`bg-${color}`]: color,
+        'border-0': color,
       },
       className,
     )
     return (
-      <Transition
+      <CSSTransition
         in={_visible}
-        timeout={duration}
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExit={onExit}
-        onExiting={onExiting}
-        onExited={onExited}
+        timeout={250}
         unmountOnExit
       >
-        {(state) => {
-          const currentHeight = height === 0 ? null : { height }
-          return (
-            <div
-              className={_className}
-              aria-live="assertive"
-              aria-atomic="true"
-              role="alert"
-              style={{ ...defaultStyle, ...transitionStyles[state], ...currentHeight }}
-              onMouseEnter={() => clearTimeout(timeout.current)}
-              onMouseLeave={() => _autohide}
-              {...rest}
-              key={key}
-              ref={forkedRef}
-            >
-              {title && (
-                <CToastHeader icon={icon} title={title} time={time}>
-                  {dismissible && <CButtonClose onClick={() => setVisible(false)} />}
-                </CToastHeader>
-              )}
-              <CToastBody>{children}</CToastBody>
-              {!title && dismissible && <CButtonClose onClick={() => setVisible(false)} />}
-            </div>
-          )
-        }}
-      </Transition>
+        <CToastContext.Provider value={contextValues}>
+          <div
+            className={_className}
+            aria-live="assertive"
+            aria-atomic="true"
+            role="alert"
+            onMouseEnter={() => clearTimeout(timeout.current)}
+            onMouseLeave={() => _autohide}
+            {...rest}
+            key={key}
+            ref={ref}
+          >
+            {children}
+          </div>
+        </CToastContext.Provider>
+      </CSSTransition>
     )
   },
 )
@@ -208,12 +149,8 @@ CToast.propTypes = {
   className: PropTypes.string,
   color: colorPropType,
   delay: PropTypes.number,
-  dismissible: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   key: PropTypes.number,
   onDismiss: PropTypes.func,
-  time: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   visible: PropTypes.bool,
 }
 

src/components/toast/CToastClose.tsx

@@ -0,0 +1,32 @@
+import React, { ElementType, forwardRef, useContext } from 'react'
+import PropTypes from 'prop-types'
+// import classNames from 'classnames'
+import { CToastContext } from './CToast'
+import { CButtonClose, CButtonCloseProps } from '../button/CButtonClose'
+
+export interface CToastCloseProps extends CButtonCloseProps {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   */
+  component?: string | ElementType
+}
+
+export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
+  ({ children, component: Component, ...rest }, ref) => {
+    const { setVisible } = useContext(CToastContext)
+    return Component ? (
+      <Component onClick={() => setVisible(false)} {...rest} ref={ref}>
+        {children}
+      </Component>
+    ) : (
+      <CButtonClose onClick={() => setVisible(false)} {...rest} ref={ref} />
+    )
+  },
+)
+
+CToastClose.propTypes = {
+  ...CButtonClose.propTypes,
+  component: PropTypes.elementType,
+}
+
+CToastClose.displayName = 'CToastClose'

src/components/toast/CToastHeader.tsx

@@ -1,35 +1,27 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CToastClose } from './CToastClose'
+
 export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
   /**
-   * Set component's icon. [docs]
-   */
-  icon?: string | ElementType
-  /**
-   * Time node for your component. [docs]
-   */
-  time?: string | ElementType
-  /**
-   * Title node for your component. [docs]
+   * Automatically add a close button to the header.
    */
-  title?: string | ElementType
+  close?: boolean
 }
 
 export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
-  ({ children, className, icon, time, title, ...rest }, ref) => {
+  ({ children, className, close, ...rest }, ref) => {
     const _className = classNames('toast-header', className)
     return (
       <div className={_className} {...rest} ref={ref}>
-        {icon}
-        {title && <span className="fw-semibold me-auto">{title}</span>}
-        {time && <span className="text-medium-emphasis small">{time}</span>}
         {children}
+        {close && <CToastClose/>}
       </div>
     )
   },
@@ -38,9 +30,7 @@ export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
 CToastHeader.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  time: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  close: PropTypes.bool
 }
 
 CToastHeader.displayName = 'CToastHeader'