// Type definitions for react-use-form-state 0.12.1 // Project: https://github.com/wsmd/react-use-form-state // Definitions by: Waseem Dahman type StateShape = { [key in keyof T]: any }; // Even though we're accepting a number as a default value for numeric inputs // (e.g. type=number and type=range), the value stored in state for those // inputs will be a string type StateValues = { readonly [A in keyof T]: T[A] extends number ? string : T[A]; }; type StateErrors = { readonly [A in keyof T]?: E | string; }; interface UseFormStateHook { (initialState?: Partial> | null, options?: FormOptions): [ FormState, Inputs, ]; , E = StateErrors>( initialState?: Partial | null, options?: FormOptions, ): [FormState, Inputs]; } export const useFormState: UseFormStateHook; interface FormState> { values: StateValues; errors: E; validity: { readonly [A in keyof T]?: boolean }; touched: { readonly [A in keyof T]?: boolean }; pristine: { readonly [A in keyof T]: boolean }; reset(): void; clear(): void; setField(name: K, value: T[K]): void; setFieldError(name: keyof T, error: any): void; clearField(name: keyof T): void; resetField(name: keyof T): void; isPristine(): boolean; } interface FormOptions { onChange?( event: React.ChangeEvent, stateValues: StateValues, nextStateValues: StateValues, ): void; onBlur?(event: React.FocusEvent): void; onClear?(): void; onReset?(): void; onTouched?(event: React.FocusEvent): void; validateOnBlur?: boolean; withIds?: boolean | ((name: string, value?: string) => string); } // Inputs interface Inputs { selectMultiple: InputInitializer>; select: InputInitializer>; email: InputInitializer>; color: InputInitializer>; password: InputInitializer>; text: InputInitializer>; textarea: InputInitializer>; url: InputInitializer>; search: InputInitializer>; number: InputInitializer>; range: InputInitializer>; tel: InputInitializer>; date: InputInitializer>; month: InputInitializer>; week: InputInitializer>; time: InputInitializer>; radio: InputInitializerWithOwnValue>; checkbox: InputInitializerWithOptionalOwnValue>; raw: RawInputInitializer; label(name: string, value?: string): LabelProps; id(name: string, value?: string): string; } interface InputInitializer { (options: InputOptions): InputProps; (name: K): InputProps; } interface InputInitializerWithOwnValue { (options: InputOptions): R; (name: K, value: OwnValueType): R; } interface InputInitializerWithOptionalOwnValue { (options: InputOptions): R; (name: K, value?: OwnValueType): R; } interface RawInputInitializer { ( options: RawInputOptions, ): RawInputProps; (name: K): RawInputProps; } type InputOptions = { name: K; validateOnBlur?: boolean; touchOnChange?: boolean; onChange?(event: React.ChangeEvent): void; onBlur?(event: React.FocusEvent): void; compare?(initialValue: StateValues[K], value: StateValues[K]): boolean; validate?( value: string, values: StateValues, event: React.ChangeEvent | React.FocusEvent, ): any; } & OwnOptions; interface RawInputOptions { name: K; touchOnChange?: boolean; validateOnBlur?: boolean; onBlur?(...args: any[]): void; onChange?(rawValue: RawValue): StateValues[K]; compare?(initialValue: StateValues[K], value: StateValues[K]): boolean; validate?(value: StateValues[K], values: StateValues, rawValue: RawValue): any; } interface RawInputProps { name: Extract; value: StateValues[K]; onChange(rawValue: RawValue): any; onBlur(...args: any[]): any; } type InputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement; type OwnValueType = string | number | boolean | string[]; interface BaseInputProps { id: string; onChange(event: any): void; onBlur(event: any): void; value: string; name: Extract; type: string; } type TypeLessInputProps = Omit, 'type'>; interface CheckableInputProps extends BaseInputProps { checked: boolean; } interface SelectMultipleProps extends TypeLessInputProps { multiple: boolean; } interface LabelProps { htmlFor: string; } type Omit = Pick>;