Merge pull request #61 from mobilusoss/feature/60

Enable to wait user interaction to close

Author: Takeharu.Oshida

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Change Log
 
+### Ver 0.7.0
+* Enable to wait user interaction to close #60
+
 ### Ver 0.6.1
 * Update dependencies with `ncu -u`
 * Add codebeat

README.md

@@ -61,7 +61,7 @@ Notification.propTypes = {
 
 * `onError(e, tag)` : Called when Desktop notification happen error.
 
-* `timeout` : milli sec to close notification automatically.(Default 5000)
+* `timeout` : milli sec to close notification automatically. Ignored if `0` or less. (Default `5000`)
 
 * `title` : Notification title.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-web-notification",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "React component with HTML5 Web Notification API",
   "main": "./lib/components/Notification.js",
   "scripts": {

src/components/Notification.js

@@ -108,9 +108,11 @@ class Notification extends React.Component {
           const n = new window.Notification(this.props.title, opt);
           n.onshow = e => {
             this.props.onShow(e, opt.tag);
-            setTimeout(() => {
-              this.close(n);
-            }, this.props.timeout);
+            if (this.props.timeout > 0) {
+              setTimeout(() => {
+                this.close(n);
+              }, this.props.timeout);
+            }
           };
           n.onclick = e => { this.props.onClick(e, opt.tag); };
           n.onclose = e => { this.props.onClose(e, opt.tag); };

test/components/Notification_spec.js

@@ -288,7 +288,52 @@ describe('Test of Notification', () => {
                 expect(args[1]).to.be.eql('mytag');
               });
             });
-
+            describe('test of autoClose timer', () => {
+              const MY_TITLE = 'mytitle';
+              const MY_OPTIONS = {
+                tag: 'mytag',
+                body: 'mybody',
+                icon: 'myicon',
+                lang: 'en',
+                dir: 'ltr'
+              };
+              describe('when `props.timeout` is less than eql 0', () => {
+                let n;
+                before(() => {
+                  component = ReactTestUtils.renderIntoDocument(<Notification title={MY_TITLE} options={MY_OPTIONS} ignore={false} timeout={0}/>);
+                  n = component._getNotificationInstance('mytag');
+                  sinon.stub(n, 'close');
+                  n.onshow('showEvent');
+                });
+                after(() => {
+                  n.close.restore();
+                })
+                it('will not trigger close automatically', (done) => {
+                  setTimeout(() => {
+                    expect(n.close.called).to.be.eql(false);
+                    done();
+                  }, 200);
+                })
+              })
+              describe('when `props.timeout` is greater than 0', () => {
+                let n;
+                before(() => {
+                  component = ReactTestUtils.renderIntoDocument(<Notification title={MY_TITLE} options={MY_OPTIONS} ignore={false} timeout={50}/>);
+                  n = component._getNotificationInstance('mytag');
+                  sinon.stub(n, 'close');
+                  n.onshow('showEvent');
+                });
+                after(() => {
+                  n.close.restore();
+                });
+                it('will trigger close automatically', (done) => {
+                  setTimeout(() => {
+                    expect(n.close.called).to.be.eql(true);
+                    done();
+                  }, 200);
+                })
+              })
+            })
             describe('when swRegistration prop is defined', () => {
               const swRegistrationMock = { showNotification: sinon.stub().resolves({ notification: ee }) }
               const MY_TITLE = 'mytitle';