function Education()

in next-demo/next-pages/src/pages/demoForm.tsx [341:456]
114 lines of code
1 McCabe index (conditional complexity)

function Education({ lens }: { lens: ILens<PersonDetails['education']> }) {
    const institutionLevelsDataSource = useArrayDataSource(
        {
            items: demoData.universities,
        },
        []
    );

    return (
        <>
            <RichTextView>
                <h3>Education</h3>
            </RichTextView>

            <FlexRow vPadding='12'>
                <FlexCell minWidth={324}>
                    <LabeledInput
                        htmlFor='institution'
                        label='Institution'
                        {...lens.prop('institution').toProps()}
                    >
                        <PickerInput
                            {...lens.prop('institution').toProps()}
                            dataSource={institutionLevelsDataSource}
                            selectionMode='single'
                            rawProps={{ input: { id: 'institution' } }}
                            getName={(item) => item.university.split(' / ')[0]}
                            sorting={{
                                field: 'university',
                                direction: 'asc',
                            }}
                            valueType='id'
                            placeholder='Select Institution'
                        />
                    </LabeledInput>
                </FlexCell>
            </FlexRow>
            <FlexRow
                vPadding='12'
                spacing='18'
                alignItems='top'
            >
                <LabeledInput
                    htmlFor='faculty'
                    label='Faculty'
                    {...lens.prop('faculty').toProps()}
                >
                    <TextInput
                        {...lens.prop('faculty').toProps()}
                        placeholder='Faculty Name'
                        id='faculty'
                    />
                </LabeledInput>
                <LabeledInput
                    htmlFor='department'
                    label='Department'
                    {...lens.prop('department').toProps()}
                >
                    <TextInput
                        {...lens.prop('department').toProps()}
                        placeholder='Department Name'
                        id='department'
                    />
                </LabeledInput>
            </FlexRow>
            <FlexRow
                vPadding='12'
                spacing='18'
                alignItems='top'
            >
                <LabeledInput
                    htmlFor='degree'
                    label='Degree'
                    {...lens.prop('degree').toProps()}
                >
                    <TextInput
                        {...lens.prop('degree').toProps()}
                        placeholder='Degree Name'
                        id='degree'
                    />
                </LabeledInput>
                <LabeledInput
                    htmlFor='speciality'
                    label='Speciality'
                    {...lens.prop('speciality').toProps()}
                >
                    <TextInput
                        {...lens.prop('speciality').toProps()}
                        placeholder='Speciality Name'
                        id='speciality'
                    />
                </LabeledInput>
            </FlexRow>
            <FlexRow
                vPadding='12'
                spacing='18'
            >
                <FlexCell minWidth={120}>
                    <LabeledInput
                        htmlFor='graduationYear'
                        label='Graduation year'
                        {...lens.prop('graduationYear').toProps()}
                    >
                        <NumericInput
                            {...lens.prop('graduationYear').toProps()}
                            min={1950}
                            max={2020}
                            placeholder='2020'
                            id='graduationYear'
                        />
                    </LabeledInput>
                </FlexCell>
            </FlexRow>
        </>
    );
}