Initial commit of the new ChatInviteDialog

src/component-index.js

@@ -45,6 +45,7 @@ module.exports.components['views.avatars.RoomAvatar'] = require('./components/vi
 module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton');
 module.exports.components['views.create_room.Presets'] = require('./components/views/create_room/Presets');
 module.exports.components['views.create_room.RoomAlias'] = require('./components/views/create_room/RoomAlias');
+module.exports.components['views.dialogs.ChatInviteDialog'] = require('./components/views/dialogs/ChatInviteDialog');
 module.exports.components['views.dialogs.DeactivateAccountDialog'] = require('./components/views/dialogs/DeactivateAccountDialog');
 module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
 module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');

src/components/structures/MatrixChat.js

@@ -497,11 +497,11 @@ module.exports = React.createClass({
     },
 
     _createChat: function() {
-        // TODO: Create a OneToOneChatChatDialog
+        var ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ChatInviteDialog, {
-        Modal.createDialog(ErrorDialog, {
+            title: "Start a one to one chat",
-            title: "Unimplemented Feature",
+            description: "Who would you like to communicate with?",
-            description: "The OnToOneChatDialog is not yet implemented"
+            placeholder: "User ID, Name or email",
         });
     },
 

src/components/views/dialogs/ChatInviteDialog.js

@@ -0,0 +1,98 @@
+/*
+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.
+*/
+
+var React = require("react");
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+    displayName: 'ChatInviteDialog',
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
+        value: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "",
+            value: "",
+            description: "",
+            button: "Start Chat",
+            focus: true
+        };
+    },
+
+    componentDidMount: function() {
+        if (this.props.focus) {
+            // Set the cursor at the end of the text input
+            this.refs.textinput.value = this.props.value;
+        }
+    },
+
+    onOk: function() {
+        this.props.onFinished(true, 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.props.onFinished(true, this.refs.textinput.value);
+        }
+    },
+
+    render: function() {
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+        return (
+            <div className="mx_ChatInviteDialog">
+                <div className="mx_Dialog_title">
+                    {this.props.title}
+                </div>
+                <div className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
+                </div>
+                <div className="mx_ChatInviteDialog_label">
+                    <label htmlFor="textinput"> {this.props.description} </label>
+                </div>
+                <div className="mx_Dialog_content">
+                    <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.onOk}>
+                        {this.props.button}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});