Basic address list created, and UX tweaks for interaction
This commit is contained in:
parent
ddf1e4841a
commit
391fe0ab77
2 changed files with 46 additions and 22 deletions
|
@ -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}>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue