Update autocomplete design and scroll it correctly

src/autocomplete/AutocompleteProvider.js

@@ -1,4 +1,5 @@
 import Q from 'q';
+import React from 'react';
 
 export default class AutocompleteProvider {
     constructor(commandRegex?: RegExp, fuseOpts?: any) {
@@ -51,4 +52,12 @@ export default class AutocompleteProvider {
     getName(): string {
         return 'Default Provider';
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return (
+            <div>
+                {completions}
+            </div>
+        );
+    }
 }

src/autocomplete/CommandProvider.js

@@ -74,7 +74,7 @@ export default class CommandProvider extends AutocompleteProvider {
     }
 
     getName() {
-        return 'Commands';
+        return '*️⃣ Commands';
     }
 
     static getInstance(): CommandProvider {
@@ -83,4 +83,10 @@ export default class CommandProvider extends AutocompleteProvider {
 
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return React.cloneElement(super.renderCompletions(completions), {
+            className: 'mx_Autocomplete_Completion_container_block',
+        });
+    }
 }

src/autocomplete/Components.js

@@ -1,19 +1,62 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 
-export function TextualCompletion({
-    title,
-    subtitle,
-    description,
-}: {
-    title: ?string,
-    subtitle: ?string,
-    description: ?string
-}) {
-    return (
-        <div style={{width: '100%'}}>
-            <span>{title}</span>
-            <em>{subtitle}</em>
-            <span style={{color: 'gray', float: 'right'}}>{description}</span>
-        </div>
-    );
+/* These were earlier stateless functional components but had to be converted
+since we need to use refs/findDOMNode to access the underlying DOM node to focus the correct completion,
+something that is not entirely possible with stateless functional components. One could
+presumably wrap them in a <div> before rendering but I think this is the better way to do it.
+ */
+
+export class TextualCompletion extends React.Component {
+    render() {
+        const {
+            title,
+            subtitle,
+            description,
+            className,
+            ...restProps,
+        } = this.props;
+        return (
+            <div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
+                <span>{title}</span>
+                <em style={{flex: 1}}>{subtitle}</em>
+                <span style={{color: 'gray', float: 'right'}}>{description}</span>
+            </div>
+        );
+    }
 }
+TextualCompletion.propTypes = {
+    title: React.PropTypes.string,
+    subtitle: React.PropTypes.string,
+    description: React.PropTypes.string,
+    className: React.PropTypes.string,
+};
+
+export class PillCompletion extends React.Component {
+    render() {
+        const {
+            title,
+            subtitle,
+            description,
+            initialComponent,
+            className,
+            ...restProps,
+        } = this.props;
+        return (
+            <div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
+                {initialComponent}
+                <span>{title}</span>
+                <em>{subtitle}</em>
+                <span style={{color: 'gray'}}>{description}</span>
+            </div>
+        );
+    }
+}
+PillCompletion.propTypes = {
+    title: React.PropTypes.string,
+    subtitle: React.PropTypes.string,
+    description: React.PropTypes.string,
+    initialComponent: React.PropTypes.element,
+    className: React.PropTypes.string,
+};

src/autocomplete/DuckDuckGoProvider.js

@@ -78,7 +78,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
     }
 
     getName() {
-        return 'Results from DuckDuckGo';
+        return '🔍 Results from DuckDuckGo';
     }
 
     static getInstance(): DuckDuckGoProvider {

src/autocomplete/EmojiProvider.js

@@ -3,6 +3,8 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
 import Fuse from 'fuse.js';
+import sdk from '../index';
+import {PillCompletion} from './Components';
 
 const EMOJI_REGEX = /:\w*:?/g;
 const EMOJI_SHORTNAMES = Object.keys(emojioneList);
@@ -16,28 +18,28 @@ export default class EmojiProvider extends AutocompleteProvider {
     }
 
     getCompletions(query: string, selection: {start: number, end: number}) {
+        const EmojiText = sdk.getComponent('views.elements.EmojiText');
+
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
             completions = this.fuse.search(command[0]).map(result => {
-                let shortname = EMOJI_SHORTNAMES[result];
-                let imageHTML = shortnameToImage(shortname);
+                const shortname = EMOJI_SHORTNAMES[result];
+                const unicode = shortnameToUnicode(shortname);
                 return {
-                    completion: shortnameToUnicode(shortname),
+                    completion: unicode,
                     component: (
-                        <div className="mx_Autocomplete_Completion">
-                            <span style={{maxWidth: '1em'}} dangerouslySetInnerHTML={{__html: imageHTML}}></span>&nbsp;&nbsp;{shortname}
-                        </div>
+                        <PillCompletion title={shortname} initialComponent={<EmojiText style={{maxWidth: '1em'}}>{unicode}</EmojiText>} />
                     ),
                     range,
                 };
-            }).slice(0, 4);
+            }).slice(0, 8);
         }
         return Q.when(completions);
     }
 
     getName() {
-        return 'Emoji';
+        return '😃 Emoji';
     }
 
     static getInstance() {
@@ -45,4 +47,10 @@ export default class EmojiProvider extends AutocompleteProvider {
             instance = new EmojiProvider();
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return React.cloneElement(super.renderCompletions(completions), {
+            className: 'mx_Autocomplete_Completion_container_pill',
+        });
+    }
 }

src/autocomplete/RoomProvider.js

@@ -3,8 +3,9 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import MatrixClientPeg from '../MatrixClientPeg';
 import Fuse from 'fuse.js';
-import {TextualCompletion} from './Components';
+import {PillCompletion} from './Components';
 import {getDisplayAliasForRoom} from '../MatrixTools';
+import sdk from '../index';
 
 const ROOM_REGEX = /(?=#)([^\s]*)/g;
 
@@ -21,6 +22,8 @@ export default class RoomProvider extends AutocompleteProvider {
     }
 
     getCompletions(query: string, selection: {start: number, end: number}) {
+        const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
+
         let client = MatrixClientPeg.get();
         let completions = [];
         const {command, range} = this.getCurrentCommand(query, selection);
@@ -39,7 +42,7 @@ export default class RoomProvider extends AutocompleteProvider {
                 return {
                     completion: displayAlias,
                     component: (
-                        <TextualCompletion title={room.name} description={displayAlias} />
+                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
                     ),
                     range,
                 };
@@ -49,7 +52,7 @@ export default class RoomProvider extends AutocompleteProvider {
     }
 
     getName() {
-        return 'Rooms';
+        return '💬 Rooms';
     }
     
     static getInstance() {
@@ -59,4 +62,10 @@ export default class RoomProvider extends AutocompleteProvider {
         
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return React.cloneElement(super.renderCompletions(completions), {
+            className: 'mx_Autocomplete_Completion_container_pill',
+        });
+    }
 }

src/autocomplete/UserProvider.js

@@ -2,7 +2,8 @@ import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import Fuse from 'fuse.js';
-import {TextualCompletion} from './Components';
+import {PillCompletion} from './Components';
+import sdk from '../index';
 
 const USER_REGEX = /@[^\s]*/g;
 
@@ -20,6 +21,8 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     getCompletions(query: string, selection: {start: number, end: number}) {
+        const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
+
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
@@ -29,7 +32,8 @@ export default class UserProvider extends AutocompleteProvider {
                 return {
                     completion: user.userId,
                     component: (
-                        <TextualCompletion
+                        <PillCompletion
+                            initialComponent={<MemberAvatar member={user} width={24} height={24}/>}
                             title={displayName}
                             description={user.userId} />
                     ),
@@ -41,7 +45,7 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     getName() {
-        return 'Users';
+        return '👥 Users';
     }
 
     setUserList(users) {
@@ -54,4 +58,10 @@ export default class UserProvider extends AutocompleteProvider {
         }
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return React.cloneElement(super.renderCompletions(completions), {
+            className: 'mx_Autocomplete_Completion_container_pill',
+        });
+    }
 }