diff --git a/packages/components/message/MessageComponent.tsx b/packages/components/message/MessageComponent.tsx index e2e62e0f3d..2f66feaf34 100644 --- a/packages/components/message/MessageComponent.tsx +++ b/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((prop onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} > - {icon === true ? : icon} + {parseTNode(icon, { theme }, )} {content ? content : children} diff --git a/packages/components/message/_example/config.tsx b/packages/components/message/_example/config.tsx index 4a19ba615e..44e056a665 100644 --- a/packages/components/message/_example/config.tsx +++ b/packages/components/message/_example/config.tsx @@ -11,7 +11,7 @@ export default function () { placement: 'bottom', offset: [200, 200], closeBtn:
关闭吧!!
, - icon:
icon吧!!
, + icon: ({ theme }) =>
{theme} icon 吧!!
, content: 'content 吧!!', style: { backgroundColor: 'red', diff --git a/packages/components/message/message.en-US.md b/packages/components/message/message.en-US.md index 31465ca5fe..bf218560b8 100644 --- a/packages/components/message/message.en-US.md +++ b/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`
close message event | N onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N diff --git a/packages/components/message/message.md b/packages/components/message/message.md index 368207703a..f43bd61b12 100644 --- a/packages/components/message/message.md +++ b/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`
关闭消息时触发 | N onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
当关闭按钮存在时,用户点击关闭按钮触发 | N diff --git a/packages/components/message/type.ts b/packages/components/message/type.ts index fac3b35176..fb48febe62 100644 --- a/packages/components/message/type.ts +++ b/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 }) => void; + onClose?: (context: { + trigger: "close-click" | "duration-end"; + e?: MouseEvent; + }) => void; /** * 当关闭按钮存在时,用户点击关闭按钮触发 */ - onCloseBtnClick?: (context: { e: MouseEvent }) => void; + onCloseBtnClick?: (context: { + e: MouseEvent; + }) => 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; -export type MessageInfoOptions = Omit; +export type MessageInfoOptions = Omit; export type MessageInfoMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageErrorMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageWarningMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageSuccessMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageLoadingMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageQuestionMethod = ( message: string | TNode | MessageInfoOptions, - duration?: number, + duration?: number ) => Promise; export type MessageCloseAllMethod = () => void;