File size: 2,948 Bytes
5301ae9 | 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import * as React from "react"
import { cn } from "@/lib/utils"
import { ChevronDown } from "lucide-react"
const SelectContext = React.createContext(null)
const Select = ({ value, onValueChange, children, ...props }) => {
const [isOpen, setIsOpen] = React.useState(false)
const [internalValue, setInternalValue] = React.useState("")
const currentValue = value !== undefined ? value : internalValue
const handleValueChange = (newValue) => {
if (onValueChange) {
onValueChange(newValue)
} else {
setInternalValue(newValue)
}
setIsOpen(false)
}
return (
<SelectContext.Provider value={{ value: currentValue, onValueChange: handleValueChange, isOpen, setIsOpen }}>
<div className="relative" {...props}>
{children}
</div>
</SelectContext.Provider>
)
}
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
const context = React.useContext(SelectContext)
return (
<button
ref={ref}
type="button"
onClick={() => context?.setIsOpen(!context.isOpen)}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 opacity-50" />
</button>
)
})
SelectTrigger.displayName = "SelectTrigger"
const SelectValue = ({ placeholder, ...props }) => {
const context = React.useContext(SelectContext)
const displayValue = context?.value || placeholder
return <span {...props}>{displayValue}</span>
}
const SelectContent = React.forwardRef(({ className, children, ...props }, ref) => {
const context = React.useContext(SelectContext)
if (!context?.isOpen) return null
return (
<div
ref={ref}
className={cn(
"absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-slate-950 shadow-md",
className
)}
{...props}
>
<div className="p-1">{children}</div>
</div>
)
})
SelectContent.displayName = "SelectContent"
const SelectItem = React.forwardRef(({ className, value, children, ...props }, ref) => {
const context = React.useContext(SelectContext)
const isSelected = context?.value === value
return (
<div
ref={ref}
onClick={() => context?.onValueChange(value)}
className={cn(
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-slate-100 focus:bg-slate-100",
isSelected && "bg-slate-100",
className
)}
{...props}
>
{children}
</div>
)
})
SelectItem.displayName = "SelectItem"
export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }
|