docs: add NotificationList demo styling

Author: zombieJ

assets/geek.less

@@ -0,0 +1,79 @@
+@notificationPrefixCls: notification;
+@notificationMotionDuration: 0.3s;
+@notificationMotionEase: cubic-bezier(0.22, 1, 0.36, 1);
+@notificationMotionOffset: 64px;
+
+.@{notificationPrefixCls} {
+  &-list {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    width: 360px;
+    max-height: 100vh;
+    padding: 24px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  &-notice {
+    pointer-events: auto;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 14px 16px;
+    border: 2px solid #111;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
+    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.16);
+    color: #111;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+}
+
+.notification-fade {
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.notification-fade-appear-prepare,
+.notification-fade-enter-prepare {
+  opacity: 0;
+  transform: translate3d(@notificationMotionOffset, 0, 0);
+}
+
+.notification-fade-appear-start,
+.notification-fade-enter-start {
+  opacity: 0;
+  transform: translate3d(@notificationMotionOffset, 0, 0);
+}
+
+.notification-fade-appear-active,
+.notification-fade-enter-active {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  transition:
+    transform @notificationMotionDuration @notificationMotionEase,
+    opacity @notificationMotionDuration @notificationMotionEase,
+    height @notificationMotionDuration @notificationMotionEase,
+    margin @notificationMotionDuration @notificationMotionEase;
+}
+
+.notification-fade-leave-start {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.notification-fade-leave-active {
+  opacity: 0;
+  transform: translate3d(@notificationMotionOffset, 0, 0);
+  transition:
+    transform @notificationMotionDuration @notificationMotionEase,
+    opacity @notificationMotionDuration @notificationMotionEase,
+    height @notificationMotionDuration @notificationMotionEase,
+    margin @notificationMotionDuration @notificationMotionEase;
+}

docs/demo/NotificationList.md

@@ -0,0 +1,8 @@
+---
+title: NotificationList
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/NotificationList.tsx"></code>

docs/examples/NotificationList.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { CSSMotionProps } from '@rc-component/motion';
+import '../../assets/geek.less';
+import NotificationList, { type NotificationListConfig } from '../../src/NotificationList';
+
+const motion: CSSMotionProps = {
+  motionName: 'notification-fade',
+  motionAppear: true,
+  motionEnter: true,
+  motionLeave: true,
+  onLeaveStart: (ele) => {
+    const { offsetHeight } = ele;
+    return { height: offsetHeight };
+  },
+  onLeaveActive: () => ({ height: 0, opacity: 0, margin: 0 }),
+};
+
+const Demo = () => {
+  const [configList, setConfigList] = React.useState<NotificationListConfig[]>([]);
+  const keyRef = React.useRef(0);
+
+  const createConfig = React.useCallback(() => {
+    const key = keyRef.current;
+    keyRef.current += 1;
+
+    setConfigList((prevConfigList) => [
+      ...prevConfigList,
+      {
+        key,
+        duration: false,
+        content: `Config ${key + 1}`,
+      },
+    ]);
+  }, []);
+
+  const removeLastConfig = React.useCallback(() => {
+    setConfigList((prevConfigList) => prevConfigList.slice(0, -1));
+  }, []);
+
+  return (
+    <>
+      <div style={{ marginBottom: 16, display: 'flex', gap: 8 }}>
+        <button type="button" onClick={createConfig}>
+          Add Config
+        </button>
+        <button type="button" onClick={removeLastConfig}>
+          Remove Last Config
+        </button>
+      </div>
+
+      <NotificationList
+        configList={configList}
+        prefixCls="notification"
+        classNames={{ root: 'notification-notice' }}
+        motion={motion}
+        placement="topRight"
+      />
+    </>
+  );
+};
+
+export default Demo;

src/NotificationList.tsx

@@ -70,32 +70,37 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
       className={clsx(listPrefixCls, `${listPrefixCls}-${placement}`)}
       {...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}
-        />
-      )}
+      {({ config, className, style }, nodeRef) => {
+        const { key, ...notificationConfig } = config;
+
+        return (
+          <Notification
+            key={key}
+            {...notificationConfig}
+            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>
   );
 };