Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Wire up invite button on the member list.

Browse Source
This commit is contained in:
Kegan Dougal 2015-07-20 15:07:19 +01:00
parent 19ee75577e
commit f2bd802bdc
4 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
skins/base/views/atoms/EditableText.js
View File

@ -44,7 +44,7 @@ module.exports = React.createClass({
onFinish: function(ev) {
if (ev.target.value) {
this.setValue(ev.target.value);
this.setValue(ev.target.value, ev.key === "Enter");
} else {
this.cancelEdit();
}

31
skins/base/views/organisms/MemberList.js
View File

@ -23,6 +23,7 @@ var MemberListController = require("../../../../src/controllers/organisms/Member
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberTile = ComponentBroker.get("molecules/MemberTile");
var EditableText = ComponentBroker.get("atoms/EditableText");
module.exports = React.createClass({
@ -39,6 +40,31 @@ module.exports = React.createClass({
});
},
onPopulateInvite: function(inputText, shouldSubmit) {
// reset back to placeholder
this.refs.invite.setValue("Invite", false, true);
if (!shouldSubmit) {
return; // enter key wasn't pressed
}
this.onInvite(inputText);
},
inviteTile: function() {
if (this.state.inviting) {
return (
<div></div>
);
}
return (
<div className="mx_MemberTile">
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
<div className="mx_MemberTile_name">
<EditableText ref="invite" placeHolder="Invite" onValueChanged={this.onPopulateInvite}/>
</div>
</div>
);
},
render: function() {
return (
<div className="mx_MemberList">
@ -49,10 +75,7 @@ module.exports = React.createClass({
<h2>Members</h2>
<div className="mx_MemberList_wrapper">
{this.makeMemberTiles()}
<div className="mx_MemberTile">
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
<div className="mx_MemberTile_name">Invite</div>
</div>
{this.inviteTile()}
</div>
</div>
</div>

13
src/controllers/atoms/EditableText.js
View File

@ -55,11 +55,16 @@ module.exports = {
return this.state.value;
},
setValue: function(val) {
setValue: function(val, shouldSubmit, suppressListener) {
var self = this;
this.setState({
value: val,
phase: this.Phases.Display,
}, this.onValueChanged);
}, function() {
if (!suppressListener) {
self.onValueChanged(shouldSubmit);
}
});
},
edit: function() {
@ -74,7 +79,7 @@ module.exports = {
});
},
onValueChanged: function() {
this.props.onValueChanged(this.state.value);
onValueChanged: function(shouldSubmit) {
this.props.onValueChanged(this.state.value, shouldSubmit);
},
};

26
src/controllers/organisms/MemberList.js
View File

@ -61,6 +61,32 @@ module.exports = {
});
},
onInvite: function(inputText) {
var self = this;
// sanity check the input
inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
if (inputText[0] !== '@' || inputText.indexOf(":") === -1) {
console.error("Bad user ID to invite: %s", inputText);
return;
}
self.setState({
inviting: true
});
console.log("Invite %s to %s", inputText, this.props.roomId);
MatrixClientPeg.get().invite(this.props.roomId, inputText).done(
function(res) {
console.log("Invited");
self.setState({
inviting: false
});
}, function(err) {
console.error("Failed to invite: %s", JSON.stringify(err));
self.setState({
inviting: false
});
});
},
roomMembers: function(limit) {
if (!this.props.roomId) return {};
var cli = MatrixClientPeg.get();