2017-07-21 15:41:23 +03:00
|
|
|
/*
|
|
|
|
Copyright 2017 Vector Creations Ltd
|
2018-06-19 13:53:17 +03:00
|
|
|
Copyright 2018 New Vector Ltd
|
2017-07-21 15:41:23 +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.
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import sdk from '../../../index';
|
2017-08-14 16:44:08 +03:00
|
|
|
import dis from '../../../dispatcher';
|
2017-07-21 15:41:23 +03:00
|
|
|
import classNames from 'classnames';
|
2018-02-06 20:50:53 +03:00
|
|
|
import { Room, RoomMember, MatrixClient } from 'matrix-js-sdk';
|
2017-07-21 15:41:23 +03:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
|
|
|
|
import { getDisplayAliasForRoom } from '../../../Rooms';
|
2018-06-19 13:53:17 +03:00
|
|
|
import FlairStore from "../../../stores/FlairStore";
|
2017-07-21 15:41:23 +03:00
|
|
|
|
|
|
|
const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
|
|
|
|
|
|
|
|
// For URLs of matrix.to links in the timeline which have been reformatted by
|
2017-07-27 15:01:40 +03:00
|
|
|
// HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
|
2018-10-27 07:00:51 +03:00
|
|
|
const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
|
2017-07-21 15:41:23 +03:00
|
|
|
|
2017-07-24 19:18:29 +03:00
|
|
|
const Pill = React.createClass({
|
2017-07-21 15:41:23 +03:00
|
|
|
statics: {
|
|
|
|
isPillUrl: (url) => {
|
|
|
|
return !!REGEX_MATRIXTO.exec(url);
|
|
|
|
},
|
|
|
|
isMessagePillUrl: (url) => {
|
|
|
|
return !!REGEX_LOCAL_MATRIXTO.exec(url);
|
|
|
|
},
|
2017-11-01 22:42:47 +03:00
|
|
|
roomNotifPos: (text) => {
|
|
|
|
return text.indexOf("@room");
|
|
|
|
},
|
|
|
|
roomNotifLen: () => {
|
|
|
|
return "@room".length;
|
|
|
|
},
|
2017-07-24 19:18:29 +03:00
|
|
|
TYPE_USER_MENTION: 'TYPE_USER_MENTION',
|
|
|
|
TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
|
2018-06-19 13:53:17 +03:00
|
|
|
TYPE_GROUP_MENTION: 'TYPE_GROUP_MENTION',
|
2017-11-01 22:42:47 +03:00
|
|
|
TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
|
2017-07-21 15:41:23 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
props: {
|
2017-11-01 22:42:47 +03:00
|
|
|
// The Type of this Pill. If url is given, this is auto-detected.
|
|
|
|
type: PropTypes.string,
|
2017-07-21 15:41:23 +03:00
|
|
|
// The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
|
|
|
|
url: PropTypes.string,
|
|
|
|
// Whether the pill is in a message
|
|
|
|
inMessage: PropTypes.bool,
|
|
|
|
// The room in which this pill is being rendered
|
|
|
|
room: PropTypes.instanceOf(Room),
|
2017-08-08 13:13:29 +03:00
|
|
|
// Whether to include an avatar in the pill
|
|
|
|
shouldShowPillAvatar: PropTypes.bool,
|
2018-05-14 05:02:12 +03:00
|
|
|
// Whether to render this pill as if it were highlit by a selection
|
|
|
|
isSelected: PropTypes.bool,
|
2017-07-21 15:41:23 +03:00
|
|
|
},
|
|
|
|
|
2018-02-06 20:50:53 +03:00
|
|
|
|
|
|
|
childContextTypes: {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
},
|
|
|
|
|
|
|
|
getChildContext() {
|
|
|
|
return {
|
|
|
|
matrixClient: this._matrixClient,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2017-07-24 19:18:29 +03:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
// ID/alias of the room/user
|
|
|
|
resourceId: null,
|
|
|
|
// Type of pill
|
|
|
|
pillType: null,
|
|
|
|
|
|
|
|
// The member related to the user pill
|
|
|
|
member: null,
|
2018-06-19 13:53:17 +03:00
|
|
|
// The group related to the group pill
|
|
|
|
group: null,
|
2017-07-24 19:18:29 +03:00
|
|
|
// The room related to the room pill
|
|
|
|
room: null,
|
|
|
|
};
|
|
|
|
},
|
2017-07-21 15:41:23 +03:00
|
|
|
|
2018-06-19 13:53:17 +03:00
|
|
|
async componentWillReceiveProps(nextProps) {
|
2017-07-21 15:41:23 +03:00
|
|
|
let regex = REGEX_MATRIXTO;
|
2017-08-01 18:20:32 +03:00
|
|
|
if (nextProps.inMessage) {
|
2017-07-21 15:41:23 +03:00
|
|
|
regex = REGEX_LOCAL_MATRIXTO;
|
|
|
|
}
|
|
|
|
|
2017-11-01 22:42:47 +03:00
|
|
|
let matrixToMatch;
|
|
|
|
let resourceId;
|
|
|
|
let prefix;
|
|
|
|
|
|
|
|
if (nextProps.url) {
|
|
|
|
// Default to the empty array if no match for simplicity
|
|
|
|
// resource and prefix will be undefined instead of throwing
|
|
|
|
matrixToMatch = regex.exec(nextProps.url) || [];
|
2017-07-21 15:41:23 +03:00
|
|
|
|
2017-11-01 22:42:47 +03:00
|
|
|
resourceId = matrixToMatch[1]; // The room/user ID
|
|
|
|
prefix = matrixToMatch[2]; // The first character of prefix
|
|
|
|
}
|
2017-07-21 15:41:23 +03:00
|
|
|
|
2017-11-01 22:42:47 +03:00
|
|
|
const pillType = this.props.type || {
|
2017-07-24 19:18:29 +03:00
|
|
|
'@': Pill.TYPE_USER_MENTION,
|
|
|
|
'#': Pill.TYPE_ROOM_MENTION,
|
|
|
|
'!': Pill.TYPE_ROOM_MENTION,
|
2018-06-19 13:53:17 +03:00
|
|
|
'+': Pill.TYPE_GROUP_MENTION,
|
2017-07-24 19:18:29 +03:00
|
|
|
}[prefix];
|
|
|
|
|
|
|
|
let member;
|
2018-06-19 13:53:17 +03:00
|
|
|
let group;
|
2017-07-24 19:18:29 +03:00
|
|
|
let room;
|
|
|
|
switch (pillType) {
|
2017-11-01 22:42:47 +03:00
|
|
|
case Pill.TYPE_AT_ROOM_MENTION: {
|
|
|
|
room = nextProps.room;
|
|
|
|
}
|
|
|
|
break;
|
2017-07-24 19:18:29 +03:00
|
|
|
case Pill.TYPE_USER_MENTION: {
|
2017-08-01 18:20:32 +03:00
|
|
|
const localMember = nextProps.room.getMember(resourceId);
|
2017-07-24 19:18:29 +03:00
|
|
|
member = localMember;
|
|
|
|
if (!localMember) {
|
|
|
|
member = new RoomMember(null, resourceId);
|
|
|
|
this.doProfileLookup(resourceId, member);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case Pill.TYPE_ROOM_MENTION: {
|
|
|
|
const localRoom = resourceId[0] === '#' ?
|
|
|
|
MatrixClientPeg.get().getRooms().find((r) => {
|
|
|
|
return r.getAliases().includes(resourceId);
|
|
|
|
}) : MatrixClientPeg.get().getRoom(resourceId);
|
|
|
|
room = localRoom;
|
|
|
|
if (!localRoom) {
|
|
|
|
// TODO: This would require a new API to resolve a room alias to
|
|
|
|
// a room avatar and name.
|
|
|
|
// this.doRoomProfileLookup(resourceId, member);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
2018-06-19 13:53:17 +03:00
|
|
|
case Pill.TYPE_GROUP_MENTION: {
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
|
|
|
|
try {
|
|
|
|
group = await FlairStore.getGroupProfileCached(cli, resourceId);
|
2018-06-22 14:11:16 +03:00
|
|
|
} catch (e) { // if FlairStore failed, fall back to just groupId
|
|
|
|
group = {
|
|
|
|
groupId: resourceId,
|
|
|
|
avatarUrl: null,
|
|
|
|
name: null,
|
|
|
|
};
|
2018-06-19 13:53:17 +03:00
|
|
|
}
|
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
}
|
2018-06-19 13:53:17 +03:00
|
|
|
this.setState({resourceId, pillType, member, group, room});
|
2017-07-24 19:18:29 +03:00
|
|
|
},
|
2017-07-21 15:41:23 +03:00
|
|
|
|
2017-08-01 18:20:32 +03:00
|
|
|
componentWillMount() {
|
|
|
|
this._unmounted = false;
|
2018-02-06 20:50:53 +03:00
|
|
|
this._matrixClient = MatrixClientPeg.get();
|
2017-08-01 18:20:32 +03:00
|
|
|
this.componentWillReceiveProps(this.props);
|
|
|
|
},
|
|
|
|
|
2017-07-25 11:22:08 +03:00
|
|
|
componentWillUnmount() {
|
|
|
|
this._unmounted = true;
|
|
|
|
},
|
|
|
|
|
2017-07-24 19:18:29 +03:00
|
|
|
doProfileLookup: function(userId, member) {
|
2017-07-25 11:20:14 +03:00
|
|
|
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
|
2017-07-25 11:22:08 +03:00
|
|
|
if (this._unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
member.name = resp.displayname;
|
|
|
|
member.rawDisplayName = resp.displayname;
|
|
|
|
member.events.member = {
|
|
|
|
getContent: () => {
|
|
|
|
return {avatar_url: resp.avatar_url};
|
|
|
|
},
|
2018-08-02 18:09:18 +03:00
|
|
|
getDirectionalContent: function() {
|
|
|
|
return this.getContent();
|
2018-08-02 20:57:20 +03:00
|
|
|
},
|
2017-07-24 19:18:29 +03:00
|
|
|
};
|
|
|
|
this.setState({member});
|
2017-07-25 11:20:14 +03:00
|
|
|
}).catch((err) => {
|
|
|
|
console.error('Could not retrieve profile data for ' + userId + ':', err);
|
2017-07-24 19:18:29 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-08-14 16:44:08 +03:00
|
|
|
onUserPillClicked: function() {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_user',
|
|
|
|
member: this.state.member,
|
|
|
|
});
|
|
|
|
},
|
2017-07-24 19:18:29 +03:00
|
|
|
render: function() {
|
2018-06-19 13:53:17 +03:00
|
|
|
const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
|
2017-07-24 19:18:29 +03:00
|
|
|
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
|
|
|
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
|
|
|
|
|
|
|
const resource = this.state.resourceId;
|
2017-07-21 15:41:23 +03:00
|
|
|
|
|
|
|
let avatar = null;
|
2017-07-24 19:18:29 +03:00
|
|
|
let linkText = resource;
|
|
|
|
let pillClass;
|
2017-07-21 15:41:23 +03:00
|
|
|
let userId;
|
2017-08-14 16:44:08 +03:00
|
|
|
let href = this.props.url;
|
|
|
|
let onClick;
|
2017-07-24 19:18:29 +03:00
|
|
|
switch (this.state.pillType) {
|
2017-11-01 22:42:47 +03:00
|
|
|
case Pill.TYPE_AT_ROOM_MENTION: {
|
|
|
|
const room = this.props.room;
|
|
|
|
if (room) {
|
|
|
|
linkText = "@room";
|
|
|
|
if (this.props.shouldShowPillAvatar) {
|
|
|
|
avatar = <RoomAvatar room={room} width={16} height={16} />;
|
|
|
|
}
|
|
|
|
pillClass = 'mx_AtRoomPill';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
2017-07-24 19:18:29 +03:00
|
|
|
case Pill.TYPE_USER_MENTION: {
|
|
|
|
// If this user is not a member of this room, default to the empty member
|
|
|
|
const member = this.state.member;
|
|
|
|
if (member) {
|
|
|
|
userId = member.userId;
|
2018-04-10 00:59:46 +03:00
|
|
|
member.rawDisplayName = member.rawDisplayName || '';
|
2018-10-04 12:34:34 +03:00
|
|
|
linkText = member.rawDisplayName;
|
2017-08-08 13:13:29 +03:00
|
|
|
if (this.props.shouldShowPillAvatar) {
|
2017-09-28 13:21:06 +03:00
|
|
|
avatar = <MemberAvatar member={member} width={16} height={16} />;
|
2017-08-08 13:13:29 +03:00
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
pillClass = 'mx_UserPill';
|
2017-08-14 16:44:08 +03:00
|
|
|
href = null;
|
2017-08-18 19:15:27 +03:00
|
|
|
onClick = this.onUserPillClicked;
|
2017-07-24 19:18:29 +03:00
|
|
|
}
|
2017-07-21 15:41:23 +03:00
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
break;
|
|
|
|
case Pill.TYPE_ROOM_MENTION: {
|
|
|
|
const room = this.state.room;
|
|
|
|
if (room) {
|
|
|
|
linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
|
2017-08-08 13:13:29 +03:00
|
|
|
if (this.props.shouldShowPillAvatar) {
|
2017-09-28 13:21:06 +03:00
|
|
|
avatar = <RoomAvatar room={room} width={16} height={16} />;
|
2017-08-08 13:13:29 +03:00
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
pillClass = 'mx_RoomPill';
|
|
|
|
}
|
2017-07-21 15:41:23 +03:00
|
|
|
}
|
2017-07-24 19:18:29 +03:00
|
|
|
break;
|
2018-06-19 13:53:17 +03:00
|
|
|
case Pill.TYPE_GROUP_MENTION: {
|
|
|
|
if (this.state.group) {
|
|
|
|
const {avatarUrl, groupId, name} = this.state.group;
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
|
|
|
|
linkText = groupId;
|
|
|
|
if (this.props.shouldShowPillAvatar) {
|
|
|
|
avatar = <BaseAvatar name={name || groupId} width={16} height={16}
|
|
|
|
url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
|
|
|
|
}
|
2018-06-22 16:36:29 +03:00
|
|
|
pillClass = 'mx_GroupPill';
|
2018-06-19 13:53:17 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
2017-07-21 15:41:23 +03:00
|
|
|
}
|
|
|
|
|
2017-07-24 19:18:29 +03:00
|
|
|
const classes = classNames(pillClass, {
|
2017-07-21 15:41:23 +03:00
|
|
|
"mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
|
2018-05-14 05:02:12 +03:00
|
|
|
"mx_UserPill_selected": this.props.isSelected,
|
2017-07-21 15:41:23 +03:00
|
|
|
});
|
|
|
|
|
2017-07-24 19:18:29 +03:00
|
|
|
if (this.state.pillType) {
|
2017-07-21 15:41:23 +03:00
|
|
|
return this.props.inMessage ?
|
2017-08-14 16:44:08 +03:00
|
|
|
<a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ avatar }
|
|
|
|
{ linkText }
|
2017-07-21 15:41:23 +03:00
|
|
|
</a> :
|
2017-07-25 13:25:33 +03:00
|
|
|
<span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ avatar }
|
|
|
|
{ linkText }
|
2017-07-21 15:41:23 +03:00
|
|
|
</span>;
|
|
|
|
} else {
|
|
|
|
// Deliberately render nothing if the URL isn't recognised
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2017-07-24 19:18:29 +03:00
|
|
|
|
|
|
|
export default Pill;
|