mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-25 12:16:00 +03:00
Code Issues Projects Releases Packages Wiki Activity

Refactor UploadBar into component state

Browse source
This commit is contained in:
Travis Ralston 2021-03-05 14:24:02 -07:00
parent 711181cc69
commit fa41489d5a
1 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/structures/UploadBar.tsx
View file

@ -23,18 +23,27 @@ import {Room} from "matrix-js-sdk/src/models/room";
import {ActionPayload} from "../../dispatcher/payloads"; import {ActionPayload} from "../../dispatcher/payloads";
import {Action} from "../../dispatcher/actions"; import {Action} from "../../dispatcher/actions";
import ProgressBar from "../views/elements/ProgressBar"; import ProgressBar from "../views/elements/ProgressBar";
import AccessibleButton from "../views/elements/AccessibleButton";
import {IUpload} from "../../models/IUpload";
interface IProps { interface IProps {
room: Room; room: Room;
} }
interface IState { interface IState {
currentUpload?: IUpload;
uploadsHere: IUpload[];
} }
export default class UploadBar extends React.Component<IProps, IState> { export default class UploadBar extends React.Component<IProps, IState> {
private dispatcherRef: string; private dispatcherRef: string;
private mounted: boolean; private mounted: boolean;
constructor(props) {
super(props);
this.state = {uploadsHere: []};
}
componentDidMount() { componentDidMount() {
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
this.mounted = true; this.mounted = true;
@ -47,51 +56,44 @@ export default class UploadBar extends React.Component<IProps, IState> {
private onAction = (payload: ActionPayload) => { private onAction = (payload: ActionPayload) => {
switch (payload.action) { switch (payload.action) {
case Action.UploadStarted:
case Action.UploadProgress: case Action.UploadProgress:
case Action.UploadFinished: case Action.UploadFinished:
case Action.UploadCanceled: case Action.UploadCanceled:
case Action.UploadFailed: case Action.UploadFailed: {
if (this.mounted) this.forceUpdate(); if (!this.mounted) return;
const uploads = ContentMessages.sharedInstance().getCurrentUploads();
const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
this.setState({currentUpload: uploadsHere[0], uploadsHere});
break; break;
} }
}
};
private onCancelClick = (ev) => {
ev.preventDefault();
ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise);
}; };
render() { render() {
const uploads = ContentMessages.sharedInstance().getCurrentUploads(); if (!this.state.currentUpload) {
// for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
// check in RoomView
//
// uploads = [{
// roomId: this.props.room.roomId,
// loaded: 123493,
// total: 347534,
// fileName: "testing_fooble.jpg",
// }];
const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
if (uploadsHere.length == 0) {
return null; return null;
} }
const currentUpload = uploadsHere[0];
const uploadSize = filesize(currentUpload.total);
// MUST use var name 'count' for pluralization to kick in // MUST use var name 'count' for pluralization to kick in
const uploadText = _t( const uploadText = _t(
"Uploading %(filename)s and %(count)s others", { "Uploading %(filename)s and %(count)s others", {
filename: currentUpload.fileName, filename: this.state.currentUpload.fileName,
count: uploadsHere.length - 1, count: this.state.uploadsHere.length - 1,
}, },
); );
const uploadSize = filesize(this.state.currentUpload.total);
return ( return (
<div className="mx_UploadBar"> <div className="mx_UploadBar">
<img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18" <AccessibleButton onClick={this.onCancelClick} className='mx_UploadBar_cancel' />
onClick={function() { ContentMessages.sharedInstance().cancelUpload(currentUpload.promise); }}
/>
<div className="mx_UploadBar_uploadFilename">{uploadText} ({uploadSize})</div> <div className="mx_UploadBar_uploadFilename">{uploadText} ({uploadSize})</div>
<ProgressBar value={currentUpload.loaded} max={currentUpload.total} /> <ProgressBar value={this.state.currentUpload.loaded} max={this.state.currentUpload.total} />
</div> </div>
); );
} }