PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Iterate toast count indicator more logically

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-05-22 14:28:01 +01:00
parent a822ab49d5
commit c464abaa49
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/structures/ToastContainer.tsx
View file

@ -15,12 +15,12 @@ limitations under the License.
*/ */
import * as React from "react"; import * as React from "react";
import { _t } from '../../languageHandler';
import ToastStore, {IToast} from "../../stores/ToastStore"; import ToastStore, {IToast} from "../../stores/ToastStore";
import classNames from "classnames"; import classNames from "classnames";
interface IState { interface IState {
toasts: IToast<any>[]; toasts: IToast<any>[];
countSeen: number;
} }
export default class ToastContainer extends React.Component<{}, IState> { export default class ToastContainer extends React.Component<{}, IState> {
@ -28,6 +28,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
super(props, context); super(props, context);
this.state = { this.state = {
toasts: ToastStore.sharedInstance().getToasts(), toasts: ToastStore.sharedInstance().getToasts(),
countSeen: 0,
}; };
// Start listening here rather than in componentDidMount because // Start listening here rather than in componentDidMount because
@ -42,7 +43,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
} }
_onToastStoreUpdate = () => { _onToastStoreUpdate = () => {
this.setState({toasts: ToastStore.sharedInstance().getToasts()}); this.setState({
toasts: ToastStore.sharedInstance().getToasts(),
countSeen: ToastStore.sharedInstance().getCountSeen(),
});
}; };
render() { render() {
@ -56,7 +60,11 @@ export default class ToastContainer extends React.Component<{}, IState> {
"mx_Toast_hasIcon": icon, "mx_Toast_hasIcon": icon,
[`mx_Toast_icon_${icon}`]: icon, [`mx_Toast_icon_${icon}`]: icon,
}); });
const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
let countIndicator;
if (isStacked || this.state.countSeen > 0) {
countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
}
const toastProps = Object.assign({}, props, { const toastProps = Object.assign({}, props, {
key, key,

14
src/stores/ToastStore.ts
View file

@ -32,6 +32,9 @@ export interface IToast<C extends keyof JSX.IntrinsicElements | JSXElementConstr
*/ */
export default class ToastStore extends EventEmitter { export default class ToastStore extends EventEmitter {
private toasts: IToast<any>[] = []; private toasts: IToast<any>[] = [];
// The count of toasts which have been seen & dealt with in this stack
// where the count resets when the stack of toasts clears.
private countSeen: number = 0;
static sharedInstance() { static sharedInstance() {
if (!window.mx_ToastStore) window.mx_ToastStore = new ToastStore(); if (!window.mx_ToastStore) window.mx_ToastStore = new ToastStore();
@ -40,6 +43,7 @@ export default class ToastStore extends EventEmitter {
reset() { reset() {
this.toasts = []; this.toasts = [];
this.countSeen = 0;
} }
/** /**
@ -67,6 +71,12 @@ export default class ToastStore extends EventEmitter {
const length = this.toasts.length; const length = this.toasts.length;
this.toasts = this.toasts.filter(t => t.key !== key); this.toasts = this.toasts.filter(t => t.key !== key);
if (length !== this.toasts.length) { if (length !== this.toasts.length) {
if (this.toasts.length === 0) {
this.countSeen = 0;
} else {
this.countSeen++;
}
this.emit('update'); this.emit('update');
} }
} }
@ -74,4 +84,8 @@ export default class ToastStore extends EventEmitter {
getToasts() { getToasts() {
return this.toasts; return this.toasts;
} }
getCountSeen() {
return this.countSeen;
}
} }