refactor: useMessage #6527

components/message/PurePanel.tsx

@@ -2,13 +2,11 @@ import Notice from '../vc-notification/Notice';
 import type { NoticeProps } from '../vc-notification/Notice';
 import useStyle from './style';
 import type { NoticeType } from './interface';
-import {
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-  CheckCircleFilled,
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
-  CloseCircleFilled,
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
-  ExclamationCircleFilled,
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
-  InfoCircleFilled,
+import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
-  LoadingOutlined,
-} from '@ant-design/icons-vue';
 import type { VueNode } from '../_util/type';
 import classNames from '../_util/classNames';
 import { useConfigContextInject } from '../config-provider/context';
@@ -26,10 +24,9 @@ export interface PureContentProps {
   prefixCls: string;
   type?: NoticeType;
   icon?: VueNode;
-  children: VueNode;
 }
 
-export const PureContent = defineComponent({
+export const PureContent = defineComponent<PureContentProps>({
   name: 'PureContent',
   inheritAttrs: false,
   props: ['prefixCls', 'type', 'icon'] as any,
@@ -48,29 +45,29 @@ export const PureContent = defineComponent({
 
 export interface PurePanelProps
   extends Omit<NoticeProps, 'prefixCls' | 'eventKey'>,
-    Omit<PureContentProps, 'prefixCls' | 'children'> {
+    Omit<PureContentProps, 'prefixCls'> {
   prefixCls?: string;
 }
 
 /** @private Internal Component. Do not use in your production. */
 
-export default defineComponent({
+export default defineComponent<PurePanelProps>({
   name: 'PurePanel',
   inheritAttrs: false,
   props: ['prefixCls', 'class', 'type', 'icon', 'content'] as any,
   setup(props, { slots, attrs }) {
     const { getPrefixCls } = useConfigContextInject();
-    const prefixCls = computed(() => props.staticPrefixCls || getPrefixCls('message'));
+    const prefixCls = computed(() => props.prefixCls || getPrefixCls('message'));
     const [, hashId] = useStyle(prefixCls);
     return (
       <Notice
         {...attrs}
         prefixCls={prefixCls.value}
-        class={classNames(hashId, `${prefixCls.value}-notice-pure-panel`)}
+        class={classNames(hashId.value, `${prefixCls.value}-notice-pure-panel`)}
         noticeKey="pure"
         duration={null}
       >
-        <PureContent prefixCls={props.prefixCls} type={props.type} icon={props.icon}>
+        <PureContent prefixCls={prefixCls.value} type={props.type} icon={props.icon}>
           {slots.default?.()}
         </PureContent>
       </Notice>

components/message/demo/hook.vue

@@ -17,7 +17,7 @@ Use `message.useMessage` to get `contextHolder` with context accessible issue. P
 </docs>
 
 <template>
-  <contextHolder />
+  <context-holder />
   <a-button type="primary" @click="info">Display normal message</a-button>
 </template>
 
@@ -26,6 +26,6 @@ import { message } from 'ant-design-vue';
 const [messageApi, contextHolder] = message.useMessage();
 
 const info = () => {
-  messageApi.info('Hello, Ant Design!');
+  messageApi.info('Hello, Ant Design Vue!');
 };
 </script>

components/message/interface.ts

@@ -14,14 +14,14 @@ export interface ConfigOptions {
 }
 
 export interface ArgsProps {
-  content: VueNode;
+  content: string | (() => VueNode) | VueNode;
   duration?: number;
   type?: NoticeType;
   onClose?: () => void;
-  icon?: VueNode;
+  icon?: (() => VueNode) | VueNode;
   key?: string | number;
   style?: CSSProperties;
-  className?: string;
+  class?: string;
   onClick?: (e: Event) => void;
 }
 

components/message/useMessage.tsx

@@ -59,7 +59,7 @@ const Holder = defineComponent({
     const getStyles = () => ({
       left: '50%',
       transform: 'translateX(-50%)',
-      top: top ?? DEFAULT_OFFSET,
+      top: `${top ?? DEFAULT_OFFSET}px`,
     });
     const getClassName = () => classNames(hashId.value, props.rtl ? `${prefixCls.value}-rtl` : '');
 
@@ -113,8 +113,9 @@ export function useInternalMessage(
   messageConfig?: HolderProps,
 ): readonly [MessageInstance, () => VNode] {
   const holderRef = shallowRef<HolderRef>(null);
+  const holderKey = Symbol('messageHolderKey');
   // ================================ API ================================
-  const wrapAPI = computed(() => {
+
   // Wrap with notification content
   // >>> close
   const close = (key: Key) => {
@@ -131,7 +132,7 @@ export function useInternalMessage(
 
     const { open: originOpen, prefixCls, hashId } = holderRef.value;
     const noticePrefixCls = `${prefixCls}-notice`;
-      const { content, icon, type, key, className, onClose, ...restConfig } = config;
+    const { content, icon, type, key, class: className, onClose, ...restConfig } = config;
 
     let mergedKey: Key = key!;
     if (mergedKey === undefined || mergedKey === null) {
@@ -143,9 +144,13 @@ export function useInternalMessage(
       originOpen({
         ...restConfig,
         key: mergedKey,
-          content: (
+        content: () => (
-            <PureContent prefixCls={prefixCls} type={type} icon={icon}>
+          <PureContent
-              {content}
+            prefixCls={prefixCls}
+            type={type}
+            icon={typeof icon === 'function' ? icon() : icon}
+          >
+            {typeof content === 'function' ? content() : content}
           </PureContent>
         ),
         placement: 'top',
@@ -173,7 +178,7 @@ export function useInternalMessage(
     }
   };
 
-    const clone = {
+  const wrapAPI = {
     open,
     destroy,
   } as MessageInstance;
@@ -210,17 +215,11 @@ export function useInternalMessage(
       return open(mergedConfig);
     };
 
-      clone[type] = typeOpen;
+    wrapAPI[type] = typeOpen;
-    });
-
-    return clone;
   });
 
   // ============================== Return ===============================
-  return [
+  return [wrapAPI, () => <Holder key={holderKey} {...messageConfig} ref={holderRef} />] as const;
-    wrapAPI.value,
-    () => <Holder key="message-holder" {...messageConfig} ref={holderRef} />,
-  ] as const;
 }
 
 export default function useMessage(messageConfig?: ConfigOptions) {

components/modal/useModal/index.tsx

@@ -144,8 +144,8 @@ function useModal(): readonly [
     warning: getConfirmFunc(withWarn),
     confirm: getConfirmFunc(withConfirm),
   }));
-
+  const holderKey = Symbol('modalHolderKey');
-  return [fns.value, () => <ElementsHolder key="modal-holder" ref={holderRef} />] as const;
+  return [fns.value, () => <ElementsHolder key={holderKey} ref={holderRef} />] as const;
 }
 
 export default useModal;

components/vc-notification/Notification.tsx

@@ -39,7 +39,7 @@ export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft'
 export interface OpenConfig extends NoticeProps {
   key: Key;
   placement?: Placement;
-  content?: VueNode;
+  content?: string | (() => VueNode) | VueNode;
   duration?: number | null;
 }
 
@@ -254,7 +254,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
         const rootPrefixCls = global.getRootPrefixCls(customRootPrefixCls, prefixCls.value);
         const transitionName = hasTransitionName
           ? customTransitionName
-          : `${rootPrefixCls}-${customTransitionName}`;
+          : `${prefixCls.value}-${customTransitionName}`;
         return (
           <ConfigProvider {...global} prefixCls={rootPrefixCls}>
             <Notification