refactor: message & notification

Author: tangjinzhou

components/message/index.tsx

@@ -8,6 +8,7 @@ import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
 import type { Key, VueNode } from '../_util/type';
 import type { NotificationInstance } from '../vc-notification/Notification';
 import classNames from '../_util/classNames';
+import useStyle from './style';
 
 let defaultDuration = 3;
 let defaultTop: string;
@@ -80,6 +81,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn
       getContainer: getContainer || args.getPopupContainer,
       maxCount,
       name: 'message',
+      useStyle,
     },
     (instance: any) => {
       if (messageInstance) {

components/message/style/index.less

@@ -0,0 +1,178 @@
+// deps-lint-skip-all
+import { Keyframes } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent } from '../../_style';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+  height: number;
+  zIndexPopup: number;
+}
+
+interface MessageToken extends FullToken<'Message'> {
+  // Custom token here
+  messageNoticeContentPadding: string;
+}
+
+const genMessageStyle: GenerateStyle<MessageToken> = token => {
+  const {
+    componentCls,
+    iconCls,
+    boxShadowSecondary,
+    colorBgElevated,
+    colorSuccess,
+    colorError,
+    colorWarning,
+    colorInfo,
+    fontSizeLG,
+    motionEaseInOutCirc,
+    motionDurationSlow,
+    marginXS,
+    paddingXS,
+    borderRadiusLG,
+    zIndexPopup,
+    // Custom token
+    messageNoticeContentPadding,
+  } = token;
+
+  const messageMoveIn = new Keyframes('MessageMoveIn', {
+    '0%': {
+      padding: 0,
+      transform: 'translateY(-100%)',
+      opacity: 0,
+    },
+
+    '100%': {
+      padding: paddingXS,
+      transform: 'translateY(0)',
+      opacity: 1,
+    },
+  });
+
+  const messageMoveOut = new Keyframes('MessageMoveOut', {
+    '0%': {
+      maxHeight: token.height,
+      padding: paddingXS,
+      opacity: 1,
+    },
+    '100%': {
+      maxHeight: 0,
+      padding: 0,
+      opacity: 0,
+    },
+  });
+
+  return [
+    // ============================ Holder ============================
+    {
+      [componentCls]: {
+        ...resetComponent(token),
+        position: 'fixed',
+        top: marginXS,
+        width: '100%',
+        pointerEvents: 'none',
+        zIndex: zIndexPopup,
+
+        [`${componentCls}-move-up`]: {
+          animationFillMode: 'forwards',
+        },
+        [`
+        ${componentCls}-move-up-appear,
+        ${componentCls}-move-up-enter
+      `]: {
+          animationName: messageMoveIn,
+          animationDuration: motionDurationSlow,
+          animationPlayState: 'paused',
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+        [`
+        ${componentCls}-move-up-appear${componentCls}-move-up-appear-active,
+        ${componentCls}-move-up-enter${componentCls}-move-up-enter-active
+      `]: {
+          animationPlayState: 'running',
+        },
+        [`${componentCls}-move-up-leave`]: {
+          animationName: messageMoveOut,
+          animationDuration: motionDurationSlow,
+          animationPlayState: 'paused',
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+        [`${componentCls}-move-up-leave${componentCls}-move-up-leave-active`]: {
+          animationPlayState: 'running',
+        },
+        '&-rtl': {
+          direction: 'rtl',
+          span: {
+            direction: 'rtl',
+          },
+        },
+      },
+    },
+
+    // ============================ Notice ============================
+    {
+      [`${componentCls}-notice`]: {
+        padding: paddingXS,
+        textAlign: 'center',
+
+        [iconCls]: {
+          verticalAlign: 'text-bottom',
+          marginInlineEnd: marginXS, // affected by ltr or rtl
+          fontSize: fontSizeLG,
+        },
+
+        [`${componentCls}-notice-content`]: {
+          display: 'inline-block',
+          padding: messageNoticeContentPadding,
+          background: colorBgElevated,
+          borderRadius: borderRadiusLG,
+          boxShadow: boxShadowSecondary,
+          pointerEvents: 'all',
+        },
+
+        [`${componentCls}-success ${iconCls}`]: {
+          color: colorSuccess,
+        },
+        [`${componentCls}-error ${iconCls}`]: {
+          color: colorError,
+        },
+        [`${componentCls}-warning ${iconCls}`]: {
+          color: colorWarning,
+        },
+        [`
+        ${componentCls}-info ${iconCls},
+        ${componentCls}-loading ${iconCls}`]: {
+          color: colorInfo,
+        },
+      },
+    },
+
+    // ============================= Pure =============================
+    {
+      [`${componentCls}-notice-pure-panel`]: {
+        padding: 0,
+        textAlign: 'start',
+      },
+    },
+  ];
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Message',
+  token => {
+    // Gen-style functions here
+    const combinedToken = mergeToken<MessageToken>(token, {
+      messageNoticeContentPadding: `${
+        (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
+      }px ${token.paddingSM}px`,
+    });
+    return [genMessageStyle(combinedToken)];
+  },
+  token => ({
+    height: 150,
+    zIndexPopup: token.zIndexPopupBase + 10,
+  }),
+);

components/message/style/index.ts

@@ -10,7 +10,7 @@ import { renderHelper } from '../_util/util';
 import { globalConfig } from '../config-provider';
 import type { NotificationInstance as VCNotificationInstance } from '../vc-notification/Notification';
 import classNames from '../_util/classNames';
-
+import useStyle from './style';
 export type NotificationPlacement =
   | 'top'
   | 'topLeft'
@@ -163,6 +163,7 @@ function getNotificationInstance(
     {
       name: 'notification',
       prefixCls: customizePrefixCls || defaultPrefixCls,
+      useStyle,
       class: notificationClass,
       style: getPlacementStyle(placement, top, bottom),
       appContext,