Add invite selection to create room dialog
This commit is contained in:
parent
ed52cdf6df
commit
b53e710d20
5 changed files with 129 additions and 6 deletions
skins/base/views
src
45
skins/base/views/molecules/UserSelector.js
Normal file
45
skins/base/views/molecules/UserSelector.js
Normal file
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
Copyright 2015 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 UserSelectorController = require("../../../../src/controllers/molecules/UserSelector");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'UserSelector',
|
||||
mixins: [UserSelectorController],
|
||||
|
||||
onAddUserId: function() {
|
||||
this.addUser(this.refs.user_id_input.getDOMNode().value);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
console.log("Render");
|
||||
return (
|
||||
<div>
|
||||
<ul className="mx_UserIdList" ref="list">
|
||||
{this.state.selected_users.map(function(user_id, i) {
|
||||
return <li key={user_id}>{user_id}</li>
|
||||
})}
|
||||
</ul>
|
||||
<input type="text" ref="user_id_input" className="mx_UserIdInput" placeholder="ex. @bob:example.com"/>
|
||||
<button onClick={this.onAddUserId} className="mx_AddUserId">Add User</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
|
@ -25,17 +25,31 @@ var ComponentBroker = require('../../../../src/ComponentBroker');
|
|||
var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
|
||||
var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox");
|
||||
var Presets = ComponentBroker.get("atoms/create_room/Presets");
|
||||
var UserSelector = ComponentBroker.get("molecules/UserSelector");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'CreateRoom',
|
||||
mixins: [CreateRoomController],
|
||||
|
||||
getPreset: function() {
|
||||
return this.refs.presets.getPreset();
|
||||
},
|
||||
|
||||
getName: function() {
|
||||
return this.refs.name_textbox.getName();
|
||||
},
|
||||
|
||||
getInvitedUsers: function() {
|
||||
return this.refs.user_selector.getUserIds();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_CreateRoom">
|
||||
<label>Room Name <RoomNameTextbox ref="name_textbox" /></label>
|
||||
<Presets ref="presets"/>
|
||||
<UserSelector ref="user_selector"/>
|
||||
<CreateRoomButton onCreateRoom={this.onCreateRoom} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -86,4 +86,5 @@ require('../skins/base/views/organisms/RoomView');
|
|||
require('../skins/base/views/templates/Login');
|
||||
require('../skins/base/views/organisms/Notifier');
|
||||
require('../skins/base/views/organisms/CreateRoom');
|
||||
require('../skins/base/views/molecules/UserSelector');
|
||||
}
|
||||
|
|
57
src/controllers/molecules/UserSelector.js
Normal file
57
src/controllers/molecules/UserSelector.js
Normal file
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
Copyright 2015 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');
|
||||
|
||||
module.exports = {
|
||||
propTypes: {
|
||||
initially_selected: React.PropTypes.arrayOf(React.PropTypes.string),
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
initially_selected: [],
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
selected_users: this.props.initially_selected,
|
||||
}
|
||||
},
|
||||
|
||||
addUser: function(user_id) {
|
||||
if (this.state.selected_users.indexOf(user_id == -1)) {
|
||||
this.setState({
|
||||
selected_users: this.state.selected_users.concat([user_id]),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
removeUser: function(user_id) {
|
||||
this.setState({
|
||||
selected_users: this.state.selected_users.filter(function(e) {
|
||||
return e != user_id;
|
||||
}),
|
||||
});
|
||||
},
|
||||
|
||||
getUserIds: function() {
|
||||
return this.state.selected_users;
|
||||
}
|
||||
};
|
|
@ -21,17 +21,23 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
|
|||
|
||||
module.exports = {
|
||||
onCreateRoom: function() {
|
||||
var room_name = this.refs.name_textbox.getName();
|
||||
console.log("Create room clicked. Name: " + room_name);
|
||||
|
||||
var options = {
|
||||
preset: this.refs.presets.getPreset(),
|
||||
};
|
||||
var options = {};
|
||||
|
||||
var room_name = this.getName();
|
||||
if (room_name) {
|
||||
options.name = room_name;
|
||||
}
|
||||
|
||||
var preset = this.getPreset();
|
||||
if (preset) {
|
||||
options.preset = preset;
|
||||
}
|
||||
|
||||
var invited_users = this.getInvitedUsers();
|
||||
if (invited_users) {
|
||||
options.invite = invited_users;
|
||||
}
|
||||
|
||||
var cli = MatrixClientPeg.get();
|
||||
if (!cli) {
|
||||
// TODO: Error.
|
||||
|
|
Loading…
Reference in a new issue