refactor: inline notification list config handling

Author: zombieJ

src/Notification.tsx

@@ -1,20 +1,47 @@
 import * as React from 'react';
+import { clsx } from 'clsx';
 import useNoticeTimer from './hooks/useNoticeTimer';
 import { useEvent } from '@rc-component/util';
 
+export interface NotificationClassNames {
+  root?: string;
+  close?: string;
+}
+
+export interface NotificationStyles {
+  root?: React.CSSProperties;
+  close?: React.CSSProperties;
+}
+
 export interface NotificationProps {
   content?: React.ReactNode;
   actions?: React.ReactNode;
   close?: React.ReactNode;
   duration?: number | false;
   pauseOnHover?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  classNames?: NotificationClassNames;
+  styles?: NotificationStyles;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   /** Callback when notification is closed by timeout */
   onClose?: () => void;
 }
 
 const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {
-  const { content, actions, close, duration = 4.5, pauseOnHover = true, onClick, onClose } = props;
+  const {
+    content,
+    actions,
+    close,
+    duration = 4.5,
+    pauseOnHover = true,
+    className,
+    style,
+    classNames,
+    styles,
+    onClick,
+    onClose,
+  } = props;
 
   // ========================= Close ==========================
   const onEventClose = useEvent(onClose);
@@ -26,15 +53,21 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   return (
     <div
       ref={ref}
+      className={clsx(className, classNames?.root)}
+      style={{
+        ...styles?.root,
+        ...style,
+      }}
       onClick={onClick}
       onMouseEnter={pauseOnHover ? onPause : undefined}
       onMouseLeave={pauseOnHover ? onResume : undefined}
     >
       {content}
       {close && (
         <button
-          className="close"
+          className={clsx('close', classNames?.close)}
           aria-label="Close"
+          style={styles?.close}
           onClick={(e) => {
             e.stopPropagation();
             onEventClose();

src/NotificationList.tsx

@@ -1,5 +1,12 @@
+import { CSSMotionList } from '@rc-component/motion';
 import type { CSSMotionProps } from '@rc-component/motion';
+import { clsx } from 'clsx';
 import * as React from 'react';
+import Notification, {
+  type NotificationClassNames,
+  type NotificationProps,
+  type NotificationStyles,
+} from './Notification';
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 
@@ -11,18 +18,69 @@ export type StackConfig =
       gap?: number;
     };
 
+export interface NotificationListConfig extends NotificationProps {
+  key: React.Key;
+}
+
 export interface NotificationListProps {
+  configList?: NotificationListConfig[];
   prefixCls?: string;
   getContainer?: () => HTMLElement | ShadowRoot;
   placement?: Placement;
   pauseOnHover?: boolean;
+  classNames?: NotificationClassNames;
+  styles?: NotificationStyles;
   stack?: StackConfig;
   maxCount?: number;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
 }
 
-const NotificationList: React.FC<NotificationListProps> = () => {
-  return null;
+const NotificationList: React.FC<NotificationListProps> = (props) => {
+  const { configList = [], pauseOnHover, classNames, styles, maxCount, motion, placement } = props;
+
+  // ========================== Data ==========================
+  const mergedConfigList =
+    typeof maxCount === 'number' && maxCount > 0 ? configList.slice(-maxCount) : configList;
+
+  const keys = mergedConfigList.map((config) => ({
+    config,
+    key: String(config.key),
+  }));
+
+  // ========================= Motion =========================
+  const placementMotion = typeof motion === 'function' ? motion(placement) : motion;
+
+  // ========================= Render =========================
+  return (
+    <CSSMotionList component="div" keys={keys} motionAppear {...placementMotion}>
+      {({ config, className, style }, nodeRef) => (
+        <Notification
+          {...config}
+          ref={nodeRef}
+          className={clsx(className, config.className)}
+          style={{
+            ...style,
+            ...config.style,
+          }}
+          classNames={{
+            root: clsx(classNames?.root, config.classNames?.root),
+            close: clsx(classNames?.close, config.classNames?.close),
+          }}
+          styles={{
+            root: {
+              ...styles?.root,
+              ...config.styles?.root,
+            },
+            close: {
+              ...styles?.close,
+              ...config.styles?.close,
+            },
+          }}
+          pauseOnHover={config.pauseOnHover ?? pauseOnHover}
+        />
+      )}
+    </CSSMotionList>
+  );
 };
 
 export default NotificationList;