handleLogin: function () {
console.log("Imma log in now");
window.Dispatcher.send_msg("accounts", "create_account", this.state);
+ this.setState(this.getInitialState());
+ },
+ checkSubmit: function(e) {
+ if (e && e.keyCode == 13) {
+ this.handleLogin();
+ }
},
render: function () {
<option value="prpl-jabber">Jabber</option>
<option value="prpl-aim">AIM</option>
</select></label>
- <label>Username:<input type="text" id="username" valueLink={this.linkState('username')} /></label>
- <label>Password:<input type="password" id="password" valueLink={this.linkState('password')} /></label>
+ <label>Username:<input type="text" id="username" valueLink={this.linkState('username')} onKeyPress={this.checkSubmit} /></label>
+ <label>Password:<input type="password" id="password" valueLink={this.linkState('password')} onKeyPress={this.checkSubmit} /></label>
<input type="button" id="login" value="Login" onClick={this.handleLogin} />
</form>
);
}
});
+var ConversationTab = React.createClass({
+ render: function() {
+ var classname = "conv-tab";
+ if (this.props.active) {
+ classname = classname + " conv-active";
+ }
+ return <li className={classname}>{this.props.buddy}</li>;
+ }
+});
+
+var ConversationTabBar = React.createClass({
+ render: function() {
+ var tabs = [];
+ for (var i = 0 ; i < this.props.tabs.length ; i++) {
+ tabs.push(ConversationTab(this.props.tabs[i]));
+ }
+ return <ul className="conv-tabbar">{ tabs }</ul>;
+ }
+});
+
+var ConversationTextEntry = React.createClass({
+ mixins: [React.addons.LinkedStateMixin],
+ getInitialState: function() {
+ return {"text": ""};
+ },
+ checkSubmit: function(e) {
+ if (e && e.keyCode == 13) {
+ // TODO: do this only if Shift not currently pressed? (awkward...)
+ e.preventDefault();
+ // TODO: do something with this.state.text - window.Dispatcher.send_im?
+ this.setState(this.getInitialState());
+ }
+ // TODO: close window when Escape pressed?
+ // TODO: change tabs when Tab pressed?
+ },
+ render: function() {
+ return <footer className="conv-input-container"><textarea className="conv-input" rows="4" valueLink={this.linkState('text')} onKeyPress={this.checkSubmit} ></textarea></footer>;
+ }
+});
+
+var ConversationTabContent = React.createClass({
+ render: function() {
+ var messages = [];
+ for (var i = 0 ; i < this.props.messages.length ; i++) {
+ var msg = this.props.messages[i];
+ var msgclass = "msg " + msg.direction;
+ messages.push(<p>
+ <span className="timestamp">{msg.timestamp}</span>
+ <span className="sender">{msg.sender}</span>
+ <span className={msgclass}>{msg.text}</span>
+ </p>);
+ }
+ return <div className="conv-tab-content">
+ <div className="conv-log">{ messages }</div>
+ <ConversationTextEntry />
+ </div>;
+ }
+});
+
+var Conversations = React.createClass({
+ render: function() {
+ // TODO: pull data from this.state and provide a method to handle
+ // dispatcher-sent messages
+ var conv_tabs = [ {"active": true, "buddy": "Drew Fisher"},
+ {"active": false, "buddy": "Kate Harrison"},
+ {"active": false, "buddy": "Matt Mullins"}
+ ];
+ var active_pane_messages = [ {"direction": "incoming",
+ "sender": "nobody",
+ "timestamp": "10:41",
+ "text": "this is a test message"
+ } ];
+ return <div className="conversations">
+ <ConversationTabBar tabs={conv_tabs} />
+ <ConversationTabContent messages={active_pane_messages} />
+ </div>;
+ }
+});
+
+var ReactContainer = React.createClass({
+ render: function() {
+ return <div id="react-container">
+ <LoginForm ref="login_form" />
+ <Conversations ref="conversations" />
+ <BuddyList ref="buddy_list" />
+ </div>;
+ }
+});
+
// integration for now:
window.widgets = {
"List": List,
"ListItem": ListItem,
"BuddyListItem": BuddyListItem,
"LoginForm": LoginForm,
- "BuddyList": BuddyList
+ "BuddyList": BuddyList,
+ "Conversations": Conversations,
+ "ReactContainer": ReactContainer
};
projects / imoo.git / commitdiff