fix: forward notification hook defaults

Author: zombieJ

src/Notifications.tsx

@@ -3,7 +3,9 @@ import type { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import type { CSSMotionProps } from '@rc-component/motion';
 import NotificationList, {
+  type NotificationClassNames,
   type NotificationListConfig,
+  type NotificationStyles,
   type Placement,
   type StackConfig,
 } from './NotificationList';
@@ -13,6 +15,9 @@ export interface NotificationsProps {
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
   container?: HTMLElement | ShadowRoot;
   maxCount?: number;
+  pauseOnHover?: boolean;
+  classNames?: NotificationClassNames;
+  styles?: NotificationStyles;
   className?: (placement: Placement) => string;
   style?: (placement: Placement) => React.CSSProperties;
   onAllRemoved?: VoidFunction;
@@ -37,6 +42,9 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
     container,
     motion,
     maxCount,
+    pauseOnHover,
+    classNames,
+    styles,
     className,
     style,
     onAllRemoved,
@@ -133,6 +141,9 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
             configList={placements[placement]}
             placement={placement}
             prefixCls={prefixCls}
+            pauseOnHover={pauseOnHover}
+            classNames={classNames}
+            styles={styles}
             className={className?.(placement)}
             style={style?.(placement)}
             motion={motion}

src/hooks/useNotification.tsx

@@ -11,24 +11,32 @@ import type { Placement, StackConfig } from '../NotificationList';
 
 const defaultGetContainer = () => document.body;
 
+// ========================= Types ==========================
 type OptionalConfig = Partial<NotificationListConfig>;
+type SharedConfig = Pick<NotificationListConfig, 'placement' | 'closable' | 'duration'>;
 
 export interface NotificationConfig {
+  // Style
   prefixCls?: string;
+  className?: (placement: Placement) => string;
+  style?: (placement: Placement) => React.CSSProperties;
+  classNames?: NotificationClassNames;
+  styles?: NotificationStyles;
+
+  // UI
+  placement?: Placement;
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
-  placement?: Placement;
+
+  // Behavior
   closable?: NotificationListConfig['closable'];
   duration?: number | false | null;
-  showProgress?: boolean;
   pauseOnHover?: boolean;
-  classNames?: NotificationClassNames;
-  styles?: NotificationStyles;
   maxCount?: number;
-  className?: (placement: Placement) => string;
-  style?: (placement: Placement) => React.CSSProperties;
-  onAllRemoved?: VoidFunction;
   stack?: StackConfig;
+
+  // Function
+  onAllRemoved?: VoidFunction;
   renderNotifications?: NotificationsProps['renderNotifications'];
 }
 
@@ -54,6 +62,7 @@ interface DestroyTask {
 
 type Task = OpenTask | CloseTask | DestroyTask;
 
+// ======================== Helper ==========================
 let uniqueKey = 0;
 
 function mergeConfig<T>(...objList: Partial<T>[]): T {
@@ -79,28 +88,45 @@ function mergeConfig<T>(...objList: Partial<T>[]): T {
 export default function useNotification(
   rootConfig: NotificationConfig = {},
 ): [NotificationAPI, React.ReactElement] {
+  // ========================= Config =========================
   const {
     getContainer = defaultGetContainer,
     motion,
     prefixCls,
+    placement,
+    closable,
+    duration,
+    pauseOnHover,
+    classNames,
+    styles,
     maxCount,
     className,
     style,
     onAllRemoved,
     stack,
     renderNotifications,
-    ...shareConfig
   } = rootConfig;
+  const shareConfig: SharedConfig = {
+    placement,
+    closable,
+    duration,
+  };
 
+  // ========================= Holder =========================
   const [container, setContainer] = React.useState<HTMLElement | ShadowRoot>();
   const notificationsRef = React.useRef<NotificationsRef | null>(null);
+  const [taskQueue, setTaskQueue] = React.useState<Task[]>([]);
+
   const contextHolder = (
     <Notifications
       container={container}
       ref={notificationsRef}
       prefixCls={prefixCls}
       motion={motion}
       maxCount={maxCount}
+      pauseOnHover={pauseOnHover}
+      classNames={classNames}
+      styles={styles}
       className={className}
       style={style}
       onAllRemoved={onAllRemoved}
@@ -109,8 +135,7 @@ export default function useNotification(
     />
   );
 
-  const [taskQueue, setTaskQueue] = React.useState<Task[]>([]);
-
+  // ========================== API ==========================
   const open = useEvent<NotificationAPI['open']>((config) => {
     const mergedConfig = mergeConfig<NotificationListConfig>(shareConfig, config);
 
@@ -135,6 +160,7 @@ export default function useNotification(
     [open],
   );
 
+  // ======================== Effect =========================
   React.useEffect(() => {
     setContainer(getContainer());
   });
@@ -163,5 +189,6 @@ export default function useNotification(
     }
   }, [taskQueue]);
 
+  // ======================== Return =========================
   return [api, contextHolder];
 }

src/legacy/hooks/useNotification.tsx

@@ -135,15 +135,14 @@ export default function useNotification(
   );
 
   // ======================= Container ======================
-  // React 18 should all in effect that we will check container in each render
-  // Which means getContainer should be stable.
+  // `getContainer` should be stable.
   React.useEffect(() => {
     setContainer(getContainer());
   });
 
   // ======================== Effect ========================
   React.useEffect(() => {
-    // Flush task when node ready
+    // Flush queued tasks once the holder is ready.
     if (notificationsRef.current && taskQueue.length) {
       taskQueue.forEach((task) => {
         switch (task.type) {
@@ -163,23 +162,11 @@ export default function useNotification(
 
       // https://github.com/ant-design/ant-design/issues/52590
       // React `startTransition` will run once `useEffect` but many times `setState`,
-      // So `setTaskQueue` with filtered array will cause infinite loop.
-      // We cache the first match queue instead.
-      let oriTaskQueue: Task[];
-      let tgtTaskQueue: Task[];
-
-      // React 17 will mix order of effect & setState in async
-      // - open: setState[0]
-      // - effect[0]
-      // - open: setState[1]
-      // - effect setState([]) * here will clean up [0, 1] in React 17
+      // so we only publish a new queue when something was actually removed.
       setTaskQueue((oriQueue) => {
-        if (oriTaskQueue !== oriQueue || !tgtTaskQueue) {
-          oriTaskQueue = oriQueue;
-          tgtTaskQueue = oriQueue.filter((task) => !taskQueue.includes(task));
-        }
+        const tgtTaskQueue = oriQueue.filter((task) => !taskQueue.includes(task));
 
-        return tgtTaskQueue;
+        return tgtTaskQueue.length === oriQueue.length ? oriQueue : tgtTaskQueue;
       });
     }
   }, [taskQueue]);

tests/hooks.test.tsx

@@ -180,4 +180,43 @@ describe('Notification.Hooks', () => {
     expect(document.querySelector('.rc-notification')).toHaveClass('banana');
     expect(document.querySelector('.custom-notice')).toHaveClass('apple');
   });
+
+  it('support root classNames defaults', () => {
+    const { instance } = renderDemo({
+      classNames: {
+        wrapper: 'hook-wrapper',
+        close: 'hook-close',
+      },
+    });
+
+    act(() => {
+      instance.open({
+        content: <div className="bamboo" />,
+        duration: 0,
+        closable: true,
+        classNames: {
+          root: 'notice-root',
+        },
+      });
+    });
+
+    expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('hook-wrapper');
+    expect(document.querySelector('.rc-notification-notice')).toHaveClass('notice-root');
+    expect(document.querySelector('.rc-notification-notice-close')).toHaveClass('hook-close');
+  });
+
+  it('support root placement defaults', () => {
+    const { instance } = renderDemo({
+      placement: 'bottomLeft',
+    });
+
+    act(() => {
+      instance.open({
+        content: <div className="bamboo" />,
+        duration: 0,
+      });
+    });
+
+    expect(document.querySelector('.rc-notification')).toHaveClass('rc-notification-bottomLeft');
+  });
 });

tests/index.test.tsx

@@ -923,12 +923,12 @@ describe('Notification.Basic', () => {
     it('show with progress', () => {
       const { instance } = renderDemo({
         duration: 1,
-        showProgress: true,
       });
 
       act(() => {
         instance.open({
           content: <p className="test">1</p>,
+          showProgress: true,
         });
       });