2019-04-26 14:14:30 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
|
|
|
|
|
|
|
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 from 'react';
|
|
|
|
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';
|
|
|
|
import sdk from '../../../index';
|
2019-04-29 17:16:16 +03:00
|
|
|
import dis from '../../../dispatcher';
|
2019-04-26 14:14:30 +03:00
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import { createMenu } from '../../structures/ContextualMenu';
|
2019-04-30 20:09:10 +03:00
|
|
|
import SettingsStore from '../../../settings/SettingsStore';
|
2019-05-15 17:53:49 +03:00
|
|
|
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
|
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-06-10 14:49:31 +03:00
|
|
|
componentDidMount() {
|
|
|
|
this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
|
|
|
|
}
|
|
|
|
|
|
|
|
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-04-26 14:14:30 +03:00
|
|
|
onFocusChange = (focused) => {
|
|
|
|
if (!this.props.onFocusChange) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.props.onFocusChange(focused);
|
|
|
|
}
|
|
|
|
|
|
|
|
onCryptoClicked = () => {
|
|
|
|
const event = this.props.mxEvent;
|
|
|
|
Modal.createTrackedDialogAsync('Encrypted Event Dialog', '',
|
|
|
|
import('../../../async-components/views/dialogs/EncryptedEventDialog'),
|
|
|
|
{event},
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onReplyClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'reply_to_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-05-06 18:41:15 +03:00
|
|
|
onEditClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'edit_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onOptionsClick = (ev) => {
|
2019-04-26 14:14:30 +03:00
|
|
|
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
|
|
|
const buttonRect = ev.target.getBoundingClientRect();
|
|
|
|
|
2019-05-07 14:06:50 +03:00
|
|
|
const { getTile, getReplyThread } = this.props;
|
|
|
|
const tile = getTile && getTile();
|
|
|
|
const replyThread = getReplyThread && getReplyThread();
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
let e2eInfoCallback = null;
|
|
|
|
if (this.props.mxEvent.isEncrypted()) {
|
|
|
|
e2eInfoCallback = () => this.onCryptoClicked();
|
|
|
|
}
|
|
|
|
|
2019-06-10 18:29:20 +03:00
|
|
|
const menuOptions = {
|
2019-04-26 14:14:30 +03:00
|
|
|
mxEvent: this.props.mxEvent,
|
2019-06-10 18:12:23 +03:00
|
|
|
chevronFace: "none",
|
2019-04-26 14:14:30 +03:00
|
|
|
permalinkCreator: this.props.permalinkCreator,
|
|
|
|
eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
|
|
|
|
collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
|
|
|
|
e2eInfoCallback: e2eInfoCallback,
|
|
|
|
onFinished: () => {
|
|
|
|
this.onFocusChange(false);
|
|
|
|
},
|
2019-06-10 18:29:20 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
const buttonRight = buttonRect.right + window.pageXOffset;
|
|
|
|
const buttonBottom = buttonRect.bottom + window.pageYOffset;
|
|
|
|
const buttonTop = buttonRect.top + window.pageYOffset;
|
|
|
|
// Align the right edge of the menu to the right edge of the button
|
|
|
|
menuOptions.right = window.innerWidth - buttonRight;
|
|
|
|
// Align the menu vertically on whichever side of the button has more
|
|
|
|
// space available.
|
|
|
|
if (buttonBottom < window.innerHeight / 2) {
|
|
|
|
menuOptions.top = buttonBottom;
|
|
|
|
} else {
|
|
|
|
menuOptions.bottom = window.innerHeight - buttonTop;
|
|
|
|
}
|
|
|
|
|
|
|
|
createMenu(MessageContextMenu, menuOptions);
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
this.onFocusChange(true);
|
|
|
|
}
|
|
|
|
|
2019-04-30 20:09:10 +03:00
|
|
|
isReactionsEnabled() {
|
|
|
|
return SettingsStore.isFeatureEnabled("feature_reactions");
|
|
|
|
}
|
|
|
|
|
2019-05-14 12:51:04 +03:00
|
|
|
isEditingEnabled() {
|
|
|
|
return SettingsStore.isFeatureEnabled("feature_message_editing");
|
|
|
|
}
|
|
|
|
|
2019-04-30 20:09:10 +03:00
|
|
|
renderAgreeDimension() {
|
|
|
|
if (!this.isReactionsEnabled()) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-05-08 15:53:41 +03:00
|
|
|
const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
|
|
|
|
return <ReactionDimension
|
2019-04-30 20:09:10 +03:00
|
|
|
title={_t("Agree or Disagree")}
|
2019-05-09 17:39:00 +03:00
|
|
|
options={["👍", "👎"]}
|
2019-05-08 20:16:27 +03:00
|
|
|
reactions={this.props.reactions}
|
2019-05-09 21:11:40 +03:00
|
|
|
mxEvent={this.props.mxEvent}
|
2019-05-08 15:53:41 +03:00
|
|
|
/>;
|
2019-04-30 20:09:10 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
renderLikeDimension() {
|
|
|
|
if (!this.isReactionsEnabled()) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-05-08 15:53:41 +03:00
|
|
|
const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
|
|
|
|
return <ReactionDimension
|
2019-04-30 20:09:10 +03:00
|
|
|
title={_t("Like or Dislike")}
|
2019-05-09 17:39:00 +03:00
|
|
|
options={["🙂", "😔"]}
|
2019-05-08 20:16:27 +03:00
|
|
|
reactions={this.props.reactions}
|
2019-05-09 21:11:40 +03:00
|
|
|
mxEvent={this.props.mxEvent}
|
2019-05-08 15:53:41 +03:00
|
|
|
/>;
|
2019-04-30 20:09:10 +03:00
|
|
|
}
|
|
|
|
|
2019-04-29 18:11:23 +03:00
|
|
|
render() {
|
2019-04-30 20:09:10 +03:00
|
|
|
let agreeDimensionReactionButtons;
|
|
|
|
let likeDimensionReactionButtons;
|
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-04-30 20:09:10 +03:00
|
|
|
agreeDimensionReactionButtons = this.renderAgreeDimension();
|
|
|
|
likeDimensionReactionButtons = this.renderLikeDimension();
|
|
|
|
replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
|
2019-04-29 18:11:23 +03:00
|
|
|
title={_t("Reply")}
|
|
|
|
onClick={this.onReplyClick}
|
|
|
|
/>;
|
2019-05-15 17:53:49 +03:00
|
|
|
}
|
|
|
|
if (this.isEditingEnabled() && canEditContent(this.props.mxEvent)) {
|
|
|
|
editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
|
|
|
|
title={_t("Edit")}
|
|
|
|
onClick={this.onEditClick}
|
|
|
|
/>;
|
2019-04-29 18:11:23 +03:00
|
|
|
}
|
|
|
|
|
2019-04-29 15:04:16 +03:00
|
|
|
return <div className="mx_MessageActionBar">
|
2019-04-30 20:09:10 +03:00
|
|
|
{agreeDimensionReactionButtons}
|
|
|
|
{likeDimensionReactionButtons}
|
2019-04-29 17:16:16 +03:00
|
|
|
{replyButton}
|
2019-05-06 18:41:15 +03:00
|
|
|
{editButton}
|
2019-04-30 20:09:10 +03:00
|
|
|
<span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
|
2019-04-29 15:04:16 +03:00
|
|
|
title={_t("Options")}
|
2019-04-29 17:16:16 +03:00
|
|
|
onClick={this.onOptionsClick}
|
2019-04-29 15:04:16 +03:00
|
|
|
/>
|
|
|
|
</div>;
|
2019-04-26 14:14:30 +03:00
|
|
|
}
|
|
|
|
}
|