From 33344713d2aa63104f50b3fb231e8e625a463b5a Mon Sep 17 00:00:00 2001 From: knod Date: Sat, 1 Dec 2018 11:26:45 -0500 Subject: [PATCH] Cleans rest of '/src/forms'. #1018 --- src/forms/Predictions.js | 75 +++++++++++++++++---------------- src/forms/STEP_VALS.js | 22 +++++----- src/forms/ShowOnYes.js | 13 +++--- src/forms/inputs.js | 87 ++++++++++++++++++++++---------------- src/forms/rentFields.js | 91 ++++++++++++++++++++++++---------------- src/index.css | 6 +-- 6 files changed, 165 insertions(+), 129 deletions(-) diff --git a/src/forms/Predictions.js b/src/forms/Predictions.js index e0a792c4..68404d61 100644 --- a/src/forms/Predictions.js +++ b/src/forms/Predictions.js @@ -1,5 +1,12 @@ import React from 'react'; -import { Divider, Header, Tab, Message, Button, Menu } from 'semantic-ui-react'; +import { + Divider, + Header, + Tab, + Message, + Button, + Menu, +} from 'semantic-ui-react'; // PROJECT COMPONENTS import { FormPartsContainer } from './FormPartsContainer'; @@ -12,9 +19,7 @@ import { ResourcesColumns } from './output/ResourcesColumns'; import { StackedResources } from './output/StackedResources'; import { BenefitsLines } from './output/BenefitsLines'; -// ======================================== -// COMPONENTS -// ======================================== + /** @todo Cash flow row for trying out different future incomes. * * As per Project Hope's input, for the first prototype @@ -33,30 +38,30 @@ import { BenefitsLines } from './output/BenefitsLines'; */ const IncomeForm = function ({ future, time, updateClientValue, translations }) { - let type = 'income'; + let type = `income`; return ( -
+
+ generic = { `earned` } + labelInfo = { `(Weekly pay = hourly wage times average number of work hours per week)` }> { translations.i_futureIncomeQuestion }
); -}; // End IncomeForm() Component +}; const TabbedVisualizations = ({ client, openFeedback, translations }) => { return ( { return ( + client = { client } + translations = { translations } /> ); }, @@ -102,8 +107,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => { render: () => { return ( );}, @@ -120,8 +125,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => { return ( ); @@ -139,8 +144,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => { return ( ); @@ -148,7 +153,7 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => { }, ] } /> ); -}; +}; // Ends const PredictionsStep = function ({ updateClientValue, navData, client, translations, openFeedback }) { @@ -159,33 +164,33 @@ const PredictionsStep = function ({ updateClientValue, navData, client, translat clarifier = { null } navData = { navData } formClass = { `predictions` }> - {/* `predictionsForm`: This whole div will be outside + {/* `predictions-form`: This whole div will be outside the form in the future and then we'll be able to access its style that way */} -
+
- +
-
+
+ as = { `h3` } + className = { `ui Header align centered` }> { translations.i_chartsHeader }
+ warning + className = { `prediction-message` }> { translations.i_warningMessage } @@ -197,7 +202,7 @@ const PredictionsStep = function ({ updateClientValue, navData, client, translat translations = { translations } /> ); -}; // End FutureIncomeStep() Component +}; // End -export { PredictionsStep }; +export { PredictionsStep }; diff --git a/src/forms/STEP_VALS.js b/src/forms/STEP_VALS.js index 1350a6f6..07d6ed8c 100644 --- a/src/forms/STEP_VALS.js +++ b/src/forms/STEP_VALS.js @@ -7,27 +7,27 @@ import { CurrentBenefitsStep } from './CurrentBenefits'; export const STEP_VALS = [ { component: CurrentBenefitsStep, - key: 'currentBenefits', - time: 'current', + key: `currentBenefits`, + time: `current`, }, { component: HouseholdStep, - key: 'household', - time: 'current', + key: `household`, + time: `current`, }, { component: CurrentIncomeStep, - key: 'currentIncome', - time: 'current', + key: `currentIncome`, + time: `current`, }, { component: CurrentExpensesStep, - key: 'currentExpenses', - time: 'current', + key: `currentExpenses`, + time: `current`, }, { component: PredictionsStep, - key: 'predictions', - time: 'future', + key: `predictions`, + time: `future`, }, -]; // end STEP_VALS +]; // ends STEP_VALS diff --git a/src/forms/ShowOnYes.js b/src/forms/ShowOnYes.js index d25e2c94..592f8567 100644 --- a/src/forms/ShowOnYes.js +++ b/src/forms/ShowOnYes.js @@ -24,7 +24,7 @@ class ShowOnYes extends React.Component { constructor (props) { super(props); this.state = { show: props.showChildrenAtStart || false }; - } + }; handleChange = (evt, inputProps) => { if (inputProps.value === true) { @@ -32,7 +32,6 @@ class ShowOnYes extends React.Component { } else { this.hideChildren(evt); } - }; showChildren = (evnt) => { @@ -52,7 +51,7 @@ class ShowOnYes extends React.Component { // Instead of a header and children, discuss using // a function instead that would return a heading // and contents. - render() { + render () { const { childName, @@ -64,7 +63,7 @@ class ShowOnYes extends React.Component { let show = this.state.show; return ( -
+
{ heading } @@ -72,7 +71,7 @@ class ShowOnYes extends React.Component { @@ -80,8 +79,8 @@ class ShowOnYes extends React.Component {
); - } -} + }; +}; // Ends export { ShowOnYes }; diff --git a/src/forms/inputs.js b/src/forms/inputs.js index d687c959..21ab2d05 100644 --- a/src/forms/inputs.js +++ b/src/forms/inputs.js @@ -45,7 +45,7 @@ const BigButton = function ({ children, className, overrides, ...otherProps }) { return ( ); -}; // End +}; // Ends /** Yes/no toggleable radio button group with a label. @@ -64,46 +64,46 @@ const BigButton = function ({ children, className, overrides, ...otherProps }) { * @returns {object} React element */ class ControlledRadioYesNo extends Component { - constructor(props){ - super(props); - this.state = {}; - } - handleChange = (evnt, inputProps) => { - inputProps.value = inputProps.value === 'Yes'; + inputProps.value = inputProps.value === `Yes`; this.props.onChange(evnt, inputProps); }; - render(){ + render () { + + let { + name, + checked, + labelText, + } = this.props; return ( -
+
+ label = { `Yes` } + name = { name } + value = { `Yes` } + checked = { checked === true } + onChange = { this.handleChange } /> + label = { `No` } + name = { name } + value = { `No` } + checked = { checked === false } + onChange = { this.handleChange } /> - {this.props.labelText} - + { labelText }
); - } -}; // End + }; +}; // Ends // @todo description @@ -124,9 +124,13 @@ class ControlledRadioYesNo extends Component { class ManagedNumberField extends Component { constructor (props) { super(props); - let { format, value } = props; + + let { + format, + value, + } = props; this.state = { valid: true, focused: false, focusedVal: format(value) }; - } // End constructor() + }; //change form to blank string after click, before input handleFocus = (evnt, inputProps) => { @@ -137,9 +141,13 @@ class ManagedNumberField extends Component { } // This makes sure that only zeroes and blanks get reset - let { format, value } = this.props; + let { + format, + value, + } = this.props; + if (!Number.parseFloat(evnt.target.value)) { - this.setState({ focused: true, focusedVal: '' }); + this.setState({ focused: true, focusedVal: `` }); } else { this.setState({ focused: true, focusedVal: format(value) }); } @@ -160,8 +168,13 @@ class ManagedNumberField extends Component { onChange(evnt, inputProps); } - const { displayValidator, storeValidator, store, otherData } = this.props; - const focusedVal = inputProps.value; + const focusedVal = inputProps.value, + { + displayValidator, + storeValidator, + store, + otherData, + } = this.props; // If doesn't pass display validator, don't store and don't change focusedVal if (!displayValidator(inputProps.value)) { @@ -170,19 +183,19 @@ class ManagedNumberField extends Component { if (focusedVal.length === 0) { // If field contains an empty string, set value to be 0 (visible on blur) - inputProps.value = '0'; + inputProps.value = `0`; } - let valid = storeValidator(inputProps.value); + let valid = storeValidator(inputProps.value); if (valid) { store(evnt, inputProps, otherData); } this.setState({ focusedVal: focusedVal, valid: valid }); - }; // End handleChange() + }; // Ends handleChange() - render() { - const { valid, focused, focusedVal } = this.state; - const { name, className, format, otherData } = this.props; + render () { + const { valid, focused, focusedVal } = this.state, + { name, className, format, otherData } = this.props; let value = this.props.value; // @todo Bad var name. Find more useful name for this. @@ -214,9 +227,9 @@ class ManagedNumberField extends Component { aria-labelledby = { name + `Label` } aria-describedby = { name + `Message` } /> ); - } // End render() + } // Ends render() -}; // End +}; // Ends export { diff --git a/src/forms/rentFields.js b/src/forms/rentFields.js index 7538b29f..9c678554 100644 --- a/src/forms/rentFields.js +++ b/src/forms/rentFields.js @@ -1,22 +1,29 @@ import React, { Component } from 'react'; import { MonthlyCashFlowRow } from './cashflow'; -import { isNonNegNumber, hasOnlyNonNegNumberChars } from '../utils/validators'; +import { + isNonNegNumber, + hasOnlyNonNegNumberChars, +} from '../utils/validators'; + + +const BLANK_FUNCTION = function () {}; class RentShareField extends Component { state = { valid: true, message: null }; storeValidator = (ownValue) => { - let message = null, valid = true; + let message = null, + valid = true; let isPosNum = isNonNegNumber(ownValue); if (!isPosNum) { valid = false; } else { - valid = Number(ownValue) <= this.props.timeState[ 'contractRent' ]; + valid = (Number(ownValue) <= this.props.timeState[ `contractRent` ]); if (!valid) { - message = 'Rent share must be less than contract rent'; + message = `Rent share must be less than contract rent`; } } @@ -29,17 +36,23 @@ class RentShareField extends Component { }; render() { - const { timeState, updateClientValue } = this.props, - { valid, message } = this.state; + const { + timeState, + updateClientValue, + } = this.props, + { + valid, + message, + } = this.state; const inputProps = { - name: 'rentShare', + name: `rentShare`, displayValidator: hasOnlyNonNegNumberChars, storeValidator: this.storeValidator, onBlur: this.onBlur, }, rowProps = { - label: 'Your Monthly Rent Share (how much of the total rent you have to pay)', + label: `Your Monthly Rent Share (how much of the total rent you have to pay)`, name: `rentShare`, validRow: valid, message: message, @@ -47,29 +60,30 @@ class RentShareField extends Component { return ( + rowProps = { rowProps } /> ); - } -}; // End + }; +}; // Ends class ContractRentField extends Component { state = { valid: true, message: null }; storeValidator = (ownValue) => { - let message = null, valid = true; + let message = null, + valid = true; let isPosNum = isNonNegNumber(ownValue); if (!isPosNum) { valid = false; } else { - valid = ownValue >= this.props.timeState[ 'rentShare' ]; + valid = (ownValue >= this.props.timeState[ `rentShare` ]); if (!valid) { - message = 'Contract rent must be more than rent share'; + message = `Contract rent must be more than rent share`; } } @@ -82,17 +96,23 @@ class ContractRentField extends Component { }; render() { - const { timeState, updateClientValue } = this.props, - { valid, message } = this.state; + const { + timeState, + updateClientValue, + } = this.props, + { + valid, + message, + } = this.state; const inputProps = { - name: 'contractRent', + name: `contractRent`, displayValidator: hasOnlyNonNegNumberChars, storeValidator: this.storeValidator, onBlur: this.onBlur, }, rowProps = { - label: 'Monthly Contract Rent (the total rent for your apartment)', + label: `Monthly Contract Rent (the total rent for your apartment)`, name: `contractRent`, validRow: valid, message: message, @@ -100,40 +120,39 @@ class ContractRentField extends Component { return ( + rowProps = { rowProps } /> ); - } -}; // End + }; +}; // Ends const PlainRentRow = function ({ timeState, updateClientValue }) { const inputProps = { - name: 'rent', + name: `rent`, displayValidator: hasOnlyNonNegNumberChars, storeValidator: isNonNegNumber, - onBlur: function () {}, + onBlur: BLANK_FUNCTION, }, rowProps = { - label: 'Monthly Rent', + label: `Monthly Rent`, validRow: true, message: null, }; return ( + rowProps = { rowProps } /> ); - -}; // End +}; export { diff --git a/src/index.css b/src/index.css index c9c8f519..6c55409c 100644 --- a/src/index.css +++ b/src/index.css @@ -410,7 +410,7 @@ i.icon.details-icon { /* =============== */ /* PREDICTIONS (manual theme implementation) */ /* =============== */ -#resultsIntro { +#results-intro { margin-bottom: 1em; } @@ -620,8 +620,8 @@ PRINTING STYLES #reset_fixed, #form-nav, #section-bottom, - #predictionsForm, - #resultsIntro, + #predictions-form, + #results-intro, #App .tabular.menu, .print-row { display: none;