From 0d835d2cbe931e640cd4e1ef76cc9b49898d925d Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Mon, 16 Dec 2024 00:35:49 +0800
Subject: [PATCH] feat: toast support config provider

---
 .../config-provider/config-provider.tsx        |  5 +++++
 src/components/toast/toast.tsx                 | 18 +++++++++++++++---
 src/utils/render-imperatively.tsx              |  7 ++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/config-provider/config-provider.tsx b/src/components/config-provider/config-provider.tsx
index 6435035ad3..3f4c1dbd44 100644
--- a/src/components/config-provider/config-provider.tsx
+++ b/src/components/config-provider/config-provider.tsx
@@ -42,6 +42,11 @@ type Config = {
   searchBar?: {
     searchIcon?: ReactNode
   }
+  toast?: {
+    successIcon?: ReactNode
+    failIcon?: ReactNode
+    loadingIcon?: ReactNode
+  }
 }
 
 export const defaultConfigRef: {
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
index fe7a7cbdc8..7df4278539 100644
--- a/src/components/toast/toast.tsx
+++ b/src/components/toast/toast.tsx
@@ -6,6 +6,7 @@ import { GetContainer } from '../../utils/render-to-container'
 import { mergeProps } from '../../utils/with-default-props'
 import { PropagationEvent } from '../../utils/with-stop-propagation'
 import AutoCenter from '../auto-center'
+import { useConfig } from '../config-provider'
 import type { MaskProps } from '../mask'
 import Mask from '../mask'
 import SpinLoading from '../spin-loading'
@@ -34,17 +35,28 @@ const defaultProps = {
 export const InternalToast: FC<ToastProps> = p => {
   const props = mergeProps(defaultProps, p)
   const { maskClickable, content, icon, position } = props
+  const { toast: componentConfig = {} } = useConfig()
 
   const iconElement = useMemo(() => {
     if (icon === null || icon === undefined) return null
     switch (icon) {
       case 'success':
-        return <CheckOutline className={`${classPrefix}-icon-success`} />
+        return (
+          componentConfig.successIcon ?? (
+            <CheckOutline className={`${classPrefix}-icon-success`} />
+          )
+        )
       case 'fail':
-        return <CloseOutline className={`${classPrefix}-icon-fail`} />
+        return (
+          componentConfig.failIcon ?? (
+            <CloseOutline className={`${classPrefix}-icon-fail`} />
+          )
+        )
       case 'loading':
         return (
-          <SpinLoading color='white' className={`${classPrefix}-loading`} />
+          componentConfig.loadingIcon ?? (
+            <SpinLoading color='white' className={`${classPrefix}-loading`} />
+          )
         )
       default:
         return icon
diff --git a/src/utils/render-imperatively.tsx b/src/utils/render-imperatively.tsx
index bf5c8ec37f..1eac4c3730 100644
--- a/src/utils/render-imperatively.tsx
+++ b/src/utils/render-imperatively.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react'
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import ConfigProvider, { getDefaultConfig } from '../components/config-provider'
 import { renderToBody } from './render-to-body'
 
 type ImperativeProps = {
@@ -55,7 +56,11 @@ export function renderImperatively(element: TargetElement) {
     })
   })
   const wrapperRef = React.createRef<ImperativeHandler>()
-  const unmount = renderToBody(<Wrapper ref={wrapperRef} />)
+  const unmount = renderToBody(
+    <ConfigProvider {...getDefaultConfig()}>
+      <Wrapper ref={wrapperRef} />
+    </ConfigProvider>
+  )
   return {
     close: async () => {
       if (!wrapperRef.current) {