2019-04-26 14:14:30 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
2019-07-29 14:13:23 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2020-05-26 15:37:57 +03:00
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2019-04-26 14:14:30 +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.
|
|
|
|
*/
|
|
|
|
|
2019-11-28 21:16:59 +03:00
|
|
|
import React, {useEffect} from 'react';
|
2019-04-26 14:14:30 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2019-04-29 17:16:16 +03:00
|
|
|
|
2019-04-26 14:14:30 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../../index';
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
2019-12-03 02:23:11 +03:00
|
|
|
import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu';
|
2019-05-15 17:53:49 +03:00
|
|
|
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
|
2019-12-17 20:26:12 +03:00
|
|
|
import RoomContext from "../../../contexts/RoomContext";
|
2019-04-26 14:14:30 +03:00
|
|
|
|
2019-11-11 20:53:17 +03:00
|
|
|
const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
|
2019-12-03 02:23:11 +03:00
|
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
2019-11-11 20:53:17 +03:00
|
|
|
useEffect(() => {
|
|
|
|
onFocusChange(menuDisplayed);
|
|
|
|
}, [onFocusChange, menuDisplayed]);
|
|
|
|
|
|
|
|
let contextMenu;
|
|
|
|
if (menuDisplayed) {
|
|
|
|
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
|
|
|
|
|
|
|
const tile = getTile && getTile();
|
|
|
|
const replyThread = getReplyThread && getReplyThread();
|
|
|
|
|
2019-12-03 02:23:11 +03:00
|
|
|
const buttonRect = button.current.getBoundingClientRect();
|
|
|
|
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
|
2019-11-11 20:53:17 +03:00
|
|
|
<MessageContextMenu
|
|
|
|
mxEvent={mxEvent}
|
|
|
|
permalinkCreator={permalinkCreator}
|
|
|
|
eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
|
|
|
|
collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
|
|
|
|
onFinished={closeMenu}
|
|
|
|
/>
|
|
|
|
</ContextMenu>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <React.Fragment>
|
2019-11-28 21:16:59 +03:00
|
|
|
<ContextMenuButton
|
2019-11-11 20:53:17 +03:00
|
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
|
2019-11-28 21:16:59 +03:00
|
|
|
label={_t("Options")}
|
2019-11-11 20:53:17 +03:00
|
|
|
onClick={openMenu}
|
2019-11-28 21:16:59 +03:00
|
|
|
isExpanded={menuDisplayed}
|
2019-12-03 02:23:11 +03:00
|
|
|
inputRef={button}
|
2019-11-11 20:53:17 +03:00
|
|
|
/>
|
|
|
|
|
|
|
|
{ contextMenu }
|
|
|
|
</React.Fragment>;
|
|
|
|
};
|
|
|
|
|
2019-12-09 17:12:30 +03:00
|
|
|
const ReactButton = ({mxEvent, reactions, onFocusChange}) => {
|
2019-12-03 02:23:11 +03:00
|
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
2019-12-09 17:12:30 +03:00
|
|
|
useEffect(() => {
|
|
|
|
onFocusChange(menuDisplayed);
|
|
|
|
}, [onFocusChange, menuDisplayed]);
|
2019-11-11 20:53:17 +03:00
|
|
|
|
|
|
|
let contextMenu;
|
|
|
|
if (menuDisplayed) {
|
2019-12-03 02:23:11 +03:00
|
|
|
const buttonRect = button.current.getBoundingClientRect();
|
2019-11-11 20:53:17 +03:00
|
|
|
const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
|
2019-12-19 10:23:05 +03:00
|
|
|
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
|
2019-11-11 20:53:17 +03:00
|
|
|
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
|
|
|
|
</ContextMenu>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <React.Fragment>
|
2019-11-28 21:16:59 +03:00
|
|
|
<ContextMenuButton
|
2019-11-11 20:53:17 +03:00
|
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
|
2019-11-28 21:16:59 +03:00
|
|
|
label={_t("React")}
|
2019-11-11 20:53:17 +03:00
|
|
|
onClick={openMenu}
|
2019-11-28 21:16:59 +03:00
|
|
|
isExpanded={menuDisplayed}
|
2019-12-03 02:23:11 +03:00
|
|
|
inputRef={button}
|
2019-11-11 20:53:17 +03:00
|
|
|
/>
|
|
|
|
|
|
|
|
{ contextMenu }
|
|
|
|
</React.Fragment>;
|
|
|
|
};
|
|
|
|
|
2019-04-26 14:14:30 +03:00
|
|
|
export default class MessageActionBar extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
mxEvent: PropTypes.object.isRequired,
|
2019-05-08 20:16:27 +03:00
|
|
|
// The Relations model from the JS SDK for reactions to `mxEvent`
|
|
|
|
reactions: PropTypes.object,
|
2019-04-26 14:14:30 +03:00
|
|
|
permalinkCreator: PropTypes.object,
|
2019-05-07 14:06:50 +03:00
|
|
|
getTile: PropTypes.func,
|
|
|
|
getReplyThread: PropTypes.func,
|
2019-04-26 14:14:30 +03:00
|
|
|
onFocusChange: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
static contextType = RoomContext;
|
2019-07-29 14:13:23 +03:00
|
|
|
|
2019-06-10 14:49:31 +03:00
|
|
|
componentDidMount() {
|
|
|
|
this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
|
2020-03-07 00:23:20 +03:00
|
|
|
this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
|
2019-06-10 14:49:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
|
2020-03-07 00:23:20 +03:00
|
|
|
this.props.mxEvent.removeListener("Event.beforeRedaction", this.onBeforeRedaction);
|
2019-06-10 14:49:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
onDecrypted = () => {
|
|
|
|
// When an event decrypts, it is likely to change the set of available
|
|
|
|
// actions, so we force an update to check again.
|
|
|
|
this.forceUpdate();
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-06-10 14:49:31 +03:00
|
|
|
|
2020-03-07 00:23:20 +03:00
|
|
|
onBeforeRedaction = () => {
|
|
|
|
// When an event is redacted, we can't edit it so update the available actions.
|
|
|
|
this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
2019-04-26 14:14:30 +03:00
|
|
|
onFocusChange = (focused) => {
|
|
|
|
if (!this.props.onFocusChange) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.props.onFocusChange(focused);
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-26 14:14:30 +03:00
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onReplyClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'reply_to_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-29 17:16:16 +03:00
|
|
|
|
2019-05-06 18:41:15 +03:00
|
|
|
onEditClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'edit_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-05-06 18:41:15 +03:00
|
|
|
|
2019-04-29 18:11:23 +03:00
|
|
|
render() {
|
2019-09-27 11:00:54 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
|
2019-06-19 16:45:01 +03:00
|
|
|
let reactButton;
|
2019-04-29 18:11:23 +03:00
|
|
|
let replyButton;
|
2019-05-06 18:41:15 +03:00
|
|
|
let editButton;
|
2019-04-29 18:11:23 +03:00
|
|
|
|
2019-05-01 15:58:32 +03:00
|
|
|
if (isContentActionable(this.props.mxEvent)) {
|
2019-12-17 20:26:12 +03:00
|
|
|
if (this.context.canReact) {
|
2019-12-09 17:12:30 +03:00
|
|
|
reactButton = (
|
|
|
|
<ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} onFocusChange={this.onFocusChange} />
|
|
|
|
);
|
2019-07-29 14:13:23 +03:00
|
|
|
}
|
2019-12-17 20:26:12 +03:00
|
|
|
if (this.context.canReply) {
|
2019-09-27 11:00:54 +03:00
|
|
|
replyButton = <AccessibleButton
|
|
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
|
2019-07-29 14:13:23 +03:00
|
|
|
title={_t("Reply")}
|
|
|
|
onClick={this.onReplyClick}
|
|
|
|
/>;
|
|
|
|
}
|
2019-05-15 17:53:49 +03:00
|
|
|
}
|
2019-07-17 18:56:15 +03:00
|
|
|
if (canEditContent(this.props.mxEvent)) {
|
2019-09-27 11:00:54 +03:00
|
|
|
editButton = <AccessibleButton
|
|
|
|
className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
|
2019-05-15 17:53:49 +03:00
|
|
|
title={_t("Edit")}
|
|
|
|
onClick={this.onEditClick}
|
|
|
|
/>;
|
2019-04-29 18:11:23 +03:00
|
|
|
}
|
|
|
|
|
2019-11-01 13:50:58 +03:00
|
|
|
// aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
|
|
|
|
return <div className="mx_MessageActionBar" role="toolbar" aria-label={_t("Message Actions")} aria-live="off">
|
2019-06-19 16:45:01 +03:00
|
|
|
{reactButton}
|
2019-04-29 17:16:16 +03:00
|
|
|
{replyButton}
|
2019-05-06 18:41:15 +03:00
|
|
|
{editButton}
|
2019-11-11 20:53:17 +03:00
|
|
|
<OptionsButton
|
|
|
|
mxEvent={this.props.mxEvent}
|
|
|
|
getReplyThread={this.props.getReplyThread}
|
|
|
|
getTile={this.props.getTile}
|
|
|
|
permalinkCreator={this.props.permalinkCreator}
|
2019-11-28 21:16:59 +03:00
|
|
|
onFocusChange={this.onFocusChange}
|
2019-04-29 15:04:16 +03:00
|
|
|
/>
|
|
|
|
</div>;
|
2019-04-26 14:14:30 +03:00
|
|
|
}
|
|
|
|
}
|