mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
add gender step draft, formik radio button draft
This commit is contained in:
Ben Wheeler
parent
56ce60fe86
commit
9e2a3eb3e3
2 changed files with 256 additions and 0 deletions
103
src/components/formik-forms/formik-radio-button.jsx
Normal file
103
src/components/formik-forms/formik-radio-button.jsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
const classNames = require('classnames');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
import {Field} from 'formik';
|
||||
|
||||
const FormikInput = require('./formik-input.jsx');
|
||||
|
||||
require('../forms/row.scss');
|
||||
|
||||
const FormikRadioButtonSubComponent = ({
|
||||
buttonValue,
|
||||
className,
|
||||
field,
|
||||
label,
|
||||
...props
|
||||
}) => (
|
||||
<div>
|
||||
<input
|
||||
// className={classNames(
|
||||
// 'select',
|
||||
// className
|
||||
// )}
|
||||
|
||||
className={className}
|
||||
name={field.name}
|
||||
type="radio"
|
||||
value={buttonValue}
|
||||
checked={buttonValue === field.value}
|
||||
onChange={field.onChange}
|
||||
onBlur={field.onBlur}
|
||||
{...props}
|
||||
/>
|
||||
<label htmlFor={buttonValue}>{label}</label>
|
||||
</div>
|
||||
);
|
||||
|
||||
FormikRadioButtonSubComponent.propTypes = {
|
||||
buttonValue: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
field: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
onBlur: PropTypes.function,
|
||||
onChange: PropTypes.function,
|
||||
value: PropTypes.string
|
||||
}),
|
||||
// error: PropTypes.string,
|
||||
// options: PropTypes.arrayOf(PropTypes.shape({
|
||||
// className: PropTypes.string,
|
||||
// disabled: PropTypes.bool,
|
||||
// label: PropTypes.string.isRequired,
|
||||
// value: PropTypes.string.isRequired
|
||||
// })).isRequired,
|
||||
// validationClassName: PropTypes.string,
|
||||
// selected value
|
||||
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
||||
};
|
||||
|
||||
|
||||
const FormikRadioButton = ({
|
||||
buttonValue,
|
||||
className,
|
||||
isOther,
|
||||
...props
|
||||
}) => (
|
||||
<div className="row">
|
||||
<div className="col-sm-9">
|
||||
<Field
|
||||
buttonValue={buttonValue}
|
||||
className={className}
|
||||
component={FormikRadioButtonSubComponent}
|
||||
id="radioOption1"
|
||||
label="Choose this option"
|
||||
{...props}
|
||||
/>
|
||||
{isOther && (
|
||||
<FormikInput
|
||||
className={className}
|
||||
id={"other"}
|
||||
name="other"
|
||||
onFocus={() => {}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
FormikRadioButton.propTypes = {
|
||||
buttonValue: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
// error: PropTypes.string,
|
||||
// options: PropTypes.arrayOf(PropTypes.shape({
|
||||
// className: PropTypes.string,
|
||||
// disabled: PropTypes.bool,
|
||||
// label: PropTypes.string.isRequired,
|
||||
// value: PropTypes.string.isRequired
|
||||
// })).isRequired,
|
||||
// validationClassName: PropTypes.string,
|
||||
// selected value
|
||||
isOther: PropTypes.bool,
|
||||
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
||||
};
|
||||
|
||||
module.exports = FormikRadioButton;
|
||||
153
src/components/join-flow/gender-step.jsx
Normal file
153
src/components/join-flow/gender-step.jsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
const bindAll = require('lodash.bindall');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
import {Formik} from 'formik';
|
||||
const {injectIntl, intlShape} = require('react-intl');
|
||||
|
||||
const FormikRadioButton = require('../../components/formik-forms/formik-radio-button.jsx');
|
||||
const JoinFlowStep = require('./join-flow-step.jsx');
|
||||
|
||||
require('./join-flow-steps.scss');
|
||||
|
||||
class GenderStep extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'handleValidSubmit',
|
||||
'validateForm',
|
||||
'validateSelect'
|
||||
]);
|
||||
}
|
||||
validateSelect (selection) {
|
||||
if (selection === 'null') {
|
||||
return this.props.intl.formatMessage({id: 'form.validationRequired'});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
validateForm () {
|
||||
return {};
|
||||
}
|
||||
handleValidSubmit (formData, formikBag) {
|
||||
formikBag.setSubmitting(false);
|
||||
this.props.onNextStep(formData);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
gender: 'null'
|
||||
}}
|
||||
validate={this.validateForm}
|
||||
validateOnBlur={false}
|
||||
validateOnChange={false}
|
||||
onSubmit={this.handleValidSubmit}
|
||||
>
|
||||
{props => {
|
||||
const {
|
||||
errors,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
values
|
||||
} = props;
|
||||
return (
|
||||
<JoinFlowStep
|
||||
description={this.props.intl.formatMessage({id: 'registration.genderStepDescription'})}
|
||||
headerImgSrc="/images/hoc/getting-started.jpg"
|
||||
title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
|
||||
waiting={isSubmitting}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'col-sm-9',
|
||||
'row',
|
||||
'birthdate-select-row'
|
||||
)}
|
||||
>
|
||||
{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(
|
||||
'join-flow-radio',
|
||||
{fail: errors.birth_month}
|
||||
)}
|
||||
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>
|
||||
</JoinFlowStep>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
GenderStep.propTypes = {
|
||||
intl: intlShape,
|
||||
onNextStep: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = injectIntl(GenderStep);
|
||||
Loading…
Reference in a new issue