General ChatInviteDialog optimisations

- Use avatar initial instead of "R" or "?"
- Use Fuse.js to do case-insensitive fuzzy search. This allows for better sorting of results as well as search based on weighted keys (so userId has a high weight when the input starts with "@").
- Added debounce of 200ms to prevent analysis on every key stroke. Fuse seems to degrade performance vs. simple, non-fuzzy, unsorted matching, but the debounce should prevent too much computation.
- Move the selection to the top when the query is changed. There's no point in staying mid-way through the items at that point.
This commit is contained in:
Luke Barnard 2017-02-23 12:12:25 +00:00
parent b41787c335
commit 439bde309e
3 changed files with 58 additions and 70 deletions

View file

@ -64,19 +64,14 @@ export default React.createClass({
const address = this.props.address;
const name = address.displayName || address.address;
let imgUrl;
if (address.avatarMxc) {
imgUrl = MatrixClientPeg.get().mxcUrlToHttp(
address.avatarMxc, 25, 25, 'crop'
);
}
let imgUrls = [];
if (address.addressType === "mx") {
if (!imgUrl) imgUrl = 'img/icon-mx-user.svg';
if (address.addressType === "mx" && address.avatarMxc) {
imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
address.avatarMxc, 25, 25, 'crop'
));
} else if (address.addressType === 'email') {
if (!imgUrl) imgUrl = 'img/icon-email-user.svg';
} else {
if (!imgUrl) imgUrl = "img/avatar-error.svg";
imgUrls.push('img/icon-email-user.svg');
}
// Removing networks for now as they're not really supported
@ -168,7 +163,7 @@ export default React.createClass({
return (
<div className={classes}>
<div className="mx_AddressTile_avatar">
<BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
<BaseAvatar defaultToInitialLetter={true} width={25} height={25} name={name} title={name} urls={imgUrls} />
</div>
{ info }
{ dismiss }