diff --git a/src/component-index.js b/src/component-index.js index d11ee7711a..8a4035811a 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -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'); diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 1c1b0ede40..b5c34de20d 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -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" }); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index a99c278ea1..45e5a79a24 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -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 =
Save
cancel_button =
Cancel
} if (can_set_room_name) { - name = -
- -
+ var RoomNameEditor = sdk.getComponent("rooms.RoomNameEditor"); + name = } else { var searchStatus; @@ -211,17 +179,19 @@ module.exports = React.createClass({ } if (can_set_room_topic) { - topic_el = - + var RoomTopicEditor = sdk.getComponent("rooms.RoomTopicEditor"); + topic_el = } else { - if (this.state.topic) - topic_el =
{ this.state.topic }
; + 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 =
{ topic }
; + } } var roomAvatar = null; diff --git a/src/components/views/rooms/RoomNameEditor.js b/src/components/views/rooms/RoomNameEditor.js new file mode 100644 index 0000000000..773b713584 --- /dev/null +++ b/src/components/views/rooms/RoomNameEditor.js @@ -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 ( +
+ +
+ ); + }, +}); + diff --git a/src/components/views/rooms/RoomTopicEditor.js b/src/components/views/rooms/RoomTopicEditor.js new file mode 100644 index 0000000000..ea4550641b --- /dev/null +++ b/src/components/views/rooms/RoomTopicEditor.js @@ -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 ( + + ); + }, +});