import React from 'react' ; import { Box , Input , LabelInput } from 'design' ; import { useRule } from 'shared/components/Validation' ; export default function FieldInput ( { label , value , onChange , onKeyPress , placeholder , rule = defaultRule , type = 'text' , autoFocus = false , autoComplete = 'off' , readonly = false , ... styles } ) { const { valid , message } = useRule ( rule ( value ) ) ; const hasError = ! valid ; const labelText = hasError ? message : label ; return ( < Box mb = "4" { ... styles } > { label && < LabelInput hasError = { hasError } > { labelText } < /LabelInput>} < Input type = { type } autoFocus = { autoFocus } hasError = { hasError } placeholder = { placeholder } value = { value } autoComplete = { autoComplete } onChange = { onChange } onKeyPress = { onKeyPress } readOnly = { readonly } / > < /Box>); } const defaultRule = ( ) => ( ) => ( { valid : true } ) ; type Props = { value ? : string ; label ? : string ; placeholder ? : string ; autoFocus ? : boolean ; autoComplete ? : 'off' | 'on' ; type ? : 'email' | 'text' | 'password' | 'number' | 'date' | 'week' ; rule ? : ( options : unknown ) => ( ) => unknown ; onChange : ( e : React . ChangeEvent < HTMLInputElement > ) => void ; onKeyPress ? : ( e : React . KeyboardEvent < HTMLInputElement > ) => void ; readonly ? : boolean ; [ key ] : any ; } ;