calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-09-09 12:36:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

💄 use checkbox for column filter with dropdown

Browse Source
This commit is contained in:
Fred KISSIE
2026-06-02 17:43:45 +02:00
parent b6d688f15e
commit 6c1798a8c5
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColumnMultiFilterButton.tsx
+6 -7
View File
@@ -20,6 +20,7 @@ import { CheckIcon, Funnel } from "lucide-react";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover"; import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { Checkbox } from "./ui/checkbox";
type FilterOption = { type FilterOption = {
value: string; value: string;
@@ -130,13 +131,11 @@ export function ColumnMultiFilterButton({
toggle(option.value); toggle(option.value);
}} }}
> >
<CheckIcon <Checkbox
className={cn( className="pointer-events-none shrink-0"
"mr-2 h-4 w-4", checked={selectedSet.has(option.value)}
selectedSet.has(option.value) aria-hidden
? "opacity-100" tabIndex={-1}
: "opacity-0"
)}
/> />
{option.label} {option.label}
</CommandItem> </CommandItem>
src/components/LabelColumnFilterButton.tsx
+6 -7
View File
@@ -25,6 +25,7 @@ import { useDebounce } from "use-debounce";
import { LabelBadge } from "./label-badge"; import { LabelBadge } from "./label-badge";
import { LabelOverflowBadge } from "./label-overflow-badge"; import { LabelOverflowBadge } from "./label-overflow-badge";
import { LABEL_COLORS } from "./labels-selector"; import { LABEL_COLORS } from "./labels-selector";
import { Checkbox } from "./ui/checkbox";
function areSelectionsEqual(a: string[], b: string[]) { function areSelectionsEqual(a: string[], b: string[]) {
if (a.length !== b.length) { if (a.length !== b.length) {
@@ -179,13 +180,11 @@ export function LabelColumnFilterButton({
}} }}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<CheckIcon <Checkbox
className={cn( className="pointer-events-none shrink-0"
"mr-2 h-4 w-4", checked={draftSet.has(label.name)}
draftSet.has(label.name) aria-hidden
? "opacity-100" tabIndex={-1}
: "opacity-0"
)}
/> />
<div <div
className="size-2 rounded-full bg-(--color) flex-none" className="size-2 rounded-full bg-(--color) flex-none"
src/components/multi-select/multi-select-content.tsx
+6 -7
View File
@@ -10,6 +10,7 @@ import {
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { CheckIcon } from "lucide-react"; import { CheckIcon } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Checkbox } from "../ui/checkbox";
export type TagValue = { text: string; id: string; isAdmin?: boolean }; export type TagValue = { text: string; id: string; isAdmin?: boolean };
@@ -70,13 +71,11 @@ export function MultiSelectContent<T extends TagValue>({
onChange(newValues); onChange(newValues);
}} }}
> >
<CheckIcon <Checkbox
className={cn( className="pointer-events-none shrink-0"
"mr-2 h-4 w-4", checked={selectedValues.has(option.id)}
selectedValues.has(option.id) aria-hidden
? "opacity-100" tabIndex={-1}
: "opacity-0"
)}
/> />
{`${option.text}`} {`${option.text}`}
</CommandItem> </CommandItem>