in packages/graph-explorer/src/components/CheckboxList.tsx [38:92]
export default function CheckboxList({
className,
checkboxes,
selectedIds,
onChange,
onChangeAll,
}: CheckboxListProps) {
const numOfSelections = selectedIds.size;
const totalCheckboxes = checkboxes.length;
return (
<div className={cn("flex h-full grow flex-col space-y-2", className)}>
<div className="flex h-full grow flex-col gap-3">
<Virtuoso
className="h-full grow"
data={checkboxes}
components={{
Header: () => (
<CheckboxRow
isTop={true}
isBottom={false}
aria-label="checkbox for all"
checked={
numOfSelections > 0 && numOfSelections !== totalCheckboxes
? "indeterminate"
: numOfSelections === totalCheckboxes
}
onCheckedChange={isSelected => {
onChangeAll(Boolean(isSelected));
}}
className="font-bold"
>
{numOfSelections} selected of {totalCheckboxes}
</CheckboxRow>
),
}}
itemContent={(index, checkbox) => (
<CheckboxRow
isBottom={index === checkboxes.length - 1}
isTop={false}
aria-label={`checkbox for ${checkbox.id}`}
checked={selectedIds.has(checkbox.id)}
onCheckedChange={isSelected =>
onChange(checkbox.id, Boolean(isSelected))
}
>
<div className="grow">{checkbox.text}</div>
<div className="[&_svg]:size-5">{checkbox.endAdornment}</div>
</CheckboxRow>
)}
/>
</div>
</div>
);
}