refactor: useNotification #6527

Author: tangjinzhou

components/message/interface.ts

@@ -4,7 +4,7 @@ import type { Key, VueNode } from '../_util/type';
 export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
 
 export interface ConfigOptions {
-  top?: number;
+  top?: number | string;
   duration?: number;
   prefixCls?: string;
   getContainer?: () => HTMLElement;

components/message/useMessage.tsx

@@ -56,11 +56,14 @@ const Holder = defineComponent({
     const [, hashId] = useStyle(prefixCls);
 
     // =============================== Style ===============================
-    const getStyles = () => ({
-      left: '50%',
-      transform: 'translateX(-50%)',
-      top: `${top ?? DEFAULT_OFFSET}px`,
-    });
+    const getStyles = () => {
+      const top = props.top ?? DEFAULT_OFFSET;
+      return {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        top: typeof top === 'number' ? `${top}px` : top,
+      };
+    };
     const getClassName = () => classNames(hashId.value, props.rtl ? `${prefixCls.value}-rtl` : '');
 
     // ============================== Motion ===============================

components/notification/PurePanel.tsx

@@ -1,18 +1,17 @@
-import { computed } from 'vue';
+import { computed, defineComponent } from 'vue';
 import useStyle from './style';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import type { IconType } from './interface';
 import Notice from '../vc-notification/Notice';
 import classNames from '../_util/classNames';
 import type { NoticeProps } from '../vc-notification/Notice';
 import type { VueNode } from '../_util/type';
-import {
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  CloseOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined,
-} 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 CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import { renderHelper } from '../_util/util';
 
 export function getCloseIcon(prefixCls: string, closeIcon?: VueNode) {
@@ -34,11 +33,19 @@ export interface PureContentProps {
   type?: IconType;
 }
 
+export const TypeIcon = {
+  info: <InfoCircleFilled />,
+  success: <CheckCircleFilled />,
+  error: <CloseCircleFilled />,
+  warning: <ExclamationCircleFilled />,
+  loading: <LoadingOutlined />,
+};
+
 const typeToIcon = {
-  success: CheckCircleOutlined,
-  info: InfoCircleOutlined,
-  error: CloseCircleOutlined,
-  warning: ExclamationCircleOutlined,
+  success: CheckCircleFilled,
+  info: InfoCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
 };
 
 export function PureContent({
@@ -74,36 +81,42 @@ export function PureContent({
 
 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 function PurePanel(props: PurePanelProps) {
-  const { getPrefixCls } = useConfigInject('notification', props);
-  const prefixCls = computed(() => props.prefixCls || getPrefixCls('notification'));
-  const noticePrefixCls = `${prefixCls.value}-notice`;
+export default defineComponent<PurePanelProps>({
+  name: 'PurePanel',
+  inheritAttrs: false,
+  props: ['prefixCls', 'icon', 'type', 'message', 'description', 'btn', 'closeIcon'] as any,
+  setup(props) {
+    const { getPrefixCls } = useConfigInject('notification', props);
+    const prefixCls = computed(() => props.prefixCls || getPrefixCls('notification'));
+    const noticePrefixCls = computed(() => `${prefixCls.value}-notice`);
 
-  const [, hashId] = useStyle(prefixCls);
-
-  return (
-    <Notice
-      {...props}
-      prefixCls={prefixCls.value}
-      class={classNames(hashId.value, `${noticePrefixCls}-pure-panel`)}
-      noticeKey="pure"
-      duration={null}
-      closable={props.closable}
-      closeIcon={getCloseIcon(prefixCls.value, props.closeIcon)}
-    >
-      <PureContent
-        prefixCls={noticePrefixCls}
-        icon={props.icon}
-        type={props.type}
-        message={props.message}
-        description={props.description}
-        btn={props.btn}
-      />
-    </Notice>
-  );
-}
+    const [, hashId] = useStyle(prefixCls);
+    return () => {
+      return (
+        <Notice
+          {...props}
+          prefixCls={prefixCls.value}
+          class={classNames(hashId.value, `${noticePrefixCls.value}-pure-panel`)}
+          noticeKey="pure"
+          duration={null}
+          closable={props.closable}
+          closeIcon={getCloseIcon(prefixCls.value, props.closeIcon)}
+        >
+          <PureContent
+            prefixCls={noticePrefixCls.value}
+            icon={props.icon}
+            type={props.type}
+            message={props.message}
+            description={props.description}
+            btn={props.btn}
+          />
+        </Notice>
+      );
+    };
+  },
+});

components/notification/index.tsx

@@ -12,6 +12,7 @@ import type { NotificationInstance as VCNotificationInstance } from '../vc-notif
 import classNames from '../_util/classNames';
 import useStyle from './style';
 import useNotification from './useNotification';
+import { getPlacementStyle } from './util';
 
 export type NotificationPlacement =
   | 'top'
@@ -77,63 +78,6 @@ function setNotificationConfig(options: ConfigProps) {
   }
 }
 
-function getPlacementStyle(
-  placement: NotificationPlacement,
-  top: string = defaultTop,
-  bottom: string = defaultBottom,
-) {
-  let style: CSSProperties;
-  switch (placement) {
-    case 'top':
-      style = {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        right: 'auto',
-        top,
-        bottom: 'auto',
-      };
-      break;
-    case 'topLeft':
-      style = {
-        left: '0px',
-        top,
-        bottom: 'auto',
-      };
-      break;
-    case 'topRight':
-      style = {
-        right: '0px',
-        top,
-        bottom: 'auto',
-      };
-      break;
-    case 'bottom':
-      style = {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        right: 'auto',
-        top: 'auto',
-        bottom,
-      };
-      break;
-    case 'bottomLeft':
-      style = {
-        left: '0px',
-        top: 'auto',
-        bottom,
-      };
-      break;
-    default:
-      style = {
-        right: '0px',
-        top: 'auto',
-        bottom,
-      };
-      break;
-  }
-  return style;
-}
-
 function getNotificationInstance(
   {
     prefixCls: customizePrefixCls,
@@ -167,7 +111,7 @@ function getNotificationInstance(
       prefixCls: customizePrefixCls || defaultPrefixCls,
       useStyle,
       class: notificationClass,
-      style: getPlacementStyle(placement, top, bottom),
+      style: getPlacementStyle(placement, top ?? defaultTop, bottom ?? defaultBottom),
       appContext,
       getContainer,
       closeIcon: ({ prefixCls }) => {
@@ -210,8 +154,8 @@ export interface NotificationArgsProps {
   class?: string;
   readonly type?: IconType;
   onClick?: () => void;
-  top?: string;
-  bottom?: string;
+  top?: string | number;
+  bottom?: string | number;
   getContainer?: () => HTMLElement;
   closeIcon?: VueNode | (() => VueNode);
   appContext?: any;

components/notification/interface.ts

@@ -12,19 +12,19 @@ export type NotificationPlacement =
 export type IconType = 'success' | 'info' | 'error' | 'warning';
 
 export interface ArgsProps {
-  message: VueNode;
-  description?: VueNode;
-  btn?: VueNode;
+  message: (() => VueNode) | VueNode;
+  description?: (() => VueNode) | VueNode;
+  btn?: (() => VueNode) | VueNode;
   key?: Key;
   onClose?: () => void;
   duration?: number | null;
-  icon?: VueNode;
+  icon?: (() => VueNode) | VueNode;
   placement?: NotificationPlacement;
   style?: CSSProperties;
-  className?: string;
+  class?: string;
   readonly type?: IconType;
   onClick?: () => void;
-  closeIcon?: VueNode;
+  closeIcon?: (() => VueNode) | VueNode;
 }
 
 type StaticFn = (args: ArgsProps) => void;
@@ -39,20 +39,20 @@ export interface NotificationInstance {
 }
 
 export interface GlobalConfigProps {
-  top?: number;
-  bottom?: number;
+  top?: number | string;
+  bottom?: number | string;
   duration?: number;
   prefixCls?: string;
   getContainer?: () => HTMLElement;
   placement?: NotificationPlacement;
-  closeIcon?: VueNode;
+  closeIcon?: (() => VueNode) | VueNode;
   rtl?: boolean;
   maxCount?: number;
 }
 
 export interface NotificationConfig {
-  top?: number;
-  bottom?: number;
+  top?: number | string;
+  bottom?: number | string;
   prefixCls?: string;
   getContainer?: () => HTMLElement;
   placement?: NotificationPlacement;