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

FilterList: Separate ItemRenderer (#90112)

Browse Source 
* FilterList: Separate ItemRenderer

* Extend props

* Codeformat
This commit is contained in:
Alex Khomenko 2024-07-08 14:05:43 +03:00 committed by GitHub
parent 61b95783d5
commit 96cdce7f72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/grafana-ui/src/components/Table/FilterList.tsx
View File

@ -1,7 +1,7 @@
import { css, cx } from '@emotion/css';
import { useCallback, useMemo } from 'react';
import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
@ -190,20 +190,11 @@ export const FilterList = ({
height={height}
itemCount={items.length}
itemSize={ITEM_HEIGHT}
itemData={{ items, values: selectedItems, onCheckedChanged, className: styles.filterListRow }}
width="100%"
className={styles.filterList}
>
{({ index, style }) => {
const option = items[index];
const { value, label } = option;
const isChecked = values.find((s) => s.value === value) !== undefined;
return (
<div className={styles.filterListRow} style={style} title={label}>
<Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} />
</div>
);
}}
{ItemRenderer}
</List>
<Stack direction="column" gap={0.25}>
<div className={cx(styles.selectDivider)} />
@ -225,6 +216,27 @@ export const FilterList = ({
);
};
interface ItemRendererProps extends ListChildComponentProps {
data: {
onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent<HTMLInputElement>) => void;
items: SelectableValue[];
values: SelectableValue[];
className: string;
};
}
function ItemRenderer({ index, style, data: { onCheckedChanged, items, values, className } }: ItemRendererProps) {
const option = items[index];
const { value, label } = option;
const isChecked = values.find((s) => s.value === value) !== undefined;
return (
<div className={className} style={style} title={label}>
<Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} />
</div>
);
}
const getStyles = (theme: GrafanaTheme2) => ({
filterList: css({
label: 'filterList',