fixed toast timer

src/components/toast-portal/ToastPortalElement.ts

@@ -1,11 +1,12 @@
 import { controller, targets } from '@github/catalyst';
-import { delay, html, until } from 'core/utils';
+import { delay, html, Timer } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
 @controller
 class ToastPortalElement extends BaseComponentElement {
 	@targets toastElement: HTMLElement;
 	toasts: Array<Toast> = [];
+	timer: Timer;
 	constructor() {
 		super();
 	}
@@ -15,11 +16,20 @@ class ToastPortalElement extends BaseComponentElement {
 	};
 
 	pushToast = (type: string, message: string): void => {
+		const toastLen = this.toasts.length;
 		this.toasts = [{ type, message }, ...this.toasts];
-		const interval = setInterval(() => {
+		if (toastLen < 1) {
-			this.popToast();
+			this.timer = new Timer(() => {
-			clearInterval(interval);
+				this.popToast();
-		}, 5000);
+				if (this.toasts.length > 0) {
+					this.timer.reset();
+				}
+			}, 5000);
+		}
+		// const interval = setInterval(() => {
+		// 	this.popToast();
+		// 	clearInterval(interval);
+		// }, 5000);
 		this.update();
 	};
 
@@ -33,7 +43,12 @@ class ToastPortalElement extends BaseComponentElement {
 
 	render = () => {
 		const renderToast = (note: string, type: string) => {
-			const message = () => html` <div class="toast ${type ? `--${type}` : '--default'}">${note}</div> `;
+			const message = () =>
+				html`
+					<div class="toast ${type ? `--${type}` : '--default'}">
+						<span class="toast-text">${note}</span>
+					</div>
+				`;
 			return html`${message()}`;
 		};
 

src/core/utils/timer.ts

@@ -1,20 +1,33 @@
-const Timer = function (callback, delay, ...args) {
+class Timer {
-	var timerId,
+	private timerId: number;
-		start,
+	private start: number;
-		remaining = delay;
+	private remaining: number;
+	private args: any;
+	constructor(private callback: () => any, private delay: number, ...args) {
+		this.remaining = delay;
+		this.args = args;
+		this.resume();
+	}
 
-	this.pause = function () {
+	pause = () => {
-		window.clearTimeout(timerId);
+		window.clearTimeout(this.timerId);
-		remaining -= Date.now() - start;
+		this.remaining -= Date.now() - this.start;
 	};
 
-	this.resume = function () {
+	resume = () => {
-		start = Date.now();
+		this.start = Date.now();
-		window.clearTimeout(timerId);
+		window.clearTimeout(this.timerId);
-		timerId = window.setTimeout(callback, remaining, ...args);
+		console.log(this.remaining);
+		this.timerId = window.setTimeout(this.callback, this.remaining, ...this.args);
 	};
 
-	this.resume();
+	reset = (pause: boolean = false) => {
-};
+		window.clearTimeout(this.timerId);
+		this.remaining = this.delay;
+		if (!pause) {
+			this.resume();
+		}
+	};
+}
 
 export default Timer;

src/styles/toast-portal/toast-portal.scss

@@ -14,14 +14,19 @@ toast-portal {
 			top: 5px;
 			right: 7px;
 			.toast {
+				position: relative;
+				width: 200px;
+				height: 40px;
+				border-radius: 4px;
+				margin: 4px 3px;
+				padding: 2px 3px;
+				display: flex;
+				align-items: center;
 				&.--default {
-					position: relative;
-					width: 200px;
-					height: 40px;
 					background-color: $gray-07;
 					border: 1px solid $gray-08;
-					border-radius: 4px;
+				}
-                    
+				.toast-text {
 				}
 			}
 		}