feat: update ToastManager to support custom container and transitio…

…n components
trendmicro-frontend · Dec 27, 2023 · 37c5b64 · 37c5b64
1 parent 4a940ec
commit 37c5b64
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/react-docs/pages/components/toast-manager/index.page.mdx b/packages/react-docs/pages/components/toast-manager/index.page.mdx
@@ -88,6 +88,10 @@ See the [useToastManager](./toast-manager/useToastManager) Hook for detailed usa
 
 | Name | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |
+| ContainerComponent | ElementType | ToastContainer | The component used for the container. |
+| ContainerProps | object | | Props applied to the container component. |
+| TransitionComponent | ElementType | ToastTransition | The component used for the transition. |
+| TransitionProps | object | | Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
 | children | ReactNode \| `(context) => ReactNode` | | A function child can be used intead of a React element. This function is called with the context object. |
 | containerRef | RefObject | | A `ref` to the component where the toasts will be rendered. |
 | placement | string | 'bottom-right' | The default placement to place toasts. One of: 'top', 'top-right', 'top-left', 'bottom', 'bottom-left', 'bottom-right' |
diff --git a/packages/react/src/toast/ToastManager.js b/packages/react/src/toast/ToastManager.js
@@ -42,7 +42,10 @@ const getToastPlacementByState = (state, id) => {
 
 const ToastManager = ({
   container: DEPRECATED_container, // deprecated (remove in next major version)
-
+  ContainerComponent = ToastContainer,
+  ContainerProps,
+  TransitionComponent = ToastTransition,
+  TransitionProps,
   children,
   containerRef,
   placement: placementProp = defaultPlacement,
@@ -250,16 +253,17 @@ const ToastManager = ({
           {Object.keys(state).map((placement) => {
             const toasts = ensureArray(state[placement]);
             return (
-              <ToastContainer
+              <ContainerComponent
+                {...ContainerProps}
                 key={placement}
                 placement={placement}
               >
                 <TransitionGroup component={null}>
                   {toasts.map((toast) => (
-                    <ToastTransition
+                    <TransitionComponent
+                      {...TransitionProps}
                       key={toast.id}
                       in={true}
-                      collapsedHeight={0}
                       unmountOnExit
                     >
                       <ToastController
@@ -282,10 +286,10 @@ const ToastManager = ({
                           return null;
                         })()}
                       </ToastController>
-                    </ToastTransition>
+                    </TransitionComponent>
                   ))}
                 </TransitionGroup>
-              </ToastContainer>
+              </ContainerComponent>
             );
           })}
         </Portal>