2016-08-09 16:10:05 +00: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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-11-28 10:04:34 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {MatrixClient} from 'matrix-js-sdk';
|
2016-08-11 02:25:12 +00:00
|
|
|
import sdk from '../../../index';
|
2017-08-30 09:55:25 +00:00
|
|
|
import Flair from '../elements/Flair.js';
|
2017-11-28 10:04:34 +00:00
|
|
|
import FlairStore from '../../../stores/FlairStore';
|
2017-11-16 15:24:36 +00:00
|
|
|
import { _t } from '../../../languageHandler';
|
2016-08-09 16:10:05 +00:00
|
|
|
|
2017-11-28 10:04:34 +00:00
|
|
|
export default React.createClass({
|
|
|
|
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,
|
|
|
|
},
|
|
|
|
|
|
|
|
contextTypes: {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
2017-11-28 15:40:36 +00:00
|
|
|
userGroups: null,
|
2017-11-28 10:04:34 +00:00
|
|
|
relatedGroups: [],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this.unmounted = false;
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
|
|
|
|
FlairStore.getPublicisedGroupsCached(
|
|
|
|
this.context.matrixClient, this.props.mxEvent.getSender(),
|
2017-11-28 15:40:36 +00:00
|
|
|
).then((userGroups) => {
|
2017-11-28 10:04:34 +00:00
|
|
|
if (this.unmounted) return;
|
2017-11-28 15:40:36 +00:00
|
|
|
this.setState({userGroups});
|
2017-11-28 10:04:34 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.unmounted = true;
|
|
|
|
this.context.matrixClient.removeListener('RoomState.events', this.onRoomStateEvents);
|
|
|
|
},
|
|
|
|
|
|
|
|
onRoomStateEvents(event) {
|
|
|
|
if (event.getType() === 'm.room.related_groups' &&
|
|
|
|
event.getRoomId() === this.props.mxEvent.getRoomId()
|
|
|
|
) {
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_updateRelatedGroups() {
|
|
|
|
if (this.unmounted) return;
|
|
|
|
const relatedGroupsEvent = this.context.matrixClient
|
|
|
|
.getRoom(this.props.mxEvent.getRoomId())
|
|
|
|
.currentState
|
|
|
|
.getStateEvents('m.room.related_groups', '');
|
|
|
|
this.setState({
|
|
|
|
relatedGroups: relatedGroupsEvent ?
|
|
|
|
relatedGroupsEvent.getContent().groups || []
|
|
|
|
: [],
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-11-28 15:46:23 +00:00
|
|
|
_getDisplayedGroups(userGroups, relatedGroups) {
|
|
|
|
let displayedGroups = userGroups || [];
|
|
|
|
if (relatedGroups && relatedGroups.length > 0) {
|
|
|
|
displayedGroups = displayedGroups.filter((groupId) => {
|
|
|
|
return relatedGroups.includes(groupId);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
displayedGroups = [];
|
|
|
|
}
|
|
|
|
return displayedGroups;
|
|
|
|
},
|
|
|
|
|
2017-11-28 10:04:34 +00:00
|
|
|
render() {
|
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
|
|
|
const {mxEvent} = this.props;
|
|
|
|
let name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
|
|
|
const {msgtype} = mxEvent.getContent();
|
|
|
|
|
|
|
|
if (msgtype === 'm.emote') {
|
|
|
|
return <span />; // emote message must include the name so don't duplicate it
|
2017-11-16 15:24:36 +00:00
|
|
|
}
|
2017-11-28 10:04:34 +00:00
|
|
|
|
2017-11-28 15:49:11 +00:00
|
|
|
let flair = <div />;
|
|
|
|
if (this.props.enableFlair) {
|
|
|
|
const displayedGroups = this._getDisplayedGroups(
|
|
|
|
this.state.userGroups, this.state.relatedGroups,
|
|
|
|
);
|
|
|
|
|
|
|
|
// Backwards-compatible replacing of "(IRC)" with AS user flair
|
|
|
|
name = displayedGroups.length > 0 ? name.replace(' (IRC)', '') : name;
|
|
|
|
|
|
|
|
flair = <Flair key='flair'
|
|
|
|
userId={mxEvent.getSender()}
|
|
|
|
groups={displayedGroups}
|
|
|
|
/>;
|
|
|
|
}
|
2017-11-28 10:04:34 +00:00
|
|
|
|
|
|
|
const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
|
|
|
|
|
|
|
|
// Name + flair
|
|
|
|
const nameFlair = <span>
|
|
|
|
<span className="mx_SenderProfile_name">
|
|
|
|
{ nameElem }
|
|
|
|
</span>
|
2017-11-28 15:49:11 +00:00
|
|
|
{ flair }
|
2017-11-28 10:04:34 +00: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}>
|
|
|
|
{ content }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|