1import React, { memo, useCallback } from 'react';
2import { MatcherUIProps, FieldMatcherUIRegistryItem } from './types';
3import { FieldMatcherID, fieldMatchers } from '@grafana/data';
4import { Input } from '../Input/Input';
5
6export const FieldNameByRegexMatcherEditor = memo<MatcherUIProps<string>>((props) => {
7  const { options, onChange } = props;
8
9  const onBlur = useCallback(
10    (e: React.FocusEvent<HTMLInputElement>) => {
11      return onChange(e.target.value);
12    },
13    [onChange]
14  );
15
16  return <Input placeholder="Enter regular expression" defaultValue={options} onBlur={onBlur} />;
17});
18FieldNameByRegexMatcherEditor.displayName = 'FieldNameByRegexMatcherEditor';
19
20export const fieldNameByRegexMatcherItem: FieldMatcherUIRegistryItem<string> = {
21  id: FieldMatcherID.byRegexp,
22  component: FieldNameByRegexMatcherEditor,
23  matcher: fieldMatchers.get(FieldMatcherID.byRegexp),
24  name: 'Fields with name matching regex',
25  description: 'Set properties for fields with names matching a regex',
26  optionsToLabel: (options) => options,
27};
28