changed naming of user-provided radio input from other to custom

This commit is contained in:
Ben Wheeler 2019-07-31 13:25:27 -04:00
parent 8725cee6a1
commit c4d7ba0350
2 changed files with 18 additions and 15 deletions

View file

@ -65,9 +65,9 @@ FormikRadioButtonSubComponent.propTypes = {
const FormikRadioButton = ({
buttonValue,
className,
isOther,
isCustomInput,
label,
onSetOther,
onSetCustom,
...props
}) => (
<Field
@ -76,18 +76,18 @@ const FormikRadioButton = ({
component={FormikRadioButtonSubComponent}
id="radioOption1"
label={label}
labelClassName={isOther ? 'formik-radio-label-other' : ''}
labelClassName={isCustomInput ? 'formik-radio-label-other' : ''}
{...props}
>
{isOther && (
{isCustomInput && (
<FormikInput
className="formik-radio-input"
id="other"
name="other"
wrapperClassName="formik-radio-input-wrapper"
/* eslint-disable react/jsx-no-bind */
onChange={event => onSetOther(event.target.value)}
onFocus={event => onSetOther(event.target.value)}
onChange={event => onSetCustom(event.target.value)}
onFocus={event => onSetCustom(event.target.value)}
/* eslint-enable react/jsx-no-bind */
/>
)}
@ -97,9 +97,9 @@ const FormikRadioButton = ({
FormikRadioButton.propTypes = {
buttonValue: PropTypes.string,
className: PropTypes.string,
isOther: PropTypes.bool,
isCustomInput: PropTypes.bool,
label: PropTypes.string,
onSetOther: PropTypes.func,
onSetCustom: PropTypes.func,
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};

View file

@ -58,7 +58,7 @@ class GenderStep extends React.Component {
if (!formData.gender || formData.gender === 'null') {
formData.gender = 'Prefer not to say';
}
delete formData.other;
delete formData.custom;
this.props.onNextStep(formData);
}
render () {
@ -66,7 +66,7 @@ class GenderStep extends React.Component {
<Formik
initialValues={{
gender: 'null',
other: ''
custom: ''
}}
onSubmit={this.handleValidSubmit}
>
@ -104,22 +104,25 @@ class GenderStep extends React.Component {
'row',
'row-inline',
'gender-radio-row',
{'gender-radio-row-selected': (values.gender === values.other)}
{'gender-radio-row-selected': (values.gender === values.custom)}
)}
/* eslint-disable react/jsx-no-bind */
onClick={() => setFieldValue('gender', values.other, false)}
onClick={() => setFieldValue('gender', values.custom, false)}
/* eslint-enable react/jsx-no-bind */
>
<FormikRadioButton
isOther
buttonValue={values.other}
isCustomInput
buttonValue={values.custom}
className={classNames(
'join-flow-radio'
)}
label={this.props.intl.formatMessage({id: 'registration.genderOptionAnother'})}
name="gender"
/* eslint-disable react/jsx-no-bind */
onSetOther={newOtherVal => setValues({gender: newOtherVal, other: newOtherVal})}
onSetCustom={newCustomVal => setValues({
gender: newCustomVal,
custom: newCustomVal
})}
/* eslint-enable react/jsx-no-bind */
/>
</div>