diff --git a/src/component-index.js b/src/component-index.js
index b783f36a6c..3f84ac6392 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -60,6 +60,7 @@ module.exports.components['views.messages.MVideoBody'] = require('./components/v
module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
+module.exports.components['views.rooms.EntityTile'] = require('./components/views/rooms/EntityTile');
module.exports.components['views.rooms.EventTile'] = require('./components/views/rooms/EventTile');
module.exports.components['views.rooms.MemberInfo'] = require('./components/views/rooms/MemberInfo');
module.exports.components['views.rooms.MemberList'] = require('./components/views/rooms/MemberList');
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
new file mode 100644
index 0000000000..24577080e8
--- /dev/null
+++ b/src/components/views/rooms/EntityTile.js
@@ -0,0 +1,118 @@
+/*
+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';
+
+var React = require('react');
+
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+
+
+var PRESENCE_CLASS = {
+ "offline": "mx_MemberTile_offline",
+ "online": "mx_MemberTile_online",
+ "unavailable": "mx_MemberTile_unavailable"
+};
+
+module.exports = React.createClass({
+ displayName: 'EntityTile',
+
+ propTypes: {
+ name: React.PropTypes.string,
+ title: React.PropTypes.string,
+ avatarJsx: React.PropTypes.any, //
+ presenceState: React.PropTypes.string,
+ presenceActiveAgo: React.PropTypes.number,
+ showInviteButton: React.PropTypes.bool,
+ shouldComponentUpdate: React.PropTypes.func,
+ onClick: React.PropTypes.func
+ },
+
+ getDefaultProps: function() {
+ return {
+ shouldComponentUpdate: function(nextProps, nextState) { return false; },
+ onClick: function() {},
+ presenceState: "offline",
+ presenceActiveAgo: -1,
+ showInviteButton: false,
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ hover: false
+ };
+ },
+
+ shouldComponentUpdate: function(nextProps, nextState) {
+ if (this.state.hover !== nextState.hover) return true;
+ return this.props.shouldComponentUpdate(nextProps, nextState);
+ },
+
+ mouseEnter: function(e) {
+ this.setState({ 'hover': true });
+ },
+
+ mouseLeave: function(e) {
+ this.setState({ 'hover': false });
+ },
+
+ render: function() {
+ var presenceClass = PRESENCE_CLASS[this.props.presenceState];
+ var mainClassName = "mx_MemberTile ";
+ mainClassName += presenceClass;
+ if (this.state.hover) {
+ mainClassName += " mx_MemberTile_hover";
+ }
+
+ var nameEl;
+ if (this.state.hover) {
+ var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
+ nameEl = (
+
+
+
{ this.props.name }
+
+
+ );
+ }
+ else {
+ nameEl = (
+
+ { this.props.name }
+
+ );
+ }
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+ var av = this.props.avatarJsx || ;
+
+ return (
+
+
+ {av}
+
+ { nameEl }
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index cb0bce839f..71b941b833 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -28,8 +28,7 @@ module.exports = React.createClass({
propTypes: {
member: React.PropTypes.any, // RoomMember
- onFinished: React.PropTypes.func,
- customDisplayName: React.PropTypes.string // for 3pid invites
+ customDisplayName: React.PropTypes.string, // for 3pid invites
},
getInitialState: function() {
@@ -37,13 +36,12 @@ module.exports = React.createClass({
},
shouldComponentUpdate: function(nextProps, nextState) {
- if (this.state.hover !== nextState.hover) return true;
if (!this.props.member) { return false; } // e.g. 3pid members
if (
this.member_last_modified_time === undefined ||
this.member_last_modified_time < nextProps.member.getLastModifiedTime()
) {
- return true
+ return true;
}
if (
nextProps.member.user &&
@@ -55,14 +53,6 @@ module.exports = React.createClass({
return false;
},
- mouseEnter: function(e) {
- this.setState({ 'hover': true });
- },
-
- mouseLeave: function(e) {
- this.setState({ 'hover': false });
- },
-
onClick: function(e) {
if (!this.props.member) { return; } // e.g. 3pid members
@@ -91,13 +81,21 @@ module.exports = React.createClass({
},
render: function() {
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+ var EntityTile = sdk.getComponent('rooms.EntityTile');
+
var member = this.props.member;
- var isMyUser = false;
var name = this._getDisplayName();
var active = -1;
- var presenceClass = "mx_MemberTile_offline";
+ var presenceState = (member && member.user) ? member.user.presence : null;
+ var av;
if (member) {
+ av = (
+
+ );
+
if (member.user) {
this.user_last_modified_time = member.user.getLastModifiedTime();
@@ -105,75 +103,20 @@ module.exports = React.createClass({
active = (
(Date.now() - (member.user.lastPresenceTs - member.user.lastActiveAgo)) || -1
);
-
- if (member.user.presence === "online") {
- presenceClass = "mx_MemberTile_online";
- }
- else if (member.user.presence === "unavailable") {
- presenceClass = "mx_MemberTile_unavailable";
- }
}
this.member_last_modified_time = member.getLastModifiedTime();
- isMyUser = MatrixClientPeg.get().credentials.userId == member.userId;
-
- // if (this.props.member && this.props.member.powerLevelNorm > 0) {
- // var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
- // power = ;
- // }
- }
-
-
- var mainClassName = "mx_MemberTile ";
- mainClassName += presenceClass;
- if (this.state.hover) {
- mainClassName += " mx_MemberTile_hover";
- }
-
- var nameEl;
- if (this.state.hover) {
- var presenceState = (member && member.user) ? member.user.presence : null;
- var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
- nameEl = (
-
-
-
{ name }
-
-
- );
- }
- else {
- nameEl = (
-
- { name }
-
- );
- }
-
- var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
- var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-
- var av;
- if (member) {
- av = (
-
- );
}
else {
av = (
);
}
-
+
return (
-
-
- {av}
-
- { nameEl }
-
+
);
}
});
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
index b8df4f6610..50c0a1b726 100644
--- a/src/components/views/rooms/SearchableEntityList.js
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -28,6 +28,7 @@ var SearchableEntityList = React.createClass({
emptyQueryShowsAll: React.PropTypes.bool,
onSubmit: React.PropTypes.func, // fn(inputText)
entities: React.PropTypes.array,
+ onEntityClick: React.PropTypes.func
},
getDefaultProps: function() {
@@ -35,7 +36,8 @@ var SearchableEntityList = React.createClass({
searchPlaceholderText: "Search",
entities: [],
emptyQueryShowsAll: false,
- onSubmit: function() {}
+ onSubmit: function() {},
+ onEntityClick: function() {}
};
},
@@ -77,8 +79,8 @@ var SearchableEntityList = React.createClass({
placeholder={this.props.searchPlaceholderText} />
- {this.state.results.map(function(entity) {
- return entity.getJsx();
+ {this.state.results.map((entity) => {
+ return entity.getJsx(this.props.onEntityClick);
})}
diff --git a/src/components/views/rooms/UserTile.js b/src/components/views/rooms/UserTile.js
index 3fce07b327..6597796764 100644
--- a/src/components/views/rooms/UserTile.js
+++ b/src/components/views/rooms/UserTile.js
@@ -28,101 +28,29 @@ module.exports = React.createClass({
displayName: 'UserTile',
propTypes: {
- user: React.PropTypes.any.isRequired, // User
- onInviteClick: React.PropTypes.func, //onInviteClick(User)
- showInvite: React.PropTypes.bool,
- onClick: React.PropTypes.func
- },
-
- getInitialState: function() {
- return {};
- },
-
- getDefaultProps: function() {
- return {
- onClick: function() {},
- onInviteClick: function() {},
- showInvite: false
- };
- },
-
- shouldComponentUpdate: function(nextProps, nextState) {
- if (this.state.hover !== nextState.hover) return true;
- return false;
- },
-
- mouseEnter: function(e) {
- this.setState({ 'hover': true });
- },
-
- mouseLeave: function(e) {
- this.setState({ 'hover': false });
+ user: React.PropTypes.any.isRequired // User
},
render: function() {
+ var EntityTile = sdk.getComponent("rooms.EntityTile");
var user = this.props.user;
var name = user.displayName || user.userId;
- var isMyUser = MatrixClientPeg.get().credentials.userId == user.userId;
var active = -1;
- var presenceClass = "mx_MemberTile_offline";
-
- this.user_last_modified_time = user.getLastModifiedTime();
// FIXME: make presence data update whenever User.presence changes...
active = (
(Date.now() - (user.lastPresenceTs - user.lastActiveAgo)) || -1
);
- if (user.presence === "online") {
- presenceClass = "mx_MemberTile_online";
- }
- else if (user.presence === "unavailable") {
- presenceClass = "mx_MemberTile_unavailable";
- }
-
-
- var mainClassName = "mx_MemberTile ";
- mainClassName += presenceClass;
- if (this.state.hover) {
- mainClassName += " mx_MemberTile_hover";
- }
-
- var nameEl;
- if (this.state.hover) {
- var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
- nameEl = (
-
-
-
{ name }
-
-
- );
- }
- else {
- nameEl = (
-
- { name }
-
- );
- }
-
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-
- if (this.props.showInvite) {
- // TODO
- }
+ var avatarJsx = (
+
+ );
return (
-
+
);
}
});