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-05-01 15:58:32 +03:00
|
|
|
import classNames from 'classnames';
|
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-01 15:58:32 +03:00
|
|
|
import { isContentActionable } from '../../../utils/EventUtils';
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
export default class MessageActionBar extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
mxEvent: PropTypes.object.isRequired,
|
|
|
|
permalinkCreator: PropTypes.object,
|
|
|
|
tile: PropTypes.element,
|
|
|
|
replyThread: PropTypes.element,
|
|
|
|
onFocusChange: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2019-04-30 20:09:10 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
agreeDimension: null,
|
|
|
|
likeDimension: null,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
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-30 20:09:10 +03:00
|
|
|
onAgreeClick = (ev) => {
|
|
|
|
this.toggleDimensionValue("agreeDimension", "agree");
|
|
|
|
}
|
|
|
|
|
|
|
|
onDisagreeClick = (ev) => {
|
|
|
|
this.toggleDimensionValue("agreeDimension", "disagree");
|
|
|
|
}
|
|
|
|
|
|
|
|
onLikeClick = (ev) => {
|
|
|
|
this.toggleDimensionValue("likeDimension", "like");
|
|
|
|
}
|
|
|
|
|
|
|
|
onDislikeClick = (ev) => {
|
|
|
|
this.toggleDimensionValue("likeDimension", "dislike");
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleDimensionValue(dimension, value) {
|
|
|
|
const state = this.state[dimension];
|
|
|
|
const newState = state !== value ? value : null;
|
|
|
|
this.setState({
|
|
|
|
[dimension]: newState,
|
|
|
|
});
|
|
|
|
// TODO: Send the reaction event
|
|
|
|
}
|
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onReplyClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'reply_to_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onOptionsClick = (ev) => {
|
2019-04-26 14:14:30 +03:00
|
|
|
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
|
|
|
const buttonRect = ev.target.getBoundingClientRect();
|
|
|
|
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
const x = buttonRect.right + window.pageXOffset;
|
|
|
|
const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
|
|
|
|
|
|
|
|
const {tile, replyThread} = this.props;
|
|
|
|
|
|
|
|
let e2eInfoCallback = null;
|
|
|
|
if (this.props.mxEvent.isEncrypted()) {
|
|
|
|
e2eInfoCallback = () => this.onCryptoClicked();
|
|
|
|
}
|
|
|
|
|
|
|
|
createMenu(MessageContextMenu, {
|
|
|
|
chevronOffset: 10,
|
|
|
|
mxEvent: this.props.mxEvent,
|
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
permalinkCreator: this.props.permalinkCreator,
|
|
|
|
eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
|
|
|
|
collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
|
|
|
|
e2eInfoCallback: e2eInfoCallback,
|
|
|
|
onFinished: () => {
|
|
|
|
this.onFocusChange(false);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
this.onFocusChange(true);
|
|
|
|
}
|
|
|
|
|
2019-04-30 20:09:10 +03:00
|
|
|
isReactionsEnabled() {
|
|
|
|
return SettingsStore.isFeatureEnabled("feature_reactions");
|
|
|
|
}
|
|
|
|
|
|
|
|
renderAgreeDimension() {
|
|
|
|
if (!this.isReactionsEnabled()) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const state = this.state.agreeDimension;
|
|
|
|
const options = [
|
|
|
|
{
|
|
|
|
key: "agree",
|
|
|
|
content: "👍",
|
|
|
|
onClick: this.onAgreeClick,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "disagree",
|
|
|
|
content: "👎",
|
|
|
|
onClick: this.onDisagreeClick,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
return <span className="mx_MessageActionBar_reactionDimension"
|
|
|
|
title={_t("Agree or Disagree")}
|
|
|
|
>
|
|
|
|
{this.renderReactionDimensionItems(state, options)}
|
|
|
|
</span>;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderLikeDimension() {
|
|
|
|
if (!this.isReactionsEnabled()) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const state = this.state.likeDimension;
|
|
|
|
const options = [
|
|
|
|
{
|
|
|
|
key: "like",
|
|
|
|
content: "🙂",
|
|
|
|
onClick: this.onLikeClick,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "dislike",
|
|
|
|
content: "😔",
|
|
|
|
onClick: this.onDislikeClick,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
return <span className="mx_MessageActionBar_reactionDimension"
|
|
|
|
title={_t("Like or Dislike")}
|
|
|
|
>
|
|
|
|
{this.renderReactionDimensionItems(state, options)}
|
|
|
|
</span>;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderReactionDimensionItems(state, options) {
|
|
|
|
return options.map(option => {
|
|
|
|
const disabled = state && state !== option.key;
|
|
|
|
const classes = classNames({
|
|
|
|
mx_MessageActionBar_reactionDisabled: disabled,
|
|
|
|
});
|
|
|
|
return <span key={option.key}
|
|
|
|
className={classes}
|
|
|
|
onClick={option.onClick}
|
|
|
|
>
|
|
|
|
{option.content}
|
|
|
|
</span>;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
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-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-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-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
|
|
|
}
|
|
|
|
}
|