index.js (6190B)
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import styles from './styles.module.css'; 4 5 export class LargeButton extends React.Component { 6 render() { 7 const acceptsInput = this.props.mode !== 'select', 8 equationFormat = this.props.mode === 'simultaneousEQ', 9 canBeDisabled = this.props.mode === 'angSize'; 10 if (this.props.value === 'select') { 11 return ( 12 <button 13 type='button' 14 className={styles.columnButton} 15 value={this.props.value} 16 onClick={this.props.onModeClick} 17 > 18 {this.props.displayValue} 19 </button> 20 ); 21 } else if (this.props.value === 'type') { 22 return ( 23 <button 24 type='button' 25 className={styles.columnButton} 26 value={this.props.value} 27 onClick={this.props.onClick} 28 > 29 {this.props.displayValue} 30 </button> 31 ); 32 } else if (this.props.value === 'range') { 33 return ( 34 <div className={styles.rowButton}> 35 <button 36 type='button' 37 className={styles.transparentButton} 38 value='raise' 39 onClick={this.props.onClick} 40 > 41 + 42 </button> 43 {this.props.displayValue} 44 <button 45 type='button' 46 className={styles.transparentButton} 47 value='lower' 48 onClick={this.props.onClick} 49 > 50 - 51 </button> 52 </div> 53 ); 54 } 55 if (canBeDisabled) { 56 if (!this.props.disabledTruth) { 57 return ( 58 <button className={styles.disabled} value={this.props.value} onClick={this.props.onClick}> 59 {this.props.displayValue} = 60 <input 61 type='number' 62 name={this.props.displayValue} 63 value='' 64 onChange={this.props.onChange} 65 disabled 66 /> 67 </button> 68 ); 69 } else { 70 return ( 71 <button className={styles.columnButton} value={this.props.value} onClick={this.props.onClick}> 72 {this.props.displayValue} = 73 <input 74 type='number' 75 name={this.props.displayValue} 76 value={this.props.textValue} 77 onChange={this.props.onChange} 78 /> 79 </button> 80 ); 81 } 82 } else if (equationFormat) { 83 const alphabet = (function(charA, charZ) { 84 let a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0); 85 for (; i <= j; ++i) { 86 a.push(String.fromCharCode(i)); 87 } 88 return a; 89 }('a', 'z')); 90 let coefficients = this.props.value[0], 91 sums = this.props.value[1], 92 buttons = []; 93 for (let i = 0; i < coefficients.length; i++) { 94 let eq = []; 95 for (let k = 0; k < coefficients[i].length; k++) { 96 const name = 'c' + i + '_' + k; 97 eq.push( 98 <div> 99 <input 100 type='number' 101 className={styles.smallInput} 102 name={name} 103 value={coefficients[i][k]} 104 onChange={this.props.onChange} 105 /> 106 {alphabet[k]} 107 </div> 108 ); 109 if (k + 1 !== coefficients[i].length) { eq.push('+') } 110 } 111 eq.push( 112 '=', 113 <input 114 type='number' 115 className={styles.smallInput} 116 name={'s' + i} 117 value={sums[i]} 118 onChange={this.props.onChange} 119 /> 120 ); 121 buttons.push( 122 <div className={styles.rowButton}> 123 {eq} 124 </div> 125 ) 126 } 127 return ( 128 <div> 129 {buttons} 130 </div> 131 ); 132 } else if (acceptsInput) { 133 return ( 134 <div className={styles.columnButton}> 135 {this.props.displayValue} = 136 <input 137 type='number' 138 name={this.props.displayValue} 139 value={this.props.textValue} 140 onChange={this.props.onChange} 141 /> 142 </div> 143 ); 144 } else { 145 return ( 146 <button 147 type='button' 148 className={styles.columnButton} 149 value={this.props.value} 150 onClick={this.props.onClick} 151 > 152 {this.props.displayValue} 153 </button> 154 ); 155 } 156 } 157 } 158 159 LargeButton.propTypes = { 160 disabledTruth: PropTypes.bool, 161 displayValue: PropTypes.oneOfType([ 162 PropTypes.string, 163 PropTypes.number 164 ]), 165 mode: PropTypes.string.isRequired, 166 onChange: PropTypes.func, 167 onClick: PropTypes.func, 168 onModeClick: PropTypes.func, 169 textValue: PropTypes.string, 170 value: PropTypes.oneOfType([ 171 PropTypes.string, 172 PropTypes.array 173 ]) 174 };