PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Factor out separate RoomNameEditor and RoomTopicEditor components

Browse source
This commit is contained in:
Richard van der Hoff 2016-03-29 15:21:16 +01:00
parent 70133ae661
commit 6422f7ecc8
5 changed files with 160 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/component-index.js
View file

@ -85,9 +85,11 @@ module.exports.components['views.rooms.MessageComposerInput'] = require('./compo
module.exports.components['views.rooms.PresenceLabel'] = require('./components/views/rooms/PresenceLabel');
module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
module.exports.components['views.rooms.RoomNameEditor'] = require('./components/views/rooms/RoomNameEditor');
module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/views/rooms/RoomPreviewBar');
module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
module.exports.components['views.rooms.RoomTopicEditor'] = require('./components/views/rooms/RoomTopicEditor');
module.exports.components['views.rooms.SearchableEntityList'] = require('./components/views/rooms/SearchableEntityList');
module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');
module.exports.components['views.rooms.SimpleRoomHeader'] = require('./components/views/rooms/SimpleRoomHeader');

10
src/components/structures/RoomView.js
View file

@ -858,8 +858,14 @@ module.exports = React.createClass({
uploadingRoomSettings: true,
});
this.refs.room_settings.setName(this.refs.header.getRoomName());
this.refs.room_settings.setTopic(this.refs.header.getTopic());
var newName = this.refs.header.getEditedName();
if (newName !== undefined) {
this.refs.room_settings.setName(newName);
}
var newTopic = this.refs.header.getEditedTopic();
if (newTopic !== undefined) {
this.refs.room_settings.setTopic(newTopic);
}
this.refs.room_settings.save().then((results) => {
var fails = results.filter(function(result) { return result.state !== "fulfilled" });

102
src/components/views/rooms/RoomHeader.js
View file

@ -18,7 +18,6 @@ limitations under the License.
var React = require('react');
var sdk = require('../../../index');
var dis = require("../../../dispatcher");
var MatrixClientPeg = require('../../../MatrixClientPeg');
var Modal = require("../../../Modal");
@ -49,47 +48,12 @@ module.exports = React.createClass({
};
},
getInitialState: function() {
return {};
},
componentWillMount: function() {
this._recalculateState();
},
componentWillReceiveProps: function(newProps) {
if (this.props.room !== newProps.room) {
this._recalculateState();
}
},
_recalculateState: function() {
if (!this.props.room) return;
var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
var name = this.props.room.currentState.getStateEvents('m.room.name', '');
this.setState({
name: name ? name.getContent().name : '',
defaultName: this.props.room.getDefaultRoomName(MatrixClientPeg.get().credentials.userId),
topic: topic ? topic.getContent().topic : '',
});
},
componentDidUpdate: function() {
if (this.refs.topic) {
linkifyElement(this.refs.topic, linkifyMatrix.options);
}
},
onNameChanged: function(value) {
this.setState({ name : value });
},
onTopicChanged: function(value) {
this.setState({ topic : value });
},
onAvatarPickerClick: function(ev) {
if (this.refs.file_label) {
this.refs.file_label.click();
@ -113,16 +77,33 @@ module.exports = React.createClass({
}).done();
},
getRoomName: function() {
return this.state.name;
/**
* After editing the settings, get the new name for the room
*
* Returns undefined if we didn't let the user edit the room name
*/
getEditedName: function() {
var newName;
if (this.refs.nameEditor) {
newName = this.refs.nameEditor.getRoomName();
}
return newName;
},
getTopic: function() {
return this.state.topic;
/**
* After editing the settings, get the new topic for the room
*
* Returns undefined if we didn't let the user edit the room topic
*/
getEditedTopic: function() {
var newTopic;
if (this.refs.topicEditor) {
newTopic = this.refs.topicEditor.getTopic();
}
return newTopic;
},
render: function() {
var EditableText = sdk.getComponent("elements.EditableText");
var RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
var ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
var TintableSvg = sdk.getComponent("elements.TintableSvg");
@ -152,26 +133,13 @@ module.exports = React.createClass({
'm.room.name', user_id
);
var placeholderName = "Unnamed Room";
if (this.state.defaultName && this.state.defaultName !== 'Empty room') {
placeholderName += " (" + this.state.defaultName + ")";
}
save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
}
if (can_set_room_name) {
name =
<div className="mx_RoomHeader_name">
<EditableText
className="mx_RoomHeader_nametext mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder={ placeholderName }
blurToCancel={ false }
onValueChanged={ this.onNameChanged }
initialValue={ this.state.name }/>
</div>
var RoomNameEditor = sdk.getComponent("rooms.RoomNameEditor");
name = <RoomNameEditor ref="nameEditor" room={this.props.room} />
}
else {
var searchStatus;
@ -211,17 +179,19 @@ module.exports = React.createClass({
}
if (can_set_room_topic) {
topic_el =
<EditableText
className="mx_RoomHeader_topic mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder="Add a topic"
blurToCancel={ false }
onValueChanged={ this.onTopicChanged }
initialValue={ this.state.topic }/>
var RoomTopicEditor = sdk.getComponent("rooms.RoomTopicEditor");
topic_el = <RoomTopicEditor ref="topicEditor" room={this.props.room} />
} else {
if (this.state.topic)
topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ this.state.topic }>{ this.state.topic }</div>;
var topic;
if (this.props.room) {
var ev = this.props.room.currentState.getStateEvents('m.room.topic', '');
if (ev) {
topic = ev.getContent().topic;
}
}
if (topic) {
topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic }>{ topic }</div>;
}
}
var roomAvatar = null;

63
src/components/views/rooms/RoomNameEditor.js Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 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 sdk = require('../../../index');
var MatrixClientPeg = require('../../../MatrixClientPeg');
module.exports = React.createClass({
displayName: 'RoomNameEditor',
propTypes: {
room: React.PropTypes.object.isRequired,
},
componentWillMount: function() {
var room = this.props.room;
var name = room.currentState.getStateEvents('m.room.name', '');
var myId = MatrixClientPeg.get().credentials.userId;
var defaultName = room.getDefaultRoomName(myId);
this._initialName = name ? name.getContent().name : '';
this._placeholderName = "Unnamed Room";
if (defaultName && defaultName !== 'Empty room') {
this._placeholderName += " (" + defaultName + ")";
}
},
getRoomName: function() {
return this.refs.editor.getValue();
},
render: function() {
var EditableText = sdk.getComponent("elements.EditableText");
return (
<div className="mx_RoomHeader_name">
<EditableText ref="editor"
className="mx_RoomHeader_nametext mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder={ this._placeholderName }
blurToCancel={ false }
initialValue={ this._initialName }/>
</div>
);
},
});

51
src/components/views/rooms/RoomTopicEditor.js Normal file
View file

@ -0,0 +1,51 @@
/*
Copyright 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 sdk = require('../../../index');
module.exports = React.createClass({
displayName: 'RoomTopicEditor',
propTypes: {
room: React.PropTypes.object.isRequired,
},
componentWillMount: function() {
var room = this.props.room;
var topic = room.currentState.getStateEvents('m.room.topic', '');
this._initialTopic = topic ? topic.getContent().topic : '';
},
getTopic: function() {
return this.refs.editor.getValue();
},
render: function() {
var EditableText = sdk.getComponent("elements.EditableText");
return (
<EditableText ref="editor"
className="mx_RoomHeader_topic mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder="Add a topic"
blurToCancel={ false }
initialValue={ this._initialTopic }/>
);
},
});