Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into rxl881/appFixes

src/components/views/elements/AddressSelector.js

@@ -20,7 +20,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import classNames from 'classnames';
-import { InviteAddressType } from './AddressTile';
+import { UserAddressType } from '../../../UserAddress';
 
 export default React.createClass({
     displayName: 'AddressSelector',
@@ -29,7 +29,7 @@ export default React.createClass({
         onSelected: React.PropTypes.func.isRequired,
 
         // List of the addresses to display
-        addressList: React.PropTypes.arrayOf(InviteAddressType).isRequired,
+        addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
 

src/components/views/elements/AddressTile.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 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.
@@ -14,38 +15,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
-
-// React PropType definition for an object describing
-// an address that can be invited to a room (which
-// could be a third party identifier or a matrix ID)
-// along with some additional information about the
-// address / target.
-export const InviteAddressType = React.PropTypes.shape({
-    addressType: React.PropTypes.oneOf([
-        'mx', 'email'
-    ]).isRequired,
-    address: React.PropTypes.string.isRequired,
-    displayName: React.PropTypes.string,
-    avatarMxc: React.PropTypes.string,
-    // true if the address is known to be a valid address (eg. is a real
-    // user we've seen) or false otherwise (eg. is just an address the
-    // user has entered)
-    isKnown: React.PropTypes.bool,
-});
+import { UserAddressType } from '../../../UserAddress.js';
 
 
 export default React.createClass({
     displayName: 'AddressTile',
 
     propTypes: {
-        address: InviteAddressType.isRequired,
+        address: UserAddressType.isRequired,
         canDismiss: React.PropTypes.bool,
         onDismissed: React.PropTypes.func,
         justified: React.PropTypes.bool,

src/components/views/elements/Pill.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 import React from 'react';
 import sdk from '../../../index';
+import dis from '../../../dispatcher';
 import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -140,6 +141,12 @@ const Pill = React.createClass({
         });
     },
 
+    onUserPillClicked: function() {
+        dis.dispatch({
+            action: 'view_user',
+            member: this.state.member,
+        });
+    },
     render: function() {
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
@@ -150,6 +157,8 @@ const Pill = React.createClass({
         let linkText = resource;
         let pillClass;
         let userId;
+        let href = this.props.url;
+        let onClick;
         switch (this.state.pillType) {
             case Pill.TYPE_USER_MENTION: {
                     // If this user is not a member of this room, default to the empty member
@@ -161,6 +170,8 @@ const Pill = React.createClass({
                             avatar = <MemberAvatar member={member} width={16} height={16}/>;
                         }
                         pillClass = 'mx_UserPill';
+                        href = null;
+                        onClick = this.onUserPillClicked.bind(this);
                     }
             }
                 break;
@@ -183,7 +194,7 @@ const Pill = React.createClass({
 
         if (this.state.pillType) {
             return this.props.inMessage ?
-                <a className={classes} href={this.props.url} title={resource} data-offset-key={this.props.offsetKey}>
+                <a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
                     {avatar}
                     {linkText}
                 </a> :