diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js new file mode 100644 index 0000000000..a8f55814e7 --- /dev/null +++ b/skins/base/views/atoms/EditableText.js @@ -0,0 +1,68 @@ +/* +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 EditableTextController = require("../../../../src/controllers/atoms/EditableText"); + +module.exports = React.createClass({ + displayName: 'EditableText', + mixins: [EditableTextController], + + onKeyUp: function(ev) { + if (ev.key == "Enter") { + this.onFinish(ev); + } else if (ev.key == "Escape") { + this.cancelEdit(); + } + }, + + onClickDiv: function() { + this.setState({ + phase: this.Phases.Edit, + }) + }, + + onFocus: function(ev) { + ev.target.setSelectionRange(0, ev.target.value.length); + }, + + onFinish: function(ev) { + this.setValue(ev.target.value); + }, + + render: function() { + var editable_el; + + if (this.state.phase == this.Phases.Display) { + editable_el =
{this.state.value}
; + } else if (this.state.phase == this.Phases.Edit) { + editable_el = ( +
+ +
+ ); + } + + return ( +
+ {editable_el} +
+ ); + } +}); diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 8f818a657a..1332627afa 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -64,6 +64,7 @@ require('../skins/base/views/atoms/MessageTimestamp'); require('../skins/base/views/atoms/create_room/CreateRoomButton'); require('../skins/base/views/atoms/create_room/RoomNameTextbox'); require('../skins/base/views/atoms/create_room/Presets'); +require('../skins/base/views/atoms/EditableText'); require('../skins/base/views/molecules/MatrixToolbar'); require('../skins/base/views/molecules/RoomTile'); require('../skins/base/views/molecules/MessageTile'); diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js new file mode 100644 index 0000000000..ac46973613 --- /dev/null +++ b/src/controllers/atoms/EditableText.js @@ -0,0 +1,68 @@ +/* +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: { + onValueChanged: React.PropTypes.func, + initalValue: React.PropTypes.string, + }, + + Phases: { + Display: "display", + Edit: "edit", + }, + + getDefaultProps: function() { + return { + onValueChanged: function() {}, + initalValue: '', + }; + }, + + getInitialState: function() { + return { + value: this.props.initalValue, + phase: this.Phases.Display, + } + }, + + getValue: function() { + return this.state.value; + }, + + setValue: function(val) { + this.setState({ + value: val, + phase: this.Phases.Display, + }); + + this.onValueChanged(); + }, + + cancelEdit: function() { + this.setState({ + phase: this.Phases.Display, + }); + }, + + onValueChanged: function() { + this.props.onValueChanged(this.state.value); + }, +};