From aeaa303425fefdf03378185a94760eb197e8ceb9 Mon Sep 17 00:00:00 2001 From: Peter Daily Date: Sun, 13 Aug 2017 19:15:39 +0100 Subject: [PATCH 1/8] [#64] enhance dismissible options --- README.md | 4 +- example/src/scripts/App.jsx | 16 + example/src/scripts/NotificationGenerator.jsx | 29 +- package-lock.json | 6483 +++++++++++++++++ src/NotificationItem.jsx | 21 +- src/constants.js | 2 +- src/styles.js | 1 + test/notification-system.test.js | 24 +- 8 files changed, 6550 insertions(+), 30 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 6677d0b..464f1b6 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ The notification object has the following properties: | level | string | null | Level of the notification. Available: **success**, **error**, **warning** and **info** | | position | string | tr | Position of the notification. Available: **tr (top right)**, **tl (top left)**, **tc (top center)**, **br (bottom right)**, **bl (bottom left)**, **bc (bottom center)** | | autoDismiss | integer | 5 | Delay in seconds for the notification go away. Set this to **0** to not auto-dismiss the notification | -| dismissible | bool | true | Set if notification is dismissible by the user. [See more](#dismissible) | +| dismissible | string | both | Settings controlling how the user can dismiss the notification and whether the dismiss button is visible. Available: **both (The disable button is visible and the user can click anywhere on the notification to dismiss)**, **click (The disable button is NOT visible and the user can click anywhere on the notification to dismiss)**, **button (The user can click on the disable button to dismiss the notifiction)**, **none (None [See more](#dismissible))** | | action | object | null | Add a button with label and callback function (callback is optional). [See more](#action) | | children | element,string | null | Adds custom content, and overrides `action` (if defined) [See more](#children) | | onAdd | function | null | A callback function that will be called when the notification is successfully added. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was added'); }` | @@ -117,7 +117,7 @@ The notification object has the following properties: ### Dismissible -If set to false, the notification will not display the dismiss ('x') button and will only be dismissible programmatically or after autoDismiss timeout. [See more](#removenotificationnotification) +If set to 'none', the button will only be dismissible programmatically or after autoDismiss timeout. [See more](#removenotificationnotification) ### Action diff --git a/example/src/scripts/App.jsx b/example/src/scripts/App.jsx index 0615311..ec34d13 100644 --- a/example/src/scripts/App.jsx +++ b/example/src/scripts/App.jsx @@ -54,6 +54,14 @@ NotificationSystemExample = createReactClass({ position: 'tr', autoDismiss: 0 }, + { + title: 'I don\'t have a dismiss button...', + message: 'But you can still click to get rid of me.', + autoDismiss: 0, + level: 'success', + position: 'tr', + dismissible: 'click' + }, { title: 'Bad things can happen too!', message: 'Four notification types: `success`, `error`, `warning` and `info`', @@ -87,6 +95,14 @@ NotificationSystemExample = createReactClass({ autoDismiss: 0, level: 'error', position: 'br' + }, + { + title: 'I\'m here forever...', + message: 'Until you click the dismiss button.', + autoDismiss: 0, + level: 'error', + position: 'br', + dismissible: 'button' } ], diff --git a/example/src/scripts/NotificationGenerator.jsx b/example/src/scripts/NotificationGenerator.jsx index 6eadf46..313b76b 100644 --- a/example/src/scripts/NotificationGenerator.jsx +++ b/example/src/scripts/NotificationGenerator.jsx @@ -62,15 +62,6 @@ module.exports = createReactClass({ console.log('%cNotification ' + notification.uid + ' was removed.', 'font-weight: bold; color: #eb4d00'); }, - _changedDismissible: function() { - var notification = this.state.notification; - notification.dismissible = !notification.dismissible; - - this.setState({ - notification: notification - }); - }, - _changedAllowHTML: function() { var state = this.state; var allowHTML = !this.state.allowHTML; @@ -124,7 +115,7 @@ module.exports = createReactClass({ level: 'error', position: 'tr', autoDismiss: 5, - dismissible: true, + dismissible: 'both', action: null, actionState: false }, @@ -228,20 +219,22 @@ module.exports = createReactClass({ Open console to see the error after creating a notification. +
+ + +
+
secs (0 means infinite)
-
-
- -
-
-