Simplifie toast handling
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>pull/21833/head
parent
1d629f2557
commit
40947a2a68
|
@ -16,17 +16,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_IncomingCallToast {
|
||||
// mx_Toast overrides
|
||||
padding: 8px !important;
|
||||
display: flex !important;
|
||||
top: 8px !important;
|
||||
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 250px;
|
||||
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
||||
background-color: $voipcall-plinth-color;
|
||||
|
||||
pointer-events: initial; // restore pointer events so the user can accept/decline
|
||||
|
||||
.mx_IncomingCallToast_content {
|
||||
|
|
|
@ -648,10 +648,9 @@ export default class CallHandler extends EventEmitter {
|
|||
if (status === CallState.Ringing) {
|
||||
ToastStore.sharedInstance().addOrReplaceToast({
|
||||
key: toastKey,
|
||||
supplyWholeBody: true,
|
||||
priority: 100,
|
||||
component: IncomingCallToast,
|
||||
className: "mx_IncomingCallToast",
|
||||
bodyClassName: "mx_IncomingCallToast",
|
||||
props: { call },
|
||||
});
|
||||
} else {
|
||||
|
|
|
@ -58,37 +58,42 @@ 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, supplyWholeBody } = topToast;
|
||||
const toastClasses = classNames("mx_Toast_toast", {
|
||||
const { title, icon, key, component, className, bodyClassName, props } = topToast;
|
||||
const bodyClasses = classNames("mx_Toast_body", bodyClassName);
|
||||
const toastClasses = classNames("mx_Toast_toast", className, {
|
||||
"mx_Toast_hasIcon": icon,
|
||||
[`mx_Toast_icon_${icon}`]: icon,
|
||||
}, className);
|
||||
|
||||
let countIndicator;
|
||||
if (isStacked || this.state.countSeen > 0) {
|
||||
countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
|
||||
}
|
||||
|
||||
});
|
||||
const toastProps = Object.assign({}, props, {
|
||||
key,
|
||||
toastKey: key,
|
||||
});
|
||||
|
||||
const content = React.createElement(component, toastProps);
|
||||
|
||||
toast = supplyWholeBody
|
||||
? content
|
||||
: <div className={toastClasses}>
|
||||
let countIndicator;
|
||||
if (title && isStacked || this.state.countSeen > 0) {
|
||||
countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
|
||||
}
|
||||
|
||||
let titleElement;
|
||||
if (title) {
|
||||
titleElement = (
|
||||
<div className="mx_Toast_title">
|
||||
<h2>{ title }</h2>
|
||||
<span>{ countIndicator }</span>
|
||||
</div>
|
||||
<div className="mx_Toast_body">{ content }</div>
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
|
||||
toast = (
|
||||
<div className={toastClasses}>
|
||||
{ titleElement }
|
||||
<div className={bodyClasses}>{ content }</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
containerClasses = classNames("mx_ToastContainer", {
|
||||
"mx_ToastContainer_stacked": isStacked,
|
||||
[className]: supplyWholeBody,
|
||||
});
|
||||
}
|
||||
return toast
|
||||
|
|
|
@ -26,8 +26,8 @@ export interface IToast<C extends ComponentClass> {
|
|||
icon?: string;
|
||||
component: C;
|
||||
className?: string;
|
||||
bodyClassName?: string;
|
||||
props?: Omit<React.ComponentProps<C>, "toastKey">; // toastKey is injected by ToastContainer
|
||||
supplyWholeBody?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue