2016-08-09 19:10:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket 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';
|
2017-11-28 13:04:34 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2019-09-06 20:37:43 +03:00
|
|
|
import createReactClass from 'create-react-class';
|
2017-08-30 12:55:25 +03:00
|
|
|
import Flair from '../elements/Flair.js';
|
2017-11-28 13:04:34 +03:00
|
|
|
import FlairStore from '../../../stores/FlairStore';
|
2017-11-16 18:24:36 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2019-04-17 11:21:30 +03:00
|
|
|
import {getUserNameColorClass} from '../../../utils/FormattingUtils';
|
2019-12-17 20:26:12 +03:00
|
|
|
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
2016-08-09 19:10:05 +03:00
|
|
|
|
2019-09-06 20:37:43 +03:00
|
|
|
export default createReactClass({
|
2017-11-28 13:04:34 +03:00
|
|
|
displayName: 'SenderProfile',
|
|
|
|
propTypes: {
|
|
|
|
mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
|
|
|
|
text: PropTypes.string, // Text to show. Defaults to sender name
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
},
|
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
statics: {
|
|
|
|
contextType: MatrixClientContext,
|
2017-11-28 13:04:34 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
2017-11-28 18:40:36 +03:00
|
|
|
userGroups: null,
|
2017-11-28 13:04:34 +03:00
|
|
|
relatedGroups: [],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2020-03-31 23:14:17 +03:00
|
|
|
componentDidMount() {
|
2017-11-28 13:04:34 +03:00
|
|
|
this.unmounted = false;
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
|
|
|
|
FlairStore.getPublicisedGroupsCached(
|
2019-12-17 20:26:12 +03:00
|
|
|
this.context, this.props.mxEvent.getSender(),
|
2017-11-28 18:40:36 +03:00
|
|
|
).then((userGroups) => {
|
2017-11-28 13:04:34 +03:00
|
|
|
if (this.unmounted) return;
|
2017-11-28 18:40:36 +03:00
|
|
|
this.setState({userGroups});
|
2017-11-28 13:04:34 +03:00
|
|
|
});
|
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
this.context.on('RoomState.events', this.onRoomStateEvents);
|
2017-11-28 13:04:34 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.unmounted = true;
|
2019-12-17 20:26:12 +03:00
|
|
|
this.context.removeListener('RoomState.events', this.onRoomStateEvents);
|
2017-11-28 13:04:34 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onRoomStateEvents(event) {
|
|
|
|
if (event.getType() === 'm.room.related_groups' &&
|
|
|
|
event.getRoomId() === this.props.mxEvent.getRoomId()
|
|
|
|
) {
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_updateRelatedGroups() {
|
|
|
|
if (this.unmounted) return;
|
2019-12-17 20:26:12 +03:00
|
|
|
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
2018-06-23 03:22:38 +03:00
|
|
|
if (!room) return;
|
|
|
|
|
|
|
|
const relatedGroupsEvent = room.currentState.getStateEvents('m.room.related_groups', '');
|
2017-11-28 13:04:34 +03:00
|
|
|
this.setState({
|
2018-06-23 03:22:38 +03:00
|
|
|
relatedGroups: relatedGroupsEvent ? relatedGroupsEvent.getContent().groups || [] : [],
|
2017-11-28 13:04:34 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-11-28 18:46:23 +03:00
|
|
|
_getDisplayedGroups(userGroups, relatedGroups) {
|
|
|
|
let displayedGroups = userGroups || [];
|
|
|
|
if (relatedGroups && relatedGroups.length > 0) {
|
2018-12-25 01:46:36 +03:00
|
|
|
displayedGroups = relatedGroups.filter((groupId) => {
|
|
|
|
return displayedGroups.includes(groupId);
|
2017-11-28 18:46:23 +03:00
|
|
|
});
|
|
|
|
} else {
|
|
|
|
displayedGroups = [];
|
|
|
|
}
|
|
|
|
return displayedGroups;
|
|
|
|
},
|
|
|
|
|
2017-11-28 13:04:34 +03:00
|
|
|
render() {
|
|
|
|
const {mxEvent} = this.props;
|
2019-04-17 11:21:30 +03:00
|
|
|
const colorClass = getUserNameColorClass(mxEvent.getSender());
|
2018-10-12 05:54:53 +03:00
|
|
|
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
2017-11-28 13:04:34 +03:00
|
|
|
const {msgtype} = mxEvent.getContent();
|
|
|
|
|
|
|
|
if (msgtype === 'm.emote') {
|
|
|
|
return <span />; // emote message must include the name so don't duplicate it
|
2017-11-16 18:24:36 +03:00
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2017-11-28 18:49:11 +03:00
|
|
|
let flair = <div />;
|
|
|
|
if (this.props.enableFlair) {
|
|
|
|
const displayedGroups = this._getDisplayedGroups(
|
|
|
|
this.state.userGroups, this.state.relatedGroups,
|
|
|
|
);
|
|
|
|
|
|
|
|
flair = <Flair key='flair'
|
|
|
|
userId={mxEvent.getSender()}
|
|
|
|
groups={displayedGroups}
|
|
|
|
/>;
|
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2019-05-19 17:23:43 +03:00
|
|
|
const nameElem = name || '';
|
2017-11-28 13:04:34 +03:00
|
|
|
|
|
|
|
// Name + flair
|
|
|
|
const nameFlair = <span>
|
2019-04-17 11:21:30 +03:00
|
|
|
<span className={`mx_SenderProfile_name ${colorClass}`}>
|
2017-11-28 13:04:34 +03:00
|
|
|
{ nameElem }
|
|
|
|
</span>
|
2017-11-28 18:49:11 +03:00
|
|
|
{ flair }
|
2017-11-28 13:04:34 +03:00
|
|
|
</span>;
|
|
|
|
|
|
|
|
const content = this.props.text ?
|
|
|
|
<span className="mx_SenderProfile_aux">
|
|
|
|
{ _t(this.props.text, { senderName: () => nameElem }) }
|
|
|
|
</span> : nameFlair;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
|
2020-05-07 15:55:23 +03:00
|
|
|
<div className="mx_SenderProfile_hover">
|
|
|
|
{ content }
|
|
|
|
</div>
|
2017-11-28 13:04:34 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|