106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import { Button } from "@/components/ui/button"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover"
|
|
|
|
export default function MultiSelect({
|
|
name,
|
|
options = [],
|
|
value = [],
|
|
onChange,
|
|
placeholder = "Pilih data",
|
|
}) {
|
|
const toggle = (val) => {
|
|
let newValue
|
|
|
|
if (value.includes(val)) {
|
|
newValue = value.filter((v) => v !== val)
|
|
} else {
|
|
newValue = [...value, val]
|
|
}
|
|
|
|
if (onChange) {
|
|
onChange({
|
|
target: {
|
|
name,
|
|
value: newValue,
|
|
},
|
|
})
|
|
}
|
|
}
|
|
|
|
const selectedLabels = options
|
|
.filter((o) => value.includes(o.value))
|
|
.map((o) => o.label)
|
|
.join(", ")
|
|
|
|
return (
|
|
// <Popover>
|
|
// <PopoverTrigger asChild>
|
|
// <Button
|
|
// variant="outline"
|
|
// className="w-full justify-start text-left"
|
|
// >
|
|
// <div className="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
|
|
// {value.length > 0 ? selectedLabels : placeholder}
|
|
// </div>
|
|
// </Button>
|
|
// </PopoverTrigger>
|
|
|
|
// <PopoverContent className="w-full">
|
|
// <div className="space-y-2">
|
|
// {options.map((opt) => (
|
|
// <label
|
|
// key={opt.value}
|
|
// className="flex items-center space-x-2"
|
|
// >
|
|
// <Checkbox
|
|
// checked={value.includes(opt.value)}
|
|
// onCheckedChange={() => toggle(opt.value)}
|
|
// />
|
|
// <span>{opt.label}</span>
|
|
// </label>
|
|
// ))}
|
|
// </div>
|
|
// </PopoverContent>
|
|
// </Popover>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start text-left font-normal border-gray-300 rounded-md px-2 shadow-none"
|
|
>
|
|
<div className="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
|
|
{value.length > 0 ? selectedLabels : placeholder}
|
|
</div>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent
|
|
side="bottom"
|
|
align="start"
|
|
sideOffset={4}
|
|
className="w-[var(--radix-popover-trigger-width)] max-h-60 overflow-y-auto z-50"
|
|
>
|
|
<div className="space-y-2">
|
|
{options.map((opt) => (
|
|
<label
|
|
key={opt.value}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Checkbox
|
|
checked={value.includes(opt.value)}
|
|
onCheckedChange={() => toggle(opt.value)}
|
|
/>
|
|
<span>{opt.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|