UNPKG

rc-simple-hook-form

Version:
534 lines (528 loc) 27.9 kB
import * as React$1 from 'react'; import React__default, { ChangeEvent } from 'react'; declare const validInputType: readonly ["checkbox", "color", "date", "datetime-local", "email", "month", "number", "password", "radio", "range", "search", "tel", "text", "time", "url", "week", "textarea", "select-one", "select-multiple"]; type EventElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; type UseFormParam<T> = { initialState?: T; }; type ValidationFields = { required?: boolean | string; validEmail?: boolean | string; minLength?: { value: number; message?: string; }; maxLength?: { value: number; message?: string; }; min?: { value: number; message?: string; }; max?: { value: number; message?: string; }; pattern?: { value: RegExp; message?: string; }; validate?: (value: any) => undefined | string; }; type OptionValueType = { radioFieldValue?: string; checkboxFieldValue?: string; }; type RefType = { ref?: React.MutableRefObject<EventElement | null>; disabled?: boolean; runValidationWhenChangeIn?: string[]; }; type RegisterExtraProps = ValidationFields & OptionValueType & RefType & { handleOnChange?: (e: ChangeEvent<EventElement>) => void; handleOnFocus?: (e: React.FocusEvent<EventElement, Element>) => void; handleOnBlur?: (e: React.FocusEvent<EventElement, Element>) => void; }; type InputType = (typeof validInputType)[number]; declare const useForm$1: <T extends Record<string, any>>(param?: UseFormParam<T>) => { formState: { values: Record<string, any>; active: Record<string, boolean>; touched: Record<string, boolean>; errors: Record<string, string[]>; invalid: boolean; isEmpty: boolean; fieldPristine: Record<string, boolean>; formPristine: boolean; }; control: { getFormState: () => { values: Record<string, any>; active: Record<string, boolean>; touched: Record<string, boolean>; errors: Record<string, string[]>; invalid: boolean; fieldPristine: Record<string, boolean>; formPristine: boolean; }; register: (name: keyof T, type: InputType, extra?: RegisterExtraProps) => { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; }; resetForm: () => void; resetField: (name: keyof T) => void; setField: (name: string, value: any, options?: { shouldSetTouched?: boolean; shouldCheckPristine?: boolean; multipleValues?: boolean; validations?: ValidationFields; }) => void; }; useInitializeFormState: (initialState: T, deps: any[]) => void; handleSubmit: (submitCallback: (arg: T) => void) => (e: React__default.FormEvent<HTMLFormElement>) => void; register: (name: keyof T, type: InputType, extra?: RegisterExtraProps) => { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled: true; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: ChangeEvent<EventElement>) => void; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; disabled?: undefined; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; }; resetForm: () => void; resetField: (name: keyof T) => void; setField: (name: string, value: any, options?: { shouldSetTouched?: boolean; shouldCheckPristine?: boolean; multipleValues?: boolean; validations?: ValidationFields; }) => void; }; type RenderProp = { field: { value: any; checked: any; multiple: boolean | undefined; disabled: boolean | undefined; name: string; type: InputType; onBlur: (e: React__default.FocusEvent<EventElement, Element>) => void; onChange: (e: React__default.ChangeEvent<EventElement>) => void; onFocus: (e: React__default.FocusEvent<EventElement, Element>) => void; }; fieldState: { isTouched: boolean; isDirty: boolean; invalid: boolean; isActive: boolean; isEmpty: boolean; error: string[]; }; }; type ControllerProps = { name: string; type: InputType; control: ReturnType<typeof useForm>["control"]; initialValue?: unknown; rules?: ValidationFields; disabled?: boolean; runValidationWhenChangesIn?: string[]; controllerRef?: React__default.MutableRefObject<EventElement | null>; radioFieldValue?: string; checkboxFieldValue?: string; render: (arg: RenderProp) => React__default.JSX.Element; }; declare function Controller$1(props: ControllerProps): React__default.JSX.Element; declare const useForm: <T extends Record<string, any>>(param?: UseFormParam<T>) => { formState: { values: Record<string, any>; active: Record<string, boolean>; touched: Record<string, boolean>; errors: Record<string, string[]>; invalid: boolean; isEmpty: boolean; fieldPristine: Record<string, boolean>; formPristine: boolean; }; control: { getFormState: () => { values: Record<string, any>; active: Record<string, boolean>; touched: Record<string, boolean>; errors: Record<string, string[]>; invalid: boolean; fieldPristine: Record<string, boolean>; formPristine: boolean; }; register: (name: keyof T, type: InputType, extra?: RegisterExtraProps) => { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; }; resetForm: () => void; resetField: (name: keyof T) => void; setField: (name: string, value: any, options?: { shouldSetTouched?: boolean; shouldCheckPristine?: boolean; multipleValues?: boolean; validations?: ValidationFields; }) => void; }; useInitializeFormState: (initialState: T, deps: any[]) => void; handleSubmit: (submitCallback: (arg: T) => void) => (e: React.FormEvent<HTMLFormElement>) => void; register: (name: keyof T, type: InputType, extra?: RegisterExtraProps) => { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; checked: any; value: string | undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; multiple: boolean; checked?: undefined; value?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; checked?: undefined; value?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled: true; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; } | { ref: (e: null | EventElement) => void; onChange: (e: React$1.ChangeEvent<EventElement>) => void; onBlur: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; onFocus: (e: React.FocusEvent<EventElement, globalThis.Element>) => void; disabled?: undefined; value: any; checked?: undefined; multiple?: undefined; name: keyof T; type: "number" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "url" | "week" | "textarea" | "select-one" | "select-multiple"; }; resetForm: () => void; resetField: (name: keyof T) => void; setField: (name: string, value: any, options?: { shouldSetTouched?: boolean; shouldCheckPristine?: boolean; multipleValues?: boolean; validations?: ValidationFields; }) => void; }; declare const Controller: typeof Controller$1; type UseFormInputType = InputType; type UseFormControl = ReturnType<typeof useForm$1>["control"]; type UseFormController = Parameters<typeof Controller$1>[0]; type UseFormValidationField = ValidationFields; type UseFormState = ReturnType<typeof useForm$1>["formState"]; type UseFormElement = EventElement; export { Controller, type UseFormControl, type UseFormController, type UseFormElement, type UseFormInputType, type UseFormState, type UseFormValidationField, useForm };