From 07be6dd78065e325f1f31ce9de51efaa2b5c6388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Jul 2021 13:04:06 +0200
Subject: [PATCH] Allow suppliing whole body to toasts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/structures/ToastContainer.tsx | 22 +++++++++++++-------
 src/stores/ToastStore.ts                     |  4 +++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index b7b0b7c652..75cf4a51fc 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -58,7 +58,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const { title, icon, key, component, className, props } = topToast;
+            const { title, icon, key, component, className, props, supplyWholeBody } = topToast;
             const toastClasses = classNames("mx_Toast_toast", {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
@@ -73,16 +73,22 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 key,
                 toastKey: key,
             });
-            toast = (<div className={toastClasses}>
-                <div className="mx_Toast_title">
-                    <h2>{ title }</h2>
-                    <span>{ countIndicator }</span>
-                </div>
-                <div className="mx_Toast_body">{ React.createElement(component, toastProps) }</div>
-            </div>);
+
+            const content = React.createElement(component, toastProps);
+
+            toast = supplyWholeBody
+                ? content
+                : <div className={toastClasses}>
+                    <div className="mx_Toast_title">
+                        <h2>{ title }</h2>
+                        <span>{ countIndicator }</span>
+                    </div>
+                    <div className="mx_Toast_body">{ content }</div>
+                </div>;
 
             containerClasses = classNames("mx_ToastContainer", {
                 "mx_ToastContainer_stacked": isStacked,
+                [className]: supplyWholeBody,
             });
         }
         return toast
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
index 850c3cb026..e831be7203 100644
--- a/src/stores/ToastStore.ts
+++ b/src/stores/ToastStore.ts
@@ -22,11 +22,13 @@ export interface IToast<C extends ComponentClass> {
     key: string;
     // higher priority number will be shown on top of lower priority
     priority: number;
-    title: string;
+    title?: string;
     icon?: string;
     component: C;
     className?: string;
     props?: Omit<React.ComponentProps<C>, "toastKey">; // toastKey is injected by ToastContainer
+    supplyWholeBody?: boolean;
+    content?: JSX.Element;
 }
 
 /**