diff --git a/.codebeatignore b/.codebeatignore index 20610e1..577dbb3 100644 --- a/.codebeatignore +++ b/.codebeatignore @@ -1,3 +1,3 @@ -lib/* -example/* +lib/** +example/** karma.conf.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c93842..f5b681d 100644 --- 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 index fd98465..779772b 100644 --- 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 index 4422a53..1102ca3 100644 --- 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 index 71d02af..dcf5a49 100644 --- 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 index 6f67d83..bd0162c 100644 --- 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 index c5230dc..da426a2 100644 --- 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(); + 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(); + 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';