public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grafana-UI: Support optgroup for MultiSelect (#29805)

Browse Source 
* Grafana-UI: Support optgroup for MultiSelect

* Update packages/grafana-ui/src/components/Select/Select.story.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Alex Khomenko
2020-12-14 15:11:25 +02:00
committed by GitHub
co-authored by Dominik Prokop
parent 98c0b09564
commit 8587e9fe6c
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Select/Select.story.tsx
+20
View File
@@ -175,6 +175,26 @@ export const MultiPlainValue = () => {
);
};
export const MultiSelectWithOptionGroups = () => {
const [value, setValue] = useState<string[]>();
return (
<>
<MultiSelect
options={[
{ label: '1', value: '1' },
{ label: '2', value: '2', options: [{ label: '5', value: '5' }] },
]}
value={value}
onChange={v => {
setValue(v.map((v: any) => v.value));
}}
{...getDynamicProps()}
/>
</>
);
};
export const MultiSelectBasic = () => {
const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
packages/grafana-ui/src/components/Select/SelectBase.tsx
+2 -6
View File
@@ -22,7 +22,7 @@ import { SingleValue } from './SingleValue';
import { MultiValueContainer, MultiValueRemove } from './MultiValue';
import { useTheme } from '../../themes';
import { getSelectStyles } from './getSelectStyles';
import { cleanValue } from './utils';
import { cleanValue, findSelectedValue } from './utils';
import { SelectBaseProps, SelectValue } from './types';
interface ExtraValuesIndicatorProps {
@@ -158,11 +158,7 @@ export function SelectBase<T>({
// we are selecting the corresponding value from the options
if (isMulti && value && Array.isArray(value) && !loadOptions) {
// @ts-ignore
selectedValue = value.map(v => {
return options.filter(o => {
return v === o.value || o.value === v.value;
})[0];
});
selectedValue = value.map(v => findSelectedValue(v.value ?? v, options));
} else if (loadOptions) {
const hasValue = defaultValue || value;
selectedValue = hasValue ? [hasValue] : [];