[FEAT] 1.1.0 Add pauseOnHover (#34)

README.md

@@ -82,10 +82,11 @@ class MyComponent extends Component {
     * bottom-left
 
     All these are added as class names to the tray.
-* **toastMargin**: how much distance (in px) should toasts take from each other
+* **toastMargin**: `integer` | optional | Default: `5`. how much distance (in px) should toasts take from each other.
 * **renderInContext**: `boolean` | optional. By default the tray is rendered as a direct descendant of the body element. renderInContext allows the tray to be rendered as a direct descendant of the element in which you declare it, giving you the ability to easily position it relative to that element.
-* **name**: allows simple namespacing. A way to make toasts appear in a specific tray. Irrelevant if you only have one active tray. Also, it adds a css class of the same name, which makes styling easier.
-* **theme** As already noted, Butter Toast does not provide any styling options other than what's needed to stick the tray to the corners of the screen. You may, however pass a `theme` prop that will be added as a class name to the tray, which will help you style it.
+* **name**: `string` | optional. allows simple namespacing. A way to make toasts appear in a specific tray. Irrelevant if you only have one active tray. Also, it adds a css class of the same name, which makes styling easier.
+* **pauseOnHover**: `boolean` | optional | default: `false`. Changes the default behavior when hovering. By default, when hovering over a toast, even though it doesn't dismiss - it will keep counting down to its dismissal, meaning that if its timeout ended, it will dismiss on mouse-out. Setting `pauseOnHover` to true, will pause the countdown for as long as the toast is being hovered - meaning that the timeout cannot end while hovering.
+* **theme**: `string` | optional. As already noted, Butter Toast does not provide any styling options other than what's needed to stick the tray to the corners of the screen. You may, however pass a `theme` prop that will be added as a class name to the tray, which will help you style it.
 When adding a theme, the class name added to the tray will be prefixed with `bt-theme-`, so, if your theme is: `lady-bug`, the class added to the tray will be: `bt-theme-lady-bug`.
 
 ![alt tag](https://raw.githubusercontent.com/ealush/butter-toast/master/assets/rec1.gif)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "butter-toast",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Smooth react toast notifications",
   "main": "./dist/index.js",
   "scripts": {

src/ButterToast/defaults.js

@@ -1,5 +1,6 @@
 export default {
     toastTimeout: 3000,
     trayPosition: 'bottom-right',
-    toastMargin: '5'
+    toastMargin: '5',
+    pauseOnHover: false
 };

src/ButterToastTray/index.js

@@ -41,6 +41,14 @@ class ButterToastTray extends Component {
 
     onMouseEnter(e) {
         const toastId = e.currentTarget.id;
+
+        if (this.config.pauseOnHover && this.debouncer[toastId]) {
+            this.debouncer[toastId].cancel();
+            delete this.debouncer[toastId];
+            const now = Date.now();
+            this.remaining = this.end - now;
+        }
+
         this.hovering = toastId;
     }
 
@@ -50,6 +58,16 @@ class ButterToastTray extends Component {
             this.hovering = null;
         }
 
+        if (this.config.pauseOnHover) {
+            this.start = Date.now();
+            this.end = this.start + this.remaining;
+            this.debouncer[toastId] = linear({
+                [this.remaining.toString()]: () => this.triggerDismiss(toastId)
+            });
+            this.debouncer[toastId]();
+            return;
+        }
+
         if (!this.toasts[toastId].awaitsRemoval) {
             return;
         }
@@ -59,7 +77,7 @@ class ButterToastTray extends Component {
 
     triggerDismiss(toastId, force) {
         const key = Date.now(),
-            hide = force ? 0 : 300,
+            hide = force ? 0 : 50,
             remove = hide + 300;
         this.debouncer[key] = linear({
             [hide.toString()]: () => this.hideToast(toastId, force),
@@ -116,23 +134,22 @@ class ButterToastTray extends Component {
 
         const timeout = parseInt(payload.toastTimeout, 10) || parseInt(this.config.toastTimeout, 10),
             sticky = payload.sticky,
-            hideOn = timeout + 50,
-            removeOn = hideOn + 300,
             toastId = generateToastId(),
-            height = 0,
-            key = Date.now();
+            height = 0;
 
         this.setToastHeight(toastId, height);
+        this.start = Date.now() + 50;
+        this.end = this.start + timeout;
+        this.remaining = this.end - this.start;
 
-        this.debouncer[key] = linear({
+        this.debouncer[toastId] = linear({
             '0': () => {
                 this.setState((prevState) => ({toasts: [{ toastId, payload, height }].concat(prevState.toasts)}));
             },
             '50': () => this.showToast(toastId),
-            [hideOn.toString()]: () => !sticky && this.hideToast(toastId),
-            [removeOn.toString()]: () => !sticky && this.removeToast(toastId)
+            [timeout.toString()]: () => !sticky && this.triggerDismiss(toastId)
         });
-        this.debouncer[key]();
+        this.debouncer[toastId]();
     }
 
     render() {

stories/index.js

@@ -39,9 +39,9 @@ function raiseDismissOnClick(e) {
 }
 
 storiesOf('Toast', module) // eslint-disable-line no-undef
-    .add('bottom-left', () => (
+    .add('bottom-left (pauseOnHover example)', () => (
         <div>
-            <ButterToast name="slim t1" trayPosition="bottom-left"/>
+            <ButterToast name="slim t1" pauseOnHover trayPosition="bottom-left"/>
             <a href="#!" onClick={(e) => raise(e, {name: 'slim t1'})}>Raise a toast!</a>
         </div>
     ))