src/components/Section/History/Education/Diploma.jsx
import React from 'react'
import { i18n } from '../../../../config'
import {
ValidationElement,
DateControl,
Text,
RadioGroup,
Radio,
Field,
Show,
} from '../../../Form'
export default class DiplomaItem extends ValidationElement {
constructor(props) {
super(props)
this.update = this.update.bind(this)
this.updateDiploma = this.updateDiploma.bind(this)
this.updateDiplomaOther = this.updateDiplomaOther.bind(this)
this.updateDate = this.updateDate.bind(this)
}
update(queue) {
this.props.onUpdate({
Diploma: this.props.Diploma,
DiplomaOther: this.props.DiplomaOther,
Date: this.props.Date,
...queue,
})
}
updateDiploma(values) {
this.update({
Diploma: values,
})
}
updateDiplomaOther(values) {
this.update({
DiplomaOther: values,
})
}
updateDate(values) {
this.update({
Date: values,
})
}
render() {
return (
<div>
<Field
title={i18n.t('history.education.heading.diploma')}
titleSize="h4"
help="history.education.help.diploma"
adjustFor="big-buttons"
shrink={true}
scrollIntoView={this.props.scrollIntoView}
>
<RadioGroup
className="diploma option-list option-list-vertical"
required={this.props.required}
onError={this.props.onError}
selectedValue={(this.props.Diploma || {}).value}
>
<Radio
name="diploma-highschool"
className="diploma-highschool"
label={i18n.m('history.education.label.diploma.highschool')}
value="High School Diploma"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-associate"
className="diploma-associate"
label={i18n.m('history.education.label.diploma.associate')}
value="Associate"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-bachelor"
className="diploma-bachelor"
label={i18n.m('history.education.label.diploma.bachelor')}
value="Bachelor"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-master"
className="diploma-master"
label={i18n.m('history.education.label.diploma.master')}
value="Master"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-doctorate"
className="diploma-doctorate"
label={i18n.m('history.education.label.diploma.doctorate')}
value="Doctorate"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-professional"
className="diploma-professional"
label={i18n.m('history.education.label.diploma.professional')}
value="Professional"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
<Radio
name="diploma-other"
className="diploma-other"
label={i18n.m('history.education.label.diploma.other')}
value="Other"
onUpdate={this.updateDiploma}
onError={this.props.onError}
/>
</RadioGroup>
<Show when={(this.props.Diploma || {}).value === 'Other'}>
<Field
title={i18n.t('history.education.label.diploma.otherDiploma')}
titleSize="label"
adjustFor="text"
scrollIntoView={this.props.scrollIntoView}
>
<Text
name="DiplomaOther"
{...this.props.DiplomaOther}
className="other"
maxlength="100"
onUpdate={this.updateDiplomaOther}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
</Show>
</Field>
<Field
title={i18n.t('history.education.heading.date')}
titleSize="h4"
help="history.education.help.date"
adjustFor="label"
shrink={true}
scrollIntoView={this.props.scrollIntoView}
>
<DateControl
name="Date"
{...this.props.Date}
className="date-awarded"
minDateEqualTo={true}
hideDay={true}
onUpdate={this.updateDate}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
</div>
)
}
}
DiplomaItem.defaultProps = {
Diploma: {},
DiplomaOther: {},
Date: {},
onUpdate: () => {},
onError: (value, arr) => arr,
}