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>
)
}