Skip to content

Commit

Permalink
Add ability to specify INFINITE_TIMEOUT (#39)
Browse files Browse the repository at this point in the history
  • Loading branch information
krydos authored May 10, 2023
1 parent 6015f1d commit c6080d4
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 2 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,17 @@ this.$notify({

The first argument is an object containing the data for the `Notification` element, it's important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds.

If you need to keep the notification on the screen forever use `-1` as a timeout:

```javascript
this.$notify({
group: "foo",
title: "Success",
text: "Your account was registered!"
}, -1) // it's not going to disappear automatically
```


### Example with differents groups

You can use the `NotificationGroup` component to have different types of notifications. For example, notifications error messages in top center and generic app notifications in bottom-right corner.
Expand Down
17 changes: 17 additions & 0 deletions example/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
>
Top notification
</button>
<button
class="px-4 py-2 font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring"
@click="onClickTopInfinite"
>
Top notification infinite
</button>
<button
class="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-600 focus:outline-none focus:ring"
@click="onClickBot"
Expand Down Expand Up @@ -159,6 +165,17 @@ function onClickTop() {
);
}
function onClickTopInfinite() {
notify(
{
group: "top",
title: "Success",
text: "I'm not going to disappear until you close me 😎",
},
-1
);
}
function onClickBot() {
notify(
{
Expand Down
8 changes: 6 additions & 2 deletions src/Notification.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,17 @@ const add = ({
timeout?: number;
}) => {
const DEFAULT_TIMEOUT = 3000;
const INFINITE_TIMEOUT = -1;
state.notifications.push(notification);
state.timeouts[notification.id] = window.setTimeout(() => {
if (timeout === INFINITE_TIMEOUT) return;
remove(notification.id);
}, timeout || DEFAULT_TIMEOUT);
};
// use Math.max to make sure we don't pass INFINITE_TIMEOUT to setTimeout
}, Math.max(timeout || DEFAULT_TIMEOUT, 0)); };
const close = (id: Notification["id"]) => {
emit("close");
Expand Down

0 comments on commit c6080d4

Please sign in to comment.