@rainbow-oh/yee-c 0.8.2 → 0.8.3

package/src/notice/notice.tsx

@@ -4,18 +4,21 @@ import React from 'react';
 import Progress from '../Progress';
 import useCountdown from '../hooks/useCountdown';
 import { NoticeProps } from './interface';
+import Button from '../Button';
 
 const icons = {
-  info: <Info size={20} strokeWidth={2} />,
-  success: <CircleCheck size={20} strokeWidth={2} />,
-  warning: <CircleAlert size={20} strokeWidth={2} />,
-  error: <CircleX size={20} 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} />,
 };
 
 const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
   const {
     prefixCls = 'yee-notice',
     id: key,
+    timerGeneration,
+    placement,
     status,
     title,
     content,
@@ -33,18 +36,51 @@ const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
     ...rest
   } = props;
 
-  const { remaining, onPause, onResume } = useCountdown({
+  // The state owner dispatches onClose after removing the notice.
+  void onClose;
+
+  const isHoveredRef = React.useRef(false);
+  const { remaining, isPaused, onPause, onResume } = useCountdown({
     duration,
+    resetKey: timerGeneration,
     onComplete: () => {
-      onDestroy?.(key);
-      onClose?.();
+      onDestroy?.(key, timerGeneration);
     },
   });
 
-  const handleClose = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDestroy?.(key);
-    onClose?.();
+  React.useEffect(() => {
+    if (pauseOnHover && isHoveredRef.current && !isPaused) {
+      onPause();
+    } else if ((!pauseOnHover || !isHoveredRef.current) && isPaused) {
+      onResume();
+    }
+  }, [isPaused, onPause, onResume, pauseOnHover]);
+
+  const handleMouseEnter = () => {
+    isHoveredRef.current = true;
+    if (pauseOnHover) {
+      onPause();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    isHoveredRef.current = false;
+    if (isPaused) {
+      onResume();
+    }
+  };
+
+  const handleClose = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    onDestroy?.(key, timerGeneration);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick || (event.key !== 'Enter' && event.key !== ' ')) {
+      return;
+    }
+    event.preventDefault();
+    onClick();
   };
 
   const renderIcon = () => {
@@ -53,7 +89,7 @@ const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
     }
 
     return (
-      <span className={`${prefixCls}-icon`}>
+      <span aria-hidden="true" className={`${prefixCls}-icon`}>
         {icon ? icon : status ? icons[status] : null}
       </span>
     );
@@ -65,30 +101,42 @@ const Notice: React.FC<NoticeProps & { id: string | number }> = (props) => {
     }
 
     return (
-      <button
+      <Button
+        variant='text'
+        size="small"
         className={`${prefixCls}-close`}
         onClick={handleClose}
-        type="button"
-        aria-label="Close"
-      >
-        <X size={14} strokeWidth={2} />
-      </button>
+        aria-label="Close notice"
+        icon={<X aria-hidden="true" size={14} strokeWidth={2} />}
+      />
     );
   };
 
+  const isAssertive = status === 'error' || status === 'warning';
+
   return (
     <div
       {...rest}
+      aria-atomic="true"
+      aria-live={isAssertive ? 'assertive' : 'polite'}
+      role={onClick ? 'button' : isAssertive ? 'alert' : 'status'}
+      tabIndex={onClick ? 0 : undefined}
+      data-placement={placement}
       data-testid={dataTestId}
       className={clsx(
         prefixCls,
-        { [`${prefixCls}-${status}`]: status },
+        {
+          [`${prefixCls}-${status}`]: status,
+          [`${prefixCls}-clickable`]: onClick,
+          [`${prefixCls}-closable`]: closable,
+        },
         className,
       )}
       style={style}
       onClick={onClick}
-      onMouseEnter={pauseOnHover ? onPause : undefined}
-      onMouseLeave={pauseOnHover ? onResume : undefined}
+      onKeyDown={handleKeyDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <div className={`${prefixCls}-content-wrapper`}>
         {renderIcon()}

package/src/notice/style/index.less

@@ -12,7 +12,7 @@
   background-color: var(--yee-notice-bg-color);
   border-radius: var(--yee-notice-border-radius);
   box-shadow: var(--yee-notice-box-shadow);
-  cursor: pointer;
+  cursor: default;
   transition: all 0.3s ease;
   border: var(--yee-notice-border-width) solid transparent;
   overflow: hidden;
@@ -21,6 +21,18 @@
     box-shadow: var(--yee-notice-box-shadow-hover);
   }
 
+  &-clickable {
+    cursor: pointer;
+  }
+
+  &-closable {
+    @{pls}-content-wrapper {
+      padding-right: calc(
+        var(--yee-notice-close-size) + var(--yee-notice-close-right)
+      );
+    }
+  }
+
   &-content-wrapper {
     display: flex;
     align-items: flex-start;

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 };
 };