@rainbow-oh/yee-c 0.8.2 → 0.8.3

package/src/message/message.tsx

@@ -5,10 +5,10 @@ import Spin from '../Spin';
 import type { MessageProps } from './interface';
 
 const icons = {
-  info: <Info size={16} strokeWidth={2} />,
-  success: <CircleCheck size={16} strokeWidth={2} />,
-  warning: <CircleAlert size={16} strokeWidth={2} />,
-  error: <CircleX size={16} strokeWidth={2} />,
+  info: <Info size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  success: <CircleCheck size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  warning: <CircleAlert size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  error: <CircleX size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
   loading: <Spin className="loading" type="spin" size="small" height="auto" />,
 };
 
@@ -16,6 +16,7 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
   const {
     prefixCls = 'yee-message',
     id: key,
+    timerGeneration,
     status,
     content,
     style,
@@ -32,15 +33,14 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
   useEffect(() => {
     if (duration && duration > 0) {
       const timer = setTimeout(() => {
-        onDestroy?.(key);
-        onClose?.();
+        onDestroy?.(key, timerGeneration);
       }, duration * 1000);
 
       return () => {
         clearTimeout(timer);
       };
     }
-  }, [duration, key, onDestroy, onClose]);
+  }, [duration, key, onDestroy, onClose, timerGeneration]);
 
   const renderIcon = () => {
     if (!icon && !status) {
@@ -48,22 +48,27 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
     }
 
     return (
-      <span className={`${prefixCls}-icon`}>
+      <span aria-hidden="true" className={`${prefixCls}-icon`}>
         {icon ? icon : status ? icons[status] : null}
       </span>
     );
   };
 
+  const isAssertive = status === 'error' || status === 'warning';
+
   return (
     <div
       {...rest}
+      aria-atomic="true"
+      aria-live={isAssertive ? 'assertive' : 'polite'}
+      role={isAssertive ? 'alert' : 'status'}
       data-testid={dataTestId}
       className={clsx(prefixCls, [`${prefixCls}-${status}`], className)}
       style={style}
       onClick={onClick}
     >
       {renderIcon()}
-      <p className={`${prefixCls}-content`}>{content}</p>
+      <div className={`${prefixCls}-content`}>{content}</div>
     </div>
   );
 };

package/src/message/style/index.less

@@ -6,6 +6,7 @@
   align-items: center;
   width: fit-content;
   padding: var(--yee-message-padding);
+  pointer-events: auto;
   background-color: var(--yee-message-bg-color);
   border-radius: var(--yee-message-border-radius);
   box-shadow: var(--yee-message-box-shadow);
@@ -30,12 +31,13 @@
     align-items: center;
     justify-content: center;
     width: 100vw;
+    pointer-events: none;
   }
 
   // status
   &-success {
     @{pls}-icon {
-      color: var(--yee-primary-color);
+      color: var(--yee-success-color);
     }
   }
 

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;