diff --git a/src/TabComplete.js b/src/TabComplete.js index c49ef19e7f..1a798feba7 100644 --- a/src/TabComplete.js +++ b/src/TabComplete.js @@ -132,6 +132,9 @@ class TabComplete { // they're resuming typing; reset tab complete state vars. this.tabStruct.completing = false; this.tabStruct.index = 0; + if (this.opts.onStateChange) { + this.opts.onStateChange(this.tabStruct.completing); + } return true; } return false; @@ -148,6 +151,9 @@ class TabComplete { this.tabStruct.index = 0; // cache starting text this.tabStruct.original = this.textArea.value; + if (this.opts.onStateChange) { + this.opts.onStateChange(this.tabStruct.completing); + } } if (ev.shiftKey) { diff --git a/src/component-index.js b/src/component-index.js index 2f89e6d94b..8e87ef65cd 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -65,6 +65,7 @@ module.exports.components['views.rooms.RoomHeader'] = require('./components/view module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList'); 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.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar'); module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar'); module.exports.components['views.settings.ChangeDisplayName'] = require('./components/views/settings/ChangeDisplayName'); module.exports.components['views.settings.ChangePassword'] = require('./components/views/settings/ChangePassword'); diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 853eda65a7..b7341e4f89 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -90,7 +90,10 @@ module.exports = React.createClass({ // completing at the start of the text this.tabComplete = new TabComplete({ startingWordSuffix: ": ", - wordSuffix: " " + wordSuffix: " ", + onStateChange: (isCompleting) => { + this.forceUpdate(); + } }); }, @@ -1284,6 +1287,12 @@ module.exports = React.createClass({ ); } + else if (this.tabComplete.isTabCompleting()) { + var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar'); + statusBar = ( + + ); + } else if (this.state.hasUnsentMessages) { statusBar = (
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js new file mode 100644 index 0000000000..c060202099 --- /dev/null +++ b/src/components/views/rooms/TabCompleteBar.js @@ -0,0 +1,30 @@ +/* +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 MatrixClientPeg = require("../../../MatrixClientPeg"); + +module.exports = React.createClass({ + displayName: 'TabCompleteBar', + + render: function() { + return ( +
Tab Complete
+ ); + } +});