Convert toast and confirm to TypeScript (#5219)

CONTRIBUTORS.md

@@ -97,6 +97,7 @@
 - [ItsAllAboutTheCode](https://github.com/ItsAllAboutTheCode)
 - [Jxiced](https://github.com/Jxiced)
 - [Derek Huber](https://github.com/Derek4aty1)
+- [StableCrimson](https://github.com/StableCrimson)
 
 ## Emby Contributors
 

src/components/confirm/confirm.js

@@ -1,74 +0,0 @@
-import { appRouter } from '../router/appRouter';
-import browser from '../../scripts/browser';
-import dialog from '../dialog/dialog';
-import globalize from '../../lib/globalize';
-
-function useNativeConfirm() {
-    // webOS seems to block modals
-    // Tizen 2.x seems to block modals
-    return !browser.web0s
-        && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8))
-        && browser.tv
-        && window.confirm;
-}
-
-async function nativeConfirm(options) {
-    if (typeof options === 'string') {
-        options = {
-            title: '',
-            text: options
-        };
-    }
-
-    const text = (options.text || '').replaceAll('<br/>', '\n');
-    await appRouter.ready();
-    const result = window.confirm(text);
-
-    if (result) {
-        return Promise.resolve();
-    } else {
-        return Promise.reject();
-    }
-}
-
-async function customConfirm(text, title) {
-    let options;
-    if (typeof text === 'string') {
-        options = {
-            title: title,
-            text: text
-        };
-    } else {
-        options = text;
-    }
-
-    const items = [];
-
-    items.push({
-        name: options.cancelText || globalize.translate('ButtonCancel'),
-        id: 'cancel',
-        type: 'cancel'
-    });
-
-    items.push({
-        name: options.confirmText || globalize.translate('ButtonOk'),
-        id: 'ok',
-        type: options.primary === 'delete' ? 'delete' : 'submit'
-    });
-
-    options.buttons = items;
-
-    await appRouter.ready();
-
-    return dialog.show(options).then(result => {
-        if (result === 'ok') {
-            return Promise.resolve();
-        }
-
-        return Promise.reject();
-    });
-}
-
-const confirm = useNativeConfirm() ? nativeConfirm : customConfirm;
-
-export default confirm;

src/components/confirm/confirm.ts

@@ -0,0 +1,85 @@
+import dialog from 'components/dialog/dialog';
+import { appRouter } from 'components/router/appRouter';
+import globalize from 'lib/globalize';
+import browser from 'scripts/browser';
+
+interface OptionItem {
+    id: string,
+    name: string,
+    type: 'cancel' | 'delete' | 'submit'
+}
+
+interface ConfirmOptions {
+    title?: string,
+    text: string
+    cancelText?: string,
+    confirmText?: string,
+    primary?: string
+    buttons?: OptionItem[]
+}
+
+function shouldUseNativeConfirm() {
+    // webOS seems to block modals
+    // Tizen 2.x seems to block modals
+    return !browser.web0s
+        && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8))
+        && browser.tv
+        && !!window.confirm;
+}
+
+async function nativeConfirm(options: string | ConfirmOptions) {
+    if (typeof options === 'string') {
+        options = {
+            text: options
+        } as ConfirmOptions;
+    }
+
+    const text = (options.text || '').replace(/<br\/>/g, '\n');
+    await appRouter.ready();
+    const result = window.confirm(text);
+
+    if (result) {
+        return Promise.resolve();
+    } else {
+        return Promise.reject(new Error('Confirm dialog rejected'));
+    }
+}
+
+async function customConfirm(options: string | ConfirmOptions, title: string = '') {
+    if (typeof options === 'string') {
+        options = {
+            title,
+            text: options
+        };
+    }
+
+    const items: OptionItem[] = [];
+
+    items.push({
+        name: options.cancelText || globalize.translate('ButtonCancel'),
+        id: 'cancel',
+        type: 'cancel'
+    });
+
+    items.push({
+        name: options.confirmText || globalize.translate('ButtonOk'),
+        id: 'ok',
+        type: options.primary === 'delete' ? 'delete' : 'submit'
+    });
+
+    options.buttons = items;
+
+    await appRouter.ready();
+
+    return dialog.show(options).then(result => {
+        if (result === 'ok') {
+            return Promise.resolve();
+        }
+
+        return Promise.reject(new Error('Confirm dialog rejected'));
+    });
+}
+
+const confirm = shouldUseNativeConfirm() ? nativeConfirm : customConfirm;
+
+export default confirm;

src/components/toast/toast.ts

@@ -1,6 +1,10 @@
 import './toast.scss';
 
-let toastContainer;
+interface Toast {
+    text: string
+}
+
+let toastContainer: HTMLDivElement;
 
 function getToastContainer() {
     if (!toastContainer) {
@@ -12,24 +16,24 @@ function getToastContainer() {
     return toastContainer;
 }
 
-function remove(elem) {
+function remove(elem: HTMLElement) {
     setTimeout(function () {
-        elem.parentNode.removeChild(elem);
+        elem.parentNode?.removeChild(elem);
     }, 300);
 }
 
-function animateRemove(elem) {
+function animateRemove(elem: HTMLElement) {
     setTimeout(function () {
         elem.classList.add('toastHide');
         remove(elem);
     }, 3300);
 }
 
-export default function (options) {
+export default function (options: string | Toast) {
     if (typeof options === 'string') {
         options = {
             text: options
-        };
+        } as Toast;
     }
 
     const elem = document.createElement('div');