Refactored the queryList into seperate AddressSelector component

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.AddressSelector'] = require('./components/views/elements/AddressSelector');
 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');

src/components/views/dialogs/ChatInviteDialog.js

@@ -56,10 +56,8 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             user: null,
-            queryList: [],
             addressSelected: false,
-            selected: 0,
+            queryList: [],
-            hover: false,
         };
     },
 
@@ -71,15 +69,6 @@ module.exports = React.createClass({
         this._updateUserList();
     },
 
-    componentDidUpdate: function() {
-        // As the user scrolls with the arrow keys keep the selected item
-        // at the top of the window.
-        if (this.scrollElement && !this.state.hover) {
-            var elementHeight = this.queryListElement.getBoundingClientRect().height;
-            this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
-        }
-    },
-
     onStartChat: function() {
         var addr;
 
@@ -124,32 +113,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.selected > 0) {
+            this.addressSelector.onKeyUpArrow();
-                this.setState({
-                    selected: this.state.selected - 1,
-                    hover : false,
-                });
-            }
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.selected < this._maxSelected(this.state.queryList)) {
+            this.addressSelector.onKeyDownArrow();
-                this.setState({
-                    selected: this.state.selected + 1,
-                    hover : false,
-                });
-            }
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.queryList.length > 0) {
+            this.addressSelector.onKeyReturn();
-                this.setState({
-                    user: this.state.queryList[this.state.selected],
-                    addressSelected: true,
-                    queryList: [],
-                    hover : false,
-                });
-            }
         }
     },
 
@@ -164,24 +136,13 @@ module.exports = React.createClass({
             });
         }
 
-        // Make sure the selected item isn't outside the list bounds
+        this.setState({ queryList: queryList });
-        var selected = this.state.selected;
-        var maxSelected = this._maxSelected(queryList);
-        if (selected > maxSelected) {
-            selected = maxSelected;
-        }
-
-        this.setState({
-            queryList: queryList,
-            selected: selected,
-        });
     },
 
     onDismissed: function() {
         this.setState({
             user: null,
             addressSelected: false,
-            selected: 0,
             queryList: [],
         });
     },
@@ -193,51 +154,16 @@ module.exports = React.createClass({
                 user: self.state.queryList[index],
                 addressSelected: true,
                 queryList: [],
-                hover: false,
             });
         };
     },
 
-    onMouseEnter: function(index) {
+    onSelected: function(index) {
-        var self = this;
+        this.setState({
-        return function() {
+            user: this.state.queryList[index],
-            self.setState({
+            addressSelected: true,
-                selected: index,
+            queryList: [],
-                hover: true,
+        });
-            });
-        };
-    },
-
-    onMouseLeave: function() {
-        this.setState({ hover : false });
-    },
-
-    createQueryListTiles: function() {
-        var self = this;
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var AddressTile = sdk.getComponent("elements.AddressTile");
-        var maxSelected = this._maxSelected(this.state.queryList);
-        var queryList = [];
-
-        // Only create the query elements if there are queries
-        if (this.state.queryList.length > 0) {
-            for (var i = 0; i <= maxSelected; i++) {
-                var classes = classNames({
-                    "mx_ChatInviteDialog_queryListElement": true,
-                    "mx_ChatInviteDialog_selected": this.state.selected === i,
-                });
-
-                // NOTE: Defaulting to "vector" as the network, until the network backend stuff is done.
-                // Saving the queryListElement so we can use it to work out, in the componentDidUpdate
-                // method, how far to scroll when using the arrow keys
-                queryList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.queryListElement = ref; }} >
-                        <AddressTile user={this.state.queryList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
-                    </div>
-                );
-            }
-        }
-        return queryList;
     },
 
     _getDirectMessageRoom: function(addr) {
@@ -279,12 +205,6 @@ module.exports = React.createClass({
         this._userList = MatrixClientPeg.get().getUsers();
     }, 500),
 
-    _maxSelected: function(list) {
-        var listSize = list.length === 0 ? 0 : list.length - 1;
-        var maxSelected = listSize > (TRUNCATE_QUERY_LIST - 1) ? (TRUNCATE_QUERY_LIST - 1) : listSize
-        return maxSelected;
-    },
-
     // This is the search algorithm for matching users
     _matches: function(query, user) {
         var name = user.displayName.toLowerCase();
@@ -313,6 +233,7 @@ module.exports = React.createClass({
 
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
         var query;
@@ -335,16 +256,6 @@ module.exports = React.createClass({
             );
         }
 
-        var queryList;
-        var queryListElements = this.createQueryListTiles();
-        if (queryListElements.length > 0) {
-            queryList = (
-                <div className="mx_ChatInviteDialog_queryList" ref={(ref) => {this.scrollElement = ref}}>
-                    { queryListElements }
-                </div>
-            );
-        }
-
         return (
             <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
                 <div className="mx_Dialog_title">
@@ -358,7 +269,10 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_Dialog_content">
                     <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
-                    { queryList }
+                    <AddressSelector ref={(ref) => {this.addressSelector = ref}}
+                        addressList={ this.state.queryList }
+                        onSelected={ this.onSelected }
+                        truncateAt={ TRUNCATE_QUERY_LIST } />
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onStartChat}>

src/components/views/elements/AddressSelector.js

@@ -0,0 +1,149 @@
+/*
+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 classNames = require('classnames');
+
+module.exports = React.createClass({
+    displayName: 'AddressSelector',
+
+    propTypes: {
+        onSelected: React.PropTypes.func.isRequired,
+        addressList: React.PropTypes.array.isRequired,
+        truncateAt: React.PropTypes.number.isRequired,
+        selected: React.PropTypes.number,
+    },
+
+    getInitialState: function() {
+        return {
+            selected: this.props.selected === undefined ? 0 : this.props.selected,
+            hover: false,
+        };
+    },
+
+    componentDidUpdate: function() {
+        // Make sure the selected item isn't outside the list bounds
+        var selected = this.state.selected;
+        var maxSelected = this._maxSelected(this.props.addressList);
+        if (selected > maxSelected) {
+            selected = maxSelected;
+        }
+
+        // As the user scrolls with the arrow keys keep the selected item
+        // at the top of the window.
+        if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
+            var elementHeight = this.addressListElement.getBoundingClientRect().height;
+            this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
+        }
+    },
+
+    onKeyUpArrow: function() {
+        if (this.state.selected > 0) {
+            this.setState({
+                selected: this.state.selected - 1,
+                hover : false,
+            });
+        }
+    },
+
+    onKeyDownArrow: function() {
+        if (this.state.selected < this._maxSelected(this.props.addressList)) {
+            this.setState({
+                selected: this.state.selected + 1,
+                hover : false,
+            });
+        }
+    },
+
+    onKeyReturn: function() {
+        this.selectAddress(this.state.selected);
+    },
+
+    onClick: function(index) {
+        var self = this;
+        return function() {
+            self.selectAddress(index);
+        };
+    },
+
+    onMouseEnter: function(index) {
+        var self = this;
+        return function() {
+            self.setState({
+                selected: index,
+                hover: true,
+            });
+        };
+    },
+
+    onMouseLeave: function() {
+        this.setState({ hover : false });
+    },
+
+    selectAddress: function(index) {
+        this.props.onSelected(index);
+        this.setState({ hover: false });
+    },
+
+    createAddressListTiles: function() {
+        var self = this;
+        var AddressTile = sdk.getComponent("elements.AddressTile");
+        var maxSelected = this._maxSelected(this.props.addressList);
+        var addressList = [];
+
+        // Only create the address elements if there are address
+        if (this.props.addressList.length > 0) {
+            for (var i = 0; i <= maxSelected; i++) {
+                var classes = classNames({
+                    "mx_AddressSelector_addressListElement": true,
+                    "mx_AddressSelector_selected": this.state.selected === i,
+                });
+
+                // NOTE: Defaulting to "vector" as the network, until the network backend stuff is done.
+                // 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(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
+                        <AddressTile user={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                    </div>
+                );
+            }
+        }
+        return addressList;
+    },
+
+    _maxSelected: function(list) {
+        var listSize = list.length === 0 ? 0 : list.length - 1;
+        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize
+        return maxSelected;
+    },
+
+    render: function() {
+        var classes = classNames({
+            "mx_AddressSelector": true,
+            "mx_AddressSelector_empty": this.props.addressList.length === 0,
+        });
+
+        return (
+            <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+                { this.createAddressListTiles() }
+            </div>
+        );
+    }
+});