Emoji provider, DDG working, style improvements

src/components/views/rooms/Autocomplete.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import {getCompletions} from '../../../autocomplete/Autocompleter';
 
@@ -11,8 +12,11 @@ export default class Autocomplete extends React.Component {
     }
 
     componentWillReceiveProps(props, state) {
+        if(props.query == this.props.query) return;
+
         getCompletions(props.query).map(completionResult => {
             try {
+                console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
                 completionResult.completions.then(completions => {
                     let i = this.state.completions.findIndex(
                         completion => completion.provider === completionResult.provider
@@ -23,15 +27,16 @@ export default class Autocomplete extends React.Component {
                     let newCompletions = Object.assign([], this.state.completions);
                     completionResult.completions = completions;
                     newCompletions[i] = completionResult;
-                    console.log(newCompletions);
+                    // console.log(newCompletions);
                     this.setState({
                         completions: newCompletions
                     });
                 }, err => {
-
+                    console.error(err);
                 });
             } catch (e) {
                 // An error in one provider shouldn't mess up the rest.
+                console.error(e);
             }
         });
     }
@@ -42,23 +47,19 @@ export default class Autocomplete extends React.Component {
 
         const position = pinElement.getBoundingClientRect();
 
-        const style = {
-            position: 'fixed',
-            border: '1px solid gray',
-            background: 'white',
-            borderRadius: '4px'
-        };
 
-        this.props.pinTo.forEach(direction => {
-            style[direction] = position[direction];
-        });
 
         const renderedCompletions = this.state.completions.map((completionResult, i) => {
-            console.log(completionResult);
+            // console.log(completionResult);
             let completions = completionResult.completions.map((completion, i) => {
+                let Component = completion.component;
+                if(Component) {
+                    return Component;
+                }
+                
                 return (
-                    <div key={i} class="mx_Autocomplete_Completion">
-                        <strong>{completion.title}</strong>
+                    <div key={i} className="mx_Autocomplete_Completion">
+                        <span>{completion.title}</span>
                         <em>{completion.subtitle}</em>
                         <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
                     </div>
@@ -67,16 +68,20 @@ export default class Autocomplete extends React.Component {
 
 
             return completions.length > 0 ? (
-                <div key={i} class="mx_Autocomplete_ProviderSection">
-                    <strong>{completionResult.provider.getName()}</strong>
-                    {completions}
+                <div key={i} className="mx_Autocomplete_ProviderSection">
+                    <span className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</span>
+                    <ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+                        {completions}
+                    </ReactCSSTransitionGroup>
                 </div>
             ) : null;
         });
 
         return (
-            <div className="mx_Autocomplete" style={style}>
-                {renderedCompletions}
+            <div className="mx_Autocomplete">
+                <ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+                    {renderedCompletions}
+                </ReactCSSTransitionGroup>
             </div>
         );
     }

src/components/views/rooms/MessageComposer.js

@@ -212,13 +212,14 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
+                <div className="mx_MessageComposer_autocomplete_wrapper">
+                    <Autocomplete query={this.state.autocompleteQuery} pinSelector=".mx_RoomView_statusArea" pinTo={['top', 'left', 'width']} />
+                </div>
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         {controls}
                     </div>
                 </div>
-
-                <Autocomplete query={this.state.autocompleteQuery} pinSelector=".mx_RoomView_statusArea" pinTo={['top', 'left', 'width']} />
             </div>
         );
     }

src/components/views/rooms/MessageComposerInput.js

@@ -352,6 +352,10 @@ export default class MessageComposerInput extends React.Component {
         } else {
             this.onFinishedTyping();
         }
+
+        if(this.props.onContentChanged) {
+            this.props.onContentChanged(editorState.getCurrentContent().getPlainText());
+        }
     }
 
     enableRichtext(enabled: boolean) {
@@ -521,5 +525,8 @@ MessageComposerInput.propTypes = {
     onResize: React.PropTypes.func,
 
     // js-sdk Room object
-    room: React.PropTypes.object.isRequired
+    room: React.PropTypes.object.isRequired,
+
+    // called with current plaintext content (as a string) whenever it changes
+    onContentChanged: React.PropTypes.func
 };