feat(Message): add useMessage hook

Author: CCherry07

components/_util/util.ts

@@ -78,5 +78,24 @@ export function renderHelper<T = Record<string, any>>(
   }
   return v ?? defaultV;
 }
+export function wrapPromiseFn(openFn: (resolve: VoidFunction) => VoidFunction) {
+  let closeFn: VoidFunction;
+
+  const closePromise = new Promise<boolean>(resolve => {
+    closeFn = openFn(() => {
+      resolve(true);
+    });
+  });
+
+  const result: any = () => {
+    closeFn?.();
+  };
+
+  result.then = (filled: VoidFunction, rejected: VoidFunction) =>
+    closePromise.then(filled, rejected);
+  result.promise = closePromise;
+
+  return result;
+}
 
 export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

components/message/PurePanel.tsx

@@ -0,0 +1,79 @@
+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 type { VueNode } from '../_util/type';
+import classNames from '../_util/classNames';
+import { useConfigContextInject } from '../config-provider/context';
+import { computed, defineComponent } from 'vue';
+
+export const TypeIcon = {
+  info: <InfoCircleFilled />,
+  success: <CheckCircleFilled />,
+  error: <CloseCircleFilled />,
+  warning: <ExclamationCircleFilled />,
+  loading: <LoadingOutlined />,
+};
+
+export interface PureContentProps {
+  prefixCls: string;
+  type?: NoticeType;
+  icon?: VueNode;
+  children: VueNode;
+}
+
+export const PureContent = defineComponent({
+  name: 'PureContent',
+  inheritAttrs: false,
+  props: ['prefixCls', 'type', 'icon'] as any,
+
+  setup(props, { slots }) {
+    return () => (
+      <div
+        class={classNames(`${props.prefixCls}-custom-content`, `${props.prefixCls}-${props.type}`)}
+      >
+        {props.icon || TypeIcon[props.type!]}
+        <span>{slots.default?.()}</span>
+      </div>
+    );
+  },
+});
+
+export interface PurePanelProps
+  extends Omit<NoticeProps, 'prefixCls' | 'eventKey'>,
+    Omit<PureContentProps, 'prefixCls' | 'children'> {
+  prefixCls?: string;
+}
+
+/** @private Internal Component. Do not use in your production. */
+
+export default defineComponent({
+  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 [, hashId] = useStyle(prefixCls);
+    return (
+      <Notice
+        {...attrs}
+        prefixCls={prefixCls.value}
+        class={classNames(hashId, `${prefixCls.value}-notice-pure-panel`)}
+        noticeKey="pure"
+        duration={null}
+      >
+        <PureContent prefixCls={props.prefixCls} type={props.type} icon={props.icon}>
+          {slots.default?.()}
+        </PureContent>
+      </Notice>
+    );
+  },
+});

components/message/index.tsx

@@ -9,7 +9,7 @@ import type { Key, VueNode } from '../_util/type';
 import type { NotificationInstance } from '../vc-notification/Notification';
 import classNames from '../_util/classNames';
 import useStyle from './style';
-
+import useMessage from './useMessage';
 let defaultDuration = 3;
 let defaultTop: string;
 let messageInstance: NotificationInstance;
@@ -70,6 +70,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn
     callback(messageInstance);
     return;
   }
+
   Notification.newInstance(
     {
       appContext: args.appContext,
@@ -225,14 +226,15 @@ export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
 typeList.forEach(type => attachTypeApi(api, type));
 
 api.warn = api.warning;
-
+api.useMessage = useMessage;
 export interface MessageInstance {
   info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   loading(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   open(args: MessageArgsProps): MessageType;
+  useMessage: typeof useMessage;
 }
 
 export interface MessageApi extends MessageInstance {

components/message/interface.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties } from 'vue';
+import type { Key, VueNode } from '../_util/type';
+
+export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+
+export interface ConfigOptions {
+  top?: number;
+  duration?: number;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement;
+  transitionName?: string;
+  maxCount?: number;
+  rtl?: boolean;
+}
+
+export interface ArgsProps {
+  content: VueNode;
+  duration?: number;
+  type?: NoticeType;
+  onClose?: () => void;
+  icon?: VueNode;
+  key?: string | number;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: (e: Event) => void;
+}
+
+export type JointContent = VueNode | ArgsProps;
+
+export interface MessageType extends PromiseLike<boolean> {
+  (): void;
+}
+
+export type TypeOpen = (
+  content: JointContent,
+  duration?: number | VoidFunction, // Also can use onClose directly
+  onClose?: VoidFunction,
+) => MessageType;
+
+export interface MessageInstance {
+  info: TypeOpen;
+  success: TypeOpen;
+  error: TypeOpen;
+  warning: TypeOpen;
+  loading: TypeOpen;
+  open(args: ArgsProps): MessageType;
+  destroy(key?: Key): void;
+}