Skip to content

Commit

Permalink
fix(snackbar): fix multiple pause states and rerendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlaursen
mlaursen committed Apr 18, 2024
1 parent ec36cc1 commit 719023d
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 27 deletions.
19 changes: 13 additions & 6 deletions packages/core/src/snackbar/ToastManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,13 +312,17 @@ export class ToastManager {
const existingIndex = this.#getToastIndex(toast.toastId);
if (existingIndex !== -1 && duplicates !== "allow") {
const existingToast = this.#queue[existingIndex];
const nextToast: QueuedToast = {
...existingToast,
...toast,
};

// reorder/move the existing toast to be the next item in the queue by:
// - removing the toast from the queue
// - inserting it into the next position with the updates
if (priority === "next" && existingIndex > 1) {
this.#queue.splice(existingIndex, 1);
this.#queue.splice(1, 0, { ...existingToast, ...toast });
this.#queue.splice(1, 0, nextToast);
this.#emit();
return;
}
Expand All @@ -329,18 +333,20 @@ export class ToastManager {
existingIndex !== 0
) {
this.#queue.splice(existingIndex, 1);
this.#addToastImmediately({
...existingToast,
...toast,
});
this.#addToastImmediately(nextToast);
this.#emit();
return;
}

const timers = this.#timers.get(toastId);
if (existingToast.visible && duplicates === "restart" && timers) {
this.#timers.set(toastId, { ...timers, elapsedTime: 0 });
this.startRemoveTimeout(toastId);

// wait for the next resume event instead. this _should_ only happen
// when hovering a toast and another toast replaces it
if (!nextToast.paused) {
this.startRemoveTimeout(toastId);
}
}

this.#updateToast(existingIndex, toast);
Expand Down Expand Up @@ -445,6 +451,7 @@ export class ToastManager {
return;
}

timers.startTime = Date.now();
this.#updateToast(toastIndex, { paused: false });
this.startRemoveTimeout(toastId);
};
Expand Down
34 changes: 34 additions & 0 deletions packages/core/src/snackbar/__tests__/ToastManagerProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,40 @@ describe("ToastManagerProvider", () => {
expect(message).not.toBeInTheDocument();
});

it("should set the startTime to the current timestamp when resuming so that it can be paused multiple times", async () => {
const { message, user } = await init();

await user.hover(message);
act(() => {
jest.advanceTimersByTime(3000);
});
expect(message).toBeInTheDocument();
expect(message).not.toHaveClass(LEAVE_CLASS_NAME);

await user.unhover(message);
expect(message).toBeInTheDocument();
expect(message).not.toHaveClass(LEAVE_CLASS_NAME);
await user.hover(message);
act(() => {
jest.advanceTimersByTime(8000);
});
expect(message).toBeInTheDocument();
expect(message).not.toHaveClass(LEAVE_CLASS_NAME);

await user.unhover(message);
expect(message).toBeInTheDocument();
expect(message).not.toHaveClass(LEAVE_CLASS_NAME);
act(() => {
jest.advanceTimersByTime(2000);
});
expect(message).toBeInTheDocument();
expect(message).toHaveClass(LEAVE_CLASS_NAME);
act(() => {
jest.runOnlyPendingTimers();
});
expect(message).not.toBeInTheDocument();
});

it("should restart toasts with the same toastId by default", async () => {
const user = userEvent.setup({ delay: null });
renderWithManager(<SimpleTest toast={{ toastId: "same-toast-id" }} />);
Expand Down
42 changes: 21 additions & 21 deletions packages/core/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`ToastManagerProvider default toast manager should work without needing
exports[`ToastManagerProvider toast queue should add a toast next in queue if a different toast is being displayed and duplicates are allowed or the toast does not exist in the queue yet 1`] = `
<div
class="rmd-toast"
id="toast-:ru:"
id="toast-:r10:"
role="status"
>
<div
Expand All @@ -57,7 +57,7 @@ exports[`ToastManagerProvider toast queue should add a toast next in queue if a
exports[`ToastManagerProvider toast queue should allow a toast to replace the currently shown toast 1`] = `
<div
class="rmd-toast"
id="toast-:ri:"
id="toast-:rk:"
role="status"
>
<div
Expand All @@ -72,11 +72,11 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1b:"
id="snackbar-:r1d:"
>
<div
class="rmd-toast rmd-toast--x rmd-scale-transition--enter rmd-scale-transition--enter-active"
id="toast-:r1c:"
id="toast-:r1e:"
role="alert"
>
<div
Expand Down Expand Up @@ -104,11 +104,11 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1b:"
id="snackbar-:r1d:"
>
<div
class="rmd-toast rmd-toast--x rmd-scale-transition--exit rmd-scale-transition--exit-active"
id="toast-:r1c:"
id="toast-:r1e:"
role="alert"
>
<div
Expand Down Expand Up @@ -136,11 +136,11 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1d:"
id="snackbar-:r1f:"
>
<div
class="rmd-toast"
id="toast-:r1e:"
id="toast-:r1g:"
role="status"
>
<div
Expand All @@ -151,7 +151,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
id="toast-:r1f:"
id="toast-:r1h:"
role="status"
>
<div
Expand All @@ -162,7 +162,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
id="toast-:r1g:"
id="toast-:r1i:"
role="status"
>
<div
Expand All @@ -178,11 +178,11 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1d:"
id="snackbar-:r1f:"
>
<div
class="rmd-toast"
id="toast-:r1f:"
id="toast-:r1h:"
role="status"
>
<div
Expand All @@ -193,7 +193,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast"
id="toast-:r1g:"
id="toast-:r1i:"
role="status"
>
<div
Expand All @@ -204,7 +204,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
id="toast-:r1h:"
id="toast-:r1j:"
role="status"
>
<div
Expand All @@ -220,11 +220,11 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1d:"
id="snackbar-:r1f:"
>
<div
class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
id="toast-:r1f:"
id="toast-:r1h:"
role="status"
>
<div
Expand All @@ -235,7 +235,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
id="toast-:r1g:"
id="toast-:r1i:"
role="status"
>
<div
Expand All @@ -246,7 +246,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast"
id="toast-:r1h:"
id="toast-:r1j:"
role="status"
>
<div
Expand All @@ -262,11 +262,11 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
<div
class="rmd-snackbar rmd-snackbar--bottom"
data-testid="snackbar"
id="snackbar-:r1d:"
id="snackbar-:r1f:"
>
<div
class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
id="toast-:r1h:"
id="toast-:r1j:"
role="status"
>
<div
Expand All @@ -277,7 +277,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
</div>
<div
class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
id="toast-:r1i:"
id="toast-:r1k:"
role="status"
>
<div
Expand Down

0 comments on commit 719023d

Please sign in to comment.