function RenderForm()

in app/src/sandbox/scroll-spy/ScrollSpyForm.tsx [96:186]
89 lines of code
2 McCabe index (conditional complexity)

    function RenderForm({ lens, save, isInvalid }: IFormApi<Person>) {
        const { scrollToElement, setRef } = useScrollSpy({});

        useEffect(() => {
            if (isInvalid) scrollToElement();
        });

        return (
            <section ref={ setRef }>
                <FlexCell width="100%" cx={ css.formContainer }>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="First Name" { ...lens.prop('firstName').toProps() }>
                                <TextInput placeholder="First Name" { ...lens.prop('firstName').toProps() } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Last Name" { ...lens.prop('lastName').toProps() }>
                                <TextInput placeholder="Last Name" { ...lens.prop('lastName').toProps() } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Country" { ...lens.prop('location').prop('countryId').toProps() }>
                                <PickerInput
                                    { ...lens.prop('location').prop('countryId').toProps() }
                                    selectionMode="single"
                                    valueType="id"
                                    dataSource={ countriesDataSource }
                                />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="City" { ...lens.prop('location').prop('cityIds').toProps() }>
                                <PickerInput { ...lens.prop('location').prop('cityIds').toProps() } selectionMode="multi" valueType="id" dataSource={ citiesDataSource } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Sex" { ...lens.prop('sex').toProps() }>
                                <RadioGroup
                                    name="gender"
                                    items={ [{ id: 'male', name: 'Male' }, { id: 'female', name: 'Female' }] }
                                    { ...lens.prop('sex').toProps() }
                                    direction="horizontal"
                                />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Birth Date" { ...lens.prop('birthDate').toProps() }>
                                <DatePicker { ...lens.prop('birthDate').toProps() } placeholder="Birth Date" format="MM-DD-YYYY" />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Mother Tongue" { ...lens.prop('motherTongue').toProps() }>
                                <PickerInput { ...lens.prop('motherTongue').toProps() } selectionMode="single" valueType="id" dataSource={ languagesDataSource } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Marital Status" { ...lens.prop('maritalStatus').toProps() }>
                                <PickerInput { ...lens.prop('maritalStatus').toProps() } selectionMode="single" valueType="id" dataSource={ maritalStatus } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexCell grow={ 1 }>
                            <LabeledInput label="Email" { ...lens.prop('email').toProps() }>
                                <TextInput placeholder="Email" { ...lens.prop('email').toProps() } />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                    <FlexRow vPadding="12">
                        <FlexSpacer />
                        <Button color="red" caption="Validate" onClick={ save } />
                    </FlexRow>
                </FlexCell>
            </section>
        );
    }