import { memoize } from 'lodash';
import { Autocomplete } from '~/components/autocomplete/autocomplete';
import { Vocabulary, getTags, getTagKeyID } from '~/models/vocabulary';
-import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, ValidationProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
import { TAG_KEY_VALIDATION } from '~/validators/validators';
import { escapeRegExp } from '~/common/regexp.ts';
export const PROPERTY_KEY_FIELD_NAME = 'key';
export const PROPERTY_KEY_FIELD_ID = 'keyID';
-interface PropertyKeyFieldProps {
- skipValidation?: boolean;
-}
-
export const PropertyKeyField = connectVocabulary(
- ({ vocabulary, skipValidation }: VocabularyProp & PropertyKeyFieldProps) =>
+ ({ vocabulary, skipValidation }: VocabularyProp & ValidationProp) =>
+ <span data-cy='property-field-key'>
<Field
name={PROPERTY_KEY_FIELD_NAME}
component={PropertyKeyInput}
vocabulary={vocabulary}
validate={skipValidation ? undefined : getValidation(vocabulary)} />
+ </span>
);
const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
onBlur={handleBlur(PROPERTY_KEY_FIELD_ID, data.form, props.meta, props.input, getTagKeyID(props.input.value, vocabulary))}
{...buildProps(props)}
/>
- )}/>;
+ )} />;
const getValidation = memoize(
(vocabulary: Vocabulary) =>