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() {
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(
<div className="mx_ChatInviteDialog_queryListElement" key={i} >
<AddressTile user={this.state.queryList[i]} canDismiss={false} />
</div>
);
}
}
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 = (
<AddressTile user={this.state.queryList[this.state.selected]} canDismiss={true} onDismissed={this.onDismissed} />
<AddressTile user={this.state.user} canDismiss={true} onDismissed={this.onDismissed} />
);
} else {
query = (
@ -232,6 +255,9 @@ module.exports = React.createClass({
</div>
<div className="mx_Dialog_content">
<div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
<div className="mx_ChatInviteDialog_queryList">
{ this.createQueryListTiles() }
</div>
</div>
<div className="mx_Dialog_buttons">
<button className="mx_Dialog_primary" onClick={this.onStartChat}>

View file

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