66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
/**
|
|
* Custom Form Component: Select with Reset Button
|
|
*
|
|
* A select/combobox field with an optional reset to default button.
|
|
* Built on top of shadcn/ui Select component.
|
|
*
|
|
* @author Andreas Weyer
|
|
* @license MIT
|
|
*/
|
|
|
|
import * as React from "react"
|
|
import { RotateCcw } from "lucide-react"
|
|
import { IconButtonWithTooltip } from "./icon-button-with-tooltip"
|
|
import { Select, SelectTrigger, SelectValue, SelectContent } from "./select"
|
|
import { cn } from "../../lib/utils"
|
|
import { useTranslation } from "react-i18next"
|
|
|
|
interface FormSelectProps {
|
|
value: string
|
|
onValueChange: (value: string) => void
|
|
showResetButton?: boolean
|
|
defaultValue?: string
|
|
children: React.ReactNode
|
|
triggerClassName?: string
|
|
placeholder?: string
|
|
}
|
|
|
|
export const FormSelect: React.FC<FormSelectProps> = ({
|
|
value,
|
|
onValueChange,
|
|
showResetButton = false,
|
|
defaultValue,
|
|
children,
|
|
triggerClassName,
|
|
placeholder,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex items-center gap-0">
|
|
<Select value={value} onValueChange={onValueChange}>
|
|
<SelectTrigger className={cn(
|
|
showResetButton && "rounded-r-none border-r-0 z-10",
|
|
"bg-background",
|
|
triggerClassName
|
|
)}>
|
|
<SelectValue placeholder={placeholder} />
|
|
</SelectTrigger>
|
|
{children}
|
|
</Select>
|
|
{showResetButton && (
|
|
<IconButtonWithTooltip
|
|
type="button"
|
|
icon={<RotateCcw className="h-4 w-4" />}
|
|
tooltip={t('buttonResetToDefault')}
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-9 w-9 rounded-l-none border-l-0"
|
|
onClick={() => onValueChange(defaultValue || '')}
|
|
tabIndex={-1}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|