function StringListItem()

in packages/bonito-ui/src/components/form/string-list.tsx [94:137]

• 44 lines of code
• 3 McCabe index (conditional complexity)

function StringListItem(props: StringListItemProps) {
    const {
        index,
        value,
        label,
        onChange,
        onDelete,
        disableDelete,
        errorMsg,
        placeholder,
    } = props;
    const styles = useStringListItemStyles(props);
    const ariaLabel = `${label || ""} ${index + 1}`;
    return (
        <Stack
            key={index}
            horizontal
            verticalAlign="center"
            styles={styles.container}
        >
            <Stack.Item grow={1}>
                <TextField
                    styles={styles.input}
                    value={value}
                    ariaLabel={ariaLabel}
                    placeholder={placeholder}
                    errorMessage={errorMsg}
                    onChange={(_, newValue) => {
                        onChange(index, newValue || "");
                    }}
                />
            </Stack.Item>
            <IconButton
                styles={styles.button}
                iconProps={{ iconName: "Delete" }}
                ariaLabel={`${translate("bonito.ui.form.delete")} ${ariaLabel}`}
                onClick={() => {
                    onDelete(index);
                }}
                disabled={disableDelete}
            />
        </Stack>
    );
}