Merge branch 'release/0.2.17'

igorprado · Feb 22, 2018 · edca510 · edca510
2 parents d37db94 + 380ce74
commit edca510
Show file tree

Hide file tree

Showing 11 changed files with 6,611 additions and 78 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
-node_modeules/
+node_modules/
 dist/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 0.2.17 - Feb 21, 2018
+
+* Dismissible enhancements (thanks to @marudor)
+
 ## 0.2.16 - Oct 19, 2017
 
 * Support for React 16 (thanks to @marudor)

diff --git 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
@@ -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'
     }
   ],
 
@@ -143,8 +159,8 @@ NotificationSystemExample = createReactClass({
               <small className="more-magic">Click twice for more awesomeness!</small>
             </div>
             <div className="github-buttons">
-              <a className="github-button" href="https://github.com/igorprado/react-notification-system" data-style="mega" data-icon="octicon-star" data-count-href="/igorprado/react-notification-system/stargazers" data-count-api="/repos/igorprado/react-notification-system#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star igorprado/react-notification-system on GitHub">Star</a>
-              <a className="github-button" href="https://github.com/igorprado/react-notification-system/fork" data-style="mega" data-icon="octicon-repo-forked" data-count-href="/igorprado/react-notification-system/network" data-count-api="/repos/igorprado/react-notification-system#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork igorprado/react-notification-system on GitHub">Fork</a>
+              <a className="github-button" href="https://github.com/igorprado/react-notification-system" data-size="large" data-icon="octicon-star" data-count-href="/igorprado/react-notification-system/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star igorprado/react-notification-system on GitHub">Star</a>
+              <a className="github-button" href="https://github.com/igorprado/react-notification-system/fork" data-size="large" data-icon="octicon-repo-forked" data-count-href="/igorprado/react-notification-system/network" data-show-count="true" data-count-aria-label="# forks on GitHub" aria-label="Fork igorprado/react-notification-system on GitHub">Fork</a>
             </div>
           </div>
         </header>

diff --git 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({
             <small className={ error.level }>Open console to see the error after creating a notification.</small>
           </div>
 
+          <div className="form-group">
+          <label>Dismissible:</label>
+          <select className="form-control" name="dismissible" onChange={ this._changed } value={ notification.dismissible }>
+            <option value="both">Both (both)</option>
+            <option value="click">Click (no dismiss button) (click)</option>
+            <option value="button">Dismiss button only (button)</option>
+            <option value="none">None (none)</option>
+          </select>
+        </div>
+
           <div className="form-group">
             <label>Auto Dismiss:</label>
             <input className="form-control" name="autoDismiss" onChange={ this._changed } type="text" value={ notification.autoDismiss }/>
             <small>secs (0 means infinite)</small>
           </div>
 
-          <div className="form-group">
-            <div className="checkbox">
-              <label>
-                <input checked={ notification.dismissible } onChange={ this._changedDismissible } type="checkbox"/> Can user dismiss?
-              </label>
-            </div>
-          </div>
-
           <div className="form-group">
             <div className="checkbox">
               <label>