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 {
-  CheckCircleFilled,
-  CloseCircleFilled,
-  ExclamationCircleFilled,
-  InfoCircleFilled,
-  LoadingOutlined,
-} from '@ant-design/icons-vue';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
 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,114 +113,113 @@ 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) => {
-      holderRef.value?.close(key);
-    };
-
-    // >>> Open
-    const open = (config: ArgsProps): MessageType => {
-      if (!holderRef.value) {
-        const fakeResult: any = () => {};
-        fakeResult.then = () => {};
-        return fakeResult;
-      }
 
-      const { open: originOpen, prefixCls, hashId } = holderRef.value;
-      const noticePrefixCls = `${prefixCls}-notice`;
-      const { content, icon, type, key, className, onClose, ...restConfig } = config;
-
-      let mergedKey: Key = key!;
-      if (mergedKey === undefined || mergedKey === null) {
-        keyIndex += 1;
-        mergedKey = `antd-message-${keyIndex}`;
-      }
-
-      return wrapPromiseFn(resolve => {
-        originOpen({
-          ...restConfig,
-          key: mergedKey,
-          content: (
-            <PureContent prefixCls={prefixCls} type={type} icon={icon}>
-              {content}
-            </PureContent>
-          ),
-          placement: 'top',
-          // @ts-ignore
-          class: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
-          onClose: () => {
-            onClose?.();
-            resolve();
-          },
-        });
-
-        // Return close function
-        return () => {
-          close(mergedKey);
-        };
+  // Wrap with notification content
+  // >>> close
+  const close = (key: Key) => {
+    holderRef.value?.close(key);
+  };
+
+  // >>> Open
+  const open = (config: ArgsProps): MessageType => {
+    if (!holderRef.value) {
+      const fakeResult: any = () => {};
+      fakeResult.then = () => {};
+      return fakeResult;
+    }
+
+    const { open: originOpen, prefixCls, hashId } = holderRef.value;
+    const noticePrefixCls = `${prefixCls}-notice`;
+    const { content, icon, type, key, class: className, onClose, ...restConfig } = config;
+
+    let mergedKey: Key = key!;
+    if (mergedKey === undefined || mergedKey === null) {
+      keyIndex += 1;
+      mergedKey = `antd-message-${keyIndex}`;
+    }
+
+    return wrapPromiseFn(resolve => {
+      originOpen({
+        ...restConfig,
+        key: mergedKey,
+        content: () => (
+          <PureContent
+            prefixCls={prefixCls}
+            type={type}
+            icon={typeof icon === 'function' ? icon() : icon}
+          >
+            {typeof content === 'function' ? content() : content}
+          </PureContent>
+        ),
+        placement: 'top',
+        // @ts-ignore
+        class: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
+        onClose: () => {
+          onClose?.();
+          resolve();
+        },
       });
-    };
 
-    // >>> destroy
-    const destroy = (key?: Key) => {
-      if (key !== undefined) {
-        close(key);
+      // Return close function
+      return () => {
+        close(mergedKey);
+      };
+    });
+  };
+
+  // >>> destroy
+  const destroy = (key?: Key) => {
+    if (key !== undefined) {
+      close(key);
+    } else {
+      holderRef.value?.destroy();
+    }
+  };
+
+  const wrapAPI = {
+    open,
+    destroy,
+  } as MessageInstance;
+
+  const keys: NoticeType[] = ['info', 'success', 'warning', 'error', 'loading'];
+  keys.forEach(type => {
+    const typeOpen: TypeOpen = (jointContent, duration, onClose) => {
+      let config: ArgsProps;
+      if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
+        config = jointContent;
       } else {
-        holderRef.value?.destroy();
+        config = {
+          content: jointContent as VNode,
+        };
       }
-    };
 
-    const clone = {
-      open,
-      destroy,
-    } as MessageInstance;
-
-    const keys: NoticeType[] = ['info', 'success', 'warning', 'error', 'loading'];
-    keys.forEach(type => {
-      const typeOpen: TypeOpen = (jointContent, duration, onClose) => {
-        let config: ArgsProps;
-        if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
-          config = jointContent;
-        } else {
-          config = {
-            content: jointContent as VNode,
-          };
-        }
-
-        // Params
-        let mergedDuration: number | undefined;
-        let mergedOnClose: VoidFunction | undefined;
-        if (typeof duration === 'function') {
-          mergedOnClose = duration;
-        } else {
-          mergedDuration = duration;
-          mergedOnClose = onClose;
-        }
-
-        const mergedConfig = {
-          onClose: mergedOnClose,
-          duration: mergedDuration,
-          ...config,
-          type,
-        };
+      // Params
+      let mergedDuration: number | undefined;
+      let mergedOnClose: VoidFunction | undefined;
+      if (typeof duration === 'function') {
+        mergedOnClose = duration;
+      } else {
+        mergedDuration = duration;
+        mergedOnClose = onClose;
+      }
 
-        return open(mergedConfig);
+      const mergedConfig = {
+        onClose: mergedOnClose,
+        duration: mergedDuration,
+        ...config,
+        type,
       };
 
-      clone[type] = typeOpen;
-    });
+      return open(mergedConfig);
+    };
 
-    return clone;
+    wrapAPI[type] = typeOpen;
   });
 
   // ============================== Return ===============================
-  return [
-    wrapAPI.value,
-    () => <Holder key="message-holder" {...messageConfig} ref={holderRef} />,
-  ] as const;
+  return [wrapAPI, () => <Holder key={holderKey} {...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),
   }));
-
-  return [fns.value, () => <ElementsHolder key="modal-holder" ref={holderRef} />] as const;
+  const holderKey = Symbol('modalHolderKey');
+  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