IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

MultiCombobox: Add basic filtering (#98608)

Browse Source 
Add filtering to Multi
This commit is contained in:
Tobias Skarhed 2025-01-13 17:24:54 +01:00 committed by GitHub
parent f74396b51d
commit ec42a8f83f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/Combobox/Combobox.tsx
View File

@ -15,6 +15,7 @@ import { Stack } from '../Layout/Stack/Stack';
import { Portal } from '../Portal/Portal';
import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
import { itemFilter, itemToString } from './filter';
import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';
import { useComboboxFloat } from './useComboboxFloat';
import { StaleResultError, useLatestAsyncCall } from './useLatestAsyncCall';
@ -86,28 +87,6 @@ export type AutoSizeConditionals =
type ComboboxProps<T extends string | number> = ComboboxBaseProps<T> & AutoSizeConditionals & ClearableConditionals<T>;
export function itemToString<T extends string | number>(item?: ComboboxOption<T> | null) {
if (!item) {
return '';
}
if (item.label?.includes('Custom value: ')) {
return item.value.toString();
}
return item.label ?? item.value.toString();
}
function itemFilter<T extends string | number>(inputValue: string) {
const lowerCasedInputValue = inputValue.toLowerCase();
return (item: ComboboxOption<T>) => {
return (
!inputValue ||
item.label?.toLowerCase().includes(lowerCasedInputValue) ||
item.value?.toString().toLowerCase().includes(lowerCasedInputValue)
);
};
}
const noop = () => {};
const asyncNoop = () => Promise.resolve([]);

17
packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
View File

@ -13,15 +13,10 @@ import { Spinner } from '../Spinner/Spinner';
import { Text } from '../Text/Text';
import { Tooltip } from '../Tooltip';
import {
ComboboxOption,
ComboboxBaseProps,
AutoSizeConditionals,
itemToString,
VIRTUAL_OVERSCAN_ITEMS,
} from './Combobox';
import { ComboboxOption, ComboboxBaseProps, AutoSizeConditionals, VIRTUAL_OVERSCAN_ITEMS } from './Combobox';
import { OptionListItem } from './OptionListItem';
import { ValuePill } from './ValuePill';
import { itemFilter, itemToString } from './filter';
import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';
import { getMultiComboboxStyles } from './getMultiComboboxStyles';
import { useComboboxFloat } from './useComboboxFloat';
@ -48,8 +43,11 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
}, [value, options, isAsync]);
const styles = useStyles2(getComboboxStyles);
const [inputValue, setInputValue] = useState('');
const [items, baseSetItems] = useState(isAsync ? [] : options);
const [baseItems, baseSetItems] = useState(isAsync ? [] : options);
const items = useMemo(() => baseItems.filter(itemFilter(inputValue)), [baseItems, inputValue]);
// TODO: Improve this with async
useEffect(() => {
@ -73,8 +71,6 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
[selectedItems]
);
const [inputValue, setInputValue] = useState('');
const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection({
selectedItems, //initally selected items,
onStateChange: ({ type, selectedItems: newSelectedItems }) => {
@ -120,7 +116,6 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
case useCombobox.stateChangeTypes.InputBlur:
setInputValue('');
setIsOpen(false);
return changes;
default:
return changes;
}

23
packages/grafana-ui/src/components/Combobox/filter.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComboboxOption } from './Combobox';
export function itemToString<T extends string | number>(item?: ComboboxOption<T> | null) {
if (!item) {
return '';
}
if (item.label?.includes('Custom value: ')) {
return item.value.toString();
}
return item.label ?? item.value.toString();
}
export function itemFilter<T extends string | number>(inputValue: string) {
const lowerCasedInputValue = inputValue.toLowerCase();
return (item: ComboboxOption<T>) => {
return (
!inputValue ||
item.label?.toLowerCase().includes(lowerCasedInputValue) ||
item.value?.toString().toLowerCase().includes(lowerCasedInputValue)
);
};
}