function getSpecialStringInput()

in karavan-designer/src/designer/property/property/KameletPropertyField.tsx [158:224]


    function getSpecialStringInput() {
        const {property, value} = props;
        const prefix = "parameters";
        const id = prefix + "-" + property.id;
        const selectFromList: boolean = property.enum !== undefined && property?.enum?.length > 0;
        const showTextInput = (!selectFromList) || property.format === "password";
        const selectOptions: JSX.Element[] = [];
        if (selectFromList && property.enum) {
            selectOptions.push(...property.enum.map((value: string) =>
                <SelectOption key={value} value={value ? value.trim() : value}/>));
        }
        return <InputGroup className={valueChangedClassName}>
            {selectFromList &&
                <Select
                    id={id} name={id}
                    placeholderText="Select or type an URI"
                    variant={SelectVariant.typeahead}
                    aria-label={property.id}
                    onToggle={(_event, isExpanded) => {
                        openSelect(property.id, isExpanded)
                    }}
                    onSelect={(e, value, isPlaceholder) => {
                        parametersChanged(property.id, value);
                        setCheckChanges(false);
                    }}
                    selections={value}
                    isOpen={isSelectOpen(property.id)}
                    isCreatable={true}
                    createText=""
                    isInputFilterPersisted={true}
                    aria-labelledby={property.id}
                    direction={SelectDirection.down}>
                    {selectOptions}
                </Select>
            }
            {showTextInput &&
                <TextInputGroup className='text-field'>
                    <TextInputGroupMain
                        ref={ref}
                        className="text-field"
                        type='text'
                        autoComplete="off"
                        id={id} name={id}
                        value={textValue || ''}
                        onBlur={_ => {
                            if (isNumeric((textValue))) {
                                parametersChanged(property.id, Number(textValue))
                            } else {
                                parametersChanged(property.id, textValue)
                            }
                        }}
                        onChange={(_, v) => {
                            setTextValue(v);
                            setCheckChanges(true);
                        }}
                    />
                    <TextInputGroupUtilities>
                        <Button variant="plain" className='button-clear' onClick={_ => {
                            parametersChanged(property.id, '');
                            setTextValue('');
                            setCheckChanges(true);
                        }}>
                            <TimesIcon aria-hidden={true}/>
                        </Button>
                    </TextInputGroupUtilities>
                </TextInputGroup>
            }