Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
1import * as React from 'react';
2import { Button, List, Checkbox } from 'antd';
3import { CheckboxChangeEvent } from 'antd/lib/checkbox';
4import { AutoSizer, List as VList, ListRowProps } from 'react-virtualized';
5import shallow from 'zustand/shallow';
6
7import useLabelStore from '../../stores/LabelStore';
8import { TopNResult } from '../../types/QueryTypes';
9
10import styles from './BulkLabelDrawerList.module.css';
11
12const BulkLabelDrawerList = ({
13 entitiesToLabel,
14 excludedEntities,
15 onRowEntityClick,
16 onRowCheckboxChange,
17}: {
18 entitiesToLabel: TopNResult[];
19 excludedEntities: Set<string>;
20 onRowEntityClick: (value: string) => void;
21 onRowCheckboxChange: (e: CheckboxChangeEvent, value: string) => void;
22}) => {
23 const [bulkLabelEntityType, bulkLabelFeatureName] = useLabelStore(
24 (state) => [state.bulkLabelEntityType, state.bulkLabelFeatureName],
25 shallow
26 );
27
28 const handleCheckboxChange = (e: CheckboxChangeEvent, value: string) => {
29 onRowCheckboxChange(e, value);
30 };
31
32 const renderListRows = ({ key, index, style }: ListRowProps) => {
33 if (bulkLabelEntityType == null || bulkLabelFeatureName == null) return null;
34 const item = entitiesToLabel[index];
35 const value = item?.result[0]?.[bulkLabelFeatureName];
36
37 return (
38 <List.Item className={styles.listItem} key={key} style={style}>
39 <Checkbox
40 onChange={(e) => handleCheckboxChange(e, String(value))}
41 checked={!excludedEntities.has(String(value))}
42 />
43 <Button
44 type="link"
45 onClick={() => onRowEntityClick(String(value))}
46 >{`${bulkLabelEntityType} / ${value}`}</Button>
47 </List.Item>
48 );
49 };
50
51 return (
52 <AutoSizer>
53 {({ width }) => (
54 <VList
55 className={styles.virtualizedList}
56 width={width}
57 height={400}
58 rowCount={entitiesToLabel.length}
59 rowHeight={40}
60 rowRenderer={renderListRows}
61 />
62 )}
63 </AutoSizer>
64 );
65};
66
67export default BulkLabelDrawerList;