88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
"use client"
|
|
import {
|
|
Input as AriaInput,
|
|
Label as AriaLabel,
|
|
Text,
|
|
TextField,
|
|
} from "react-aria-components"
|
|
import { Controller, useFormContext } from "react-hook-form"
|
|
|
|
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
|
|
import Label from "@/components/TempDesignSystem/Form/Label"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./input.module.css"
|
|
|
|
import type { HTMLAttributes, WheelEvent } from "react"
|
|
|
|
import type { InputProps } from "./input"
|
|
|
|
export default function Input({
|
|
"aria-label": ariaLabel,
|
|
disabled = false,
|
|
helpText = "",
|
|
label,
|
|
name,
|
|
placeholder = "",
|
|
registerOptions = {},
|
|
type = "text",
|
|
}: InputProps) {
|
|
const { control } = useFormContext()
|
|
let numberAttributes: HTMLAttributes<HTMLInputElement> = {}
|
|
if (type === "number") {
|
|
numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
|
|
evt.currentTarget.blur()
|
|
}
|
|
}
|
|
return (
|
|
<Controller
|
|
disabled={disabled}
|
|
control={control}
|
|
name={name}
|
|
rules={registerOptions}
|
|
render={({ field, fieldState }) => (
|
|
<TextField
|
|
aria-label={ariaLabel}
|
|
isDisabled={field.disabled}
|
|
isInvalid={fieldState.invalid}
|
|
isRequired={!!registerOptions.required}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
onChange={field.onChange}
|
|
validationBehavior="aria"
|
|
value={field.value}
|
|
>
|
|
<AriaLabel className={styles.container} htmlFor={field.name}>
|
|
<Body asChild fontOnly>
|
|
<AriaInput
|
|
{...numberAttributes}
|
|
aria-labelledby={field.name}
|
|
className={styles.input}
|
|
id={field.name}
|
|
placeholder={placeholder}
|
|
type={type}
|
|
/>
|
|
</Body>
|
|
<Label required={!!registerOptions.required}>{label}</Label>
|
|
</AriaLabel>
|
|
{helpText && !fieldState.error ? (
|
|
<Caption asChild color="black">
|
|
<Text className={styles.helpText} slot="description">
|
|
<CheckIcon height={20} width={30} />
|
|
{helpText}
|
|
</Text>
|
|
</Caption>
|
|
) : null}
|
|
{fieldState.error ? (
|
|
<Caption className={styles.error} fontOnly>
|
|
<InfoCircleIcon color="red" />
|
|
{fieldState.error.message}
|
|
</Caption>
|
|
) : null}
|
|
</TextField>
|
|
)}
|
|
/>
|
|
)
|
|
}
|