fix: fixed various parameterform bugs

jcw780 · Jun 25, 2020 · ae69037 · ae69037
1 parent 968ff60
commit ae69037
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 31 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -81,6 +81,7 @@ body{
 
 .switch-toggle{
   width: 80%! important; 
+  margin-bottom: .5rem! important;
 }
 
 /* Tooltip Styles */

diff --git a/src/components/SettingsBar/SettingsBarInternal.tsx b/src/components/SettingsBar/SettingsBarInternal.tsx
@@ -61,6 +61,13 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
 			['Light', [['lightMin', 'Min'], ['lightMax', 'Max']]],
         ]
     }
+    private defaultFormStyle = {
+        formLabel: {display: "inline-block", marginRight: ".1rem", minWidth:"6rem"},
+        formControl: {minWidth: '6rem', maxWidth: '9rem', display: "inline-flex"},
+        inputGroup: {display: "inline-flex"},
+        inputGroupAppend: {display: "inline-block"},
+        formGroup: {display: "block ruby", marginBottom: ".5rem" },
+    }
     //Graphs
     private handleGraphChange = (value: string, id: string) => {
         var numValue : number | undefined;
@@ -69,15 +76,15 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
         this.props.settings.distance[id] = numValue; 
     }
     private generateGraphForm = () => {
-        const rangeAxisFormStyle = {formLabel: {paddingTop: 0, paddingBottom: 0}, formGroup: {marginBottom: ".5rem"}};
         return this.forms.graphs.distance.map((value, i) => {
             return(
                 <ParameterForm 
                 controlId={value[0]} key={i} type="number" 
                 handleValueChange={this.handleGraphChange} 
                 newValue={String(this.props.settings.distance[value[0]])} 
                 append="m" 
-                labelWidth={3} style={rangeAxisFormStyle} ariaLabel={value[1]}>
+                labelWidth={3} ariaLabel={value[1]}
+                style={this.defaultFormStyle}>
                     {value[1]}
                 </ParameterForm>
             );
@@ -92,18 +99,22 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
     }
     private generateLaunchAngleForm = () => {
         const forms = this.forms, calculationSettings = this.props.settings.calculationSettings;
-        return forms.calculations.launchAngle.map((value, i) => {
+        const run = () : JSX.Element[] => {return forms.calculations.launchAngle.map((value, i) => {
             const initialValue = calculationSettings.launchAngle[value[0]];
             return(
+
                 <ParameterForm 
                 controlId={value[0]} key={i} type="number" 
                 newValue={String(initialValue)} 
                 handleValueChange={this.handleCalculationChange} 
-                labelWidth={3} append={value[2]} ariaLabel={value[1]}>
-                    {value[1]}
-                </ParameterForm>
+                labelWidth={3} append={value[2]} ariaLabel={value[1]}
+                style={this.defaultFormStyle}>{value[1]}</ParameterForm>
+
             );
-        });
+        })}
+        return(
+            <>{run()}</>
+        )
     }
     private handleNumericalMethodChange = (value: string, id: string) : void | string => {
         const calculationSettings = this.props.settings.calculationSettings;
@@ -121,7 +132,7 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
             const initialValue = calculationSettings[value[0]];
             return(
                 <ParameterForm newValue={String(initialValue)} controlId={value[0]} key={i} ariaLabel={value[1]}
-                type="number" handleValueChange={this.handleNumericalMethodChange} labelWidth={3} append={value[2]}>
+                type="number" handleValueChange={this.handleNumericalMethodChange} labelWidth={3} append={value[2]} style={this.defaultFormStyle}>
                     {value[1]}
                 </ParameterForm>
             );
@@ -229,8 +240,8 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
                             controlId="rounding" ariaLabel="Tooltip Rounding" type="number" 
                             newValue={String(format.rounding)}
                             handleValueChange={this.handleRoundingChange} 
-                            labelWidth={3} append="dp">
-                            Tooltip Rounding
+                            labelWidth={3} append="dp" style={this.defaultFormStyle}>
+                            Rounding
                         </ParameterForm>
                         <hr/><h4>Color Generation</h4>
                         {this.generateColorForms()}

diff --git a/src/components/UtilityComponents/ParameterForm.tsx b/src/components/UtilityComponents/ParameterForm.tsx
@@ -19,12 +19,6 @@ export class ParameterForm extends React.Component<parameterFormProps, parameter
 	constructor(props){
         super(props);
 		this.state = {value: this.props.newValue || '', invalid: false};
-		const makeAppend = () => {
-			if(this.props.append !== ""){
-				return (<InputGroup.Text id="addon">{this.props.append}</InputGroup.Text>);
-			}else{return (<></>);}
-		};
-		this.appendText = makeAppend();
 	}
 	handleChange = (event) => {
         const errorCode = this.props.handleValueChange(event.target.value, this.props.controlId);
@@ -33,23 +27,43 @@ export class ParameterForm extends React.Component<parameterFormProps, parameter
     }
 	updateValue = (newValue) => {
 		this.setState((state) => {return {value: newValue, invalid: false};});
-    }
+	}
+	private makeAppend = () => {
+		if(this.props.append !== ""){
+			return (<InputGroup.Text id="addon">{this.props.append}</InputGroup.Text>);
+		}else{return false;}
+	};
 	render(){
 		const props = this.props, state = this.state, style = props.style;
-		return (
-<Form.Group className="form-inline" style={style.formGroup}>
-	<Form.Label column sm={props.labelWidth} style={style.formLabel}>{props.children}</Form.Label>
-	<InputGroup style={props.style.inputGroup}>
-		<Form.Control type={props.type} value={state.value} 
-		style={style.formControl} isInvalid={state.invalid}
-		placeholder={props.placeholder} onChange={this.handleChange}
-		aria-describedby="addon" aria-label={props.ariaLabel}/>
-		<InputGroup.Append style={style.inputGroupAppend}>
-			{this.appendText}
-		</InputGroup.Append>
-	</InputGroup>
-</Form.Group>
-		);
+		const appendText = this.makeAppend();
+		if(appendText !== false){
+			return (
+	<Form.Group className="form-inline" style={style.formGroup}>
+		<Form.Label column sm={props.labelWidth} style={style.formLabel}>{props.children}</Form.Label>
+		<InputGroup style={props.style.inputGroup}>
+			<Form.Control type={props.type} value={state.value} 
+			style={style.formControl} isInvalid={state.invalid}
+			placeholder={props.placeholder} onChange={this.handleChange}
+			aria-describedby="addon" aria-label={props.ariaLabel}/>
+			<InputGroup.Append style={style.inputGroupAppend}>
+				{appendText}
+			</InputGroup.Append>
+		</InputGroup>
+	</Form.Group>
+			);
+		}else{
+			return (
+	<Form.Group className="form-inline" style={style.formGroup}>
+		<Form.Label column sm={props.labelWidth} style={style.formLabel}>{props.children}</Form.Label>
+
+			<Form.Control type={props.type} value={state.value} 
+			style={style.formControl} isInvalid={state.invalid}
+			placeholder={props.placeholder} onChange={this.handleChange}
+			aria-describedby="addon" aria-label={props.ariaLabel}/>
+
+	</Form.Group>
+			);
+		}
 
 	}
 }