diff --git a/README.md b/README.md index 3adc631..37a84ef 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,12 @@ props details: function returning html node which will act as notification container + + isLastTop + Boolean + + whether to show recent notification on top, this is global change. + diff --git a/examples/simple.js b/examples/simple.js index 8aee3be..ad7b07f 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -49,8 +49,15 @@ function manualClose() { }); } +function toggleOrder() { + notification.toggleOrder(); +} + ReactDOM.render(
+ +
+
diff --git a/src/Notification.jsx b/src/Notification.jsx index ff483e4..eb82ae8 100644 --- a/src/Notification.jsx +++ b/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); }, diff --git a/tests/index.js b/tests/index.js index 7d48538..1c61eb4 100644 --- a/tests/index.js +++ b/tests/index.js @@ -175,4 +175,39 @@ describe('rc-notification', () => { expect(() => ReactDOM.render(, container)) .to.not.throwException(); }); + + it('last notification on top works', (done) => { + Notification.newInstance({ isLastTop: true }, notification => { + notification.notice({ + content:

1

, + duration: 0, + }); + notification.notice({ + content:

2

, + duration: 0, + }); + setTimeout(() => { + expect( + TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test') + .map(e => e.textContent) + ).to.eql( + ['2', '1'] + ); + notification.toggleOrder(); + notification.notice({ + content:

3

, + duration: 0, + }); + setTimeout(() => { + expect( + TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test') + .map(e => e.textContent) + ).to.eql( + ['2', '1', '3'] + ); + done(); + }); + }, 10); + }); + }); });