Cleanup autocomplete

src/autocomplete/AutocompleteProvider.js

@@ -54,10 +54,7 @@ export default class AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return (
-            <div>
-                {completions}
-            </div>
-        );
+        console.error('stub; should be implemented in subclasses');
+        return null;
     }
 }

src/autocomplete/CommandProvider.js

@@ -85,8 +85,8 @@ export default class CommandProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_block',
-        });
+        return <div className="mx_Autocomplete_Completion_container_block">
+            {completions}
+        </div>;
     }
 }

src/autocomplete/Components.js

@@ -19,9 +19,9 @@ export class TextualCompletion extends React.Component {
         } = 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>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
+                <span className="mx_Autocomplete_Completion_description">{description}</span>
             </div>
         );
     }
@@ -46,9 +46,9 @@ export class PillCompletion extends React.Component {
         return (
             <div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
                 {initialComponent}
-                <span>{title}</span>
-                <em>{subtitle}</em>
-                <span style={{color: 'gray'}}>{description}</span>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
+                <span className="mx_Autocomplete_Completion_description">{description}</span>
             </div>
         );
     }

src/autocomplete/DuckDuckGoProvider.js

@@ -87,4 +87,10 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         }
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return <div className="mx_Autocomplete_Completion_container_block">
+            {completions}
+        </div>;
+    }
 }

src/autocomplete/EmojiProvider.js

@@ -49,8 +49,8 @@ export default class EmojiProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }

src/autocomplete/RoomProvider.js

@@ -64,8 +64,8 @@ export default class RoomProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }

src/autocomplete/UserProvider.js

@@ -60,8 +60,8 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }