Merge pull request #62 from mobilusoss/develop

Bump version from v0.6.1 to v0.7.0
mobilusoss · Sep 17, 2019 · 457b716 · 457b716
2 parents 2bd2343 + a113a53
commit 457b716
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 33 deletions.
diff --git a/.codebeatignore b/.codebeatignore
@@ -1,3 +1,3 @@
-lib/*
-example/*
+lib/**
+example/**
 karma.conf.js
diff --git a/CHANGELOG.md b/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

diff --git a/README.md b/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.
 

diff --git a/lib/components/Notification.js b/lib/components/Notification.js
@@ -160,9 +160,11 @@ function (_React$Component) {
             n.onshow = function (e) {
               _this3.props.onShow(e, opt.tag);
 
-              setTimeout(function () {
-                _this3.close(n);
-              }, _this3.props.timeout);
+              if (_this3.props.timeout > 0) {
+                setTimeout(function () {
+                  _this3.close(n);
+                }, _this3.props.timeout);
+              }
             };
 
             n.onclick = function (e) {

diff --git a/package.json b/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": {

diff --git a/src/components/Notification.js b/src/components/Notification.js
@@ -89,36 +89,40 @@ class Notification extends React.Component {
     }
   }
 
+  doNotification() {
+    let opt = this.props.options;
+    if (typeof opt.tag !== 'string') {
+      opt.tag = 'web-notification-' + seq();
+    }
+    if (this.notifications[opt.tag]) {
+      return;
+    }
 
+    if (this.props.swRegistration && this.props.swRegistration.showNotification) {
+      this.props.swRegistration.showNotification(this.props.title, opt)
+      this.notifications[opt.tag] = {};
+    } else {
+      const n = new window.Notification(this.props.title, opt);
+      n.onshow = e => {
+        this.props.onShow(e, opt.tag);
+        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); };
+      n.onerror = e => { this.props.onError(e, opt.tag); };
+
+      this.notifications[opt.tag] = n;
+    }
+  }
 
   render() {
     let doNotShowOnActiveWindow = this.props.disableActiveWindow && this.windowFocus;
     if (!this.props.ignore && this.props.title && this.state.supported && this.state.granted && !doNotShowOnActiveWindow) {
-
-      let opt = this.props.options;
-      if (typeof opt.tag !== 'string') {
-        opt.tag = 'web-notification-' + seq();
-      }
-
-      if (!this.notifications[opt.tag]) {
-        if (this.props.swRegistration && this.props.swRegistration.showNotification) {
-          this.props.swRegistration.showNotification(this.props.title, opt)
-          this.notifications[opt.tag] = {};
-        } else {
-          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);
-          };
-          n.onclick = e => { this.props.onClick(e, opt.tag); };
-          n.onclose = e => { this.props.onClose(e, opt.tag); };
-          n.onerror = e => { this.props.onError(e, opt.tag); };
-
-          this.notifications[opt.tag] = n;
-        }
-      }
+      this.doNotification();
     }
 
     // return null cause

diff --git a/test/components/Notification_spec.js b/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';