scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 23:27:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

add GenderOption component to handle most gender radio options

Browse source
This commit is contained in:
Ben Wheeler 2019-07-26 13:46:37 -04:00
parent 5de681fd68
commit e22a848350
1 changed files with 54 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/components/join-flow/gender-step.jsx
View file

@ -10,6 +10,42 @@ const JoinFlowStep = require('./join-flow-step.jsx');
require('./join-flow-steps.scss');
const GenderOption = ({
label,
onSetFieldValue,
selectedValue,
value
}) => (
<div
className={classNames(
'col-sm-9',
'row',
'row-inline',
'gender-radio-row',
{'gender-radio-row-selected': (selectedValue === value)}
)}
/* eslint-disable react/jsx-no-bind */
onClick={() => onSetFieldValue('gender', value, false)}
/* eslint-enable react/jsx-no-bind */
>
<FormikRadioButton
buttonValue={value}
className={classNames(
'join-flow-radio'
)}
label={label}
name="gender"
/>
</div>
);
GenderOption.propTypes = {
label: PropTypes.string,
onSetFieldValue: PropTypes.function,
selectedValue: PropTypes.string,
value: PropTypes.string
};
class GenderStep extends React.Component {
constructor (props) {
super(props);
@ -58,6 +94,18 @@ class GenderStep extends React.Component {
waiting={isSubmitting}
onSubmit={handleSubmit}
>
<GenderOption
label={this.props.intl.formatMessage({id: 'registration.genderOptionFemale'})}
selectedValue={values.gender}
value="Female"
onSetFieldValue={setFieldValue}
/>
<GenderOption
label={this.props.intl.formatMessage({id: 'registration.genderOptionMale'})}
selectedValue={values.gender}
value="Male"
onSetFieldValue={setFieldValue}
/>
<div
className={classNames(
'col-sm-9',
@ -66,34 +114,6 @@ class GenderStep extends React.Component {
)}
>
{values.gender}
<FormikRadioButton
buttonValue="he"
className={classNames(
'join-flow-radio',
{fail: errors.birth_month}
)}
label="He/him"
name="gender"
/>
<FormikRadioButton
buttonValue="she"
className={classNames(
'join-flow-radio',
{fail: errors.birth_month}
)}
label="She/her"
name="gender"
/>
<FormikRadioButton
buttonValue="other"
className={classNames(
'join-flow-radio',
{fail: errors.birth_month}
)}
label="other"
name="gender"
type="other"
/>
<FormikRadioButton
buttonValue="Prefer not to say"
className={classNames(
@ -103,40 +123,13 @@ class GenderStep extends React.Component {
label="Prefer not to say"
name="gender"
/>
{/*
// <Field
// component={RadioButton}
// name="genderRadioGroup"
// id="radioOption2"
// label="Or choose this one"
// />
// <FormikSelect
// className={classNames(
// 'join-flow-select',
// 'join-flow-select-month',
// {fail: errors.birth_month}
// )}
// error={errors.birth_month}
// id="birth_month"
// name="birth_month"
// options={birthMonthOptions}
// validate={this.validateSelect}
// validationClassName="validation-full-width-input"
// />
// <FormikSelect
// className={classNames(
// 'join-flow-select',
// {fail: errors.birth_year}
// )}
// error={errors.birth_year}
// id="birth_year"
// name="birth_year"
// options={birthYearOptions}
// validate={this.validateSelect}
// validationClassName="validation-full-width-input"
// />
// */}
</div>
<GenderOption
label={this.props.intl.formatMessage({id: 'registration.genderOptionPreferNotToSay'})}
selectedValue={values.gender}
value="Prefer not to say"
onSetFieldValue={setFieldValue}
/>
</JoinFlowStep>
);
}}