import { RefObject } from 'preact' ; import { useState } from 'preact/hooks' ; import { validate } from 'formee' ; type InputEventHandler = ( event : Event ) => void ; export const validateInputField = ( fieldName , formRef , formValidation , valueSetter , errorSetter ) : InputEventHandler => ( event ) : void => { const errors = validate ( formRef . current as HTMLFormElement , formValidation ) ; const value = ( event . target as HTMLInputElement ) . value ; const defaultValue = '' ; valueSetter ( value ?? defaultValue ) ; errorSetter ( errors [ fieldName ] ?? defaultValue ) ; } ; export interface FormTextInputState { value : string ; setValue : ( value : string ) => void ; errors : string ; setErrors : ( value : string ) => void ; } export interface FormTextInputProps { name : string ; value : string ; hasError : boolean ; onInput : Function ; } export const useInputFormControl = ( formRef , formValidation , fieldName , defaultValue = '' ) : [ FormTextInputState , FormTextInputProps ] => { const [ value , setValue ] = useState ( defaultValue ) ; const [ errors , setErrors ] = useState ( '' ) ; return [ { value , setValue , errors , setErrors } , { name : fieldName , value , hasError : Boolean ( errors ) , onInput : validateInputField ( fieldName , formRef , formValidation , setValue , setErrors ) , } , ] ; } ;