render()

in karavan-space/src/designer/route/property/DataFormatField.tsx [124:172]


    render() {
        const value = this.getDataFormatValue();
        const dataFormat = DataFormats.find((l: [string, string, string]) => l[0] === this.state.dataFormat);
        const properties = CamelDefinitionApiExt.getElementPropertiesByName(this.state.dataFormat).sort((a, b) => a.name === 'library' ? -1 : 1);
        const propertiesMain = properties.filter(p => !p.label.includes("advanced"));
        const propertiesAdvanced = properties.filter(p => p.label.includes("advanced"));
        const selectOptions: JSX.Element[] = []
        DataFormats.forEach((lang: [string, string, string]) => {
            const s = <SelectOption key={lang[0]} value={lang[0]} description={lang[2]}/>;
            selectOptions.push(s);
        })
        return (
            <div>
                <div>
                    <label className="pf-c-form__label" htmlFor="expression">
                        <span className="pf-c-form__label-text">{"Data Format"}</span>
                        <span className="pf-c-form__label-required" aria-hidden="true"> *</span>
                    </label>
                    <Select
                        variant={SelectVariant.typeahead}
                        aria-label={"dataFormat"}
                        onToggle={() => {
                            this.openSelect()
                        }}
                        onSelect={(e, dataFormat, isPlaceholder) => this.dataFormatChanged(dataFormat.toString(), value)}
                        selections={dataFormat}
                        isOpen={this.state.selectIsOpen}
                        aria-labelledby={"dataFormat"}
                        direction={SelectDirection.down}
                    >
                        {selectOptions}
                    </Select>
                </div>
                <div className="object">
                    <div>
                        {this.getPropertyFields(value, propertiesMain)}
                        {propertiesAdvanced.length > 0 &&
                            <ExpandableSection
                                toggleText={'Advanced properties'}
                                onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
                                isExpanded={this.state.isShowAdvanced}>
                                {this.getPropertyFields(value, propertiesAdvanced)}
                            </ExpandableSection>}
                    </div>

                </div>
            </div>
        )
    }