commit 10b5deadd432cea70911acab2f33670ead661d13
parent c0b5f7a862ff3ef499a73b725cfd3d7b346c7874
Author: therealFIGBERT <figbertwelner@gmail.com>
Date: Thu, 5 Dec 2019 19:54:44 -0800
Organize functions and props in the highLevel js files
Lines sorted with atom's sort-lines. lowLevel functions and props will
be sorted by the next commit.
Diffstat:
6 files changed, 185 insertions(+), 178 deletions(-)
diff --git a/src/components/highLevel/angSize.js b/src/components/highLevel/angSize.js
@@ -15,11 +15,71 @@ export class AngSizeCalc extends React.Component {
dVal: '',
dTruth: false
};
- this.onChange = this.onChange.bind(this);
- this.onClick = this.onClick.bind(this);
this.calcAngle = this.calcAngle.bind(this);
- this.calcSize = this.calcSize.bind(this);
this.calcDistance = this.calcDistance.bind(this);
+ this.calcSize = this.calcSize.bind(this);
+ this.onChange = this.onChange.bind(this);
+ this.onClick = this.onClick.bind(this);
+ }
+
+ calcAngle() {
+ const size = Number(this.state.rVal),
+ distance = Number(this.state.dVal),
+ angle = (180 * size) / (3.14 * distance),
+ message = '⍺ = ' + angle;
+ this.setState({
+ output: message
+ });
+ }
+
+ calcDistance() {
+ const size = Number(this.state.rVal),
+ angle = Number(this.state.aVal),
+ distance = (180 * size) / (3.14 * angle),
+ message = 'd = ' + distance;
+ this.setState({
+ output: message
+ });
+ }
+
+ calcSize() {
+ const angle = Number(this.state.aVal),
+ distance = Number(this.state.dVal),
+ size = (angle * 3.14 * distance) / 180,
+ message = 'r = ' + size;
+ this.setState({
+ output: message
+ });
+ }
+
+ onChange(object) {
+ const value = object.target.value,
+ name = object.target.name;
+ if (name === '⍺') {
+ this.setState({ aVal: value }, () => {
+ if (this.state.rTruth) {
+ this.calcDistance()
+ } else if (this.state.dTruth) {
+ this.calcSize()
+ }
+ });
+ } else if (name === 'r') {
+ this.setState({ rVal: value }, () => {
+ if (this.state.aTruth) {
+ this.calcDistance()
+ } else if (this.state.dTruth) {
+ this.calcAngle()
+ }
+ });
+ } else if (name === 'd') {
+ this.setState({ dVal: value }, () => {
+ if (this.state.aTruth) {
+ this.calcSize()
+ } else if (this.state.rTruth) {
+ this.calcAngle()
+ }
+ });
+ }
}
onClick(object) {
@@ -69,80 +129,20 @@ export class AngSizeCalc extends React.Component {
}
}
- onChange(object) {
- const value = object.target.value,
- name = object.target.name;
- if (name === '⍺') {
- this.setState({ aVal: value }, () => {
- if (this.state.rTruth) {
- this.calcDistance()
- } else if (this.state.dTruth) {
- this.calcSize()
- }
- });
- } else if (name === 'r') {
- this.setState({ rVal: value }, () => {
- if (this.state.aTruth) {
- this.calcDistance()
- } else if (this.state.dTruth) {
- this.calcAngle()
- }
- });
- } else if (name === 'd') {
- this.setState({ dVal: value }, () => {
- if (this.state.aTruth) {
- this.calcSize()
- } else if (this.state.rTruth) {
- this.calcAngle()
- }
- });
- }
- }
-
- calcDistance() {
- const size = Number(this.state.rVal),
- angle = Number(this.state.aVal),
- distance = (180 * size) / (3.14 * angle),
- message = 'd = ' + distance;
- this.setState({
- output: message
- });
- }
-
- calcSize() {
- const angle = Number(this.state.aVal),
- distance = Number(this.state.dVal),
- size = (angle * 3.14 * distance) / 180,
- message = 'r = ' + size;
- this.setState({
- output: message
- });
- }
-
- calcAngle() {
- const size = Number(this.state.rVal),
- distance = Number(this.state.dVal),
- angle = (180 * size) / (3.14 * distance),
- message = '⍺ = ' + angle;
- this.setState({
- output: message
- });
- }
-
render() {
return (
<div>
<CalcOut mode={this.props.mode} output={this.state.output} />
<Pad
- type={'large'}
- mode={this.props.mode}
buttonValues={['⍺', 'r', 'd', 'select']}
disabledTruths={[this.state.aTruth, this.state.rTruth, this.state.dTruth]}
displayValues={['⍺', 'r', 'd', '…']}
- textValues={[this.state.aVal, this.state.rVal, this.state.dVal]}
- onClick={this.onClick}
+ mode={this.props.mode}
onChange={this.onChange}
+ onClick={this.onClick}
onModeClick={this.props.onModeChange}
+ textValues={[this.state.aVal, this.state.rVal, this.state.dVal]}
+ type={'large'}
/>
</div>
);
@@ -152,4 +152,4 @@ export class AngSizeCalc extends React.Component {
AngSizeCalc.propTypes = {
mode: PropTypes.string.isRequired,
onModeChange: PropTypes.func.isRequired
-};
-\ No newline at end of file
+};
diff --git a/src/components/highLevel/consecNum.js b/src/components/highLevel/consecNum.js
@@ -118,14 +118,14 @@ export class ConsecNumCalc extends React.Component {
<div>
<CalcOut mode={this.props.mode} output={this.state.output} />
<Pad
- type={'large'}
- mode={this.props.mode}
buttonValues={['amount', 'sum', 'type', 'select']}
displayValues={['Amount', 'Sum', this.state.type, '…']}
- textValues={[this.state.amount, this.state.sum]}
- onClick={this.onTypeClick}
+ mode={this.props.mode}
onChange={this.onChange}
+ onClick={this.onTypeClick}
onModeClick={this.props.onModeChange}
+ textValues={[this.state.amount, this.state.sum]}
+ type={'large'}
/>
</div>
);
@@ -134,4 +134,4 @@ export class ConsecNumCalc extends React.Component {
ConsecNumCalc.propTypes = {
mode: PropTypes.string.isRequired,
onModeChange: PropTypes.func.isRequired
-};
-\ No newline at end of file
+};
diff --git a/src/components/highLevel/modeSelect.js b/src/components/highLevel/modeSelect.js
@@ -3,8 +3,20 @@ import PropTypes from 'prop-types';
import { CalcOut } from "../lowLevel/calcOut";
import { Pad } from "../lowLevel/pad";
-const values = ['basic', 'angSize', 'consecNum', 'simultaneousEQ', 'polyAng'],
- displayValues = ['Simple Calculator', 'Angular/Real Size', 'Consecutive Number', 'Simultaneous Equations', 'Polygon Angles'];
+const values = [
+ 'basic',
+ 'angSize',
+ 'consecNum',
+ 'simultaneousEQ',
+ 'polyAng'
+ ],
+ displayValues = [
+ 'Simple Calculator',
+ 'Angular/Real Size',
+ 'Consecutive Number',
+ 'Simultaneous Equations',
+ 'Polygon Angles'
+ ];
export class ModeSelect extends React.Component {
render() {
@@ -12,12 +24,12 @@ export class ModeSelect extends React.Component {
<div>
<CalcOut mode={this.props.mode} />
<Pad
- type={'large'}
- mode={this.props.mode}
buttonValues={values}
displayValues={displayValues}
+ mode={this.props.mode}
onClick={this.props.onButtonPress}
style={{alignContent: 'center'}}
+ type={'large'}
/>
</div>
);
@@ -25,4 +37,4 @@ export class ModeSelect extends React.Component {
}
ModeSelect.propTypes = {
mode: PropTypes.string.isRequired
-};
-\ No newline at end of file
+};
diff --git a/src/components/highLevel/polygonAngle.js b/src/components/highLevel/polygonAngle.js
@@ -11,9 +11,37 @@ export class PolygonAngle extends React.Component {
sides: '',
type: 'Regular'
};
- this.onTypeClick = this.onTypeClick.bind(this);
- this.onChange = this.onChange.bind(this);
this.calcAngles = this.calcAngles.bind(this);
+ this.onChange = this.onChange.bind(this);
+ this.onTypeClick = this.onTypeClick.bind(this);
+ }
+
+ calcAngles() {
+ const sides = Math.round(Number(this.state.sides));
+ if (sides < 3) {
+ this.setState({
+ output: 'ERROR'
+ });
+ } else {
+ const totalInterior = (sides - 2) * 180;
+ if (this.state.type === 'Regular') {
+ let eachInterior = totalInterior / sides,
+ eachExterior = 360 / sides;
+ if (eachInterior % 1 !== 0) {
+ eachInterior = '~' + Math.round(eachInterior);
+ }
+ if (eachExterior % 1 !== 0) {
+ eachExterior = '~' + Math.round(eachExterior);
+ }
+ this.setState({
+ output: ['Total Interior: ' + totalInterior + '°', 'Each Interior: ' + eachInterior + '°', 'Each Exterior: ' + eachExterior + '°']
+ })
+ } else {
+ this.setState({
+ output: 'Total Interior: ' + totalInterior + '°'
+ })
+ }
+ }
}
onChange(object) {
@@ -45,47 +73,19 @@ export class PolygonAngle extends React.Component {
}
}
- calcAngles() {
- const sides = Math.round(Number(this.state.sides));
- if (sides < 3) {
- this.setState({
- output: 'ERROR'
- });
- } else {
- const totalInterior = (sides - 2) * 180;
- if (this.state.type === 'Regular') {
- let eachInterior = totalInterior / sides,
- eachExterior = 360 / sides;
- if (eachInterior % 1 !== 0) {
- eachInterior = '~' + Math.round(eachInterior);
- }
- if (eachExterior % 1 !== 0) {
- eachExterior = '~' + Math.round(eachExterior);
- }
- this.setState({
- output: ['Total Interior: ' + totalInterior + '°', 'Each Interior: ' + eachInterior + '°', 'Each Exterior: ' + eachExterior + '°']
- })
- } else {
- this.setState({
- output: 'Total Interior: ' + totalInterior + '°'
- })
- }
- }
- }
-
render() {
return (
<div>
<CalcOut mode={this.props.mode} output={this.state.output} />
<Pad
- type={'large'}
- mode={this.props.mode}
buttonValues={['type', 'sides', 'select']}
displayValues={[this.state.type, '# of sides', '…']}
- textValues={[this.state.sides]}
- onClick={this.onTypeClick}
+ mode={this.props.mode}
onChange={this.onChange}
+ onClick={this.onTypeClick}
onModeClick={this.props.onModeChange}
+ textValues={[this.state.sides]}
+ type={'large'}
/>
</div>
);
@@ -94,4 +94,4 @@ export class PolygonAngle extends React.Component {
PolygonAngle.propTypes = {
mode: PropTypes.string.isRequired,
onModeChange: PropTypes.func.isRequired
-};
-\ No newline at end of file
+};
diff --git a/src/components/highLevel/simpleCalc.js b/src/components/highLevel/simpleCalc.js
@@ -19,30 +19,11 @@ export class SimpleCalc extends React.Component {
input: '',
justSolved: false
};
- this.onButtonPress = this.onButtonPress.bind(this);
this.addDigit = this.addDigit.bind(this);
- this.equate = this.equate.bind(this);
- this.delete = this.delete.bind(this);
this.clear = this.clear.bind(this);
- }
-
- onButtonPress(object) {
- let value = object.target.value;
- switch (value) {
- case 'AC':
- this.clear();
- break;
- case 'DEL':
- this.delete();
- break;
- case '=':
- this.equate();
- break;
- case undefined:
- break;
- default:
- this.addDigit(value);
- }
+ this.delete = this.delete.bind(this);
+ this.equate = this.equate.bind(this);
+ this.onButtonPress = this.onButtonPress.bind(this);
}
addDigit(buttonVal) {
@@ -73,16 +54,16 @@ export class SimpleCalc extends React.Component {
});
}
- delete() {
+ clear() {
this.setState({
- input: this.state.input.slice(0,-1)
+ output: 0,
+ input: ''
});
}
- clear() {
+ delete() {
this.setState({
- output: 0,
- input: ''
+ input: this.state.input.slice(0,-1)
});
}
@@ -106,6 +87,25 @@ export class SimpleCalc extends React.Component {
}
}
+ onButtonPress(object) {
+ let value = object.target.value;
+ switch (value) {
+ case 'AC':
+ this.clear();
+ break;
+ case 'DEL':
+ this.delete();
+ break;
+ case '=':
+ this.equate();
+ break;
+ case undefined:
+ break;
+ default:
+ this.addDigit(value);
+ }
+ }
+
render() {
return (
<div>
@@ -115,10 +115,10 @@ export class SimpleCalc extends React.Component {
input={this.state.input}
/>
<Pad
- type={'small'}
buttonValues={buttonValues}
onClick={this.onButtonPress}
onModeClick={this.props.onModeChange}
+ type={'small'}
/>
</div>
);
@@ -127,4 +127,4 @@ export class SimpleCalc extends React.Component {
SimpleCalc.propTypes = {
mode: PropTypes.string.isRequired,
onModeChange: PropTypes.func
-};
-\ No newline at end of file
+};
diff --git a/src/components/highLevel/simultaneousEquation.js b/src/components/highLevel/simultaneousEquation.js
@@ -15,35 +15,8 @@ export class SimultaneousEquation extends React.Component {
};
this.checkSolve = this.checkSolve.bind(this);
this.modifyMatrix = this.modifyMatrix.bind(this);
- this.solveMatrix = this.solveMatrix.bind(this);
this.onChange = this.onChange.bind(this);
- }
-
- onChange(object) {
- let name = object.target.name,
- i, k;
- const value = object.target.value;
- if (name.indexOf('c') > -1) {
- name = name.substr(1);
- i = Number(name.split('_')[0]);
- k = Number(name.split('_')[1]);
- this.setState({
- coefficients: update(this.state.coefficients, {[i]: {[k]: {$set: value}}})
- }, () => {
- this.checkSolve()
- });
- } else if (name.indexOf('s') > -1) {
- i = Number(name.substr(1));
- this.setState({
- sums: update(this.state.sums, {[i]: {$set: value}})
- }, () => {
- this.checkSolve()
- });
- } else {
- this.setState({
- output: 'ERROR'
- });
- }
+ this.solveMatrix = this.solveMatrix.bind(this);
}
checkSolve() {
@@ -105,6 +78,33 @@ export class SimultaneousEquation extends React.Component {
});
}
+ onChange(object) {
+ let name = object.target.name,
+ i, k;
+ const value = object.target.value;
+ if (name.indexOf('c') > -1) {
+ name = name.substr(1);
+ i = Number(name.split('_')[0]);
+ k = Number(name.split('_')[1]);
+ this.setState({
+ coefficients: update(this.state.coefficients, {[i]: {[k]: {$set: value}}})
+ }, () => {
+ this.checkSolve()
+ });
+ } else if (name.indexOf('s') > -1) {
+ i = Number(name.substr(1));
+ this.setState({
+ sums: update(this.state.sums, {[i]: {$set: value}})
+ }, () => {
+ this.checkSolve()
+ });
+ } else {
+ this.setState({
+ output: 'ERROR'
+ });
+ }
+ }
+
solveMatrix(equations, sums) {
let abs = Math.abs;
function array_fill(i, n, v) {
@@ -188,13 +188,13 @@ export class SimultaneousEquation extends React.Component {
<div>
<CalcOut mode={this.props.mode} output={this.state.output} />
<Pad
- type={'large'}
- mode={this.props.mode}
buttonValues={['range', [this.state.coefficients, this.state.sums], 'select']}
displayValues={[this.state.dimension, undefined, '…']}
- onClick={this.modifyMatrix}
+ mode={this.props.mode}
onChange={this.onChange}
+ onClick={this.modifyMatrix}
onModeClick={this.props.onModeChange}
+ type={'large'}
/>
</div>
);
