refactor: add useNotification hook

Author: zombieJ

assets/geek.less

@@ -49,6 +49,39 @@
     color: #111;
     font-size: 14px;
     line-height: 1.5;
+
+    &-content {
+      white-space: pre-wrap;
+      padding-right: 36px;
+    }
+
+    &-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: 2px solid #111;
+      border-radius: 999px;
+      background: #fff;
+      color: #111;
+      font-size: 14px;
+      line-height: 1;
+      cursor: pointer;
+      transition:
+        transform @notificationMotionDuration @notificationMotionEase,
+        box-shadow @notificationMotionDuration @notificationMotionEase,
+        background-color @notificationMotionDuration @notificationMotionEase;
+
+      &:hover {
+        background: #f4f9ff;
+        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
+        transform: translate3d(-1px, -1px, 0);
+      }
+    }
   }
 }
 

docs/examples/hooks.tsx

@@ -1,18 +1,35 @@
 /* eslint-disable no-console */
 import React from 'react';
-import '../../assets/index.less';
+import type { CSSMotionProps } from '@rc-component/motion';
+import '../../assets/geek.less';
 import { useNotification } from '../../src';
-import motion from './motion';
+
+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 App = () => {
-  const [notice, contextHolder] = useNotification({ motion, closable: true });
+  const [notice, contextHolder] = useNotification({
+    motion,
+    closable: true,
+    prefixCls: 'notification',
+  });
 
   return (
     <>
-      <div>
-        <div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
           {/* Default */}
           <button
+            type="button"
             onClick={() => {
               notice.open({
                 content: `${new Date().toISOString()}`,
@@ -24,6 +41,7 @@ const App = () => {
 
           {/* Not Close */}
           <button
+            type="button"
             onClick={() => {
               notice.open({
                 content: `${Array(Math.round(Math.random() * 5) + 1)
@@ -34,11 +52,12 @@ const App = () => {
               });
             }}
           >
-            Not Auto Close
+            Not Auto Close (Random)
           </button>
 
           {/* Not Close */}
           <button
+            type="button"
             onClick={() => {
               notice.open({
                 content: `${Array(5)
@@ -49,13 +68,14 @@ const App = () => {
               });
             }}
           >
-            Not Auto Close
+            Not Auto Close (5 Items)
           </button>
         </div>
 
-        <div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
           {/* No Closable */}
           <button
+            type="button"
             onClick={() => {
               notice.open({
                 content: `No Close! ${new Date().toISOString()}`,
@@ -73,24 +93,26 @@ const App = () => {
 
           {/* Force Close */}
           <button
+            type="button"
             onClick={() => {
               notice.close('No Close');
             }}
           >
             Force Close No Closable
           </button>
         </div>
-      </div>
 
-      <div>
-        {/* Destroy All */}
-        <button
-          onClick={() => {
-            notice.destroy();
-          }}
-        >
-          Destroy All
-        </button>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+          {/* Destroy All */}
+          <button
+            type="button"
+            onClick={() => {
+              notice.destroy();
+            }}
+          >
+            Destroy All
+          </button>
+        </div>
       </div>
 
       {contextHolder}

src/Notification.tsx

@@ -1,23 +1,37 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import useNoticeTimer from './hooks/useNoticeTimer';
 import { useEvent } from '@rc-component/util';
 
 export interface NotificationClassNames {
+  wrapper?: string;
   root?: string;
+  content?: string;
   close?: string;
+  progress?: string;
 }
 
 export interface NotificationStyles {
+  wrapper?: React.CSSProperties;
   root?: React.CSSProperties;
+  content?: React.CSSProperties;
   close?: React.CSSProperties;
+  progress?: React.CSSProperties;
 }
 
 export interface NotificationProps {
+  prefixCls?: string;
   content?: React.ReactNode;
   actions?: React.ReactNode;
   close?: React.ReactNode;
-  duration?: number | false;
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
+  duration?: number | false | null;
+  showProgress?: boolean;
+  times?: number;
+  hovering?: boolean;
   offset?: {
     x: number;
     y: number;
@@ -27,45 +41,91 @@ export interface NotificationProps {
   style?: React.CSSProperties;
   classNames?: NotificationClassNames;
   styles?: NotificationStyles;
+  props?: React.HTMLAttributes<HTMLDivElement> & Record<string, any>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
-  /** Callback when notification is closed by timeout */
   onClose?: () => void;
+  onCloseInternal?: VoidFunction;
 }
 
 const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {
   const {
+    prefixCls = 'rc-notification',
     content,
     actions,
     close,
+    closable,
     duration = 4.5,
+    showProgress,
+    hovering: forcedHovering,
     offset,
     pauseOnHover = true,
     className,
     style,
     classNames,
     styles,
+    props: divProps,
     onClick,
     onClose,
+    onCloseInternal,
   } = props;
+  const [hovering, setHovering] = React.useState(false);
+  const [percent, setPercent] = React.useState(0);
+  const noticePrefixCls = `${prefixCls}-notice`;
 
   // ========================= Close ==========================
   const onEventClose = useEvent(onClose);
+  const onEventCloseInternal = useEvent(onCloseInternal);
   const offsetRef = React.useRef(offset);
+  const closableObj = React.useMemo(() => {
+    if (typeof closable === 'object' && closable !== null) {
+      return closable;
+    }
+
+    return {};
+  }, [closable]);
+  const closeContent = close === undefined ? (closableObj.closeIcon ?? 'x') : close;
+  const mergedClosable = close !== undefined ? close !== null : !!closable;
+  const ariaProps = pickAttrs(closableObj, true);
 
   if (offset) {
     offsetRef.current = offset;
   }
 
   // ======================== Duration ========================
-  const [onResume, onPause] = useNoticeTimer(duration, onEventClose, () => {});
+  const [onResume, onPause] = useNoticeTimer(
+    duration,
+    () => {
+      closableObj.onClose?.();
+      onEventClose();
+      onEventCloseInternal();
+    },
+    setPercent,
+    !!showProgress,
+  );
 
   const mergedOffset = offset ?? offsetRef.current;
+  const validPercent = 100 - Math.min(Math.max(percent * 100, 0), 100);
+
+  React.useEffect(() => {
+    if (!pauseOnHover) {
+      return;
+    }
+
+    if (forcedHovering) {
+      onPause();
+    } else if (!hovering) {
+      onResume();
+    }
+  }, [forcedHovering, hovering, onPause, onResume, pauseOnHover]);
 
   // ========================= Render =========================
   return (
     <div
+      {...divProps}
       ref={ref}
-      className={clsx(className, classNames?.root)}
+      className={clsx(noticePrefixCls, className, classNames?.root, {
+        [`${noticePrefixCls}-closable`]: mergedClosable,
+      })}
       style={{
         ...styles?.root,
         ...(mergedOffset
@@ -77,23 +137,64 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
         ...style,
       }}
       onClick={onClick}
-      onMouseEnter={pauseOnHover ? onPause : undefined}
-      onMouseLeave={pauseOnHover ? onResume : undefined}
+      onMouseEnter={(event) => {
+        setHovering(true);
+        if (pauseOnHover) {
+          onPause();
+        }
+        divProps?.onMouseEnter?.(event);
+      }}
+      onMouseLeave={(event) => {
+        setHovering(false);
+        if (pauseOnHover && !forcedHovering) {
+          onResume();
+        }
+        divProps?.onMouseLeave?.(event);
+      }}
     >
-      {content}
-      {close && (
+      <div
+        className={clsx(`${noticePrefixCls}-content`, classNames?.content)}
+        style={styles?.content}
+      >
+        {content}
+      </div>
+
+      {mergedClosable && (
         <button
-          className={clsx('close', classNames?.close)}
+          className={clsx(`${noticePrefixCls}-close`, classNames?.close)}
           aria-label="Close"
+          {...ariaProps}
           style={styles?.close}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.code === 'Enter') {
+              closableObj.onClose?.();
+              onEventClose();
+              onEventCloseInternal();
+            }
+          }}
           onClick={(e) => {
+            e.preventDefault();
             e.stopPropagation();
+            closableObj.onClose?.();
             onEventClose();
+            onEventCloseInternal();
           }}
         >
-          {close}
+          {closeContent}
         </button>
       )}
+
+      {showProgress && typeof duration === 'number' && duration > 0 && (
+        <progress
+          className={clsx(`${noticePrefixCls}-progress`, classNames?.progress)}
+          max="100"
+          value={validPercent}
+          style={styles?.progress}
+        >
+          {validPercent}%
+        </progress>
+      )}
+
       {actions && <div className="actions">{actions}</div>}
     </div>
   );