2019-11-20 18:18:28 +03:00
|
|
|
/*
|
2020-01-16 23:23:47 +03:00
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2019-11-20 18:18:28 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import * as React from "react";
|
2020-05-22 14:47:40 +03:00
|
|
|
import ToastStore, {IToast} from "../../stores/ToastStore";
|
2019-11-20 18:18:28 +03:00
|
|
|
import classNames from "classnames";
|
|
|
|
|
2020-05-22 14:47:40 +03:00
|
|
|
interface IState {
|
|
|
|
toasts: IToast<any>[];
|
2020-05-22 16:28:01 +03:00
|
|
|
countSeen: number;
|
2020-05-22 14:47:40 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class ToastContainer extends React.Component<{}, IState> {
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
this.state = {
|
|
|
|
toasts: ToastStore.sharedInstance().getToasts(),
|
2020-05-22 16:29:30 +03:00
|
|
|
countSeen: ToastStore.sharedInstance().getCountSeen(),
|
2020-05-22 14:47:40 +03:00
|
|
|
};
|
2019-11-20 18:18:28 +03:00
|
|
|
|
2020-01-26 00:30:42 +03:00
|
|
|
// Start listening here rather than in componentDidMount because
|
|
|
|
// toasts may dismiss themselves in their didMount if they find
|
|
|
|
// they're already irrelevant by the time they're mounted, and
|
|
|
|
// our own componentDidMount is too late.
|
2020-01-16 23:23:47 +03:00
|
|
|
ToastStore.sharedInstance().on('update', this._onToastStoreUpdate);
|
2019-11-20 18:18:28 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2020-01-16 23:23:47 +03:00
|
|
|
ToastStore.sharedInstance().removeListener('update', this._onToastStoreUpdate);
|
2019-11-20 18:18:28 +03:00
|
|
|
}
|
|
|
|
|
2020-01-16 23:23:47 +03:00
|
|
|
_onToastStoreUpdate = () => {
|
2020-05-22 16:28:01 +03:00
|
|
|
this.setState({
|
|
|
|
toasts: ToastStore.sharedInstance().getToasts(),
|
|
|
|
countSeen: ToastStore.sharedInstance().getCountSeen(),
|
|
|
|
});
|
2019-11-20 18:18:28 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const totalCount = this.state.toasts.length;
|
|
|
|
const isStacked = totalCount > 1;
|
2019-11-25 15:20:20 +03:00
|
|
|
let toast;
|
|
|
|
if (totalCount !== 0) {
|
|
|
|
const topToast = this.state.toasts[0];
|
2020-11-09 17:21:45 +03:00
|
|
|
const {title, icon, key, component, className, props} = topToast;
|
2019-11-25 15:20:20 +03:00
|
|
|
const toastClasses = classNames("mx_Toast_toast", {
|
|
|
|
"mx_Toast_hasIcon": icon,
|
|
|
|
[`mx_Toast_icon_${icon}`]: icon,
|
2020-11-09 17:21:45 +03:00
|
|
|
}, className);
|
2020-05-22 16:28:01 +03:00
|
|
|
|
|
|
|
let countIndicator;
|
|
|
|
if (isStacked || this.state.countSeen > 0) {
|
|
|
|
countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
|
|
|
|
}
|
2019-11-25 15:20:20 +03:00
|
|
|
|
|
|
|
const toastProps = Object.assign({}, props, {
|
|
|
|
key,
|
2020-01-16 23:23:47 +03:00
|
|
|
toastKey: key,
|
2019-11-25 15:20:20 +03:00
|
|
|
});
|
|
|
|
toast = (<div className={toastClasses}>
|
2020-05-21 18:32:19 +03:00
|
|
|
<div className="mx_Toast_title">
|
|
|
|
<h2>{title}</h2>
|
|
|
|
<span>{countIndicator}</span>
|
|
|
|
</div>
|
2019-11-25 15:20:20 +03:00
|
|
|
<div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
|
|
|
|
</div>);
|
|
|
|
}
|
2019-11-20 18:18:28 +03:00
|
|
|
|
|
|
|
const containerClasses = classNames("mx_ToastContainer", {
|
|
|
|
"mx_ToastContainer_stacked": isStacked,
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2019-11-25 15:20:20 +03:00
|
|
|
<div className={containerClasses} role="alert">
|
|
|
|
{toast}
|
2019-11-20 18:18:28 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|