Commit d831dde3 by Alex Khomenko Committed by GitHub

Use new Select for TagFilter (#23472)

parent 32066a3f
...@@ -2,14 +2,13 @@ ...@@ -2,14 +2,13 @@
import React from 'react'; import React from 'react';
// @ts-ignore // @ts-ignore
import { components } from '@torkelo/react-select'; import { components } from '@torkelo/react-select';
// @ts-ignore import { AsyncSelect } from '@grafana/ui';
import AsyncSelect from '@torkelo/react-select/async'; import { resetSelectStyles, Icon } from '@grafana/ui';
import { FormInputSize } from '@grafana/ui/src/components/Forms/types';
import { escapeStringForRegex } from '@grafana/data'; import { escapeStringForRegex } from '@grafana/data';
// Components // Components
import { TagOption } from './TagOption'; import { TagOption } from './TagOption';
import { TagBadge } from './TagBadge'; import { TagBadge } from './TagBadge';
import { resetSelectStyles, LegacyForms, Icon } from '@grafana/ui';
const { IndicatorsContainer, NoOptionsMessage } = LegacyForms;
export interface TermCount { export interface TermCount {
term: string; term: string;
...@@ -20,10 +19,17 @@ export interface Props { ...@@ -20,10 +19,17 @@ export interface Props {
tags: string[]; tags: string[];
tagOptions: () => Promise<TermCount[]>; tagOptions: () => Promise<TermCount[]>;
onChange: (tags: string[]) => void; onChange: (tags: string[]) => void;
size?: FormInputSize;
placeholder?: string;
/** Do not show selected values inside Select. Useful when the values need to be shown in some other components */
hideValues?: boolean;
} }
export class TagFilter extends React.Component<Props, any> { export class TagFilter extends React.Component<Props, any> {
inlineTags: boolean; static defaultProps = {
size: 'auto',
placeholder: 'Tags',
};
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
...@@ -47,29 +53,27 @@ export class TagFilter extends React.Component<Props, any> { ...@@ -47,29 +53,27 @@ export class TagFilter extends React.Component<Props, any> {
render() { render() {
const tags = this.props.tags.map(tag => ({ value: tag, label: tag, count: 0 })); const tags = this.props.tags.map(tag => ({ value: tag, label: tag, count: 0 }));
const { size, placeholder, hideValues } = this.props;
const selectOptions = { const selectOptions = {
classNamePrefix: 'gf-form-select-box',
isMulti: true,
defaultOptions: true, defaultOptions: true,
getOptionLabel: (i: any) => i.label,
getOptionValue: (i: any) => i.value,
isMulti: true,
loadOptions: this.onLoadOptions, loadOptions: this.onLoadOptions,
loadingMessage: 'Loading...',
noOptionsMessage: 'No tags found',
onChange: this.onChange, onChange: this.onChange,
className: 'gf-form-input gf-form-input--form-dropdown', placeholder,
placeholder: 'Tags', size,
loadingMessage: () => 'Loading...',
noOptionsMessage: () => 'No tags found',
getOptionValue: (i: any) => i.value,
getOptionLabel: (i: any) => i.label,
value: tags,
styles: resetSelectStyles(), styles: resetSelectStyles(),
value: tags,
filterOption: (option: any, searchQuery: string) => { filterOption: (option: any, searchQuery: string) => {
const regex = RegExp(escapeStringForRegex(searchQuery), 'i'); const regex = RegExp(escapeStringForRegex(searchQuery), 'i');
return regex.test(option.value); return regex.test(option.value);
}, },
components: { components: {
Option: TagOption, Option: TagOption,
IndicatorsContainer,
NoOptionsMessage,
MultiValueLabel: (): any => { MultiValueLabel: (): any => {
return null; // We want the whole tag to be clickable so we use MultiValueRemove instead return null; // We want the whole tag to be clickable so we use MultiValueRemove instead
}, },
...@@ -82,15 +86,13 @@ export class TagFilter extends React.Component<Props, any> { ...@@ -82,15 +86,13 @@ export class TagFilter extends React.Component<Props, any> {
</components.MultiValueRemove> </components.MultiValueRemove>
); );
}, },
MultiValueContainer: hideValues ? (): any => null : components.MultiValueContainer,
}, },
}; };
return ( return (
<div className="gf-form gf-form--has-input-icon gf-form--grow">
<div className="tag-filter"> <div className="tag-filter">
<AsyncSelect {...selectOptions} /> <AsyncSelect {...selectOptions} prefix={<Icon name="tag-alt" />} />
</div>
<Icon className="gf-form-input-icon" name="tag-alt" />
</div> </div>
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment