Move create_room atoms to components

src/components/views/create_room/CreateRoomButton.js

@@ -18,7 +18,8 @@ limitations under the License.
 
 var React = require('react');
 
-module.exports = {
+module.exports = React.createClass({
+    displayName: 'CreateRoomButton',
     propTypes: {
         onCreateRoom: React.PropTypes.func,
     },
@@ -32,4 +33,10 @@ module.exports = {
     onClick: function() {
         this.props.onCreateRoom();
     },
-};
+
+    render: function() {
+        return (
+            <button className="mx_CreateRoomButton" onClick={this.onClick}>Create Room</button>
+        );
+    }
+});

src/components/views/create_room/Presets.js

@@ -24,7 +24,8 @@ var Presets = {
     Custom: "custom",
 };
 
-module.exports = {
+module.exports = React.createClass({
+    displayName: 'CreateRoomPresets',
     propTypes: {
         onChange: React.PropTypes.func,
         preset: React.PropTypes.string
@@ -37,4 +38,18 @@ module.exports = {
             onChange: function() {},
         };
     },
-};
+
+    onValueChanged: function(ev) {
+        this.props.onChange(ev.target.value)
+    },
+
+    render: function() {
+        return (
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
+                <option value={this.Presets.PrivateChat}>Private Chat</option>
+                <option value={this.Presets.PublicChat}>Public Chat</option>
+                <option value={this.Presets.Custom}>Custom</option>
+            </select>
+        );
+    }
+});

src/components/views/create_room/RoomAlias.js

@@ -0,0 +1,101 @@
+/*
+Copyright 2015 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');
+
+module.exports = React.createClass({
+    displayName: 'RoomAlias',
+    propTypes: {
+        // Specifying a homeserver will make magical things happen when you,
+        // e.g. start typing in the room alias box.
+        homeserver: React.PropTypes.string,
+        alias: React.PropTypes.string,
+        onChange: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            onChange: function() {},
+            alias: '',
+        };
+    },
+
+    getAliasLocalpart: function() {
+        var room_alias = this.props.alias;
+
+        if (room_alias && this.props.homeserver) {
+            var suffix = ":" + this.props.homeserver;
+            if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
+                room_alias = room_alias.slice(1, -suffix.length);
+            }
+        }
+
+        return room_alias;
+    },
+
+    onValueChanged: function(ev) {
+        this.props.onChange(ev.target.value);
+    },
+
+    onFocus: function(ev) {
+        var target = ev.target;
+        var curr_val = ev.target.value;
+
+        if (this.props.homeserver) {
+            if (curr_val == "") {
+                setTimeout(function() {
+                    target.value = "#:" + this.props.homeserver;
+                    target.setSelectionRange(1, 1);
+                }, 0);
+            } else {
+                var suffix = ":" + this.props.homeserver;
+                setTimeout(function() {
+                    target.setSelectionRange(
+                        curr_val.startsWith("#") ? 1 : 0,
+                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
+                    );
+                }, 0);
+            }
+        }
+    },
+
+    onBlur: function(ev) {
+        var curr_val = ev.target.value;
+
+        if (this.props.homeserver) {
+            if (curr_val == "#:" + this.props.homeserver) {
+                ev.target.value = "";
+                return;
+            }
+
+            if (curr_val != "") {
+                var new_val = ev.target.value;
+                var suffix = ":" + this.props.homeserver;
+                if (!curr_val.startsWith("#")) new_val = "#" + new_val;
+                if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
+                ev.target.value = new_val;
+            }
+        }
+    },
+
+    render: function() {
+        return (
+            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
+                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
+                value={this.props.alias}/>
+        );
+    }
+});

src/controllers/atoms/create_room/RoomAlias.js

@@ -1,47 +0,0 @@
-/*
-Copyright 2015 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');
-
-module.exports = {
-    propTypes: {
-        // Specifying a homeserver will make magical things happen when you,
-        // e.g. start typing in the room alias box.
-        homeserver: React.PropTypes.string,
-        alias: React.PropTypes.string,
-        onChange: React.PropTypes.func,
-    },
-
-    getDefaultProps: function() {
-        return {
-            onChange: function() {},
-            alias: '',
-        };
-    },
-
-    getAliasLocalpart: function() {
-        var room_alias = this.props.alias;
-
-        if (room_alias && this.props.homeserver) {
-            var suffix = ":" + this.props.homeserver;
-            if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
-                room_alias = room_alias.slice(1, -suffix.length);
-            }
-        }
-
-        return room_alias;
-    },
-};

src/controllers/atoms/create_room/RoomNameTextbox.js

@@ -1,41 +0,0 @@
-/*
-Copyright 2015 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');
-
-module.exports = {
-    propTypes: {
-        default_name: React.PropTypes.string
-    },
-
-    getDefaultProps: function() {
-        return {
-            default_name: '',
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            room_name: this.props.default_name,
-        }
-    },
-
-    getName: function() {
-        return this.state.room_name;
-    },
-};

src/controllers/organisms/CreateRoom.js

@@ -18,7 +18,11 @@ limitations under the License.
 
 var React = require("react");
 var MatrixClientPeg = require("../../MatrixClientPeg");
-var PresetValues = require('../atoms/create_room/Presets').Presets;
+var PresetValues = {
+    PrivateChat: "private_chat",
+    PublicChat: "public_chat",
+    Custom: "custom",
+};
 var q = require('q');
 var encryption = require("../../encryption");