Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 71x 71x 612x 71x 613x 36x | import { cn } from "@/utils";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import * as UI from "@/components";
// type Item = { label: string; field?: string; hidden: boolean };
type Props<T extends UI.OsTableColumn> = {
list: T[];
onItemClick: (field: string) => void;
hiddenColumns: T[];
};
export const VisibilityPopover = ({
list,
onItemClick,
hiddenColumns,
}: Props<UI.OsTableColumn>) => {
return (
<UI.Popover>
<UI.PopoverTrigger asChild>
<UI.Button
variant="outline"
className="w-full xs:w-fit whitespace-nowrap hover:bg-transparent self-center h-10 flex gap-2"
>
<span className="prose-sm">
{hiddenColumns.length ? `Columns (${hiddenColumns.length} hidden)` : "Columns"}
</span>
</UI.Button>
</UI.PopoverTrigger>
<UI.PopoverContent className="bg-white">
<div className="flex flex-col gap-2">
<VisibilityMenu list={list} onItemClick={onItemClick} hiddenColumns={hiddenColumns} />
</div>
</UI.PopoverContent>
</UI.Popover>
);
};
export const VisiblityItem = <T extends UI.OsTableColumn>(props: T & { onClick: () => void }) => {
const eyeStyles = cn("flex flex-row gap-2 cursor-pointer", {
"text-gray-800": !props.hidden,
"text-gray-400": props.hidden,
});
return (
<div
className={cn("flex flex-row gap-2 cursor-pointer", {
"text-gray-800": !props.hidden,
"text-gray-400": props.hidden,
})}
onClick={props.onClick}
>
{props.hidden && <EyeOffIcon className={eyeStyles} />}
{!props.hidden && <EyeIcon className={eyeStyles} />}
<div className="mt-[-1px] prose-base">{props.label}</div>
</div>
);
};
export const VisibilityMenu = <T extends UI.OsTableColumn>(props: Props<T>) => {
return (
<div className="flex flex-col gap-2">
{props.list.map((IT) => {
if (!IT.field) return null;
return (
<VisiblityItem
key={`vis-${IT.field}`}
onClick={() => props.onItemClick(IT.field as string)}
{...IT}
/>
);
})}
</div>
);
};
|