import * as React from 'react'; import { Comparer, Selector } from 'use-optimized-selector'; import { TypedField } from './Field.types'; import { TypedFieldArray } from './FieldArray.types'; import { PathMatchingValue, PathOf, PathLikeValue } from './helpers/path-helpers'; export declare type ParseFn = (value: unknown, name: string) => Value; export declare type FormatFn = (value: Value, name: string) => any; export declare type SingleValue = Value extends (infer SingleValue)[] ? SingleValue : Value; export declare type InputElements = "input" | "textarea" | "select"; /** * Values of fields in the form */ export interface FormikValues { [field: string]: any; } /** * An object containing error messages whose keys correspond to FormikValues. * Should always be an object of strings, but any is allowed to support i18n libraries. */ export declare type FormikErrors = { [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikErrors[] | string | string[] : string | string[] : Values[K] extends object ? FormikErrors : string; }; /** * An object containing touched state of the form whose keys correspond to FormikValues. */ export declare type FormikTouched = { [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikTouched[] : boolean : Values[K] extends object ? FormikTouched : boolean; }; /** * Formik state tree */ export interface FormikCurrentState { /** Form values */ values: Values; /** map of field names to specific error for that field */ errors: FormikErrors; /** map of field names to whether the field has been touched */ touched: FormikTouched; /** whether the form is currently submitting */ isSubmitting: boolean; /** whether the form is currently validating (prior to submission) */ isValidating: boolean; /** Top level status state, in case you need it */ status?: any; /** Number of times user tried to submit the form */ submitCount: number; } export interface FormikInitialState { initialValues: FormikConfig['initialValues']; initialErrors: FormikConfig['initialErrors']; initialTouched: FormikConfig['initialTouched']; initialStatus: FormikConfig['initialStatus']; } export declare type FormikReducerState = FormikInitialState & FormikCurrentState; export declare type FormikMessage = { type: 'SUBMIT_ATTEMPT'; } | { type: 'SUBMIT_FAILURE'; } | { type: 'SUBMIT_SUCCESS'; } | { type: 'SET_ISVALIDATING'; payload: boolean; } | { type: 'SET_ISSUBMITTING'; payload: boolean; } | { type: 'SET_VALUES'; payload: Values; } | { type: 'SET_FIELD_VALUE'; payload: { field: string; value?: any; }; } | { type: 'SET_FIELD_TOUCHED'; payload: { field: string; value?: boolean; }; } | { type: 'SET_FIELD_ERROR'; payload: { field: string; value?: string; }; } | { type: 'SET_TOUCHED'; payload: FormikTouched; } | { type: 'SET_ERRORS'; payload: FormikErrors; } | { type: 'SET_STATUS'; payload: any; } | { type: 'SET_FORMIK_STATE'; payload: (s: FormikReducerState) => FormikReducerState; } | { type: 'RESET_FORM'; payload: Partial>; }; /** * Formik computed state. These are read-only and * result from updates to FormikState but do not live there. */ export interface FormikComputedState { /** * True if `!isEqual(initialValues, state.values)` */ readonly dirty: boolean; /** * True if one of: * `dirty && state.errors is empty` or * `!dirty && isInitialValid` */ readonly isValid: boolean; } /** * @deprecated use FormikComputedState */ export declare type FormikComputedProps = FormikComputedState; export declare type FormikState = FormikReducerState & FormikComputedState; export declare type GetStateFn = () => FormikState; export declare type FormikSubscribeFn = (callback: Function) => () => void; export declare type RegisterFieldFn = (name: PathMatchingValue, args: { validate?: FieldValidator>; }) => void; export declare type UnregisterFieldFn = >(name: Path) => void; /** * Formik state helpers */ export declare type SetStatusFn = (status: any) => void; export declare type SetErrorsFn = (errors: FormikErrors) => void; export declare type SetSubmittingFn = (isSubmitting: boolean) => void; export declare type SetTouchedFn = (touched: FormikTouched, shouldValidate?: boolean | undefined) => Promise>; export declare type SetValuesFn = (values: React.SetStateAction, shouldValidate?: boolean | undefined) => Promise>; export declare type SetFieldValueFn = (field: PathLikeValue | PathMatchingValue, value: Value, shouldValidate?: boolean | undefined) => Promise>; export declare type SetFieldErrorFn = >(field: Path, error: string | undefined) => void; export declare type SetFieldTouchedFn = >(field: Path, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise>; export declare type ValidateFormFn = (values?: Values) => Promise>; export declare type ValidateFieldFn = >(name: Path) => Promise; export declare type ResetFormFn = (nextState?: Partial> | undefined) => void; export declare type SetFormikStateFn = (stateOrCb: FormikReducerState | ((state: FormikReducerState) => FormikReducerState)) => void; export declare type SubmitFormFn = () => Promise; export interface FormikHelpers { /** Manually set top level status. */ setStatus: SetStatusFn; /** Manually set errors object */ setErrors: SetErrorsFn; /** Manually set isSubmitting */ setSubmitting: SetSubmittingFn; /** Manually set touched object */ setTouched: SetTouchedFn; /** Manually set values object */ setValues: SetValuesFn; /** Set value of form field directly */ setFieldValue: SetFieldValueFn; /** Set error message of a form field directly */ setFieldError: SetFieldErrorFn; /** Set whether field has been touched directly */ setFieldTouched: SetFieldTouchedFn; /** Validate form values */ validateForm: ValidateFormFn; /** Validate field value */ validateField: ValidateFieldFn; /** Reset form */ resetForm: ResetFormFn; /** Submit the form imperatively */ submitForm: SubmitFormFn; /** Set Formik state, careful! */ setFormikState: SetFormikStateFn; } export interface FormikStateHelpers { /** Get Formik State from outside of Render. */ getState: GetStateFn; /** * Subscribe to changes when Formik updates. * * Probably avoid using this, instead use `useFormikSubscriptionByRef(formikRef.current, initialValues, selector, comparer)` */ subscribe: FormikSubscribeFn; /** Use Formik State from within Render. */ useState: >(selector?: Selector, Return>, comparer?: Comparer, shouldSubscribe?: boolean) => Return; } export declare type HandleSubmitFn = (e?: React.FormEvent | undefined) => void; export declare type HandleResetFn = (e?: any) => void; /** * Event callback returned by `formik.handleBlur`. */ export declare type HandleBlurEventFn = (event: React.FocusEvent) => void; /** * Type of `formik.handleBlur`. * May be an event callback, or accept a field name and return an event callback. */ export declare type HandleBlurFn = { (eventOrString: string): HandleBlurEventFn; (event: React.FocusEvent): void; }; /** * Event callback returned by `formik.handleChange`. */ export declare type HandleChangeEventFn = (event: React.ChangeEvent | string) => void; /** * Type of `formik.handleChange`. * May be an event callback, or accept a field name and return an event callback. */ export declare type HandleChangeFn = { (event: React.ChangeEvent): void; (name: string): HandleChangeEventFn; }; /** * Formik form event handlers */ export interface FormikHandlers { handleSubmit: HandleSubmitFn; handleReset: HandleResetFn; handleBlur: HandleBlurFn; handleChange: HandleChangeFn; } export declare type ValidateFn = (values?: Values | undefined) => Promise>; /** Internal Formik registration methods that get passed down as props */ export interface FormikRegistration { unregisterField: UnregisterFieldFn; registerField: RegisterFieldFn; } export interface FormikFieldHelpers { TypedField: TypedField; TypedFieldArray: TypedFieldArray; } export declare type FormikApi = FormikHelpers & FormikStateHelpers & FormikHandlers & FormikRegistration & FormikFieldHelpers; export declare type FormValidator = (values: Values) => void | FormikErrors | Promise | void>; export interface FormikValidationConfig { /** Tells Formik to validate the form on each input's onChange event */ validateOnChange?: boolean; /** Tells Formik to validate the form on each input's onBlur event */ validateOnBlur?: boolean; /** Tells Formik to validate upon mount */ validateOnMount?: boolean; /** * A Yup Schema or a function that returns a Yup schema */ validationSchema?: any | (() => any); /** * Validation function. Must return an error object or promise that * throws an error object where that object keys map to corresponding value. */ validate?: FormValidator; } /** * Base formik configuration/props shared between the HoC and Component. */ export declare type FormikSharedConfig = FormikValidationConfig & { /** Tell Formik if initial form values are valid or not on first render */ isInitialValid?: boolean | ((props: Props) => boolean); /** Should Formik reset the form when new initialValues change */ enableReinitialize?: boolean; }; /** * State, handlers, and helpers made available to form component or render prop * of . */ export declare type FormikProps = FormikSharedConfig & FormikReducerState & FormikInitialState & FormikHelpers & FormikStateHelpers & FormikFieldHelpers & FormikHandlers & FormikComputedState & FormikRegistration; export declare type FormikResetHandler = (values: Values, formikHelpers: FormikHelpers) => void | Promise; export declare type FormikSubmitHandler = (values: Values, formikHelpers: FormikHelpers) => void | Promise; /** * props */ export interface FormikConfig extends FormikSharedConfig { /** * Form component to render */ component?: React.ComponentType>; /** * Render prop (works like React router's } />) * @deprecated */ render?: (props: FormikProps) => React.ReactNode; /** * React children or child render callback */ children?: ((props: FormikProps) => React.ReactNode) | React.ReactNode; /** * Initial values of the form */ initialValues: Values; /** * Initial status */ initialStatus?: any; /** Initial object map of field names to specific error for that field */ initialErrors?: FormikErrors; /** Initial object map of field names to whether the field has been touched */ initialTouched?: FormikTouched; /** * Reset handler */ onReset?: FormikResetHandler; /** * Submission handler */ onSubmit: FormikSubmitHandler; /** Inner ref */ innerRef?: React.Ref>; } /** * State, handlers, and helpers made available to Formik's primitive components through context. */ export declare type FormikContextType = FormikApi & Pick, 'validate' | 'validationSchema'>; export declare type FormikConnectedType = FormikContextType & FormikSharedConfig & FormikState; export declare type GenericFieldHTMLAttributes = JSX.IntrinsicElements['input'] | JSX.IntrinsicElements['select'] | JSX.IntrinsicElements['textarea']; /** Field metadata */ export interface FieldMetaProps { /** Value of the field */ value: Value; /** Error message of the field */ error?: string; /** Has the field been visited? */ touched: boolean; /** Initial value of the field */ initialValue?: Value; /** Initial touched state of the field */ initialTouched: boolean; /** Initial error message of the field */ initialError?: string; } /** * @deprecated use `SetFieldTouchedFn` */ export declare type SetFieldTouched = SetFieldTouchedFn; /** Imperative handles to change a field's value, error and touched */ export interface FieldHelperProps { /** Set the field's value */ setValue: (value: Value, shouldValidate?: boolean) => void; /** Set the field's touched value */ setTouched: (value: boolean, shouldValidate?: boolean) => void; /** Set the field's error value */ setError: (value: string | undefined) => void; } export declare type FieldOnChangeProp = (eventOrValue: React.ChangeEvent | Value) => void; export declare type FieldOnBlurProp = (eventOrValue: React.ChangeEvent | any) => void; /** Field input value, name, and event handlers */ export declare type FieldInputProps = { /** Value of the field */ value: SingleValue; /** Name of the field */ name: PathMatchingValue; /** Multiple select? */ multiple?: boolean; /** Is the field checked? */ checked?: boolean; /** Change event handler */ onChange: FieldOnChangeProp; /** Blur event handler */ onBlur: FieldOnBlurProp; }; export declare type FieldValidationResult = string | void | Promise; export declare type FieldValidator = (value: Value) => FieldValidationResult | Promise; export interface FieldRegistry { [field: string]: { validate?: FieldValidator; }; } /** * If an object has optional properties, force passing undefined. * This helps us make sure we are passing back all possible props. */ export declare type NotOptional = { [Key in keyof Required]: T[Key] extends Required ? T[Key] : T[Key] | undefined; };