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({