Initial AddressTile added

src/component-index.js

@@ -54,6 +54,7 @@ module.exports.components['views.dialogs.NeedToRegisterDialog'] = require('./com
 module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
 module.exports.components['views.dialogs.SetDisplayNameDialog'] = require('./components/views/dialogs/SetDisplayNameDialog');
 module.exports.components['views.dialogs.TextInputDialog'] = require('./components/views/dialogs/TextInputDialog');
+module.exports.components['views.elements.AddressTile'] = require('./components/views/elements/AddressTile');
 module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
 module.exports.components['views.elements.EditableTextContainer'] = require('./components/views/elements/EditableTextContainer');
 module.exports.components['views.elements.EmojiText'] = require('./components/views/elements/EmojiText');

src/components/views/dialogs/ChatInviteDialog.js

@@ -18,8 +18,12 @@ var React = require("react");
 var sdk = require("../../../index");
 var Invite = require("../../../Invite");
 var createRoom = require("../../../createRoom");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var rate_limited_func = require("../../../ratelimitedfunc");
 var Modal = require('../../../Modal');
 
+const TRUNCATE_QUERY_LIST = 4;
+
 module.exports = React.createClass({
     displayName: "ChatInviteDialog",
     propTypes: {
@@ -46,17 +50,56 @@ module.exports = React.createClass({
         };
     },
 
+    getInitialState: function() {
+        return {
+            query: "",
+            queryList: [],
+            addressSelected: false,
+        };
+    },
+
     componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
             this.refs.textinput.value = this.props.value;
         }
+        this._updateUserList();
     },
 
     onStartChat: function() {
         this._startChat(this.refs.textinput.value);
     },
 
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    onKeyDown: function(e) {
+        if (e.keyCode === 27) { // escape
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished(false);
+        }
+        else if (e.keyCode === 13) { // enter
+            e.stopPropagation();
+            e.preventDefault();
+            //this._startChat(this.refs.textinput.value);
+            this.setState({ addressSelected: true });
+        }
+    },
+
+    onQueryChanged: function(ev) {
+        var query = ev.target.value;
+        var queryList = this._userList.filter((user) => {
+            return this._matches(query, user);
+        });
+        this.setState({ queryList: queryList });
+    },
+
+    onDismissed: function() {
+        this.setState({ addressSelected: false });
+    },
+
     _startChat: function(addr) {
         // Start the chat
         createRoom().then(function(roomId) {
@@ -76,25 +119,65 @@ module.exports = React.createClass({
         this.props.onFinished(true, addr);
     },
 
-    onCancel: function() {
+    _updateUserList: new rate_limited_func(function() {
-        this.props.onFinished(false);
+        // Get all the users
-    },
+        this._userList = MatrixClientPeg.get().getUsers();
+    }, 500),
 
-    onKeyDown: function(e) {
+    // This is the search algorithm for matching users
-        if (e.keyCode === 27) { // escape
+    _matches: function(query, user) {
-            e.stopPropagation();
+        var name = user.displayName.toLowerCase();
-            e.preventDefault();
+        var uid = user.userId.toLowerCase();
-            this.props.onFinished(false);
+        query = query.toLowerCase();
+
+        // direct prefix matches
+        if (name.indexOf(query) === 0 || uid.indexOf(query) === 0) {
+            return true;
         }
-        else if (e.keyCode === 13) { // enter
+
-            e.stopPropagation();
+        // strip @ on uid and try matching again
-            e.preventDefault();
+        if (uid.length > 1 && uid[0] === "@" && uid.substring(1).indexOf(query) === 0) {
-            this._startChat(this.refs.textinput.value);
+            return true;
         }
+
+        // split spaces in name and try matching constituent parts
+        var parts = name.split(" ");
+        for (var i = 0; i < parts.length; i++) {
+            if (parts[i].indexOf(query) === 0) {
+                return true;
+            }
+        }
+        return false;
     },
 
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        console.log("### D E B U G - queryList:");
+        console.log(this.state.queryList);
+
+        var query;
+        if (this.state.addressSelected) {
+            var AddressTile = sdk.getComponent("elements.AddressTile");
+            // NOTE: _userList[0] is just a place holder until the selection logic is completed
+            query = (
+                <AddressTile user={this._userList[0]} canDismiss={true} onDismissed={this.onDismissed} />
+            );
+        } else {
+            query = (
+                <input type="text"
+                    id="textinput"
+                    ref="textinput"
+                    className="mx_ChatInviteDialog_input"
+                    onChange={this.onQueryChanged}
+                    placeholder={this.props.placeholder}
+                    defaultValue={this.props.value}
+                    autoFocus={this.props.focus}
+                    onKeyDown={this.onKeyDown}
+                    autoComplete="off"
+                    size="64"/>
+            );
+        }
+
         return (
             <div className="mx_ChatInviteDialog">
                 <div className="mx_Dialog_title">
@@ -107,9 +190,7 @@ module.exports = React.createClass({
                     <label htmlFor="textinput"> {this.props.description} </label>
                 </div>
                 <div className="mx_Dialog_content">
-                    <div>
+                    <div>{ query }</div>
-                        <input id="textinput" ref="textinput" className="mx_ChatInviteDialog_input" placeholder={this.props.placeholder} defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown}/>
-                    </div>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onStartChat}>

src/components/views/elements/AddressTile.js

@@ -0,0 +1,65 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require("../../../index");
+var Avatar = require('../../../Avatar');
+
+module.exports = React.createClass({
+    displayName: 'AddressTile',
+
+    propTypes: {
+        user: React.PropTypes.object.isRequired,
+        canDismiss: React.PropTypes.bool,
+        onDismissed: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            canDismiss: false,
+            onDismissed: function() {}, // NOP
+        };
+    },
+
+    render: function() {
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var name = this.props.user.displayName || this.props.user.userId
+        var imgUrl = Avatar.avatarUrlForUser(this.props.user, 25, 25, "crop");
+
+        var dismiss;
+        if (this.props.canDismiss) {
+            dismiss = (
+                <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
+                    <TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_AddressTile">
+                <div className="mx_AddressTile_avatar">
+                    <BaseAvatar width={25} height={25} name={name} url={imgUrl} />
+                </div>
+                <div className="mx_AddressTile_name">{ name }</div>
+                <div className="mx_AddressTile_id">{ this.props.user.userId }</div>
+                { dismiss }
+            </div>
+        );
+    }
+});