Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var CalcNumButton = React.createClass({
- handleClick: function(e) {
- e.preventDefault();
- this.props.onClickButton({clickType: "number", value: this.props.numValue});
- },
- render: function() {
- return (
- <div className="calcButton" >
- <h2 className="calcLabel" onClick={this.handleClick}>
- {this.props.label}
- </h2>
- </div>
- );
- }
- });
- var CalcOpsButton = React.createClass({
- handleClick: function(e) {
- e.preventDefault();
- this.props.onClickButton({clickType: "operation", operation: this.props.operation});
- },
- render: function() {
- return (
- <div className="calcOpsButton" >
- <h2 className="calcLabel" onClick={this.handleClick}>
- {this.props.operation}
- </h2>
- </div>
- );
- }
- });
- var CalcScreen = React.createClass({
- getInitialState: function () {
- return { screenStr: this.props.initScreenStr };
- },
- handleScreenUpdate: function(value) {
- var newState = {};
- newState["screenStr"] = value;
- this.setState(newState);
- },
- render: function() {
- return (
- <div className="calcScreen" >
- <h2 className="calcScreenDisplay" >
- {this.state.screenStr}
- </h2>
- </div>
- );
- }
- });
- var Calculator = React.createClass({
- getInitialState: function () {
- return { screenVal: 0, screenStr: "0", lastInput: 0, pendingOperation: '', pendingScreenReset: false };
- },
- updateScreen: function() {
- var screen = this.refs.screen;
- screen.handleScreenUpdate(this.state.screenStr)
- },
- // Will only be called if the state is valid
- runOperation: function() {
- var newValue = 0;
- switch (this.state.pendingOperation) {
- case "+":
- newValue = this.state.lastInput + this.state.screenVal;
- break;
- case "-":
- newValue = this.state.lastInput - this.state.screenVal;
- break;
- case "*":
- newValue = this.state.lastInput * this.state.screenVal;
- break;
- case "/":
- newValue = this.state.lastInput / this.state.screenVal;
- break;
- }
- this.state.screenVal = newValue;
- this.state.screenStr = String(newValue);
- this.updateScreen();
- },
- handleClickButton: function(clickData) {
- if (typeof(clickData.clickType) !== 'undefined') {
- if (clickData.clickType == "number") {
- if (this.state.screenStr == "0" || (this.state.pendingOperation != '' && this.state.pendingScreenReset)) {
- this.state.screenStr = String(clickData.value);
- this.state.pendingScreenReset = false;
- } else {
- this.state.screenStr = this.state.screenStr + String(clickData.value);
- }
- this.state.screenVal = parseInt(this.state.screenStr);
- this.updateScreen();
- } else if (clickData.clickType == "operation") {
- if (clickData.operation == "C") {
- this.state.lastInput = 0; // UNDEFINED?
- this.state.screenVal = 0;
- this.state.screenStr = "0";
- this.state.pendingOperation = '';
- this.updateScreen();
- } else if (clickData.operation == "="
- && this.state.pendingOperation != '') { // ignore if we dont have an operation in waiting
- // CHECK FOR VALID STATE?
- this.runOperation();
- } else {
- if (this.state.pendingOperation != '') {
- this.runOperation();
- }
- this.state.lastInput = this.state.screenVal;
- this.state.pendingScreenReset = true;
- // WAIT til a num is given like most calculators?
- //this.state.screenVal = 0;
- //this.state.screenStr = "0";
- this.state.pendingOperation = clickData.operation;
- this.updateScreen();
- }
- } else {
- console.log("ERROR bad clickType: " + clickData.clickType);
- }
- } else {
- console.log("ERROR unknown clickType");
- }
- },
- render: function() {
- return (
- <div className="calculator">
- <CalcScreen initScreenStr={this.state.screenStr} ref="screen"/>
- <div className="calcRow">
- <CalcNumButton label='1' numValue={1} onClickButton={this.handleClickButton}/>
- <CalcNumButton label='2' numValue={2} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="3" numValue={3} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="4" numValue={4} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="5" numValue={5} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="6" numValue={6} onClickButton={this.handleClickButton}/>
- </div>
- <div className="calcRow">
- <CalcNumButton label='7' numValue={7} onClickButton={this.handleClickButton}/>
- <CalcNumButton label='8' numValue={8} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="9" numValue={9} onClickButton={this.handleClickButton}/>
- <CalcNumButton label="0" numValue={0} onClickButton={this.handleClickButton}/>
- <div className="buttonGap"></div>
- <CalcOpsButton operation="=" onClickButton={this.handleClickButton}/>
- </div>
- <div className="calcRow">
- <CalcOpsButton operation='+' onClickButton={this.handleClickButton}/>
- <CalcOpsButton operation='-' onClickButton={this.handleClickButton}/>
- <CalcOpsButton operation="*" onClickButton={this.handleClickButton}/>
- <CalcOpsButton operation="/" onClickButton={this.handleClickButton}/>
- <div className="buttonGap"></div>
- <CalcOpsButton operation="C" onClickButton={this.handleClickButton}/>
- </div>
- </div>
- )
- }
- });
- ReactDOM.render(
- <Calculator />,
- document.getElementById('calculatorContainer')
- );
Add Comment
Please, Sign In to add comment