import * as React from 'react'; /** * 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 FormikState { /** 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; } /** * Formik computed properties. These are read-only. */ export interface FormikComputedProps { /** True if any input has been touched. False otherwise. */ readonly dirty: boolean; /** True if state.errors is empty */ readonly isValid: boolean; /** The initial values of the form */ readonly initialValues: Values; /** The initial errors of the form */ readonly initialErrors: FormikErrors; /** The initial visited fields of the form */ readonly initialTouched: FormikTouched; /** The initial status of the form */ readonly initialStatus?: any; } /** * Formik state helpers */ export interface FormikHelpers { /** Manually set top level status. */ setStatus: (status?: any) => void; /** Manually set errors object */ setErrors: (errors: FormikErrors) => void; /** Manually set isSubmitting */ setSubmitting: (isSubmitting: boolean) => void; /** Manually set touched object */ setTouched: (touched: FormikTouched, shouldValidate?: boolean) => void; /** Manually set values object */ setValues: (values: React.SetStateAction, shouldValidate?: boolean) => void; /** Set value of form field directly */ setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void; /** Set error message of a form field directly */ setFieldError: (field: string, message: string | undefined) => void; /** Set whether field has been touched directly */ setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void; /** Validate form values */ validateForm: (values?: any) => Promise>; /** Validate field value */ validateField: (field: string) => void; /** Reset form */ resetForm: (nextState?: Partial>) => void; /** Submit the form imperatively */ submitForm: () => Promise; /** Set Formik state, careful! */ setFormikState: (f: FormikState | ((prevState: FormikState) => FormikState), cb?: () => void) => void; } /** * Formik form event handlers */ export interface FormikHandlers { /** Form submit handler */ handleSubmit: (e?: React.FormEvent) => void; /** Reset form event handler */ handleReset: (e?: React.SyntheticEvent) => void; handleBlur: { /** Classic React blur handler, keyed by input name */ (e: React.FocusEvent): void; /** Preact-like linkState. Will return a handleBlur function. */ (fieldOrEvent: T): T extends string ? (e: any) => void : void; }; handleChange: { /** Classic React change handler, keyed by input name */ (e: React.ChangeEvent): void; /** Preact-like linkState. Will return a handleChange function. */ >(field: T): T extends React.ChangeEvent ? void : (e: string | React.ChangeEvent) => void; }; getFieldProps: (props: any) => FieldInputProps; getFieldMeta: (name: string) => FieldMetaProps; getFieldHelpers: (name: string) => FieldHelperProps; } /** * Base formik configuration/props shared between the HoC and Component. */ export interface FormikSharedConfig { /** 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; /** 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; } /** * props */ export interface FormikConfig extends FormikSharedConfig { /** * Form component to render */ component?: React.ComponentType> | React.ReactNode; /** * 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?: (values: Values, formikHelpers: FormikHelpers) => void; /** * Submission handler */ onSubmit: (values: Values, formikHelpers: FormikHelpers) => void | Promise; /** * 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?: (values: Values) => void | object | Promise>; /** Inner ref */ innerRef?: React.Ref>; } /** * State, handlers, and helpers made available to form component or render prop * of . */ export declare type FormikProps = FormikSharedConfig & FormikState & FormikHelpers & FormikHandlers & FormikComputedProps & FormikRegistration & { submitForm: () => Promise; }; /** Internal Formik registration methods that get passed down as props */ export interface FormikRegistration { registerField: (name: string, fns: { validate?: FieldValidator; }) => void; unregisterField: (name: string) => void; } /** * State, handlers, and helpers made available to Formik's primitive components through context. */ export declare type FormikContextType = FormikProps & Pick, 'validate' | 'validationSchema'>; export interface SharedRenderProps { /** * Field component to render. Can either be a string like 'select' or a component. */ component?: string | React.ComponentType; /** * Render prop (works like React router's } />) */ render?: (props: T) => React.ReactNode; /** * Children render function {props => ...}) */ children?: (props: T) => React.ReactNode; } 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; } /** 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; } /** Field input value, name, and event handlers */ export interface FieldInputProps { /** Value of the field */ value: Value; /** Name of the field */ name: string; /** Multiple select? */ multiple?: boolean; /** Is the field checked? */ checked?: boolean; /** Change event handler */ onChange: FormikHandlers['handleChange']; /** Blur event handler */ onBlur: FormikHandlers['handleBlur']; } export declare type FieldValidator = (value: any) => string | void | Promise;