feat: support renderNotifications (#310)

* feat: support renderNotifications

* chore: code clean

* feat: add key info

Author: MadCcc

src/NoticeList.tsx

@@ -1,10 +1,11 @@
 import type { CSSProperties, FC } from 'react';
-import React from 'react';
-import classNames from 'classnames';
+import React, { useContext } from 'react';
+import clsx from 'classnames';
 import type { CSSMotionProps } from 'rc-motion';
 import { CSSMotionList } from 'rc-motion';
 import type { InnerOpenConfig, NoticeConfig, OpenConfig, Placement } from './interface';
 import Notice from './Notice';
+import { NotificationContext } from './NotificationProvider';
 
 export interface NoticeListProps {
   configList?: OpenConfig[];
@@ -16,9 +17,6 @@ export interface NoticeListProps {
   onAllNoticeRemoved?: (placement: Placement) => void;
   onNoticeClose?: (key: React.Key) => void;
 
-  // Hook Slots
-  useStyle?: (prefixCls: string) => { notice?: string; list?: string };
-
   // Common
   className?: string;
   style?: CSSProperties;
@@ -31,13 +29,12 @@ const NoticeList: FC<NoticeListProps> = (props) => {
     prefixCls,
     className,
     style,
-    useStyle,
     motion,
     onAllNoticeRemoved,
     onNoticeClose,
   } = props;
 
-  const styles = useStyle?.(prefixCls);
+  const { classNames: ctxCls } = useContext(NotificationContext);
 
   const keys = configList.map((config) => ({
     config,
@@ -49,7 +46,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
   return (
     <CSSMotionList
       key={placement}
-      className={classNames(prefixCls, `${prefixCls}-${placement}`, styles?.list, className)}
+      className={clsx(prefixCls, `${prefixCls}-${placement}`, ctxCls?.list, className)}
       style={style}
       keys={keys}
       motionAppear
@@ -67,7 +64,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
             {...config}
             ref={nodeRef}
             prefixCls={prefixCls}
-            className={classNames(motionClassName, configClassName, styles?.notice)}
+            className={clsx(motionClassName, configClassName, ctxCls?.notice)}
             style={{
               ...motionStyle,
               ...configStyle,

src/NotificationProvider.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+import React from 'react';
+
+export interface NotificationContextProps {
+  classNames?: {
+    notice?: string;
+    list?: string;
+  };
+}
+
+export const NotificationContext = React.createContext<NotificationContextProps>({});
+
+export interface NotificationProviderProps extends NotificationContextProps {
+  children: React.ReactNode;
+}
+
+const NotificationProvider: FC<NotificationProviderProps> = ({ children, classNames }) => {
+  return (
+    <NotificationContext.Provider value={{ classNames }}>{children}</NotificationContext.Provider>
+  );
+};
+
+export default NotificationProvider;

src/Notifications.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import type { CSSMotionProps } from 'rc-motion';
 import type { InnerOpenConfig, OpenConfig, Placement, Placements } from './interface';
-import NoticeList, { NoticeListProps } from './NoticeList';
+import NoticeList from './NoticeList';
 
 export interface NotificationsProps {
   prefixCls?: string;
@@ -12,7 +13,10 @@ export interface NotificationsProps {
   className?: (placement: Placement) => string;
   style?: (placement: Placement) => React.CSSProperties;
   onAllRemoved?: VoidFunction;
-  useStyle?: NoticeListProps['useStyle'];
+  renderNotifications?: (
+    node: ReactElement,
+    info: { prefixCls: string; key: React.Key },
+  ) => ReactElement;
 }
 
 export interface NotificationsRef {
@@ -31,7 +35,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
     className,
     style,
     onAllRemoved,
-    useStyle,
+    renderNotifications,
   } = props;
   const [configList, setConfigList] = React.useState<OpenConfig[]>([]);
 
@@ -139,7 +143,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
       {placementList.map((placement) => {
         const placementConfigList = placements[placement];
 
-        return (
+        const list = (
           <NoticeList
             key={placement}
             configList={placementConfigList}
@@ -150,9 +154,12 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
             motion={motion}
             onNoticeClose={onNoticeClose}
             onAllNoticeRemoved={onAllNoticeRemoved}
-            useStyle={useStyle}
           />
         );
+
+        return renderNotifications
+          ? renderNotifications(list, { prefixCls, key: placement })
+          : list;
       })}
     </>,
     container,

src/index.ts

@@ -1,6 +1,7 @@
 import useNotification from './useNotification';
 import Notice from './Notice';
 import type { NotificationAPI, NotificationConfig } from './useNotification';
+import NotificationProvider from './NotificationProvider';
 
-export { useNotification, Notice };
+export { useNotification, Notice, NotificationProvider };
 export type { NotificationAPI, NotificationConfig };

src/useNotification.tsx

@@ -1,9 +1,8 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { NotificationsRef } from './Notifications';
+import type { NotificationsProps, NotificationsRef } from './Notifications';
 import Notifications from './Notifications';
 import type { OpenConfig, Placement } from './interface';
-import type { NoticeListProps } from './NoticeList';
 
 const defaultGetContainer = () => document.body;
 
@@ -25,7 +24,7 @@ export interface NotificationConfig {
   /** @private Trigger when all the notification closed. */
   onAllRemoved?: VoidFunction;
   /** @private Slot for style in Notifications */
-  useStyle?: NoticeListProps['useStyle'];
+  renderNotifications?: NotificationsProps['renderNotifications'];
 }
 
 export interface NotificationAPI {
@@ -81,7 +80,7 @@ export default function useNotification(
     className,
     style,
     onAllRemoved,
-    useStyle,
+    renderNotifications,
     ...shareConfig
   } = rootConfig;
 
@@ -97,7 +96,7 @@ export default function useNotification(
       className={className}
       style={style}
       onAllRemoved={onAllRemoved}
-      useStyle={useStyle}
+      renderNotifications={renderNotifications}
     />
   );
 

tests/hooks.test.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { useNotification } from '../src';
 import type { NotificationAPI, NotificationConfig } from '../src';
+import NotificationProvider from '../src/NotificationProvider';
 
 require('../assets/index.less');
 
@@ -153,12 +154,20 @@ describe('Notification.Hooks', () => {
     expect(document.querySelector('.light')).toBeTruthy();
   });
 
-  it('support style slot', () => {
-    const useStyle = () => {
-      return { notice: 'apple', list: 'banana' };
+  it('support renderNotifications', () => {
+    const Wrapper = ({ children }) => {
+      return (
+        <NotificationProvider classNames={{ notice: 'apple', list: 'banana' }}>
+          {children}
+        </NotificationProvider>
+      );
+    };
+
+    const renderNotifications = (node: ReactElement) => {
+      return <Wrapper>{node}</Wrapper>;
     };
     const { instance } = renderDemo({
-      useStyle,
+      renderNotifications,
     });
 
     act(() => {