みてるぞ
750aa40e8e
Reviewed-on: #355 Co-authored-by: miteruzo <miteruzo@naver.com> Co-committed-by: miteruzo <miteruzo@naver.com>
37 行
1.0 KiB
TypeScript
37 行
1.0 KiB
TypeScript
import { useId } from 'react'
|
|
|
|
import FieldError from '@/components/common/FieldError'
|
|
import Label from '@/components/common/Label'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
import type { FC, ReactNode } from 'react'
|
|
|
|
type FieldState = { describedBy?: string
|
|
invalid: boolean }
|
|
|
|
type Props = {
|
|
children: (state: FieldState) => ReactNode
|
|
checkBox?: { label: string
|
|
checked: boolean
|
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
|
|
className?: string
|
|
label: ReactNode
|
|
messages?: string[] }
|
|
|
|
|
|
const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
|
|
const id = useId ()
|
|
const invalid = messages != null && messages.length > 0
|
|
const errorId = invalid ? `${ id }-error` : undefined
|
|
|
|
return (
|
|
<div className={cn (className)}>
|
|
<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
|
|
{children ({ describedBy: errorId, invalid })}
|
|
<FieldError id={errorId} messages={messages}/>
|
|
</div>)
|
|
}
|
|
|
|
|
|
export default FormField
|