function Languages()

in next-demo/next-pages/src/pages/demoForm.tsx [458:598]
137 lines of code
5 McCabe index (conditional complexity)

function Languages({ lens }: { lens: ILens<PersonDetails['languageInfo']> }) {
    const svc = useUuiContext<TApi, UuiContexts>();

    const languageDataSource = useAsyncDataSource(
        {
            api: () => svc.api.demo.languages({}).then((r) => r.items),
        },
        []
    );

    const languageLevelsDataSource = useArrayDataSource(
        {
            items: demoData.languageLevels,
        },
        []
    );

    return (
        <>
            <RichTextView>
                <h3>Languages</h3>
            </RichTextView>
            {lens
                .get()
                .map(({ language, speakingLevel, writingLevel }, index) => {
                    const lensItem = lens.index(index);
                    const isClearable =
                        index !== 0 ||
                        language ||
                        speakingLevel ||
                        writingLevel;

                    return (
                        <FlexRow
                            key={index}
                            vPadding='12'
                            spacing='18'
                            alignItems='top'
                        >
                            <FlexCell minWidth={186}>
                                <LabeledInput
                                    htmlFor={`language-${index}`}
                                    label='Language'
                                    {...lensItem.prop('language').toProps()}
                                >
                                    <PickerInput
                                        {...lensItem.prop('language').toProps()}
                                        dataSource={languageDataSource}
                                        selectionMode='single'
                                        valueType='id'
                                        rawProps={{
                                            input: { id: `language-${index}` },
                                        }}
                                        placeholder='Select Language'
                                    />
                                </LabeledInput>
                            </FlexCell>
                            <FlexCell minWidth={120}>
                                <LabeledInput
                                    htmlFor={`speakingLevel-${index}`}
                                    label='Speaking'
                                    {...lensItem
                                        .prop('speakingLevel')
                                        .toProps()}
                                >
                                    <PickerInput
                                        {...lensItem
                                            .prop('speakingLevel')
                                            .toProps()}
                                        dataSource={languageLevelsDataSource}
                                        selectionMode='single'
                                        valueType='id'
                                        rawProps={{
                                            input: {
                                                id: `speakingLevel-${index}`,
                                            },
                                        }}
                                        placeholder='Select Level'
                                        getName={(item) => item.level}
                                    />
                                </LabeledInput>
                            </FlexCell>
                            <FlexCell minWidth={120}>
                                <LabeledInput
                                    htmlFor={`writingLevel-${index}`}
                                    label='Writing'
                                    {...lensItem.prop('writingLevel').toProps()}
                                >
                                    <PickerInput
                                        {...lensItem
                                            .prop('writingLevel')
                                            .toProps()}
                                        dataSource={languageLevelsDataSource}
                                        selectionMode='single'
                                        valueType='id'
                                        rawProps={{
                                            input: {
                                                id: `writingLevel-${index}`,
                                            },
                                        }}
                                        placeholder='Select Level'
                                        getName={(item) => item.level}
                                    />
                                </LabeledInput>
                            </FlexCell>
                            <FlexRow
                                size='48'
                                alignItems='bottom'
                                cx={css.clearButtonWrapper}
                            >
                                {isClearable && (
                                    <IconButton
                                        icon={clearIcon}
                                        onClick={() =>
                                            removeLensItemHandler<PersonLanguageInfo>(
                                                lens,
                                                index
                                            )
                                        }
                                    />
                                )}
                            </FlexRow>
                        </FlexRow>
                    );
                })}
            <FlexRow vPadding='12'>
                <Button
                    onClick={() =>
                        addLensItemHandler<PersonLanguageInfo>(
                            lens,
                            emptyInfo.language
                        )
                    }
                    caption='Add One More'
                    icon={addIcon}
                    fill='none'
                />
            </FlexRow>
        </>
    );
}