From 391fe0ab77237f8c130e95c2fa09f38f5d85a355 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 15:24:23 +0100 Subject: [PATCH] Basic address list created, and UX tweaks for interaction --- .../views/dialogs/ChatInviteDialog.js | 66 +++++++++++++------ src/components/views/elements/AddressTile.js | 2 - 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js index 62be6cd67b..1cd1219095 100644 --- a/src/components/views/dialogs/ChatInviteDialog.js +++ b/src/components/views/dialogs/ChatInviteDialog.js @@ -52,7 +52,7 @@ module.exports = React.createClass({ getInitialState: function() { return { - query: "", + user: null, queryList: [], addressSelected: false, selected: 0, @@ -68,7 +68,11 @@ module.exports = React.createClass({ }, onStartChat: function() { - this._startChat(this.refs.textinput.value); + if (this.state.user) { + this._startChat(this.state.user.userId); + } else { + this._startChat(this.refs.textinput.value); + } }, onCancel: function() { @@ -95,33 +99,34 @@ module.exports = React.createClass({ } else if (e.keyCode === 13) { // enter e.stopPropagation(); e.preventDefault(); - if (this.state.addressSelected && this.state.queryList.length > 0) { - this._startChat(this.refs.textinput.value); - } else if (this.state.queryList.length > 0) { - this.setState({ addressSelected: true }); + if (this.state.queryList.length > 0) { + this.setState({ + user: this.state.queryList[this.state.selected], + addressSelected: true, + queryList: [], + }); } } }, onQueryChanged: function(ev) { var query = ev.target.value; - var list; - // Use the already filtered list if it has been filtered - if (query.length > 1) { - list = this.state.queryList; - } else { - list = this._userList; - } - var queryList = list.filter((user) => { - return this._matches(query, user); - }); + var queryList = []; - // Make sure the selected item is still isn't outside the list bounds + // Only do search if there is something to search + if (query.length > 0) { + queryList = this._userList.filter((user) => { + return this._matches(query, user); + }); + } + + // Make sure the selected item isn't outside the list bounds var selected = this.state.selected; var maxSelected = this._maxSelected(queryList); if (selected > maxSelected) { selected = maxSelected; } + this.setState({ queryList: queryList, selected: selected, @@ -130,13 +135,30 @@ module.exports = React.createClass({ onDismissed: function() { this.setState({ - query: "", + user: null, addressSelected: false, selected: 0, queryList: [], }); }, + createQueryListTiles: function() { + var self = this; + var AddressTile = sdk.getComponent("elements.AddressTile"); + var maxSelected = this._maxSelected(this.state.queryList); + var queryList = []; + if (this.state.queryList.length > 0) { + for (var i = 0; i <= maxSelected; i++) { + queryList.push( +
+ +
+ ); + } + } + return queryList; + }, + _startChat: function(addr) { // Start the chat createRoom().then(function(roomId) { @@ -163,7 +185,8 @@ module.exports = React.createClass({ _maxSelected: function(list) { var listSize = list.length === 0 ? 0 : list.length - 1; - var maxSelected = listSize > TRUNCATE_QUERY_LIST ? TRUNCATE_QUERY_LIST : listSize; + var maxSelected = listSize > (TRUNCATE_QUERY_LIST - 1) ? (TRUNCATE_QUERY_LIST - 1) : listSize + return maxSelected; }, // This is the search algorithm for matching users @@ -201,7 +224,7 @@ module.exports = React.createClass({ if (this.state.addressSelected) { var AddressTile = sdk.getComponent("elements.AddressTile"); query = ( - + ); } else { query = ( @@ -232,6 +255,9 @@ module.exports = React.createClass({
{ query }
+
+ { this.createQueryListTiles() } +