summaryrefslogtreecommitdiff
path: root/frontend/src/components/Toast.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/Toast.tsx')
-rw-r--r--frontend/src/components/Toast.tsx27
1 files changed, 11 insertions, 16 deletions
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 01a436d7..e7a220c2 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -2,13 +2,10 @@ import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
import { FunctionComponent } from 'react';
interface ToastProps {
- toast: {
- data: ToastData;
- nToastDurationMS: number;
- };
+ toast: ToastData;
}
-const toastClasses = findModule((mod) => {
+export const toastClasses = findModule((mod) => {
if (typeof mod !== 'object') return false;
if (mod.ToastPlaceholder) {
@@ -30,21 +27,19 @@ const templateClasses = findModule((mod) => {
const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
return (
- <div
- style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
- className={toastClasses.toastEnter}
- >
+ <div className={toastClasses.ToastPopup}>
<div
- onClick={toast.data.onClick}
- className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
+ style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
+ onClick={toast.onClick}
+ className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
>
- {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
- <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
+ {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
+ <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
<div className={templateClasses.Header}>
- {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
- <div className={templateClasses.Title}>{toast.data.title}</div>
+ {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
+ <div className={templateClasses.Title}>{toast.title}</div>
</div>
- <div className={templateClasses.Body}>{toast.data.body}</div>
+ <div className={templateClasses.Body}>{toast.body}</div>
</div>
</div>
</div>