From 629efb7d5d47302403b1277a2bfce802839ac730 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 29 Aug 2023 19:31:12 +0800 Subject: [PATCH] perf: Notification style should be generated when shown (#44488) * fix: Notification style should be generated when shown * chore: bump rc-notification * chore: code clean * feat: update --- components/message/style/index.tsx | 3 -- components/message/useMessage.tsx | 32 +++++++++++++----- components/notification/style/index.tsx | 3 -- components/notification/useNotification.tsx | 37 +++++++++++++++------ package.json | 2 +- 5 files changed, 52 insertions(+), 25 deletions(-) diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index 794734729130..80cee4cbc5c9 100644 --- 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 index 5fb3ed25b992..c49e4a6e26b6 100644 --- 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> = ({ children, prefixCls }) => { + const [, hashId] = useStyle(prefixCls); + return ( + + {children} + + ); +}; + +const renderNotifications: RcNotificationConfig['renderNotifications'] = ( + node, + { prefixCls, key }, +) => ( + + {node} + +); + const Holder = React.forwardRef((props, ref) => { const { top, @@ -49,8 +68,6 @@ const Holder = React.forwardRef((props, ref) => { const prefixCls = staticPrefixCls || getPrefixCls('message'); - const [, hashId] = useStyle(prefixCls); - // =============================== Style =============================== const getStyle = (): React.CSSProperties => ({ left: '50%', @@ -58,7 +75,7 @@ const Holder = React.forwardRef((props, ref) => { 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((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 index c4bfa12e5531..c14d08a802b3 100644 --- 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 index 505109b04e94..f9b045133833 100644 --- 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> = ({ children, prefixCls }) => { + const [, hashId] = useStyle(prefixCls); + return ( + + {children} + + ); +}; + +const renderNotifications: RcNotificationConfig['renderNotifications'] = ( + node, + { prefixCls, key }, +) => ( + + {node} + +); + const Holder = React.forwardRef((props, ref) => { const { top, @@ -50,10 +71,7 @@ const Holder = React.forwardRef((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((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 index 41bcc777eef2..73eb1a640ae9 100644 --- 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",