@rainbow-oh/yee-c 0.8.1 → 0.8.3

package/src/notice/use-notice.tsx

@@ -1,117 +1,233 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
-import { NoticeConfig, NoticeType, WrapperedNoticeConfig } from './interface';
+import {
+  NoticeApi,
+  NoticeType,
+  PlacementType,
+  WrapperedNoticeConfig,
+} from './interface';
 import NoticeList from './notice-list';
 
-type PlacementType =
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'top'
-  | 'bottom';
+const invokeOnClose = (notices: NoticeType[]) => {
+  const errors: unknown[] = [];
+
+  notices.forEach((notice) => {
+    try {
+      notice.onClose?.();
+    } catch (error) {
+      errors.push(error);
+    }
+  });
+
+  errors.forEach((error) => {
+    const reportError = (
+      globalThis as typeof globalThis & {
+        reportError?: (reportedError: unknown) => void;
+      }
+    ).reportError;
+    if (reportError) {
+      reportError(error);
+    } else {
+      console.error(error);
+    }
+  });
+};
 
 const useNotice = () => {
   const [noticesByPlacement, setNoticesByPlacement] = useState<
     Map<PlacementType, NoticeType[]>
   >(new Map());
-  const count = useRef(0);
-
-  const add = useCallback((props: WrapperedNoticeConfig) => {
-    const placement = props.placement || 'topRight';
-    const id = count.current++;
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
+  const noticesRef = useRef(new Map<PlacementType, NoticeType[]>());
+  const generationByKey = useRef(new Map<string | number, number>());
+  const generation = useRef(0);
+  const timerGeneration = useRef(0);
+  const autoKey = useRef(0);
 
-    setNoticesByPlacement((prev) => {
-      const newMap = new Map(prev);
-      const notices = newMap.get(placement) || [];
-      newMap.set(placement, [...notices, { key: id, ...props }]);
-      return newMap;
-    });
+  useEffect(() => {
+    setPortalContainer(document.body);
   }, []);
 
-  const onDestroy = (key: string | number, placement: PlacementType) => {
-    setNoticesByPlacement((prev) => {
-      const newMap = new Map(prev);
-      const notices = newMap.get(placement) || [];
-      const filtered = notices.filter((notice) => notice.key !== key);
+  const updateNotices = useCallback(
+    (
+      updater: (
+        current: Map<PlacementType, NoticeType[]>,
+      ) => Map<PlacementType, NoticeType[]>,
+    ) => {
+      const nextNotices = updater(noticesRef.current);
+      noticesRef.current = nextNotices;
+      setNoticesByPlacement(nextNotices);
+    },
+    [],
+  );
+
+  const onDestroy = useCallback(
+    (key: string | number, expectedTimerGeneration?: number) => {
+      let target: NoticeType | undefined;
+      noticesRef.current.forEach((items) => {
+        target ??= items.find((item) => item.key === key);
+      });
 
-      if (filtered.length === 0) {
-        newMap.delete(placement);
-      } else {
-        newMap.set(placement, filtered);
+      if (
+        !target ||
+        (expectedTimerGeneration !== undefined &&
+          target.timerGeneration !== expectedTimerGeneration)
+      ) {
+        return;
       }
 
-      return newMap;
-    });
-  };
-
-  const noticeApi = {
-    open: (props: string | NoticeConfig) => {
-      add(
-        typeof props === 'string'
-          ? { content: props, status: 'info' }
-          : { status: 'info', ...props },
-      );
-    },
-    success: (props: string | NoticeConfig) => {
-      add(
-        typeof props === 'string'
-          ? { content: props, status: 'success' }
-          : { ...props, status: 'success' },
-      );
-    },
-    error: (props: string | NoticeConfig) => {
-      add(
-        typeof props === 'string'
-          ? { content: props, status: 'error' }
-          : { ...props, status: 'error' },
-      );
-    },
-    warning: (props: string | NoticeConfig) => {
-      add(
-        typeof props === 'string'
-          ? { content: props, status: 'warning' }
-          : { ...props, status: 'warning' },
-      );
-    },
-    info: (props: string | NoticeConfig) => {
-      add(
-        typeof props === 'string'
-          ? { content: props, status: 'info' }
-          : { ...props, status: 'info' },
-      );
+      generationByKey.current.delete(key);
+      updateNotices((current) => {
+        const next = new Map(current);
+        next.forEach((items, placement) => {
+          const filtered = items.filter((item) => item.key !== key);
+          if (filtered.length === 0) {
+            next.delete(placement);
+          } else if (filtered.length !== items.length) {
+            next.set(placement, filtered);
+          }
+        });
+        return next;
+      });
+      target.onClose?.();
     },
-    destroy: (key: string | number) => {
-      setNoticesByPlacement((prev) => {
-        const newMap = new Map(prev);
+    [updateNotices],
+  );
 
-        // Find and remove in all placements
-        newMap.forEach((notices, placement) => {
-          const filtered = notices.filter((notice) => notice.key !== key);
-          if (filtered.length === 0) {
-            newMap.delete(placement);
-          } else if (filtered.length !== notices.length) {
-            newMap.set(placement, filtered);
+  const add = useCallback(
+    (props: WrapperedNoticeConfig) => {
+      const placement = props.placement ?? 'topRight';
+      let key = props.key;
+      if (key === undefined || key === null) {
+        do {
+          key = `__yee_notice_auto_${autoKey.current++}`;
+        } while (generationByKey.current.has(key));
+      }
+
+      const keyGeneration =
+        generationByKey.current.get(key) ?? generation.current++;
+      generationByKey.current.set(key, keyGeneration);
+      const nextNotice = {
+        ...props,
+        key,
+        placement,
+        timerGeneration: timerGeneration.current++,
+      } as NoticeType;
+
+      updateNotices((current) => {
+        const next = new Map(current);
+        let existingIndex = -1;
+
+        next.forEach((items, currentPlacement) => {
+          const index = items.findIndex((item) => item.key === key);
+          if (index < 0) {
+            return;
+          }
+
+          if (currentPlacement === placement) {
+            existingIndex = index;
+          } else {
+            const filtered = items.filter((item) => item.key !== key);
+            if (filtered.length === 0) {
+              next.delete(currentPlacement);
+            } else {
+              next.set(currentPlacement, filtered);
+            }
           }
         });
 
-        return newMap;
+        const targetNotices = (next.get(placement) || []).filter(
+          (item) => item.key !== key,
+        );
+        if (existingIndex >= 0) {
+          targetNotices.splice(existingIndex, 0, nextNotice);
+        } else {
+          targetNotices.push(nextNotice);
+        }
+        next.set(placement, targetNotices);
+        return next;
       });
+
+      return () => {
+        if (generationByKey.current.get(key) === keyGeneration) {
+          onDestroy(key);
+        }
+      };
     },
-    clear: (placement?: PlacementType) => {
-      if (placement) {
-        setNoticesByPlacement((prev) => {
-          const newMap = new Map(prev);
-          newMap.delete(placement);
-          return newMap;
-        });
-      } else {
-        setNoticesByPlacement(new Map());
-      }
+    [onDestroy, updateNotices],
+  );
+
+  const clear = useCallback(
+    (placement?: PlacementType) => {
+      const removed = placement
+        ? noticesRef.current.get(placement) || []
+        : Array.from(noticesRef.current.values()).flat();
+
+      removed.forEach((item) => generationByKey.current.delete(item.key));
+      updateNotices((current) => {
+        if (!placement) {
+          return new Map();
+        }
+        const next = new Map(current);
+        next.delete(placement);
+        return next;
+      });
+      invokeOnClose(removed);
     },
-  };
+    [updateNotices],
+  );
+
+  const noticeApi = useMemo<NoticeApi>(
+    () => ({
+      open: (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' },
+        ),
+      info: (props) =>
+        add(
+          typeof props === 'string'
+            ? { content: props, status: 'info' }
+            : { ...props, status: 'info' },
+        ),
+      destroy: onDestroy,
+      clear,
+    }),
+    [add, clear, onDestroy],
+  );
+
+  const noticeHolders = useMemo(() => {
+    if (!portalContainer) {
+      return [];
+    }
 
-  const noticeHolders = React.useMemo(() => {
     const holders: React.ReactPortal[] = [];
     noticesByPlacement.forEach((notices, placement) => {
       holders.push(
@@ -119,15 +235,15 @@ const useNotice = () => {
           <NoticeList
             items={notices}
             placement={placement}
-            onDestroy={(key) => onDestroy(key, placement)}
+            onDestroy={onDestroy}
           />,
-          document.body,
+          portalContainer,
           `notice-${placement}`,
         ),
       );
     });
     return holders;
-  }, [noticesByPlacement]);
+  }, [noticesByPlacement, onDestroy, portalContainer]);
 
   return { noticeApi, noticeHolders };
 };

package/src/notice/wrapper.tsx

@@ -1,35 +1,70 @@
 import React from 'react';
 import { createRoot, Root } from 'react-dom/client';
-import { NoticeConfig, NoticeType, WrapperedNoticeConfig } from './interface';
+import {
+  NoticeClose,
+  NoticeConfig,
+  NoticeType,
+  PlacementType,
+  WrapperedNoticeConfig,
+} from './interface';
 import NoticeList from './notice-list';
 
-type PlacementType =
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'top'
-  | 'bottom';
+const noop: NoticeClose = () => {};
+
+const invokeOnClose = (notices: NoticeType[]) => {
+  const errors: unknown[] = [];
+
+  notices.forEach((notice) => {
+    try {
+      notice.onClose?.();
+    } catch (error) {
+      errors.push(error);
+    }
+  });
+
+  errors.forEach((error) => {
+    const reportError = (
+      globalThis as typeof globalThis & {
+        reportError?: (reportedError: unknown) => void;
+      }
+    ).reportError;
+    if (reportError) {
+      reportError(error);
+    } else {
+      console.error(error);
+    }
+  });
+};
 
 class NoticeWrapper {
   roots: Map<PlacementType, Root>;
   containers: Map<PlacementType, HTMLElement>;
   notices: Map<PlacementType, NoticeType[]>;
+  generationByKey: Map<string | number, number>;
+  generation: number;
+  timerGeneration: number;
 
   constructor() {
     this.roots = new Map();
     this.containers = new Map();
     this.notices = new Map();
+    this.generationByKey = new Map();
+    this.generation = 0;
+    this.timerGeneration = 0;
+    this.destroy = this.destroy.bind(this);
   }
 
   uuid(): string {
-    return crypto.randomUUID
-      ? crypto.randomUUID()
-      : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-          const r = (Math.random() * 16) | 0;
-          const v = c === 'x' ? r : (r & 0x3) | 0x8;
-          return v.toString(16);
-        });
+    const randomUUID = globalThis.crypto?.randomUUID?.();
+    if (randomUUID) {
+      return randomUUID;
+    }
+
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
   }
 
   private createContainer(placement: PlacementType): HTMLElement {
@@ -44,49 +79,52 @@ class NoticeWrapper {
 
   private cleanupContainer(placement: PlacementType) {
     const container = this.containers.get(placement);
-    if (container && container.parentNode) {
+    if (container?.parentNode) {
       container.parentNode.removeChild(container);
-      this.containers.delete(placement);
     }
+    this.containers.delete(placement);
   }
 
   unmount(placement?: PlacementType) {
-    if (placement) {
-      const root = this.roots.get(placement);
-      if (root) {
-        root.unmount();
-        this.roots.delete(placement);
-        this.cleanupContainer(placement);
-        this.notices.delete(placement);
-      }
-    } else {
-      // Clean up all
-      this.roots.forEach((root, placement) => {
-        root.unmount();
-        this.cleanupContainer(placement);
-      });
+    const placements = placement
+      ? [placement]
+      : Array.from(this.notices.keys());
+    const removed = placements.flatMap((item) => this.notices.get(item) || []);
+
+    placements.forEach((item) => {
+      this.roots.get(item)?.unmount();
+      this.roots.delete(item);
+      this.cleanupContainer(item);
+      this.notices.delete(item);
+    });
+
+    if (!placement) {
       this.roots.clear();
       this.containers.clear();
-      this.notices.clear();
     }
+
+    removed.forEach((item) => {
+      this.generationByKey.delete(item.key);
+    });
+    invokeOnClose(removed);
   }
 
   render(placement: PlacementType) {
-    const notices = this.notices.get(placement) || [];
+    if (typeof document === 'undefined') {
+      return;
+    }
 
+    const notices = this.notices.get(placement) || [];
     if (notices.length === 0) {
-      const root = this.roots.get(placement);
-      if (root) {
-        root.unmount();
-        this.roots.delete(placement);
-        this.cleanupContainer(placement);
-      }
+      this.roots.get(placement)?.unmount();
+      this.roots.delete(placement);
+      this.cleanupContainer(placement);
+      this.notices.delete(placement);
       return;
     }
 
     const container = this.createContainer(placement);
     let root = this.roots.get(placement);
-
     if (!root) {
       root = createRoot(container);
       this.roots.set(placement, root);
@@ -96,53 +134,102 @@ class NoticeWrapper {
       <NoticeList
         items={notices}
         placement={placement}
-        onDestroy={(key) => this.destroy(key, placement)}
+        onDestroy={this.destroy}
       />,
     );
   }
 
-  show(params: WrapperedNoticeConfig) {
-    const placement = params.placement || 'topRight';
-
-    if (!params.key) {
-      params.key = this.uuid();
+  show(params: WrapperedNoticeConfig): NoticeClose {
+    if (typeof document === 'undefined') {
+      return noop;
     }
 
-    const notices = this.notices.get(placement) || [];
-    const existIndex = notices.findIndex((item) => item.key === params.key);
+    const placement = params.placement ?? 'topRight';
+    const key = params.key ?? this.uuid();
+    const keyGeneration =
+      this.generationByKey.get(key) ?? this.generation++;
+    this.generationByKey.set(key, keyGeneration);
 
-    if (existIndex >= 0) {
-      notices[existIndex] = params as NoticeType;
+    const affectedPlacements = new Set<PlacementType>([placement]);
+    this.notices.forEach((items, currentPlacement) => {
+      if (
+        currentPlacement !== placement &&
+        items.some((item) => item.key === key)
+      ) {
+        this.notices.set(
+          currentPlacement,
+          items.filter((item) => item.key !== key),
+        );
+        affectedPlacements.add(currentPlacement);
+      }
+    });
+
+    const currentNotices = this.notices.get(placement) || [];
+    const existingIndex = currentNotices.findIndex((item) => item.key === key);
+    const nextNotice = {
+      ...params,
+      key,
+      placement,
+      timerGeneration: this.timerGeneration++,
+    } as NoticeType;
+    const nextNotices = currentNotices.filter((item) => item.key !== key);
+
+    if (existingIndex >= 0) {
+      nextNotices.splice(existingIndex, 0, nextNotice);
     } else {
-      notices.push(params as NoticeType);
+      nextNotices.push(nextNotice);
     }
 
-    this.notices.set(placement, notices);
-    this.render(placement);
+    this.notices.set(placement, nextNotices);
+    affectedPlacements.forEach((item) => this.render(item));
+
+    return () => {
+      if (this.generationByKey.get(key) === keyGeneration) {
+        this.destroy(key);
+      }
+    };
   }
 
-  destroy(key: string | number, placement?: PlacementType) {
-    if (placement) {
-      const notices = this.notices.get(placement) || [];
-      const filtered = notices.filter((item) => item.key !== key);
-      this.notices.set(placement, filtered);
-      this.render(placement);
-    } else {
-      // Find and remove in all placements
-      this.notices.forEach((notices, p) => {
-        const filtered = notices.filter((item) => item.key !== key);
-        this.notices.set(p, filtered);
-        this.render(p);
-      });
+  destroy(key: string | number, expectedTimerGeneration?: number) {
+    let target: NoticeType | undefined;
+    this.notices.forEach((items) => {
+      target ??= items.find((item) => item.key === key);
+    });
+
+    if (
+      !target ||
+      (expectedTimerGeneration !== undefined &&
+        target.timerGeneration !== expectedTimerGeneration)
+    ) {
+      return;
     }
+
+    const affectedPlacements = new Set<PlacementType>();
+    this.notices.forEach((items, placement) => {
+      if (items.some((item) => item.key === key)) {
+        this.notices.set(
+          placement,
+          items.filter((item) => item.key !== key),
+        );
+        affectedPlacements.add(placement);
+      }
+    });
+
+    this.generationByKey.delete(key);
+    affectedPlacements.forEach((item) => this.render(item));
+    target.onClose?.();
+  }
+
+  clear(placement?: PlacementType) {
+    this.unmount(placement);
   }
 
   open(params: string | NoticeConfig) {
-    this.show(typeof params === 'string' ? { content: params } : params);
+    return this.show(typeof params === 'string' ? { content: params } : params);
   }
 
   info(params: string | NoticeConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'info', content: params }
         : { ...params, status: 'info' },
@@ -150,7 +237,7 @@ class NoticeWrapper {
   }
 
   success(params: string | NoticeConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'success', content: params }
         : { ...params, status: 'success' },
@@ -158,7 +245,7 @@ class NoticeWrapper {
   }
 
   warning(params: string | NoticeConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'warning', content: params }
         : { ...params, status: 'warning' },
@@ -166,7 +253,7 @@ class NoticeWrapper {
   }
 
   error(params: string | NoticeConfig) {
-    this.show(
+    return this.show(
       typeof params === 'string'
         ? { status: 'error', content: params }
         : { ...params, status: 'error' },
@@ -187,4 +274,5 @@ export const notice = {
   warning: noticeWrapper.warning.bind(noticeWrapper),
   error: noticeWrapper.error.bind(noticeWrapper),
   destroy: noticeWrapper.destroy.bind(noticeWrapper),
+  clear: noticeWrapper.clear.bind(noticeWrapper),
 };

package/src/style/size.css

@@ -224,6 +224,8 @@
   /* --Dialog-- */
   --yee-dialog-z-index: var(--yee-z-index-overlay);
   --yee-dialog-mask-z-index: var(--yee-z-index-mask);
+  --yee-dialog-title-font-size: 18px;
+  --yee-dialog-title-font-weight: 600;
   --yee-dialog-content-wrapper-z-index: var(--yee-z-index-overlay);
   --yee-dialog-header-margin-bottom: 12px;
   --yee-dialog-content-margin-top: 10%;
@@ -321,9 +323,9 @@
   --yee-menu-submenu-vertical-top: -4px;
 
   /* --Message-- */
-  --yee-message-gap: 8px;
-  --yee-message-padding: 12px 16px;
-  --yee-message-border-radius: 4px;
+  --yee-message-gap: 6px;
+  --yee-message-padding: 9px 12px;
+  --yee-message-border-radius: 8px;
   --yee-message-box-shadow: 0 8px 24px 0 var(--yee-box-shadow-color);
   --yee-message-icon-size: 20px;
   --yee-message-list-top: 24px;