Basic address list created, and UX tweaks for interaction

This commit is contained in:
wmwragg 2016-09-06 15:24:23 +01:00
parent ddf1e4841a
commit 391fe0ab77
2 changed files with 46 additions and 22 deletions

View file

@ -52,7 +52,7 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
query: "", user: null,
queryList: [], queryList: [],
addressSelected: false, addressSelected: false,
selected: 0, selected: 0,
@ -68,7 +68,11 @@ module.exports = React.createClass({
}, },
onStartChat: function() { onStartChat: function() {
if (this.state.user) {
this._startChat(this.state.user.userId);
} else {
this._startChat(this.refs.textinput.value); this._startChat(this.refs.textinput.value);
}
}, },
onCancel: function() { onCancel: function() {
@ -95,33 +99,34 @@ module.exports = React.createClass({
} else if (e.keyCode === 13) { // enter } else if (e.keyCode === 13) { // enter
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (this.state.addressSelected && this.state.queryList.length > 0) { if (this.state.queryList.length > 0) {
this._startChat(this.refs.textinput.value); this.setState({
} else if (this.state.queryList.length > 0) { user: this.state.queryList[this.state.selected],
this.setState({ addressSelected: true }); addressSelected: true,
queryList: [],
});
} }
} }
}, },
onQueryChanged: function(ev) { onQueryChanged: function(ev) {
var query = ev.target.value; var query = ev.target.value;
var list; var queryList = [];
// Use the already filtered list if it has been filtered
if (query.length > 1) { // Only do search if there is something to search
list = this.state.queryList; if (query.length > 0) {
} else { queryList = this._userList.filter((user) => {
list = this._userList;
}
var queryList = list.filter((user) => {
return this._matches(query, user); return this._matches(query, user);
}); });
}
// Make sure the selected item is still isn't outside the list bounds // Make sure the selected item isn't outside the list bounds
var selected = this.state.selected; var selected = this.state.selected;
var maxSelected = this._maxSelected(queryList); var maxSelected = this._maxSelected(queryList);
if (selected > maxSelected) { if (selected > maxSelected) {
selected = maxSelected; selected = maxSelected;
} }
this.setState({ this.setState({
queryList: queryList, queryList: queryList,
selected: selected, selected: selected,
@ -130,13 +135,30 @@ module.exports = React.createClass({
onDismissed: function() { onDismissed: function() {
this.setState({ this.setState({
query: "", user: null,
addressSelected: false, addressSelected: false,
selected: 0, selected: 0,
queryList: [], 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(
<div className="mx_ChatInviteDialog_queryListElement" key={i} >
<AddressTile user={this.state.queryList[i]} canDismiss={false} />
</div>
);
}
}
return queryList;
},
_startChat: function(addr) { _startChat: function(addr) {
// Start the chat // Start the chat
createRoom().then(function(roomId) { createRoom().then(function(roomId) {
@ -163,7 +185,8 @@ module.exports = React.createClass({
_maxSelected: function(list) { _maxSelected: function(list) {
var listSize = list.length === 0 ? 0 : list.length - 1; 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 // This is the search algorithm for matching users
@ -201,7 +224,7 @@ module.exports = React.createClass({
if (this.state.addressSelected) { if (this.state.addressSelected) {
var AddressTile = sdk.getComponent("elements.AddressTile"); var AddressTile = sdk.getComponent("elements.AddressTile");
query = ( query = (
<AddressTile user={this.state.queryList[this.state.selected]} canDismiss={true} onDismissed={this.onDismissed} /> <AddressTile user={this.state.user} canDismiss={true} onDismissed={this.onDismissed} />
); );
} else { } else {
query = ( query = (
@ -232,6 +255,9 @@ module.exports = React.createClass({
</div> </div>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<div className="mx_ChatInviteDialog_inputContainer">{ query }</div> <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
<div className="mx_ChatInviteDialog_queryList">
{ this.createQueryListTiles() }
</div>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className="mx_Dialog_primary" onClick={this.onStartChat}> <button className="mx_Dialog_primary" onClick={this.onStartChat}>

View file

@ -37,8 +37,6 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
console.log("### D E B U G - user:");
console.log(this.props.user);
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
var TintableSvg = sdk.getComponent("elements.TintableSvg"); var TintableSvg = sdk.getComponent("elements.TintableSvg");
var userId = this.props.user.userId; var userId = this.props.user.userId;