fix: hooks should support update (#161)

* fix: hooks should support update

* test: Fix lint

* remove tsconfig in gitignore

Author: zombieJ

.gitignore

@@ -30,4 +30,3 @@ es
 coverage
 yarn.lock
 package-lock.json
-tsconfig.json

src/useNotification.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Notification, { NoticeFunc, NoticeContent } from './Notification';
+import type { NoticeFunc, NoticeContent } from './Notification';
+import type Notification from './Notification';
 import Notice from './Notice';
 
 export default function useNotification(
@@ -9,14 +10,28 @@ export default function useNotification(
   const [elements, setElements] = React.useState<React.ReactElement[]>([]);
 
   function notify(noticeProps: NoticeContent) {
+    let firstMount = true;
     notificationInstance.add(noticeProps, (div, props) => {
       const { key } = props;
 
-      if (div && !createdRef.current[key]) {
+      if (div && (!createdRef.current[key] || firstMount)) {
         const noticeEle = <Notice {...props} holder={div} />;
         createdRef.current[key] = noticeEle;
-        setElements(originElements => [...originElements, noticeEle]);
+
+        setElements((originElements) => {
+          const index = originElements.findIndex((ele) => ele.key === props.key);
+
+          if (index === -1) {
+            return [...originElements, noticeEle];
+          }
+
+          const cloneList = [...originElements];
+          cloneList[index] = noticeEle;
+          return cloneList;
+        });
       }
+
+      firstMount = false;
     });
   }
 

tests/hooks.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import Notification from '../src';
-import { NotificationInstance } from '../src/Notification';
+import type { NotificationInstance } from '../src/Notification';
 
 require('../assets/index.less');
 
 async function timeout(delay = 0) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     setTimeout(resolve, delay);
   });
 }
@@ -24,7 +25,7 @@ describe('Notification.Hooks', () => {
           wrapper = mount(<div>{node}</div>);
         },
       } as any,
-      notification => {
+      (notification) => {
         instance = notification;
       },
     );
@@ -64,4 +65,62 @@ describe('Notification.Hooks', () => {
 
     instance.destroy();
   });
+
+  it('key replace', async () => {
+    let instance: NotificationInstance;
+
+    let wrapper: ReactWrapper;
+    Notification.newInstance(
+      {
+        TEST_RENDER: (node: React.ReactElement) => {
+          wrapper = mount(<div>{node}</div>);
+        },
+      } as any,
+      (notification) => {
+        instance = notification;
+      },
+    );
+
+    await timeout(0);
+
+    const Demo = () => {
+      const [notify, holder] = instance.useNotification();
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              notify({
+                key: 'little',
+                duration: 1000,
+                content: <div className="context-content">light</div>,
+              });
+
+              setTimeout(() => {
+                notify({
+                  key: 'little',
+                  duration: 1000,
+                  content: <div className="context-content">bamboo</div>,
+                });
+              }, 500);
+            }}
+          />
+          {holder}
+        </>
+      );
+    };
+
+    const demo = mount(<Demo />);
+    demo.find('button').simulate('click');
+
+    await timeout(10);
+    expect(demo.find('.context-content').text()).toEqual('light');
+
+    await timeout(600);
+    expect(demo.find('.context-content').text()).toEqual('bamboo');
+
+    instance.destroy();
+
+    wrapper.unmount();
+  });
 });

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-notification": ["src/index.ts"]
+    }
+  }
+}