@rainbow-oh/yee-c 0.8.1 → 0.8.3

package/src/message/use-message.tsx

@@ -1,7 +1,13 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 import {
-  MessageConfig,
+  MessageApi,
   MessageType,
   WrapperedMessageConfig,
 } from './interface';
@@ -9,82 +15,153 @@ import Message from './message';
 
 const useMessage = () => {
   const [messages, setMessages] = useState<MessageType[]>([]);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
+  const messagesRef = useRef<MessageType[]>([]);
+  const generationByKey = useRef(new Map<string | number, number>());
+  const generation = useRef(0);
+  const timerGeneration = useRef(0);
   const count = useRef(0);
 
-  const onDestroy = (key: string | number) => {
-    setMessages((prevMessage) => [
-      ...prevMessage.filter((msg) => msg.key !== key),
-    ]);
-  };
-
-  const add = useCallback((props: WrapperedMessageConfig) => {
-    const id = count.current++;
-    setMessages((prevMessages) => [...prevMessages, { key: id, ...props }]);
-    return () => onDestroy(id);
+  useEffect(() => {
+    setPortalContainer(document.body);
   }, []);
 
-  const messageApi = {
-    open: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'info' }
-          : { status: 'info', ...props },
-      );
-    },
-    info: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'info' }
-          : { status: 'info', ...props },
-      );
-    },
-    success: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'success' }
-          : { ...props, status: 'success' },
-      );
-    },
-    error: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'error' }
-          : { ...props, status: 'error' },
-      );
-    },
-    warning: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'warning' }
-          : { ...props, status: 'warning' },
-      );
-    },
-    loading: (props: string | MessageConfig) => {
-      return add(
-        typeof props === 'string'
-          ? { content: props, status: 'loading' }
-          : { ...props, status: 'loading' },
-      );
+  const updateMessages = useCallback(
+    (updater: (current: MessageType[]) => MessageType[]) => {
+      const nextMessages = updater(messagesRef.current);
+      messagesRef.current = nextMessages;
+      setMessages(nextMessages);
     },
-    destroy: (key: string | number) => {
-      setMessages((prevMessages) =>
-        prevMessages.filter((message) => message.key !== key),
+    [],
+  );
+
+  const onDestroy = useCallback(
+    (key: string | number, expectedTimerGeneration?: number) => {
+      const target = messagesRef.current.find((message) => message.key === key);
+      if (
+        expectedTimerGeneration !== undefined &&
+        target?.timerGeneration !== expectedTimerGeneration
+      ) {
+        return;
+      }
+
+      if (!target) {
+        return;
+      }
+
+      generationByKey.current.delete(key);
+      updateMessages((current) =>
+        current.filter((message) => message.key !== key),
       );
+      target.onClose?.();
     },
-    clear: () => {
-      setMessages([]);
+    [updateMessages],
+  );
+
+  const add = useCallback(
+    (props: WrapperedMessageConfig) => {
+      const key = props.key ?? count.current++;
+      if (typeof key === 'number' && key >= count.current) {
+        count.current = key + 1;
+      }
+      const keyGeneration =
+        generationByKey.current.get(key) ?? generation.current++;
+      generationByKey.current.set(key, keyGeneration);
+      const nextMessage = {
+        ...props,
+        key,
+        timerGeneration: timerGeneration.current++,
+      } as MessageType;
+
+      updateMessages((current) => {
+        const exists = current.some((item) => item.key === key);
+        if (exists) {
+          return current.map((item) =>
+            item.key === key ? nextMessage : item,
+          );
+        }
+        return [...current, nextMessage];
+      });
+
+      return () => {
+        if (generationByKey.current.get(key) === keyGeneration) {
+          onDestroy(key);
+        }
+      };
     },
-  };
+    [onDestroy, updateMessages],
+  );
 
-  const messageHolder = createPortal(
-    <div className="yee-message-list">
-      {messages.map((msg) => (
-        <Message {...msg} onDestroy={onDestroy} id={msg.key} key={msg.key} />
-      ))}
-    </div>,
-    document.body,
+  const clear = useCallback(() => {
+    const currentMessages = messagesRef.current;
+    generationByKey.current.clear();
+    messagesRef.current = [];
+    setMessages([]);
+    currentMessages.forEach((message) => message.onClose?.());
+  }, []);
+
+  const messageApi = useMemo<MessageApi>(
+    () => ({
+      open: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'info' }
+            : { status: 'info', ...props },
+        ),
+      info: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'info' }
+            : { status: 'info', ...props },
+        ),
+      success: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'success' }
+            : { ...props, status: 'success' },
+        ),
+      error: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'error' }
+            : { ...props, status: 'error' },
+        ),
+      warning: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'warning' }
+            : { ...props, status: 'warning' },
+        ),
+      loading: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'loading' }
+            : { ...props, status: 'loading' },
+        ),
+      destroy: onDestroy,
+      clear,
+    }),
+    [add, clear, onDestroy],
   );
 
+  const messageHolder = portalContainer
+    ? createPortal(
+        <div className="yee-message-list">
+          {messages.map((msg) => (
+            <Message
+              {...msg}
+              onDestroy={onDestroy}
+              id={msg.key}
+              key={msg.key}
+            />
+          ))}
+        </div>,
+        portalContainer,
+      )
+    : null;
+
   return { messageApi, messageHolder };
 };
 

package/src/message/wrapper.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import {
+  MessageClose,
   MessageConfig,
   MessageType,
   WrapperedMessageConfig,
@@ -8,15 +9,24 @@ import {
 import MessageList from './message-list';
 import useMessage from './use-message';
 
+const noop: MessageClose = () => {};
+
 class MessageWrapper {
   root: Root | null;
   messages: MessageType[];
   container: HTMLElement | null;
+  generationByKey: Map<string | number, number>;
+  generation: number;
+  timerGeneration: number;
 
   constructor() {
     this.root = null;
     this.messages = [];
     this.container = null;
+    this.generationByKey = new Map();
+    this.generation = 0;
+    this.timerGeneration = 0;
+    this.destroy = this.destroy.bind(this);
   }
 
   private createContainer() {
@@ -50,9 +60,14 @@ class MessageWrapper {
     this.root = null;
     this.cleanupContainer();
     this.messages = [];
+    this.generationByKey.clear();
   }
 
   render() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
     if (this.messages.length === 0) {
       if (this.root) {
         this.root.unmount();
@@ -68,40 +83,67 @@ class MessageWrapper {
     }
 
     this.root.render(
-      <MessageList items={this.messages} onDestroy={this.destroy.bind(this)} />,
+      <MessageList items={this.messages} onDestroy={this.destroy} />,
     );
   }
 
-  show(params: WrapperedMessageConfig) {
-    if (!params.key) {
-      params.key = this.uuid();
+  show(params: WrapperedMessageConfig): MessageClose {
+    if (typeof document === 'undefined') {
+      return noop;
     }
-    const isExit = this.messages.find((item) => item.key === params.key);
-    if (isExit) {
-      this.messages = this.messages.map((item) => {
-        if (item.key === params.key) {
-          return params as MessageType;
-        }
-        return item;
-      });
+
+    const key = params.key ?? this.uuid();
+    const keyGeneration =
+      this.generationByKey.get(key) ?? this.generation++;
+    this.generationByKey.set(key, keyGeneration);
+    const nextMessage = {
+      ...params,
+      key,
+      timerGeneration: this.timerGeneration++,
+    } as MessageType;
+    const exists = this.messages.some((item) => item.key === key);
+
+    if (exists) {
+      this.messages = this.messages.map((item) =>
+        item.key === key ? nextMessage : item,
+      );
     } else {
-      this.messages.push(params as MessageType);
+      this.messages = [...this.messages, nextMessage];
     }
 
     this.render();
+    return () => {
+      if (this.generationByKey.get(key) === keyGeneration) {
+        this.destroy(key);
+      }
+    };
   }
 
-  destroy(key: string | number) {
+  destroy(key: string | number, expectedTimerGeneration?: number) {
+    const target = this.messages.find((item) => item.key === key);
+    if (
+      expectedTimerGeneration !== undefined &&
+      target?.timerGeneration !== expectedTimerGeneration
+    ) {
+      return;
+    }
+
+    if (!target) {
+      return;
+    }
+
+    this.generationByKey.delete(key);
     this.messages = this.messages.filter((item) => item.key !== key);
     this.render();
+    target.onClose?.();
   }
 
   open(params: string | MessageConfig) {
-    this.show(typeof params === 'string' ? { content: params } : params);
+    return this.show(typeof params === 'string' ? { content: params } : params);
   }
 
   info(params: string | MessageConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'info', content: params }
         : { ...params, status: 'info' },
@@ -109,7 +151,7 @@ class MessageWrapper {
   }
 
   success(params: string | MessageConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'success', content: params }
         : { ...params, status: 'success' },
@@ -117,7 +159,7 @@ class MessageWrapper {
   }
 
   warning(params: string | MessageConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'warning', content: params }
         : { ...params, status: 'warning' },
@@ -125,7 +167,7 @@ class MessageWrapper {
   }
 
   error(params: string | MessageConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'error', content: params }
         : { ...params, status: 'error' },
@@ -133,7 +175,7 @@ class MessageWrapper {
   }
 
   loading(params: string | MessageConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'loading', content: params }
         : { ...params, status: 'loading' },

package/src/notice/index.en-US.md

@@ -1,75 +1,76 @@
----
-category: Components
-title: notice
-subtitle: notice
-group:
-  title: Notification
-  order: 1
-toc: 'content'
----
-
-# notice
-
-Display notification messages globally, supporting multiple positions simultaneously.
-
-## When To Use
-
-- Display notification messages in the four corners or at the top/bottom of the system
-- Commonly used for:
-  - More complex notification content
-  - Interactive notifications that provide users with next steps
-  - System-initiated push notifications
-
-## Examples
-
-<code src="./demo/basic.tsx" title="Basic" desc="The most basic usage, supports multiple positions"></code>
-
-## API
-
-### notice
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| title | Notice title | ReactNode | - |
-| content | Notice content | ReactNode | - |
-| duration | Time in seconds before the notice disappears. If set to 0, it will not automatically close | number | `4.5` |
-| icon | Custom icon | ReactNode | - |
-| key | The unique identifier of the current notice | string \| number | - |
-| placement | Display position | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |
-| showProgress | Whether to show progress bar | boolean | - |
-| pauseOnHover | Whether to pause auto-close on mouse hover | boolean | - |
-| closable | Whether to show close button | boolean | `true` |
-| onClose | Callback function when notice is closed | function | - |
-| onClick | Callback function when notice is clicked | function | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
-
-### notice Methods
-
-| Method | Description | Type | Default |
-| --- | --- | --- | --- |
-| notice.open(config) | Open a normal notice | string \| [NoticeConfigs](#noticeconfigs) | - |
-| notice.info(config) | Open an info notice | string \| [NoticeConfigs](#noticeconfigs) | - |
-| notice.success(config) | Open a success notice | string \| [NoticeConfigs](#noticeconfigs) | - |
-| notice.warning(config) | Open a warning notice | string \| [NoticeConfigs](#noticeconfigs) | - |
-| notice.error(config) | Open an error notice | string \| [NoticeConfigs](#noticeconfigs) | - |
-| notice.destroy(key) | Manually destroy the notice with the specified key | string \| number | - |
-
-### NoticeConfigs
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| prefixCls | Custom class name prefix | string | - |
-| className | Custom class name | string | - |
-| style | Custom inline style | CSSProperties | - |
-| title | Notice title | ReactNode | - |
-| content | Notice content | ReactNode | - |
-| duration | Time in seconds before the notice disappears. If set to 0, it will not automatically close | number | `4.5` |
-| icon | Custom icon | ReactNode | - |
-| key | The unique identifier of the current notice | string \| number | - |
-| placement | Display position | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |
-| showProgress | Whether to show progress bar | boolean | - |
-| pauseOnHover | Whether to pause auto-close on mouse hover | boolean | - |
-| closable | Whether to show close button | boolean | `true` |
-| onClose | Callback function when notice is closed | function | - |
-| onClick | Callback function when notice is clicked | function | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+---
+category: Components
+title: notice
+subtitle: notice
+group:
+  title: Notification
+  order: 1
+toc: 'content'
+---
+
+# notice
+
+Display notification messages globally, supporting multiple positions simultaneously.
+
+## When To Use
+
+- Display notification messages in the four corners or at the top/bottom of the system
+- Commonly used for:
+  - More complex notification content
+  - Interactive notifications that provide users with next steps
+  - System-initiated push notifications
+
+## Examples
+
+<code src="./demo/basic.tsx" title="Basic" desc="The most basic usage, supports multiple positions"></code>
+
+## API
+
+### notice
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Notice title | ReactNode | - |
+| content | Notice content | ReactNode | - |
+| duration | Time in milliseconds before the notice disappears. If set to 0, it will not automatically close | number | `4500` |
+| icon | Custom icon | ReactNode | - |
+| key | The unique identifier of the current notice | string \| number | - |
+| placement | Display position | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |
+| showProgress | Whether to show progress bar | boolean | - |
+| pauseOnHover | Whether to pause auto-close on mouse hover | boolean | - |
+| closable | Whether to show close button | boolean | `true` |
+| onClose | Callback function when notice is closed | function | - |
+| onClick | Callback function when notice is clicked | function | - |
+| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+
+### notice Methods
+
+| Method | Description | Type | Default |
+| --- | --- | --- | --- |
+| notice.open(config) | Open a normal notice | string \| [NoticeConfigs](#noticeconfigs) | - |
+| notice.info(config) | Open an info notice | string \| [NoticeConfigs](#noticeconfigs) | - |
+| notice.success(config) | Open a success notice | string \| [NoticeConfigs](#noticeconfigs) | - |
+| notice.warning(config) | Open a warning notice | string \| [NoticeConfigs](#noticeconfigs) | - |
+| notice.error(config) | Open an error notice | string \| [NoticeConfigs](#noticeconfigs) | - |
+| notice.destroy(key) | Manually destroy the notice with the specified key | string \| number | - |
+| notice.clear(placement?) | Clear notices at one position or all positions | placement | - |
+
+### NoticeConfigs
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| prefixCls | Custom class name prefix | string | - |
+| className | Custom class name | string | - |
+| style | Custom inline style | CSSProperties | - |
+| title | Notice title | ReactNode | - |
+| content | Notice content | ReactNode | - |
+| duration | Time in milliseconds before the notice disappears. If set to 0, it will not automatically close | number | `4500` |
+| icon | Custom icon | ReactNode | - |
+| key | The unique identifier of the current notice | string \| number | - |
+| placement | Display position | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |
+| showProgress | Whether to show progress bar | boolean | - |
+| pauseOnHover | Whether to pause auto-close on mouse hover | boolean | - |
+| closable | Whether to show close button | boolean | `true` |
+| onClose | Callback function when notice is closed | function | - |
+| onClick | Callback function when notice is clicked | function | - |
+| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |

package/src/notice/index.ts

@@ -1,5 +1,10 @@
 import { notice } from './wrapper';
-export type { NoticeConfig } from './interface';
+export type {
+  NoticeApi,
+  NoticeClose,
+  NoticeConfig,
+  PlacementType,
+} from './interface';
 export * from './notice-provider';
 export { default as useNotice } from './use-notice';
 export default notice;

package/src/notice/index.zh-CN.md

@@ -32,7 +32,7 @@ toc: 'content'
 | --- | --- | --- | --- |
 | title | 通知标题 | ReactNode | - |
 | content | 通知内容 | ReactNode | - |
-| duration | 自动关闭时间(秒)，设为 0 时不自动关闭 | number | `4.5` |
+| duration | 自动关闭时间(毫秒)，设为 0 时不自动关闭 | number | `4500` |
 | icon | 自定义图标 | ReactNode | - |
 | key | 当前通知的唯一标识 | string \| number | - |
 | placement | 显示位置 | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |
@@ -53,6 +53,7 @@ toc: 'content'
 | notice.warning(config) | 打开警告通知 | string \| [NoticeConfigs](#noticeconfigs) | - |
 | notice.error(config) | 打开错误通知 | string \| [NoticeConfigs](#noticeconfigs) | - |
 | notice.destroy(key) | 手动销毁指定 key 的通知 | string \| number | - |
+| notice.clear(placement?) | 清除指定位置或全部通知 | placement | - |
 
 ### NoticeConfigs
 
@@ -63,7 +64,7 @@ toc: 'content'
 | style | 自定义根样式 | CSSProperties | - |
 | title | 通知标题 | ReactNode | - |
 | content | 通知内容 | ReactNode | - |
-| duration | 自动关闭时间(秒)，设为 0 时不自动关闭 | number | `4.5` |
+| duration | 自动关闭时间(毫秒)，设为 0 时不自动关闭 | number | `4500` |
 | icon | 自定义图标 | ReactNode | - |
 | key | 当前通知的唯一标识 | string \| number | - |
 | placement | 显示位置 | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'bottom'` | `'topRight'` |

package/src/notice/interface.ts

@@ -1,8 +1,17 @@
+export type PlacementType =
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'top'
+  | 'bottom';
+
 export type NoticeConfig = {
-  /**
-   * test identifier
-   */
-  'data-testid'?: string;
+  [dataAttribute: `data-${string}`]:
+    | string
+    | number
+    | boolean
+    | undefined;
   /**
    * Custom prefix class name
    */
@@ -24,7 +33,7 @@ export type NoticeConfig = {
    */
   content: React.ReactNode;
   /**
-   * Auto close time (ms), 0 means no auto close
+   * Auto close time (milliseconds), 0 means no auto close
    * @default 4500
    */
   duration?: number;
@@ -40,13 +49,7 @@ export type NoticeConfig = {
    * Display position
    * @default 'topRight'
    */
-  placement?:
-    | 'topLeft'
-    | 'topRight'
-    | 'bottomLeft'
-    | 'bottomRight'
-    | 'top'
-    | 'bottom';
+  placement?: PlacementType;
   /**
    * Whether to show progress bar
    */
@@ -70,19 +73,33 @@ export type NoticeConfig = {
   closable?: boolean;
 };
 
+export type NoticeClose = () => void;
+
+export interface NoticeApi {
+  open: (config: string | NoticeConfig) => NoticeClose;
+  info: (config: string | NoticeConfig) => NoticeClose;
+  success: (config: string | NoticeConfig) => NoticeClose;
+  warning: (config: string | NoticeConfig) => NoticeClose;
+  error: (config: string | NoticeConfig) => NoticeClose;
+  destroy: (key: string | number) => void;
+  clear: (placement?: PlacementType) => void;
+}
+
 // With status
 export type WrapperedNoticeConfig = NoticeConfig & {
   status?: 'info' | 'success' | 'warning' | 'error';
 };
 
-// With key
+// Internal notice state
 export type NoticeType = WrapperedNoticeConfig & {
   key: string | number;
+  placement: PlacementType;
+  timerGeneration: number;
 };
 
 export interface NoticeProps extends NoticeType {
   /**
    * Destroy component callback
    */
-  onDestroy?: (key: string | number) => void;
+  onDestroy?: (key: string | number, timerGeneration?: number) => void;
 }