konnosInputField.tsx71 lines · main
| 1 | import { InputVariants } from '@ui/components/shadcn/ui/input' |
| 2 | import { HelpCircle } from 'lucide-react' |
| 3 | import Link from 'next/link' |
| 4 | import type { Control, FieldPath, FieldValues } from 'react-hook-form' |
| 5 | import { cn, FormControl, FormField, Input, Textarea } from 'ui' |
| 6 | import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input' |
| 7 | import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' |
| 8 | |
| 9 | import type { ServerOption } from './Wrappers.types' |
| 10 | |
| 11 | interface InputFieldProps<TFieldValues extends FieldValues = FieldValues> { |
| 12 | option: ServerOption |
| 13 | control: Control<TFieldValues> |
| 14 | loading?: boolean |
| 15 | } |
| 16 | |
| 17 | const InputField = < |
| 18 | TFieldValues extends FieldValues = FieldValues, |
| 19 | TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, |
| 20 | >({ |
| 21 | control, |
| 22 | option, |
| 23 | loading = false, |
| 24 | }: InputFieldProps<TFieldValues>) => { |
| 25 | return ( |
| 26 | <FormField |
| 27 | control={control} |
| 28 | name={option.name as TName} |
| 29 | defaultValue={(option.defaultValue ?? '') as any} |
| 30 | render={({ field }) => ( |
| 31 | <FormItemLayout |
| 32 | name={option.name} |
| 33 | layout="vertical" |
| 34 | label={ |
| 35 | <div className="flex items-center space-x-2"> |
| 36 | <p>{option.label}</p> |
| 37 | {option.urlHelper !== undefined && ( |
| 38 | <Link href={option.urlHelper} target="_blank" rel="noreferrer"> |
| 39 | <span className="sr-only">Documentation</span> |
| 40 | <HelpCircle |
| 41 | strokeWidth={2} |
| 42 | size={14} |
| 43 | className="text-foreground-light hover:text-foreground cursor-pointer transition" |
| 44 | /> |
| 45 | </Link> |
| 46 | )} |
| 47 | </div> |
| 48 | } |
| 49 | labelOptional={!option.required ? 'Optional' : undefined} |
| 50 | description={option.description} |
| 51 | > |
| 52 | <FormControl> |
| 53 | {loading ? ( |
| 54 | <span className={cn(InputVariants({ size: 'small' }))}> |
| 55 | Fetching value from Vault... |
| 56 | </span> |
| 57 | ) : option.isTextArea ? ( |
| 58 | <Textarea {...field} id={option.name} rows={6} className="input-mono resize-none" /> |
| 59 | ) : option.secureEntry ? ( |
| 60 | <PasswordInput copy reveal {...field} id={option.name} /> |
| 61 | ) : ( |
| 62 | <Input {...field} id={option.name} /> |
| 63 | )} |
| 64 | </FormControl> |
| 65 | </FormItemLayout> |
| 66 | )} |
| 67 | /> |
| 68 | ) |
| 69 | } |
| 70 | |
| 71 | export default InputField |