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

ButtonSelect: Render option custom component (#88272)

Browse Source 
allow providing custom component to button select
This commit is contained in:
Domas 2024-05-24 14:38:59 +03:00 committed by GitHub
parent caeb9bcea2
commit 60f9817303
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/types/select.ts
View File

@ -11,7 +11,7 @@ export interface SelectableValue<T = any> {
description?: string;
// Adds a simple native title attribute to each option.
title?: string;
// Optional component that will be shown together with other options. Does not get past any props.
// Optional component that will be shown together with other options. Does not get passed any props.
component?: React.ComponentType;
isDisabled?: boolean;
[key: string]: any;

1
packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
View File

@ -101,6 +101,7 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
ariaChecked={item.value === value?.value}
ariaLabel={item.ariaLabel || item.label}
disabled={item.isDisabled}
component={item.component}
role="menuitemradio"
/>
))}

6
packages/grafana-ui/src/components/Menu/MenuItem.test.tsx
View File

@ -88,4 +88,10 @@ describe('MenuItem', () => {
render(<MenuItem label="URL Item" url="/some-url" role="menuitem" />);
expect(screen.getByRole('menuitem', { name: 'URL Item' })).toBeInTheDocument();
});
it('renders extra component if provided', async () => {
render(<MenuItem label="main label" component={() => <p>extra content</p>} />);
expect(screen.getByText('main label')).toBeInTheDocument();
expect(screen.getByText('extra content')).toBeInTheDocument();
});
});

3
packages/grafana-ui/src/components/Menu/MenuItem.tsx
View File

@ -59,6 +59,8 @@ export interface MenuItemProps<T = unknown> {
shortcut?: string;
/** Test id for e2e tests and fullstory*/
testId?: string;
/* Optional component that will be shown together with other options. Does not get passed any props. */
component?: React.ComponentType;
}
/** @internal */
@ -202,6 +204,7 @@ export const MenuItem = React.memo(
{description}
</div>
)}
{props.component ? <props.component /> : null}
</ItemElement>
);
})