in karavan-space/src/designer/route/property/ExpressionField.tsx [101:148]
render() {
const property: PropertyMeta = this.props.property;
const value = this.getExpressionValue();
const dslLanguage = Languages.find((l: [string, string, string]) => l[0] === this.getValueLanguage());
const selectOptions: JSX.Element[] = []
Languages.forEach((lang: [string, string, string]) => {
const s = <SelectOption key={lang[0]} value={lang[0]} description={lang[2]}/>;
selectOptions.push(s);
})
return (
<div>
<label className="pf-c-form__label" htmlFor="expression">
<span className="pf-c-form__label-text">Language</span>
<span className="pf-c-form__label-required" aria-hidden="true"> *</span>
</label>
<Select
variant={SelectVariant.typeahead}
aria-label={property.name}
onToggle={isExpanded => {
this.openSelect(isExpanded)
}}
onSelect={(e, lang, isPlaceholder) => {
this.expressionChanged(lang.toString(), value);
}}
selections={dslLanguage}
isOpen={this.state.selectIsOpen}
aria-labelledby={property.name}
direction={SelectDirection.down}
>
{selectOptions}
</Select>
<FormGroup
key={property.name}
fieldId={property.name}
labelIcon={property.description ?
<Popover
position={"left"}
headerContent={property.displayName}
bodyContent={property.description}>
<button type="button" aria-label="More info" onClick={e => {
e.preventDefault();
e.stopPropagation();
}}
className="pf-c-form__group-label-help">
<HelpIcon noVerticalAlign/>
</button>
</Popover> : <div></div>
}>