From 63f339733574432a393f276b0d0ab20d014e6d82 Mon Sep 17 00:00:00 2001 From: Evyatar Alush Date: Thu, 5 Oct 2017 12:43:35 +0200 Subject: [PATCH] [FEAT] 1.1.0 Add pauseOnHover (#34) --- README.md | 7 ++++--- package.json | 2 +- src/ButterToast/defaults.js | 3 ++- src/ButterToastTray/index.js | 35 ++++++++++++++++++++++++++--------- stories/index.js | 4 ++-- 5 files changed, 35 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 7d927dc..f17d804 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index d2dd66e..275d8b1 100644 --- a/package.json +++ b/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": { diff --git a/src/ButterToast/defaults.js b/src/ButterToast/defaults.js index cb1c01c..c974307 100644 --- a/src/ButterToast/defaults.js +++ b/src/ButterToast/defaults.js @@ -1,5 +1,6 @@ export default { toastTimeout: 3000, trayPosition: 'bottom-right', - toastMargin: '5' + toastMargin: '5', + pauseOnHover: false }; \ No newline at end of file diff --git a/src/ButterToastTray/index.js b/src/ButterToastTray/index.js index cc281fa..60ec724 100644 --- a/src/ButterToastTray/index.js +++ b/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() { diff --git a/stories/index.js b/stories/index.js index 3e12a60..7350788 100644 --- a/stories/index.js +++ b/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)', () => (
- + raise(e, {name: 'slim t1'})}>Raise a toast!
))