perf: Notification style should be generated when shown (ant-design#4…

…4488) * fix: Notification style should be generated when shown * chore: bump rc-notification * chore: code clean * feat: update
ammar-knowledge · Aug 29, 2023 · 629efb7 · 629efb7
1 parent 8d7dd80
commit 629efb7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 25 deletions.
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
@@ -201,7 +201,4 @@ export default genComponentStyleHook(
       token.paddingSM
     }px`,
   }),
-  {
-    clientOnly: true,
-  },
 );
diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx
@@ -1,6 +1,6 @@
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
-import { useNotification as useRcNotification } from 'rc-notification';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
 import type { NotificationAPI } from 'rc-notification/lib';
 import * as React from 'react';
 import warning from '../_util/warning';
@@ -17,6 +17,8 @@ import type {
 } from './interface';
 import useStyle from './style';
 import { getMotion, wrapPromiseFn } from './util';
+import type { FC, PropsWithChildren } from 'react';
+import type { NotificationConfig as RcNotificationConfig } from 'rc-notification/lib/useNotification';
 
 const DEFAULT_OFFSET = 8;
 const DEFAULT_DURATION = 3;
@@ -30,10 +32,27 @@ type HolderProps = ConfigOptions & {
 
 interface HolderRef extends NotificationAPI {
   prefixCls: string;
-  hashId: string;
   message?: ComponentStyleConfig;
 }
 
+const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
+  const [, hashId] = useStyle(prefixCls);
+  return (
+    <NotificationProvider classNames={{ list: hashId, notice: hashId }}>
+      {children}
+    </NotificationProvider>
+  );
+};
+
+const renderNotifications: RcNotificationConfig['renderNotifications'] = (
+  node,
+  { prefixCls, key },
+) => (
+  <Wrapper prefixCls={prefixCls} key={key}>
+    {node}
+  </Wrapper>
+);
+
 const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const {
     top,
@@ -49,16 +68,14 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
 
   const prefixCls = staticPrefixCls || getPrefixCls('message');
 
-  const [, hashId] = useStyle(prefixCls);
-
   // =============================== Style ===============================
   const getStyle = (): React.CSSProperties => ({
     left: '50%',
     transform: 'translateX(-50%)',
     top: top ?? DEFAULT_OFFSET,
   });
 
-  const getClassName = () => classNames(hashId, { [`${prefixCls}-rtl`]: rtl });
+  const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
 
   // ============================== Motion ===============================
   const getNotificationMotion = () => getMotion(prefixCls, transitionName);
@@ -82,13 +99,13 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,
+    renderNotifications,
   });
 
   // ================================ Ref ================================
   React.useImperativeHandle(ref, () => ({
     ...api,
     prefixCls,
-    hashId,
     message,
   }));
 
@@ -128,7 +145,7 @@ export function useInternalMessage(
         return fakeResult;
       }
 
-      const { open: originOpen, prefixCls, hashId, message } = holderRef.current;
+      const { open: originOpen, prefixCls, message } = holderRef.current;
       const noticePrefixCls = `${prefixCls}-notice`;
 
       const { content, icon, type, key, className, style, onClose, ...restConfig } = config;
@@ -151,7 +168,6 @@ export function useInternalMessage(
           placement: 'top',
           className: classNames(
             type && `${noticePrefixCls}-${type}`,
-            hashId,
             className,
             message?.className,
           ),

diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx
@@ -300,7 +300,4 @@ export default genComponentStyleHook(
     zIndexPopup: token.zIndexPopupBase + 50,
     width: 384,
   }),
-  {
-    clientOnly: true,
-  },
 );
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useNotification as useRcNotification } from 'rc-notification';
-import type { NotificationAPI } from 'rc-notification/lib';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
+import type {
+  NotificationAPI,
+  NotificationConfig as RcNotificationConfig,
+} from 'rc-notification/lib';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { ComponentStyleConfig } from '../config-provider/context';
@@ -14,6 +17,7 @@ import type {
 import { getCloseIcon, PureContent } from './PurePanel';
 import useStyle from './style';
 import { getMotion, getPlacementStyle } from './util';
+import type { FC, PropsWithChildren } from 'react';
 
 const DEFAULT_OFFSET = 24;
 const DEFAULT_DURATION = 4.5;
@@ -28,10 +32,27 @@ type HolderProps = NotificationConfig & {
 
 interface HolderRef extends NotificationAPI {
   prefixCls: string;
-  hashId: string;
   notification?: ComponentStyleConfig;
 }
 
+const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
+  const [, hashId] = useStyle(prefixCls);
+  return (
+    <NotificationProvider classNames={{ list: hashId, notice: hashId }}>
+      {children}
+    </NotificationProvider>
+  );
+};
+
+const renderNotifications: RcNotificationConfig['renderNotifications'] = (
+  node,
+  { prefixCls, key },
+) => (
+  <Wrapper prefixCls={prefixCls} key={key}>
+    {node}
+  </Wrapper>
+);
+
 const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const {
     top,
@@ -50,10 +71,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const getStyle = (placement: NotificationPlacement): React.CSSProperties =>
     getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
 
-  // Style
-  const [, hashId] = useStyle(prefixCls);
-
-  const getClassName = () => classNames(hashId, { [`${prefixCls}-rtl`]: rtl });
+  const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
 
   // ============================== Motion ===============================
   const getNotificationMotion = () => getMotion(prefixCls);
@@ -70,13 +88,13 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,
+    renderNotifications,
   });
 
   // ================================ Ref ================================
   React.useImperativeHandle(ref, () => ({
     ...api,
     prefixCls,
-    hashId,
     notification,
   }));
 
@@ -106,7 +124,7 @@ export function useInternalNotification(
         return;
       }
 
-      const { open: originOpen, prefixCls, hashId, notification } = holderRef.current;
+      const { open: originOpen, prefixCls, notification } = holderRef.current;
 
       const noticePrefixCls = `${prefixCls}-notice`;
 
@@ -142,7 +160,6 @@ export function useInternalNotification(
         ),
         className: classNames(
           type && `${noticePrefixCls}-${type}`,
-          hashId,
           className,
           notification?.className,
         ),

diff --git a/package.json b/package.json
@@ -136,7 +136,7 @@
     "rc-mentions": "~2.5.0",
     "rc-menu": "~9.10.0",
     "rc-motion": "^2.7.3",
-    "rc-notification": "~5.0.4",
+    "rc-notification": "~5.1.1",
     "rc-pagination": "~3.6.0",
     "rc-picker": "~3.13.0",
     "rc-progress": "~3.4.1",
-Original file line number
+Diff line change
@@ Expand Up / @@ -201,7 +201,4 @@ export default genComponentStyleHook( @@
           token.paddingSM
         }px`,
       }),
-      {
-        clientOnly: true,
-      },
     );