feat(message): support theme-aware icon callbacks in message config

packages/components/message/MessageComponent.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { fadeIn } from '@tdesign/common-js/message/index';
 
 import noop from '../_util/noop';
+import parseTNode from '../_util/parseTNode';
 import { usePersistFn } from '../hooks/usePersistFn';
 import MessageClose from './MessageClose';
 import MessageIcon from './MessageIcon';
@@ -84,7 +85,7 @@ const MessageComponent = forwardRef<HTMLDivElement, MessageComponentProps>((prop
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      {icon === true ? <MessageIcon theme={theme} /> : icon}
+      {parseTNode(icon, { theme }, <MessageIcon theme={theme} />)}
       {content ? content : children}
       <MessageClose closeBtn={closeBtn} onCloseBtnClick={handleCloseBtnClick} />
     </div>

packages/components/message/_example/config.tsx

@@ -11,7 +11,7 @@ export default function () {
             placement: 'bottom',
             offset: [200, 200],
             closeBtn: <div>关闭吧！！</div>,
-            icon: <div>icon吧！！</div>,
+            icon: ({ theme }) => <div>{theme} icon 吧！！</div>,
             content: 'content 吧！！',
             style: {
               backgroundColor: 'red',

packages/components/message/message.en-US.md

@@ -10,7 +10,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSPropert
 closeBtn | TNode | undefined | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 duration | Number | 3000 | \- | N
-icon | TNode | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+icon | TNode | true | Typescript: `boolean \| TNode<{ theme: MessageThemeList }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 theme | String | info | options：info/success/warning/error/question/loading。Typescript: `MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error' \| 'question' \| 'loading'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/message/type.ts) | N
 onClose | Function |  | Typescript: `(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void`<br/>close message event | N
 onCloseBtnClick | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N

packages/components/message/message.md

@@ -31,7 +31,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 closeBtn | TNode | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 content | TNode | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
-icon | TNode | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+icon | TNode | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode<{ theme: MessageThemeList }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 theme | String | info | 消息组件风格。可选项：info/success/warning/error/question/loading。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error' \| 'question' \| 'loading'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/message/type.ts) | N
 onClose | Function |  | TS 类型：`(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void`<br/>关闭消息时触发 | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当关闭按钮存在时，用户点击关闭按钮触发 | N

packages/components/message/type.ts

@@ -4,8 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, AttachNode } from '../common';
-import { CSSProperties, MouseEvent } from 'react';
+import { TNode, AttachNode } from "../common";
+import { CSSProperties, MouseEvent } from "react";
 
 export interface TdMessageProps {
   /**
@@ -25,7 +25,7 @@ export interface TdMessageProps {
    * 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标
    * @default true
    */
-  icon?: TNode;
+  icon?: boolean | TNode<{ theme: MessageThemeList }>;
   /**
    * 消息组件风格
    * @default info
@@ -34,11 +34,16 @@ export interface TdMessageProps {
   /**
    * 关闭消息时触发
    */
-  onClose?: (context: { trigger: 'close-click' | 'duration-end'; e?: MouseEvent<HTMLDivElement> }) => void;
+  onClose?: (context: {
+    trigger: "close-click" | "duration-end";
+    e?: MouseEvent<HTMLDivElement>;
+  }) => void;
   /**
    * 当关闭按钮存在时，用户点击关闭按钮触发
    */
-  onCloseBtnClick?: (context: { e: MouseEvent<SVGElement | HTMLElement> }) => void;
+  onCloseBtnClick?: (context: {
+    e: MouseEvent<SVGElement | HTMLElement>;
+  }) => void;
   /**
    * 计时结束后触发
    */
@@ -76,18 +81,24 @@ export interface MessageOptions extends TdMessageProps {
   zIndex?: number;
 }
 
-export type MessageThemeList = 'info' | 'success' | 'warning' | 'error' | 'question' | 'loading';
+export type MessageThemeList =
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
+  | "question"
+  | "loading";
 
 export type MessagePlacementList =
-  | 'center'
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
+  | "center"
+  | "top"
+  | "left"
+  | "right"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
 
 export interface MessageInstance {
   close: () => void;
@@ -96,39 +107,39 @@ export interface MessageInstance {
 export type MessageMethod = (
   theme: MessageThemeList,
   message: string | TNode | MessageOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
-export type MessageInfoOptions = Omit<MessageOptions, 'theme'>;
+export type MessageInfoOptions = Omit<MessageOptions, "theme">;
 
 export type MessageInfoMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageErrorMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageWarningMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageSuccessMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageLoadingMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageQuestionMethod = (
   message: string | TNode | MessageInfoOptions,
-  duration?: number,
+  duration?: number
 ) => Promise<MessageInstance>;
 
 export type MessageCloseAllMethod = () => void;