Proof of concept working

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.jsx

@@ -0,0 +1,67 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var TextInput = require('../textInput/textInput.jsx');
+
+var Box = require('../box/box.jsx');
+
+var PlayerInfo = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			onChange : function(){},
+
+			id : 'playerInfo',
+		};
+	},
+/*
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+
+	handleChange : function(newData){
+		this.props.onChange({
+			[this.id()] : _.extend(this.data(), newData)
+		});
+	},
+
+	renderChildren : function(){
+		return React.Children.map(this.props.children, (child)=>{
+			return React.cloneElement(child, {
+				onChange : this.handleChange,
+				data : this.data()
+			})
+		})
+	},
+*/
+	render : function(){
+		return <Box className='playerInfo' {...this.props}>
+			<TextInput id='name' label="Name" />
+			<TextInput id='class' label="Class" />
+			<TextInput id='race' label="Race" />
+
+			{this.props.children}
+		</Box>
+	}
+
+	/*{this.props.children}*/
+
+/*
+	render : function(){
+		return <div className='playerInfo'>
+			<TextInput id='name' label="Name" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='class' label="Class" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='race' label="Race" onChange={this.handleChange} data={this.data()} />
+
+			{this.renderChildren()}
+		</div>
+	}
+	*/
+});
+
+module.exports = PlayerInfo;

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.less

@@ -0,0 +1,3 @@
+.playerInfo{
+	margin-bottom: 20px;
+}