|
| 1 | +/* |
| 2 | + * This Source Code Form is subject to the terms of the Mozilla Public |
| 3 | + * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 4 | + * file, you can obtain one at https://mozilla.org/MPL/2.0/. |
| 5 | + * |
| 6 | + * Copyright Oxide Computer Company |
| 7 | + */ |
| 8 | + |
| 9 | +import { |
| 10 | + useController, |
| 11 | + type Control, |
| 12 | + type FieldPath, |
| 13 | + type FieldValues, |
| 14 | +} from 'react-hook-form' |
| 15 | + |
| 16 | +import { Combobox, type ComboboxBaseProps } from '~/ui/lib/Combobox' |
| 17 | +import { capitalize } from '~/util/str' |
| 18 | + |
| 19 | +import { ErrorMessage } from './ErrorMessage' |
| 20 | + |
| 21 | +export type ComboboxFieldProps< |
| 22 | + TFieldValues extends FieldValues, |
| 23 | + TName extends FieldPath<TFieldValues>, |
| 24 | +> = { |
| 25 | + name: TName |
| 26 | + control: Control<TFieldValues> |
| 27 | + onChange?: (value: string | null | undefined) => void |
| 28 | + disabled?: boolean |
| 29 | +} & ComboboxBaseProps |
| 30 | + |
| 31 | +export function ComboboxField< |
| 32 | + TFieldValues extends FieldValues, |
| 33 | + TName extends FieldPath<TFieldValues>, |
| 34 | + // TODO: constrain TValue to extend string |
| 35 | +>({ |
| 36 | + control, |
| 37 | + name, |
| 38 | + label = capitalize(name), |
| 39 | + required, |
| 40 | + onChange, |
| 41 | + disabled, |
| 42 | + ...props |
| 43 | +}: ComboboxFieldProps<TFieldValues, TName>) { |
| 44 | + const { field, fieldState } = useController({ name, control, rules: { required } }) |
| 45 | + return ( |
| 46 | + <div className="max-w-lg"> |
| 47 | + <Combobox |
| 48 | + isDisabled={disabled} |
| 49 | + label={label} |
| 50 | + required={required} |
| 51 | + selected={field.value || null} |
| 52 | + hasError={fieldState.error !== undefined} |
| 53 | + onChange={(value) => { |
| 54 | + field.onChange(value) |
| 55 | + onChange?.(value) |
| 56 | + }} |
| 57 | + {...props} |
| 58 | + /> |
| 59 | + <ErrorMessage error={fieldState.error} label={label} /> |
| 60 | + </div> |
| 61 | + ) |
| 62 | +} |
0 commit comments