Add ability to update notification props by key

examples/simple.js

@@ -49,11 +49,37 @@ function manualClose() {
   });
 }
 
+let counter = 0;
+let intervalKey;
+function updatableFn() {
+  if (counter !== 0) {
+    return;
+  }
+
+  const key = 'updatable-notification';
+  const initialProps = {
+    content: `Timer: ${counter}s`,
+    key,
+    duration: null,
+    closable: true,
+    onClose() {
+      clearInterval(intervalKey);
+      counter = 0;
+    },
+  };
+
+  notification.notice(initialProps);
+  intervalKey = setInterval(() => {
+    notification.notice({ ...initialProps, content: `Timer: ${++counter}s` });
+  }, 1000);
+}
+
 ReactDOM.render(<div>
   <div>
     <button onClick={simpleFn}>simple show</button>
     <button onClick={durationFn}>duration=0</button>
     <button onClick={closableFn}>closable</button>
     <button onClick={manualClose}>controlled close</button>
+    <button onClick={updatableFn}>updatable</button>
   </div>
 </div>, document.getElementById('__react-content'));

src/Notice.jsx

@@ -24,6 +24,12 @@ export default class Notice extends Component {
     this.startCloseTimer();
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.duration !== prevProps.duration) {
+      this.restartCloseTimer();
+    }
+  }
+
   componentWillUnmount() {
     this.clearCloseTimer();
   }
@@ -48,6 +54,11 @@ export default class Notice extends Component {
     }
   }
 
+  restartCloseTimer() {
+    this.clearCloseTimer();
+    this.startCloseTimer();
+  }
+
   render() {
     const props = this.props;
     const componentClass = `${props.prefixCls}-notice`;

src/Notification.jsx

@@ -47,11 +47,17 @@ class Notification extends Component {
     const key = notice.key = notice.key || getUuid();
     this.setState(previousState => {
       const notices = previousState.notices;
-      if (!notices.filter(v => v.key === key).length) {
-        return {
-          notices: notices.concat(notice),
-        };
+      const noticeIndex = notices.map(v => v.key).indexOf(key);
+      let updatedNotices;
+      if (noticeIndex === -1) {
+        updatedNotices = notices.concat(notice);
+      } else {
+        updatedNotices = notices.concat();
+        updatedNotices.splice(noticeIndex, 1, notice);
       }
+      return {
+        notices: updatedNotices,
+      };
     });
   }
 

tests/index.js

@@ -130,6 +130,51 @@ describe('rc-notification', () => {
     });
   });
 
+  it('update notification by key with multi instance', (done) => {
+    Notification.newInstance({}, notification => {
+      const key = 'updatable';
+      const value = 'value';
+      const newValue = `new-${value}`;
+      const notUpdatableValue = 'not-updatable-value';
+      notification.notice({
+        content: <p id="not-updatable" className="not-updatable">{notUpdatableValue}</p>,
+        duration: null,
+      });
+      notification.notice({
+        content: <p id="updatable" className="updatable">{value}</p>,
+        key,
+        duration: null,
+      });
+
+      setTimeout(() => {
+        expect(document.querySelectorAll('.updatable').length).to.be(1);
+        expect(document.querySelector('.updatable').innerText).to.be(value);
+
+        notification.notice({
+          content: <p id="updatable" className="updatable">{newValue}</p>,
+          key,
+          duration: 0.1,
+        });
+
+        setTimeout(() => {
+          // Text updated successfully
+          expect(document.querySelectorAll('.updatable').length).to.be(1);
+          expect(document.querySelector('.updatable').innerText).to.be(newValue);
+
+          setTimeout(() => {
+            // Other notices are not affected
+            expect(document.querySelectorAll('.not-updatable').length).to.be(1);
+            expect(document.querySelector('.not-updatable').innerText).to.be(notUpdatableValue);
+            // Duration updated successfully
+            expect(document.querySelectorAll('.updatable').length).to.be(0);
+            notification.destroy();
+            done();
+          }, 500);
+        }, 10);
+      }, 10);
+    });
+  });
+
   it('freeze notification layer when mouse over', (done) => {
     Notification.newInstance({}, notification => {
       notification.notice({