/**
* @jsx React.DOM
*/
var SVGResistor = React.createClass({
valueToColour: function(value) {
return this.props.bandOptions[value].color;
},
render: function() {
return (
<svg width={300} height={100} version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x={0} y={26} rx={5} width={300} height={7} fill="#d1d1d1" />
<rect x={50} y={0} rx={15} width={200} height={57} fill="#FDF7EB" />
<rect id="band1" x={70} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[0])} />
<rect id="band2" x={100} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[1])} />
<rect id="band3" x={130} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[2])} />
<rect id="band4" x={160} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[3])} />
<rect id="band5" x={210} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[4])} />
</svg>
);
}
});
var OhmageIndicator = React.createClass({
printResistance: function() {
var resistance = parseFloat(this.props.resistance);
if(resistance > 1000000) {
return(resistance / 1000000).toFixed(1) + "MΩ";
}
else if(resistance > 1000){
return (resistance / 100).toFixed(1) + "KΩ";
} else {
return resistance.toFixed(1) + "Ω";
}
},
render: function() {
return (
<p id="resistorValue">{this.printResistance()}</p>
);
}
});
var ToleranceIndicator = React.createClass({
printTolerance: function() {
return this.props.tolerance === 0 ? "" : "±" + this.props.tolerance + "%";
},
render: function() {
return (
<p id="toleranceValue">{this.printTolerance()}</p>
);
}
});
var BandSelector = React.createClass({
getInitialState: function() {
return {selected: 0};
},
handleChange: function() {
var newValue = this.refs.menu.getDOMNode().value;
this.setState({selected: newValue});
this.props.changeHandler(this.props.band - 1, newValue);
},
render: function(){
var that = this;
var optionNodes = this.props.bandOptions.map(function(option){
if(that.props.omitOptions.indexOf(option.value) === -1)
return <option value={option.value}>{option.label}</option>;
});
return (
<div className="bandOption">
<label>Band {this.props.band}</label>
<select ref="menu" value={this.state.selected} onChange={this.handleChange}>
{optionNodes}
</select>
</div>
);
}
});
var ResistanceCalculator = React.createClass({
calculateResistance: function() {
var resistance = this.getBaseResistance() * this.getMultiplier();
return resistance;
},
calculateTolerance: function() {
return this.bandOptions[this.state.bands[4]].tolerance;
},
getMultiplier: function() {
if(this.state.bands[3] == 10){
return 0.1;
} else if(this.state.bands[3] == 11){
return 0.01;
} else {
return Math.pow(10, this.state.bands[3]);
}
},
getBaseResistance: function() {
return (100 * this.state.bands[0]) + (10 * this.state.bands[1]) + (1 * this.state.bands[2]);
},
bandOptions: [
{value: 0, tolerance: 0, color: "black", label: "None" },
{value: 1, tolerance: 1, color: "brown", label: "Brown"},
{value: 2, tolerance: 2, color: "red", label: "Red"},
{value: 3, color: "orange", label: "Orange"},
{value: 4, color: "yellow", label: "Yellow"},
{value: 5, tolerance: 0.5, color: "green", label: "Green"},
{value: 6, tolerance: 0.25, color: "blue", label: "Blue"},
{value: 7, tolerance: 0.10, color: "violet", label: "Violet"},
{value: 8, tolerance: 0.05, color: "grey", label: "Grey"},
{value: 9, color: "white", label: "White"},
{value: 10, tolerance: 5, color: "#FFD700", label: "Gold"},
{value: 11, tolerance: 10, color: "#C0C0C0", label: "Silver"},
],
updateBandState: function(band, value) {
var state = this.state;
state.bands[band] = value;
state.resistance = this.calculateResistance();
state.tolerance = this.calculateTolerance();
this.setState(state);
},
getInitialState: function() {
return {bands: [0,0,0,0,0], resistance: 0, tolerance: 0};
},
render: function() {
return (
<div>
<OhmageIndicator resistance={this.state.resistance} />
<ToleranceIndicator tolerance={this.state.tolerance} />
<SVGResistor bandOptions={this.bandOptions} bands={this.state.bands} />
<BandSelector bandOptions={this.bandOptions} omitOptions={[10,11]} band={1} changeHandler={this.updateBandState} />
<BandSelector bandOptions={this.bandOptions} omitOptions={[10,11]} band={2} changeHandler={this.updateBandState} />
<BandSelector bandOptions={this.bandOptions} omitOptions={[10,11]} band={3} changeHandler={this.updateBandState} />
<BandSelector bandOptions={this.bandOptions} omitOptions={[8,9]} band={4} changeHandler={this.updateBandState} />
<BandSelector bandOptions={this.bandOptions} omitOptions={[3,4,9]} band={5} changeHandler={this.updateBandState} />
</div>
);
}
});
var calc = React.renderComponent(
<ResistanceCalculator />,
document.getElementById('container')
);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>
#container {
width: 300px;
border: 10px solid #efebe3;
padding: 30px;
background: #9c3;
background: #38342b;
margin: 30px auto;
color: #fff;
border-radius: 0px;
font-family: "Helvetica neue", Helvetica, Arial, sans-serif
}
#resistorValue {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
font-size: 50px;
margin-top: 0px;
}
#toleranceValue {
text-align: center;
margin-top: 0px !important;
font-size: 21px;
}
.bandOption {
text-align: center;
margin: 5px;
}
.bandOption select {
width: 120px;
margin-left: 10px;
}