Updates and prompt example

components/ActionButton.react.js

@@ -17,8 +17,9 @@ Component = React.createClass({
 
 	getInitialProps: function () {
 		return {
-			onClick: function () {},
-			className: 'btn'
+			onClick   : function () {},
+			className : 'btn',
+			url       : null
 		};
 	},
 
@@ -27,7 +28,19 @@ Component = React.createClass({
 	},
 
 	render: function () {
-		var className = this.props.className;
+		var className = this.props.className, url = false;
+
+		if (this.props.url) {
+			if (this.props.url !== '#') {
+				url = true;
+			}
+
+			if (!url) {
+				return (<a target="_blank" className={className}>{this.props.children}</a>);
+			}
+
+			return (<a href={this.props.url} target="_blank" className={className}>{this.props.children}</a>);
+		}
 
 		return (
 			<button onClick={this.handleClick} className={className}>

components/Footer.react.js

@@ -15,22 +15,23 @@ ButtonsSpace = React.createClass({
 
 	getInitialProps: function () {
 		return {
-			buttons: null,
-			className: null,
-			onOk: null,
-			onClose: null,
-			buttonClick: null,
-			btnClass: null
+			buttons     : null,
+			className   : null,
+			onOk        : null,
+			onClose     : null,
+			buttonClick : null,
+			btnClass    : null,
+			href        : null
 		};
 	},
 
-	_onOk: function () {
+	onOk: function () {
 		if (this.props.onOk) {
 			return this.props.onOk();
 		}
 	},
 
-	_onClose: function () {
+	onClose: function () {
 		if (this.props.onClose) {
 			return this.props.onClose();
 		}
@@ -42,7 +43,7 @@ ButtonsSpace = React.createClass({
 		}
 	},
 
-	_wildClass: function (className, base) {
+	wildClass: function (className, base) {
 		if (!className) {
 			return null;
 		}
@@ -51,28 +52,36 @@ ButtonsSpace = React.createClass({
 			return className;
 		}
 
-		return base + '--' + className;
+		var finalClass = [],
+		    classNames = className.split(' ');
+
+		classNames.forEach(function (className) {
+			finalClass.push(base + '--' + className);
+		});
+
+		return finalClass.join(' ');
 	},
 
 	render: function () {
 		if (!this.props.buttons) {
 			return null;
 		}
 
-		var i, btns = [], btn, className;
+		var i, btns = [], btn, className, url;
 
 		for (i = 0; i < this.props.buttons.length; i++) {
 			btn = this.props.buttons[i];
+			url = (btn.url) ? btn.url : null;
 
 			if (typeof btn === 'string') {
 				if (btn === 'ok') {
-					btns.push(<ActionButton className={this.props.btnClass + ' ' + this.props.btnClass + '--ok'} key={i} onClick={this._onOk}>{this.props.defaultOk}</ActionButton>);
+					btns.push(<ActionButton className={this.props.btnClass + ' ' + this.props.btnClass + '--ok'} key={i} onClick={this.onOk}>{this.props.defaultOk}</ActionButton>);
 				} else if (btn === 'cancel') {
-					btns.push(<ActionButton className={this.props.btnClass + ' ' + this.props.btnClass + '--cancel'} key={i} onClick={this._onClose}>{this.props.defaultCancel}</ActionButton>);
+					btns.push(<ActionButton className={this.props.btnClass + ' ' + this.props.btnClass + '--cancel'} key={i} onClick={this.onClose}>{this.props.defaultCancel}</ActionButton>);
 				}
 			} else {
-				className = this.props.btnClass + ' ' + this._wildClass(btn.className, this.props.btnClass);
-				btns.push(<ActionButton className={className} key={i} onClick={this.buttonClick.bind(this, btn.action)}>{btn.text}</ActionButton>);
+				className = this.props.btnClass + ' ' + this.wildClass(btn.className, this.props.btnClass);
+				btns.push(<ActionButton className={className} key={i} url={url} onClick={this.buttonClick.bind(this, btn.action)}>{btn.text}</ActionButton>);
 			}
 		}
 

components/Header.react.js

@@ -13,7 +13,7 @@ Component = React.createClass({
 
 	getInitialProps: function () {
 		return {
-			title: null,
+			title:     null,
 			className: null
 		};
 	},

components/Input.react.js

@@ -0,0 +1,49 @@
+/**
+ * @jsx React.DOM
+ */
+
+'use strict';
+
+var React = require('react'),
+    Component;
+
+Component = React.createClass({
+
+	displayName: 'PopupInput',
+
+	getInitialState: function () {
+		return {
+			value: this.props.value
+		};
+	},
+
+	getInitialProps: function () {
+		return {
+			className   : 'input',
+			value       : '',
+			placeholder : '',
+			type        : 'text',
+			onChange    : function () {}
+		};
+	},
+
+	componentDidMount: function () {
+		this.getDOMNode().focus();
+	},
+
+	handleChange: function (event) {
+		this.setState({value: event.target.value});
+		this.props.onChange(event.target.value);
+	},
+
+	render: function () {
+		var className = this.props.className;
+
+		return (
+			<input value={this.state.value} className={className} placeholder={this.props.placeholder} type={this.props.type} onChange={this.handleChange} />
+		);
+	}
+
+});
+
+module.exports = Component;