Allow suppliing whole body to toasts

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-24 13:04:06 +02:00
parent ff37b8cc79
commit 07be6dd780
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
2 changed files with 17 additions and 9 deletions

View file

@ -58,7 +58,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
let containerClasses; let containerClasses;
if (totalCount !== 0) { if (totalCount !== 0) {
const topToast = this.state.toasts[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", { const toastClasses = classNames("mx_Toast_toast", {
"mx_Toast_hasIcon": icon, "mx_Toast_hasIcon": icon,
[`mx_Toast_icon_${icon}`]: icon, [`mx_Toast_icon_${icon}`]: icon,
@ -73,16 +73,22 @@ export default class ToastContainer extends React.Component<{}, IState> {
key, key,
toastKey: key, toastKey: key,
}); });
toast = (<div className={toastClasses}>
<div className="mx_Toast_title"> const content = React.createElement(component, toastProps);
<h2>{ title }</h2>
<span>{ countIndicator }</span> toast = supplyWholeBody
</div> ? content
<div className="mx_Toast_body">{ React.createElement(component, toastProps) }</div> : <div className={toastClasses}>
</div>); <div className="mx_Toast_title">
<h2>{ title }</h2>
<span>{ countIndicator }</span>
</div>
<div className="mx_Toast_body">{ content }</div>
</div>;
containerClasses = classNames("mx_ToastContainer", { containerClasses = classNames("mx_ToastContainer", {
"mx_ToastContainer_stacked": isStacked, "mx_ToastContainer_stacked": isStacked,
[className]: supplyWholeBody,
}); });
} }
return toast return toast

View file

@ -22,11 +22,13 @@ export interface IToast<C extends ComponentClass> {
key: string; key: string;
// higher priority number will be shown on top of lower priority // higher priority number will be shown on top of lower priority
priority: number; priority: number;
title: string; title?: string;
icon?: string; icon?: string;
component: C; component: C;
className?: string; className?: string;
props?: Omit<React.ComponentProps<C>, "toastKey">; // toastKey is injected by ToastContainer props?: Omit<React.ComponentProps<C>, "toastKey">; // toastKey is injected by ToastContainer
supplyWholeBody?: boolean;
content?: JSX.Element;
} }
/** /**