so much progress

client/splatsheet/sheetRenderer/parts/textInput/textInput.jsx

@@ -2,42 +2,41 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var utils = require('../utils');
+
 var TextInput = React.createClass({
 	getDefaultProps: function() {
 		return {
-			data : {},
-			defaultValue : '',
-			onChange : function(){},
+			name : 'text',
+			defaultData : '',
 
-
-			id : 'textInput',
+			id : '',
 			label : '',
-
 		};
 	},
 
-	id : function(){
-		return _.snakeCase(this.props.label) || this.props.id;
-	},
-	data : function(){
-		return this.props.data[this.id()] || this.props.defaultValue;
-	},
+	id : utils.id,
+	data : utils.data,
+	updateData : utils.updateData,
 
 	handleChange : function(e){
-		this.props.onChange({
-			[this.id()] : e.target.value
-		});
+		this.updateData(e.target.value);
 	},
 
 	renderLabel : function(){
-		if(!this.props.label) return;
-		return <label htmlFor={this.id()}>{this.props.label}</label>
+		if(this.props.label) return <label htmlFor={this.id()}>{this.props.label}</label>
 	},
 
 	render : function(){
 		return <div className='textInput'>
 			{this.renderLabel()}
-			<input id={this.id()} type='text' onChange={this.handleChange} value={this.data()} />
+			<input
+				id={this.id()}
+				type='text'
+				onChange={this.handleChange}
+				value={this.data()}
+				placeholder={this.props.placeholder}
+			/>
 		</div>
 	}
 });