'Sheet

client/tpk/sheetRenderer/parts/skill/skill.jsx

@@ -0,0 +1,62 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var utils = require('../utils');
+
+var Skill = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : 'skill',
+			defaultData : {
+				prof : false,
+				expert : false,
+				val : ''
+			},
+
+			id : '',
+			label : '',
+			sublabel : '',
+			showExpert : false
+		};
+	},
+
+	id : utils.id,
+	data : utils.data,
+	updateData : utils.updateData,
+
+	handleToggleProf : function(){
+		this.updateData({
+			prof : !this.data().prof
+		})
+	},
+	handleToggleExpert : function(){
+		this.updateData({
+			expert : !this.data().expert
+		})
+	},
+	handleValChange : function(e){
+		console.log('yo');
+		this.updateData({
+			val : e.target.value
+		})
+	},
+	renderExpert : function(){
+		if(this.props.showExpert){
+			return <input type="radio" className='expertToggle' onChange={this.handleToggleExpert} checked={this.data().expert} />
+		}
+	},
+	render : function(){
+		return <div className='skill'>
+			{this.renderExpert()}
+			<input type="radio" className='skillToggle' onChange={this.handleToggleProf} checked={this.data().prof} />
+			<input type='text' onChange={this.handleValChange} value={this.data().val} />
+			<label>
+				{this.props.label}
+				<small>{this.props.sublabel}</small>
+			</label>
+		</div>
+	}
+});
+
+module.exports = Skill;

client/tpk/sheetRenderer/parts/skill/skill.less

@@ -0,0 +1,35 @@
+
+.skill{
+	position     : relative;
+	padding-left : 15px;
+	input[type="radio"]{
+		margin : 0px;
+	}
+	.expertToggle{
+		position : absolute;
+		top      : 1px;
+		left     : 0px;
+	}
+	input[type="text"]{
+		width            : 25px;
+		margin-left      : 10px;
+		background-color : transparent;
+		text-align       : center;
+		border           : none;
+		border-bottom    : 1px solid black;
+		outline          : none;
+		&:focus{
+			background-color : #ddd;
+		}
+	}
+	label{
+		margin-left : 10px;
+		font-size   : 0.8em;
+		small{
+			margin-left    : 5px;
+			font-size      : 0.8em;
+			color          : #999;
+			text-transform : uppercase;
+		}
+	}
+}