117 lines
No EOL
3.1 KiB
TypeScript
117 lines
No EOL
3.1 KiB
TypeScript
// components/ui/select.tsx
|
|
"use client";
|
|
|
|
import * as React from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
interface SelectContextValue {
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
}
|
|
|
|
const SelectContext = React.createContext<SelectContextValue | undefined>(undefined);
|
|
|
|
function useSelectContext() {
|
|
const context = React.useContext(SelectContext);
|
|
if (!context) {
|
|
throw new Error("Select components must be used within a Select");
|
|
}
|
|
return context;
|
|
}
|
|
|
|
interface SelectProps {
|
|
value?: string;
|
|
onValueChange?: (value: string) => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Select({ value = "", onValueChange = () => {}, children }: SelectProps) {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<SelectContext.Provider value={{ value, onValueChange, open, setOpen }}>
|
|
<div className="relative">
|
|
{children}
|
|
</div>
|
|
</SelectContext.Provider>
|
|
);
|
|
}
|
|
|
|
interface SelectTriggerProps {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function SelectTrigger({ className = "", children }: SelectTriggerProps) {
|
|
const { open, setOpen } = useSelectContext();
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
{children}
|
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
interface SelectValueProps {
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function SelectValue({ placeholder }: SelectValueProps) {
|
|
const { value } = useSelectContext();
|
|
|
|
return (
|
|
<span className={value ? "" : "text-muted-foreground"}>
|
|
{value || placeholder}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
interface SelectContentProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function SelectContent({ children }: SelectContentProps) {
|
|
const { open, setOpen } = useSelectContext();
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
<div className="absolute top-full z-50 w-full min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">
|
|
{children}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
interface SelectItemProps {
|
|
value: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function SelectItem({ value, children }: SelectItemProps) {
|
|
const { onValueChange, setOpen } = useSelectContext();
|
|
|
|
return (
|
|
<div
|
|
className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
|
onClick={() => {
|
|
onValueChange(value);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |