import { WrappedFieldProps, Field, FormName, reset, change, WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form';
import { memoize } from 'lodash';
import { Autocomplete } from 'components/autocomplete/autocomplete';
-import { Vocabulary, getTags, getTagKeyID, getTagKeyLabel } from 'models/vocabulary';
+import {
+ Vocabulary,
+ getTags,
+ getTagKeyID,
+ getTagKeyLabel,
+ getPreferredTags,
+ PropFieldSuggestion
+} from 'models/vocabulary';
import {
handleSelect,
handleBlur,
const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
<FormName children={data => (
<Autocomplete
+ {...buildProps(props)}
label='Key'
suggestions={getSuggestions(props.input.value, vocabulary)}
+ renderSuggestion={(s: PropFieldSuggestion) => (s.description || s.label)}
onSelect={handleSelect(PROPERTY_KEY_FIELD_ID, data.form, props.input, props.meta)}
onBlur={() => {
// Case-insensitive search for the key in the vocabulary
const newValue = e.currentTarget.value;
handleChange(data.form, props.input, props.meta, newValue);
}}
- {...buildProps(props)}
/>
)} />;
? undefined
: 'Incorrect key';
-const getSuggestions = (value: string, vocabulary: Vocabulary) => {
+const getSuggestions = (value: string, vocabulary: Vocabulary): PropFieldSuggestion[] => {
const re = new RegExp(escapeRegExp(value), "i");
- return getTags(vocabulary).filter(tag => re.test(tag.label) && tag.label !== value);
+ return getPreferredTags(vocabulary, value !== '').filter(
+ tag => re.test((tag.description || tag.label)) && tag.label !== value);
};
const handleChange = (
import { WrappedFieldProps, Field, formValues, FormName, WrappedFieldInputProps, WrappedFieldMetaProps, change } from 'redux-form';
import { compose } from 'redux';
import { Autocomplete } from 'components/autocomplete/autocomplete';
-import { Vocabulary, isStrictTag, getTagValues, getTagValueID, getTagValueLabel } from 'models/vocabulary';
+import { Vocabulary, isStrictTag, getTagValues, getTagValueID, getTagValueLabel, PropFieldSuggestion, getPreferredTagValues } from 'models/vocabulary';
import { PROPERTY_KEY_FIELD_ID, PROPERTY_KEY_FIELD_NAME } from 'views-components/resource-properties-form/property-key-field';
import {
handleSelect,
const PropertyValueInput = ({ vocabulary, propertyKeyId, propertyKeyName, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
<FormName children={data => (
<Autocomplete
+ {...buildProps(props)}
label='Value'
disabled={props.disabled}
suggestions={getSuggestions(props.input.value, propertyKeyId, vocabulary)}
+ renderSuggestion={(s: PropFieldSuggestion) => (s.description || s.label)}
onSelect={handleSelect(PROPERTY_VALUE_FIELD_ID, data.form, props.input, props.meta)}
onBlur={() => {
// Case-insensitive search for the value in the vocabulary
const tagValueID = getTagValueID(propertyKeyId, newValue, vocabulary);
handleChange(data.form, tagValueID, props.input, props.meta, newValue);
}}
- {...buildProps(props)}
/>
)} />;
const getSuggestions = (value: string, tagName: string, vocabulary: Vocabulary) => {
const re = new RegExp(escapeRegExp(value), "i");
- return getTagValues(tagName, vocabulary).filter(v => re.test(v.label) && v.label !== value);
+ return getPreferredTagValues(tagName, vocabulary, value !== '').filter(
+ v => re.test((v.description || v.label)) && v.label !== value);
};
const handleChange = (