angSize.js (4947B)
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import { CalcOut } from "../lowLevel/calcOut"; 4 import { Pad } from "../lowLevel/pad"; 5 6 export class AngSizeCalc extends React.Component { 7 constructor(props) { 8 super(props); 9 this.state = { 10 output: '', 11 aVal: '', 12 aTruth: false, 13 rVal: '', 14 rTruth: false, 15 dVal: '', 16 dTruth: false 17 }; 18 this.calcAngle = this.calcAngle.bind(this); 19 this.calcDistance = this.calcDistance.bind(this); 20 this.calcSize = this.calcSize.bind(this); 21 this.onChange = this.onChange.bind(this); 22 this.onClick = this.onClick.bind(this); 23 } 24 25 calcAngle() { 26 const size = Number(this.state.rVal), 27 distance = Number(this.state.dVal), 28 angle = (180 * size) / (3.14 * distance), 29 message = '⍺ = ' + angle; 30 this.setState({ 31 output: message 32 }); 33 } 34 35 calcDistance() { 36 const size = Number(this.state.rVal), 37 angle = Number(this.state.aVal), 38 distance = (180 * size) / (3.14 * angle), 39 message = 'd = ' + distance; 40 this.setState({ 41 output: message 42 }); 43 } 44 45 calcSize() { 46 const angle = Number(this.state.aVal), 47 distance = Number(this.state.dVal), 48 size = (angle * 3.14 * distance) / 180, 49 message = 'r = ' + size; 50 this.setState({ 51 output: message 52 }); 53 } 54 55 onChange(object) { 56 const value = object.target.value, 57 name = object.target.name; 58 if (name === '⍺') { 59 this.setState({ aVal: value }, () => { 60 if (this.state.rTruth) { 61 this.calcDistance() 62 } else if (this.state.dTruth) { 63 this.calcSize() 64 } 65 }); 66 } else if (name === 'r') { 67 this.setState({ rVal: value }, () => { 68 if (this.state.aTruth) { 69 this.calcDistance() 70 } else if (this.state.dTruth) { 71 this.calcAngle() 72 } 73 }); 74 } else if (name === 'd') { 75 this.setState({ dVal: value }, () => { 76 if (this.state.aTruth) { 77 this.calcSize() 78 } else if (this.state.rTruth) { 79 this.calcAngle() 80 } 81 }); 82 } 83 } 84 85 onClick(object) { 86 const objectID = object.target.value; 87 if (objectID === '⍺') { 88 if (!this.state.aTruth && !(this.state.rTruth && this.state.dTruth)) { 89 this.setState({ 90 aVal: '', 91 aTruth: !this.state.aTruth, 92 output: '' 93 }); 94 } else if (this.state.aTruth) { 95 this.setState({ 96 aVal: '', 97 aTruth: !this.state.aTruth, 98 output: '' 99 }); 100 } 101 } else if (objectID === 'r') { 102 if (!this.state.rTruth && !(this.state.aTruth && this.state.dTruth)) { 103 this.setState({ 104 rVal: '', 105 rTruth: !this.state.rTruth, 106 output: '' 107 }); 108 } else if (this.state.rTruth) { 109 this.setState({ 110 rVal: '', 111 rTruth: !this.state.rTruth, 112 output: '' 113 }); 114 } 115 } else if (objectID === 'd') { 116 if (!this.state.dTruth && !(this.state.aTruth && this.state.rTruth)) { 117 this.setState({ 118 dVal: '', 119 dTruth: !this.state.dTruth, 120 output: '' 121 }); 122 } else if (this.state.dTruth) { 123 this.setState({ 124 dVal: '', 125 dTruth: !this.state.dTruth, 126 output: '' 127 }); 128 } 129 } 130 } 131 132 render() { 133 return ( 134 <div> 135 <CalcOut mode={this.props.mode} output={this.state.output} /> 136 <Pad 137 buttonValues={['⍺', 'r', 'd', 'select']} 138 disabledTruths={[this.state.aTruth, this.state.rTruth, this.state.dTruth]} 139 displayValues={['⍺', 'r', 'd', '…']} 140 mode={this.props.mode} 141 onChange={this.onChange} 142 onClick={this.onClick} 143 onModeClick={this.props.onModeChange} 144 textValues={[this.state.aVal, this.state.rVal, this.state.dVal]} 145 type={'large'} 146 /> 147 </div> 148 ); 149 } 150 } 151 152 AngSizeCalc.propTypes = { 153 mode: PropTypes.string.isRequired, 154 onModeChange: PropTypes.func.isRequired 155 };