342 lines
14 KiB
TypeScript
342 lines
14 KiB
TypeScript
/*
|
|
Copyright 2019 New Vector Ltd
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
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 React, { useEffect } from 'react';
|
|
import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
|
|
|
|
import { _t } from '../../../languageHandler';
|
|
import * as sdk from '../../../index';
|
|
import dis from '../../../dispatcher/dispatcher';
|
|
import { Action } from '../../../dispatcher/actions';
|
|
import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
|
|
import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
|
|
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
|
|
import RoomContext from "../../../contexts/RoomContext";
|
|
import Toolbar from "../../../accessibility/Toolbar";
|
|
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
|
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
|
import { canCancel } from "../context_menus/MessageContextMenu";
|
|
import Resend from "../../../Resend";
|
|
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
|
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
|
import DownloadActionButton from "./DownloadActionButton";
|
|
import SettingsStore from '../../../settings/SettingsStore';
|
|
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
|
|
|
|
interface IOptionsButtonProps {
|
|
mxEvent: MatrixEvent;
|
|
getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
|
|
getReplyThread: () => any; // TODO: FIXME, haven't figured out what the return type is here
|
|
permalinkCreator: RoomPermalinkCreator;
|
|
onFocusChange: (menuDisplayed: boolean) => void;
|
|
}
|
|
|
|
const OptionsButton: React.FC<IOptionsButtonProps> =
|
|
({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
|
const [onFocus, isActive, ref] = useRovingTabIndex(button);
|
|
useEffect(() => {
|
|
onFocusChange(menuDisplayed);
|
|
}, [onFocusChange, menuDisplayed]);
|
|
|
|
let contextMenu;
|
|
if (menuDisplayed) {
|
|
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
|
|
|
const tile = getTile && getTile();
|
|
const replyThread = getReplyThread && getReplyThread();
|
|
|
|
const buttonRect = button.current.getBoundingClientRect();
|
|
contextMenu = <MessageContextMenu
|
|
{...aboveLeftOf(buttonRect)}
|
|
mxEvent={mxEvent}
|
|
permalinkCreator={permalinkCreator}
|
|
eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
|
|
collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
|
|
onFinished={closeMenu}
|
|
/>;
|
|
}
|
|
|
|
return <React.Fragment>
|
|
<ContextMenuTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
|
|
title={_t("Options")}
|
|
onClick={openMenu}
|
|
isExpanded={menuDisplayed}
|
|
inputRef={ref}
|
|
onFocus={onFocus}
|
|
tabIndex={isActive ? 0 : -1}
|
|
/>
|
|
|
|
{ contextMenu }
|
|
</React.Fragment>;
|
|
};
|
|
|
|
interface IReactButtonProps {
|
|
mxEvent: MatrixEvent;
|
|
reactions: any;
|
|
onFocusChange: (menuDisplayed: boolean) => void;
|
|
}
|
|
|
|
const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
|
const [onFocus, isActive, ref] = useRovingTabIndex(button);
|
|
useEffect(() => {
|
|
onFocusChange(menuDisplayed);
|
|
}, [onFocusChange, menuDisplayed]);
|
|
|
|
let contextMenu;
|
|
if (menuDisplayed) {
|
|
const buttonRect = button.current.getBoundingClientRect();
|
|
const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
|
|
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
|
|
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
|
|
</ContextMenu>;
|
|
}
|
|
|
|
return <React.Fragment>
|
|
<ContextMenuTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
|
|
title={_t("React")}
|
|
onClick={openMenu}
|
|
isExpanded={menuDisplayed}
|
|
inputRef={ref}
|
|
onFocus={onFocus}
|
|
tabIndex={isActive ? 0 : -1}
|
|
/>
|
|
|
|
{ contextMenu }
|
|
</React.Fragment>;
|
|
};
|
|
|
|
interface IMessageActionBarProps {
|
|
mxEvent: MatrixEvent;
|
|
// The Relations model from the JS SDK for reactions to `mxEvent`
|
|
reactions?: any;
|
|
permalinkCreator?: RoomPermalinkCreator;
|
|
getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
|
|
getReplyThread?: () => JSX.Element;
|
|
onFocusChange?: (menuDisplayed: boolean) => void;
|
|
}
|
|
|
|
@replaceableComponent("views.messages.MessageActionBar")
|
|
export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
|
|
public static contextType = RoomContext;
|
|
|
|
public componentDidMount(): void {
|
|
if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
|
|
this.props.mxEvent.on("Event.status", this.onSent);
|
|
}
|
|
|
|
const client = MatrixClientPeg.get();
|
|
client.decryptEventIfNeeded(this.props.mxEvent);
|
|
|
|
if (this.props.mxEvent.isBeingDecrypted()) {
|
|
this.props.mxEvent.once("Event.decrypted", this.onDecrypted);
|
|
}
|
|
this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
|
|
}
|
|
|
|
public componentWillUnmount(): void {
|
|
this.props.mxEvent.off("Event.status", this.onSent);
|
|
this.props.mxEvent.off("Event.decrypted", this.onDecrypted);
|
|
this.props.mxEvent.off("Event.beforeRedaction", this.onBeforeRedaction);
|
|
}
|
|
|
|
private onDecrypted = (): void => {
|
|
// When an event decrypts, it is likely to change the set of available
|
|
// actions, so we force an update to check again.
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private onBeforeRedaction = (): void => {
|
|
// When an event is redacted, we can't edit it so update the available actions.
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private onSent = (): void => {
|
|
// When an event is sent and echoed the possible actions change.
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private onFocusChange = (focused: boolean): void => {
|
|
if (!this.props.onFocusChange) {
|
|
return;
|
|
}
|
|
this.props.onFocusChange(focused);
|
|
};
|
|
|
|
private onReplyClick = (ev: React.MouseEvent): void => {
|
|
dis.dispatch({
|
|
action: 'reply_to_event',
|
|
event: this.props.mxEvent,
|
|
});
|
|
};
|
|
|
|
private onThreadClick = (): void => {
|
|
dis.dispatch({
|
|
action: Action.SetRightPanelPhase,
|
|
phase: RightPanelPhases.ThreadView,
|
|
allowClose: false,
|
|
refireParams: {
|
|
event: this.props.mxEvent,
|
|
},
|
|
});
|
|
};
|
|
|
|
private onEditClick = (ev: React.MouseEvent): void => {
|
|
dis.dispatch({
|
|
action: 'edit_event',
|
|
event: this.props.mxEvent,
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Runs a given fn on the set of possible events to test. The first event
|
|
* that passes the checkFn will have fn executed on it. Both functions take
|
|
* a MatrixEvent object. If no particular conditions are needed, checkFn can
|
|
* be null/undefined. If no functions pass the checkFn, no action will be
|
|
* taken.
|
|
* @param {Function} fn The execution function.
|
|
* @param {Function} checkFn The test function.
|
|
*/
|
|
private runActionOnFailedEv(fn: (ev: MatrixEvent) => void, checkFn?: (ev: MatrixEvent) => boolean): void {
|
|
if (!checkFn) checkFn = () => true;
|
|
|
|
const mxEvent = this.props.mxEvent;
|
|
const editEvent = mxEvent.replacingEvent();
|
|
const redactEvent = mxEvent.localRedactionEvent();
|
|
const tryOrder = [redactEvent, editEvent, mxEvent];
|
|
for (const ev of tryOrder) {
|
|
if (ev && checkFn(ev)) {
|
|
fn(ev);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
private onResendClick = (ev: React.MouseEvent): void => {
|
|
this.runActionOnFailedEv((tarEv) => Resend.resend(tarEv));
|
|
};
|
|
|
|
private onCancelClick = (ev: React.MouseEvent): void => {
|
|
this.runActionOnFailedEv(
|
|
(tarEv) => Resend.removeFromQueue(tarEv),
|
|
(testEv) => canCancel(testEv.status),
|
|
);
|
|
};
|
|
|
|
public render(): JSX.Element {
|
|
const toolbarOpts = [];
|
|
if (canEditContent(this.props.mxEvent)) {
|
|
toolbarOpts.push(<RovingAccessibleTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
|
|
title={_t("Edit")}
|
|
onClick={this.onEditClick}
|
|
key="edit"
|
|
/>);
|
|
}
|
|
|
|
const cancelSendingButton = <RovingAccessibleTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_cancelButton"
|
|
title={_t("Delete")}
|
|
onClick={this.onCancelClick}
|
|
key="cancel"
|
|
/>;
|
|
|
|
// We show a different toolbar for failed events, so detect that first.
|
|
const mxEvent = this.props.mxEvent;
|
|
const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
|
|
const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
|
|
const allowCancel = canCancel(mxEvent.status) || canCancel(editStatus) || canCancel(redactStatus);
|
|
const isFailed = [mxEvent.status, editStatus, redactStatus].includes(EventStatus.NOT_SENT);
|
|
if (allowCancel && isFailed) {
|
|
// The resend button needs to appear ahead of the edit button, so insert to the
|
|
// start of the opts
|
|
toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_resendButton"
|
|
title={_t("Retry")}
|
|
onClick={this.onResendClick}
|
|
key="resend"
|
|
/>);
|
|
|
|
// The delete button should appear last, so we can just drop it at the end
|
|
toolbarOpts.push(cancelSendingButton);
|
|
} else {
|
|
if (isContentActionable(this.props.mxEvent)) {
|
|
// Like the resend button, the react and reply buttons need to appear before the edit.
|
|
// The only catch is we do the reply button first so that we can make sure the react
|
|
// button is the very first button without having to do length checks for `splice()`.
|
|
if (this.context.canReply) {
|
|
toolbarOpts.splice(0, 0, <>
|
|
<RovingAccessibleTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
|
|
title={_t("Reply")}
|
|
onClick={this.onReplyClick}
|
|
key="reply"
|
|
/>
|
|
{ SettingsStore.getValue("feature_thread") && (
|
|
<RovingAccessibleTooltipButton
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
|
|
title={_t("Thread")}
|
|
onClick={this.onThreadClick}
|
|
key="thread"
|
|
/>
|
|
) }
|
|
</>);
|
|
}
|
|
if (this.context.canReact) {
|
|
toolbarOpts.splice(0, 0, <ReactButton
|
|
mxEvent={this.props.mxEvent}
|
|
reactions={this.props.reactions}
|
|
onFocusChange={this.onFocusChange}
|
|
key="react"
|
|
/>);
|
|
}
|
|
|
|
// XXX: Assuming that the underlying tile will be a media event if it is eligible media.
|
|
if (MediaEventHelper.isEligible(this.props.mxEvent)) {
|
|
toolbarOpts.splice(0, 0, <DownloadActionButton
|
|
mxEvent={this.props.mxEvent}
|
|
mediaEventHelperGet={() => this.props.getTile?.().getMediaHelper?.()}
|
|
key="download"
|
|
/>);
|
|
}
|
|
}
|
|
|
|
if (allowCancel) {
|
|
toolbarOpts.push(cancelSendingButton);
|
|
}
|
|
|
|
// The menu button should be last, so dump it there.
|
|
toolbarOpts.push(<OptionsButton
|
|
mxEvent={this.props.mxEvent}
|
|
getReplyThread={this.props.getReplyThread}
|
|
getTile={this.props.getTile}
|
|
permalinkCreator={this.props.permalinkCreator}
|
|
onFocusChange={this.onFocusChange}
|
|
key="menu"
|
|
/>);
|
|
}
|
|
|
|
// aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
|
|
return <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
|
|
{ toolbarOpts }
|
|
</Toolbar>;
|
|
}
|
|
}
|