Skip to content

Commit

Permalink
Merge pull request #1 from FranciscoMSM/form-on-blur
Browse files Browse the repository at this point in the history 
add onBlur handler to Formik component
  • Loading branch information
@FranciscoMSM
FranciscoMSM authored Jun 20, 2019
2 parents 22db39c + d11fce5 commit a431bf7
Show file tree
Hide file tree
Showing 27 changed files with 26,353 additions and 20 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
node_modules
dist
compiled
*.log
coverage
Expand Down
36 changes: 18 additions & 18 deletions .size-snapshot.json
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
{
"./dist/formik.umd.production.js": {
"bundled": 142526,
"minified": 39497,
"gzipped": 11966
"bundled": 145186,
"minified": 39994,
"gzipped": 12072
},
"./dist/formik.umd.development.js": {
"bundled": 172706,
"minified": 49934,
"gzipped": 15075
"bundled": 188240,
"minified": 54143,
"gzipped": 16145
},
"./dist/formik.cjs.production.js": {
"bundled": 43495,
"minified": 21912,
"gzipped": 5488
"bundled": 44505,
"minified": 22221,
"gzipped": 5556
},
"./dist/formik.cjs.development.js": {
"bundled": 44383,
"minified": 22795,
"gzipped": 5826
"bundled": 45393,
"minified": 23121,
"gzipped": 5898
},
"dist/formik.esm.js": {
"bundled": 40074,
"minified": 22184,
"gzipped": 5706,
"bundled": 40876,
"minified": 22477,
"gzipped": 5777,
"treeshaked": {
"rollup": {
"code": 771,
"import_statements": 349
"code": 721,
"import_statements": 299
},
"webpack": {
"code": 3661
"code": 3771
}
}
}
Expand Down
9 changes: 9 additions & 0 deletions dist/ErrorMessage.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as React from 'react';
export interface ErrorMessageProps {
name: string;
className?: string;
component?: string | React.ComponentType;
children?: ((errorMessage: string) => React.ReactNode);
render?: ((errorMessage: string) => React.ReactNode);
}
export declare const ErrorMessage: React.ComponentType<ErrorMessageProps>;
27 changes: 27 additions & 0 deletions dist/FastField.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import { FormikProps, GenericFieldHTMLAttributes, FormikContext } from './types';
export interface FastFieldProps<V = any> {
field: {
onChange: (e: React.ChangeEvent<any>) => void;
onBlur: (e: any) => void;
value: any;
name: string;
};
form: FormikProps<V>;
}
export interface FastFieldConfig<T> {
component?: string | React.ComponentType<FastFieldProps<any>> | React.ComponentType<void>;
render?: ((props: FastFieldProps<any>) => React.ReactNode);
children?: ((props: FastFieldProps<any>) => React.ReactNode) | React.ReactNode;
validate?: ((value: any) => string | Promise<void> | undefined);
shouldUpdate?: (nextProps: T & GenericFieldHTMLAttributes & {
formik: FormikContext<any>;
}, props: {}) => boolean;
name: string;
className?: string;
type?: string;
value?: any;
innerRef?: (instance: any) => void;
}
export declare type FastFieldAttributes<T> = GenericFieldHTMLAttributes & FastFieldConfig<T> & T;
export declare const FastField: React.ComponentType<any>;
23 changes: 23 additions & 0 deletions dist/Field.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import * as React from 'react';
import { FormikProps, GenericFieldHTMLAttributes, FormikHandlers } from './types';
export interface FieldProps<V = any> {
field: {
onChange: FormikHandlers['handleChange'];
onBlur: FormikHandlers['handleBlur'];
value: any;
name: string;
};
form: FormikProps<V>;
}
export interface FieldConfig {
component?: string | React.ComponentType<FieldProps<any>> | React.ComponentType<void>;
render?: ((props: FieldProps<any>) => React.ReactNode);
children?: ((props: FieldProps<any>) => React.ReactNode) | React.ReactNode;
validate?: ((value: any) => string | Promise<void> | undefined);
name: string;
type?: string;
value?: any;
innerRef?: (instance: any) => void;
}
export declare type FieldAttributes<T> = GenericFieldHTMLAttributes & FieldConfig & T;
export declare const Field: React.ComponentType<any>;
33 changes: 33 additions & 0 deletions dist/FieldArray.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import { SharedRenderProps, FormikProps } from './types';
export declare type FieldArrayRenderProps = ArrayHelpers & {
form: FormikProps<any>;
name: string;
};
export declare type FieldArrayConfig = {
name: string;
validateOnChange?: boolean;
} & SharedRenderProps<FieldArrayRenderProps>;
export interface ArrayHelpers {
push: (obj: any) => void;
handlePush: (obj: any) => () => void;
swap: (indexA: number, indexB: number) => void;
handleSwap: (indexA: number, indexB: number) => () => void;
move: (from: number, to: number) => void;
handleMove: (from: number, to: number) => () => void;
insert: (index: number, value: any) => void;
handleInsert: (index: number, value: any) => () => void;
replace: (index: number, value: any) => void;
handleReplace: (index: number, value: any) => () => void;
unshift: (value: any) => number;
handleUnshift: (value: any) => () => void;
handleRemove: (index: number) => () => void;
handlePop: () => () => void;
remove<T>(index: number): T | undefined;
pop<T>(): T | undefined;
}
export declare const move: (array: any[], from: number, to: number) => any[];
export declare const swap: (array: any[], indexA: number, indexB: number) => any[];
export declare const insert: (array: any[], index: number, value: any) => any[];
export declare const replace: (array: any[], index: number, value: any) => any[];
export declare const FieldArray: React.ComponentType<FieldArrayConfig>;
3 changes: 3 additions & 0 deletions dist/Form.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import * as React from 'react';
export declare type FormikFormProps = Pick<React.FormHTMLAttributes<HTMLFormElement>, Exclude<keyof React.FormHTMLAttributes<HTMLFormElement>, 'onReset' | 'onSubmit'>>;
export declare const Form: React.ComponentType<Pick<React.FormHTMLAttributes<HTMLFormElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "onBlur" | "name" | "className" | "autoComplete" | "placeholder" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "acceptCharset" | "action" | "encType" | "method" | "noValidate" | "target">>;
141 changes: 141 additions & 0 deletions dist/Formik.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import * as React from 'react';
import { FormikActions, FormikConfig, FormikErrors, FormikState, FormikTouched, FormikValues } from './types';
export declare class Formik<Values = FormikValues> extends React.Component<FormikConfig<Values>, FormikState<Values>> {
static defaultProps: {
validateOnChange: boolean;
validateOnBlur: boolean;
isInitialValid: boolean;
enableReinitialize: boolean;
};
initialValues: Values;
didMount: boolean;
hcCache: {
[key: string]: (e: unknown | React.ChangeEvent<any>) => void;
};
hbCache: {
[key: string]: (e: any) => void;
};
fields: {
[field: string]: React.Component<any>;
};
validator: any;
constructor(props: FormikConfig<Values>);
registerField: (name: string, Comp: React.Component<any, {}, any>) => void;
unregisterField: (name: string) => void;
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(prevProps: Readonly<FormikConfig<Values>>): void;
setErrors: (errors: FormikErrors<Values>) => void;
setTouched: (touched: FormikTouched<Values>) => void;
setValues: (values: Values) => void;
setStatus: (status?: any) => void;
setError: (error: any) => void;
setSubmitting: (isSubmitting: boolean) => void;
validateField: (field: string) => Promise<Object>;
runSingleFieldLevelValidation: (field: string, value: string | void) => Promise<string>;
runFieldLevelValidations(values: FormikValues): Promise<FormikErrors<Values>>;
runValidateHandler(values: FormikValues): Promise<FormikErrors<Values>>;
runValidationSchema: (values: FormikValues) => Promise<{}>;
runValidations: (values?: FormikValues) => Promise<FormikErrors<Values>>;
handleChange: (eventOrPath: string | React.ChangeEvent<any>) => void | ((eventOrValue: unknown) => void);
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement> | undefined) => void;
submitForm: () => Promise<void>;
executeSubmit: () => void;
handleBlur: (eventOrPath: string | React.FocusEvent<any>) => void | ((e?: React.FocusEvent<any> | undefined) => void);
setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
setFieldError: (field: string, message: string | undefined) => void;
resetForm: (nextValues?: Values | undefined) => void;
handleReset: () => void;
setFormikState: (s: any, callback?: (() => void) | undefined) => void;
validateForm: (values: Values) => Promise<FormikErrors<Values>>;
getFormikActions: () => FormikActions<Values>;
getFormikComputedProps: () => {
dirty: boolean;
isValid: boolean;
initialValues: Values;
};
getFormikBag: () => {
registerField: (name: string, Comp: React.Component<any, {}, any>) => void;
unregisterField: (name: string) => void;
handleBlur: (eventOrPath: string | React.FocusEvent<any>) => void | ((e?: React.FocusEvent<any> | undefined) => void);
handleChange: (eventOrPath: string | React.ChangeEvent<any>) => void | ((eventOrValue: unknown) => void);
handleReset: () => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement> | undefined) => void;
validateOnChange: boolean | undefined;
validateOnBlur: boolean | undefined;
dirty: boolean;
isValid: boolean;
initialValues: Values;
setStatus(status?: any): void;
setError(e: any): void;
setErrors(errors: FormikErrors<Values>): void;
setSubmitting(isSubmitting: boolean): void;
setTouched(touched: FormikTouched<Values>): void;
setValues(values: Values): void;
setFieldValue(field: keyof Values & string, value: any, shouldValidate?: boolean | undefined): void;
setFieldValue(field: string, value: any): void;
setFieldError(field: keyof Values & string, message: string): void;
setFieldError(field: string, message: string): void;
setFieldTouched(field: keyof Values & string, isTouched?: boolean | undefined, shouldValidate?: boolean | undefined): void;
setFieldTouched(field: string, isTouched?: boolean | undefined): void;
validateForm(values?: any): Promise<FormikErrors<Values>>;
validateField(field: string): void;
resetForm(nextValues?: Values | undefined): void;
submitForm(): void;
setFormikState<K extends "error" | "values" | "errors" | "touched" | "isValidating" | "isSubmitting" | "status" | "submitCount">(f: (prevState: Readonly<FormikState<Values>>, props: any) => Pick<FormikState<Values>, K>, callback?: (() => any) | undefined): void;
setFormikState<K extends "error" | "values" | "errors" | "touched" | "isValidating" | "isSubmitting" | "status" | "submitCount">(state: Pick<FormikState<Values>, K>, callback?: (() => any) | undefined): void;
values: Values;
error?: any;
errors: FormikErrors<Values>;
touched: FormikTouched<Values>;
isValidating: boolean;
isSubmitting: boolean;
status?: any;
submitCount: number;
};
getFormikContext: () => {
validationSchema: any;
validate: ((values: Values) => void | object | Promise<FormikErrors<Values>>) | undefined;
initialValues: Values;
registerField: (name: string, Comp: React.Component<any, {}, any>) => void;
unregisterField: (name: string) => void;
handleBlur: (eventOrPath: string | React.FocusEvent<any>) => void | ((e?: React.FocusEvent<any> | undefined) => void);
handleChange: (eventOrPath: string | React.ChangeEvent<any>) => void | ((eventOrValue: unknown) => void);
handleReset: () => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement> | undefined) => void;
validateOnChange: boolean | undefined;
validateOnBlur: boolean | undefined;
dirty: boolean;
isValid: boolean;
setStatus(status?: any): void;
setError(e: any): void;
setErrors(errors: FormikErrors<Values>): void;
setSubmitting(isSubmitting: boolean): void;
setTouched(touched: FormikTouched<Values>): void;
setValues(values: Values): void;
setFieldValue(field: keyof Values & string, value: any, shouldValidate?: boolean | undefined): void;
setFieldValue(field: string, value: any): void;
setFieldError(field: keyof Values & string, message: string): void;
setFieldError(field: string, message: string): void;
setFieldTouched(field: keyof Values & string, isTouched?: boolean | undefined, shouldValidate?: boolean | undefined): void;
setFieldTouched(field: string, isTouched?: boolean | undefined): void;
validateForm(values?: any): Promise<FormikErrors<Values>>;
validateField(field: string): void;
resetForm(nextValues?: Values | undefined): void;
submitForm(): void;
setFormikState<K extends "error" | "values" | "errors" | "touched" | "isValidating" | "isSubmitting" | "status" | "submitCount">(f: (prevState: Readonly<FormikState<Values>>, props: any) => Pick<FormikState<Values>, K>, callback?: (() => any) | undefined): void;
setFormikState<K extends "error" | "values" | "errors" | "touched" | "isValidating" | "isSubmitting" | "status" | "submitCount">(state: Pick<FormikState<Values>, K>, callback?: (() => any) | undefined): void;
values: Values;
error?: any;
errors: FormikErrors<Values>;
touched: FormikTouched<Values>;
isValidating: boolean;
isSubmitting: boolean;
status?: any;
submitCount: number;
};
render(): JSX.Element;
}
export declare function yupToFormErrors<Values>(yupError: any): FormikErrors<Values>;
export declare function validateYupSchema<T extends FormikValues>(values: T, schema: any, sync?: boolean, context?: any): Promise<Partial<T>>;
6 changes: 6 additions & 0 deletions dist/connect.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import { FormikContext } from './types';
export declare const FormikProvider: React.ComponentClass<import("create-react-context").ProviderProps<FormikContext<any>>, any>, FormikConsumer: React.ComponentClass<import("create-react-context").ConsumerProps<FormikContext<any>>, any>;
export declare function connect<OuterProps, Values = {}>(Comp: React.ComponentType<OuterProps & {
formik: FormikContext<Values>;
}>): React.ComponentType<OuterProps>;
Loading

0 comments on commit a431bf7

Please sign in to comment.