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.

src/components/views/elements/AddressSelector.js

@@ -61,6 +61,15 @@ export default React.createClass({
         }
     },
 
+    moveSelectionTop: function() {
+        if (this.state.selected > 0) {
+            this.setState({
+                selected: 0,
+                hover: false,
+            });
+        }
+    },
+
     moveSelectionUp: function() {
         if (this.state.selected > 0) {
             this.setState({
@@ -124,7 +133,14 @@ export default React.createClass({
                 // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
-                    <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
+                    <div
+                        className={classes}
+                        onClick={this.onClick.bind(this, i)}
+                        onMouseEnter={this.onMouseEnter.bind(this, i)}
+                        onMouseLeave={this.onMouseLeave}
+                        key={this.props.addressList[i].userId}
+                        ref={(ref) => { this.addressListElement = ref; }}
+                    >
                         <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );

src/components/views/elements/AddressTile.js

@@ -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 }