feat: Add onClose to Closable (#376)

* feat: Merge 'onClose' into Closable

* docs: add closable describe

* test: delete only

* docs:  closable describe

* feat: config?.closable null

* feat: Both closableOnllose and onClose are called

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

README.md

@@ -117,7 +117,7 @@ props details:
         </tr>
         <tr>
           <td>closable</td>
-          <td>Boolean</td>
+          <td>Boolean | { closeIcon: ReactNode, onClose: VoidFunction }</td>
           <td></td>
           <td>whether show close button</td>
         </tr>

src/Notifications.tsx

@@ -45,8 +45,11 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
   const onNoticeClose = (key: React.Key) => {
     // Trigger close event
     const config = configList.find((item) => item.key === key);
+    const closable = config?.closable;
+    const closableObj = closable && typeof closable === 'object' ? closable : {};
+    const { onClose: closableOnClose } = closableObj;
+    closableOnClose?.();
     config?.onClose?.();
-
     setConfigList((list) => list.filter((item) => item.key !== key));
   };
 

src/hooks/useNotification.tsx

@@ -15,7 +15,9 @@ export interface NotificationConfig {
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;

src/interface.ts

@@ -10,7 +10,9 @@ export interface NoticeConfig {
   showProgress?: boolean;
   pauseOnHover?: boolean;
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   className?: string;
   style?: React.CSSProperties;
   classNames?: {

tests/index.test.tsx

@@ -778,6 +778,104 @@ describe('Notification.Basic', () => {
     unmount();
   });
 
+  describe('onClose and closable.onClose', () => {
+    it('onClose', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  closable: { onClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+    it('Both closableOnllose and onClose are called', () => {
+      const onClose = vi.fn();
+      const closableOnClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  onClose,
+                  closable: { onClose: closableOnClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(closableOnClose).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+    it('closable.onClose (config)', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification({ closable: { onClose } });
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+  });
+
   it('closes via keyboard Enter key', () => {
     const { instance } = renderDemo();
     let closeCount = 0;