Fixed #35 add ability to show latest added notification on top.

README.md

@@ -92,6 +92,12 @@ props details:
           <td></td>
           <td>function returning html node which will act as notification container</td>
         </tr>
+        <tr>
+          <td>isLastTop</td>
+          <td>Boolean</td>
+          <td></td>
+          <td>whether to show recent notification on top, this is global change.</td>
+        </tr>
     </tbody>
 </table>
 

examples/simple.js

@@ -49,8 +49,15 @@ function manualClose() {
   });
 }
 
+function toggleOrder() {
+  notification.toggleOrder();
+}
+
 ReactDOM.render(<div>
   <div>
+    <label><input type="checkbox" onChange={toggleOrder} />Show last added on top</label>
+    <br/>
+    <br/>
     <button onClick={simpleFn}>simple show</button>
     <button onClick={durationFn}>duration=0</button>
     <button onClick={closableFn}>closable</button>

src/Notification.jsx

@@ -8,6 +8,7 @@ import Notice from './Notice';
 
 let seed = 0;
 const now = Date.now();
+let _isLastTop = false;
 
 function getUuid() {
   return `rcNotification_${now}_${seed++}`;
@@ -48,9 +49,7 @@ class Notification extends Component {
     this.setState(previousState => {
       const notices = previousState.notices;
       if (!notices.filter(v => v.key === key).length) {
-        return {
-          notices: notices.concat(notice),
-        };
+        return { notices: _isLastTop ? [notice, ...notices] : notices.concat(notice) };
       }
     });
   }
@@ -88,7 +87,8 @@ class Notification extends Component {
 }
 
 Notification.newInstance = function newNotificationInstance(properties, callback) {
-  const { getContainer, ...props } = properties || {};
+  const { getContainer, isLastTop, ...props } = properties || {};
+  _isLastTop = !!isLastTop;
   const div = document.createElement('div');
   if (getContainer) {
     const root = getContainer();
@@ -103,6 +103,9 @@ Notification.newInstance = function newNotificationInstance(properties, callback
     }
     called = true;
     callback({
+      toggleOrder() {
+        _isLastTop = !_isLastTop;
+      },
       notice(noticeProps) {
         notification.add(noticeProps);
       },

tests/index.js

@@ -175,4 +175,39 @@ describe('rc-notification', () => {
     expect(() => ReactDOM.render(<Test />, container))
       .to.not.throwException();
   });
+
+  it('last notification on top works', (done) => {
+    Notification.newInstance({ isLastTop: true }, notification => {
+      notification.notice({
+        content: <p className="test">1</p>,
+        duration: 0,
+      });
+      notification.notice({
+        content: <p className="test">2</p>,
+        duration: 0,
+      });
+      setTimeout(() => {
+        expect(
+          TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test')
+          .map(e => e.textContent)
+        ).to.eql(
+          ['2', '1']
+        );
+        notification.toggleOrder();
+        notification.notice({
+          content: <p className="test">3</p>,
+          duration: 0,
+        });
+        setTimeout(() => {
+          expect(
+            TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test')
+            .map(e => e.textContent)
+          ).to.eql(
+            ['2', '1', '3']
+          );
+          done();
+        });
+      }, 10);
+    });
+  });
 });