formik - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

es6/index.d.ts

@@ -14,11 +14,11 @@ /// <reference types="react" />
 export declare function validateFormData<T>(data: T, schema: any, setErrors: (errors: FormikErrors) => void): Promise<boolean>;
-export interface FormikConfig<Props, FormState, Payload> {
+export interface FormikConfig<Props, Values, Payload> {
     displayName: string;
-    mapPropsToFormState?: (props: Props) => FormState;
-    mapFormStateToPayload?: (formState: FormState) => Payload;
+    mapPropsToValues?: (props: Props) => Values;
+    mapValuesToPayload?: (values: Values) => Payload;
     validationSchema: any;
-    handleSubmit: (payload: Payload) => void;
+    handleSubmit: (payload: Payload, formikBag: FormikBag) => void;
 }
-export interface FormikState<T> {
-    form?: T;
+export interface InjectedFormikProps<T> {
+    values: T;
     /** map of field names to specific error for that field */
@@ -30,13 +30,18 @@ errors: FormikErrors;
     isSubmitting: boolean;
-}
-export interface InjectedFormikProps {
-    /** 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;
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<any>) => void;
+    onChangeValue: (name: string, value: any) => void;
 }
+export interface FormikBag {
+    props: {
+        [field: string]: any;
+    };
+    setErrors: (errors: FormikErrors) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: FormikTouched) => void;
+    setValues: (values: FormikValues) => void;
+}
+export interface FormikValues {
+    [field: string]: any;
+}
 export interface FormikErrors {
@@ -48,2 +53,2 @@ [field: string]: string;
 }
-export default function Formik<Props, State, Payload>({displayName, mapPropsToFormState, mapFormStateToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, Props>;
+export default function Formik<Props, State, Payload>({displayName, mapPropsToValues, mapValuesToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, any>;

es6/index.js

 import * as tslib_1 from "tslib";
-// import compose from 'recompose/compose';
-// import mapProps from 'recompose/mapProps';
-// import setDisplayName from 'recompose/setDisplayName';
-// import withState from 'recompose/withState';
 import { compose, mapProps, setDisplayName, withState, } from 'recompose';
@@ -50,3 +46,3 @@ /**
 export default function Formik(_a) {
-    var displayName = _a.displayName, _b = _a.mapPropsToFormState, mapPropsToFormState = _b === void 0 ? function (formProps) { return formProps; } : _b, _c = _a.mapFormStateToPayload, mapFormStateToPayload = _c === void 0 ? function (formPartialState) {
+    var displayName = _a.displayName, _b = _a.mapPropsToValues, mapPropsToValues = _b === void 0 ? function (formProps) { return formProps; } : _b, _c = _a.mapValuesToPayload, mapValuesToPayload = _c === void 0 ? function (formPartialState) {
         // in this case State and Payload are the same.
@@ -56,5 +52,4 @@ var payload = formPartialState;
     } : _c, validationSchema = _a.validationSchema, handleSubmit = _a.handleSubmit;
-    return compose(setDisplayName(displayName), withState('form', 'setForm', function (props) { return mapPropsToFormState(props); }), withState('errors', 'setErrors', {}), withState('touched', 'setTouched', {}), withState('isSubmitting', 'setSubmitting', false), mapProps(function (_a) {
-        var // onSubmit,
-        form = _a.form, errors = _a.errors, touched = _a.touched, isSubmitting = _a.isSubmitting, setErrors = _a.setErrors, setForm = _a.setForm, setTouched = _a.setTouched, setSubmitting = _a.setSubmitting, rest = tslib_1.__rest(_a, ["form", "errors", "touched", "isSubmitting", "setErrors", "setForm", "setTouched", "setSubmitting"]);
+    return compose(setDisplayName(displayName), withState('values', 'setValues', function (props) { return mapPropsToValues(props); }), withState('errors', 'setErrors', {}), withState('touched', 'setTouched', {}), withState('isSubmitting', 'setSubmitting', false), mapProps(function (_a) {
+        var values = _a.values, errors = _a.errors, touched = _a.touched, isSubmitting = _a.isSubmitting, setErrors = _a.setErrors, setValues = _a.setValues, setTouched = _a.setTouched, setSubmitting = _a.setSubmitting, rest = tslib_1.__rest(_a, ["values", "errors", "touched", "isSubmitting", "setErrors", "setValues", "setTouched", "setSubmitting"]);
         return (tslib_1.__assign({ onChange: function (e) {
@@ -73,16 +68,30 @@ e.persist();
                 // Set form fields by name
-                setForm(tslib_1.__assign({}, form, (_c = {}, _c[name] = val, _c)));
+                setValues(tslib_1.__assign({}, values, (_c = {}, _c[name] = val, _c)));
                 // Validate against schema
-                validateFormData(tslib_1.__assign({}, form, (_d = {}, _d[name] = val, _d)), validationSchema, setErrors);
+                validateFormData(tslib_1.__assign({}, values, (_d = {}, _d[name] = val, _d)), validationSchema, setErrors);
                 var _b, _c, _d;
+            }, onChangeValue: function (name, value) {
+                // Set changed fields as touched
+                setTouched(tslib_1.__assign({}, touched, (_a = {}, _a[name] = true, _a)));
+                // Set form fields by name
+                setValues(tslib_1.__assign({}, values, (_b = {}, _b[name] = value, _b)));
+                // Validate against schema
+                validateFormData(tslib_1.__assign({}, values, (_c = {}, _c[name] = value, _c)), validationSchema, setErrors);
+                var _a, _b, _c;
             }, onSubmit: function (e) {
                 e.preventDefault();
-                setTouched(touchAllFields(form));
-                validateFormData(form, validationSchema, setErrors).then(function (isValid) {
+                setTouched(touchAllFields(values));
+                validateFormData(values, validationSchema, setErrors).then(function (isValid) {
                     console.log('isValid:' + isValid);
                     if (isValid) {
-                        handleSubmit(mapFormStateToPayload(form));
+                        handleSubmit(mapValuesToPayload(values), {
+                            setTouched: setTouched,
+                            setErrors: setErrors,
+                            setSubmitting: setSubmitting,
+                            setValues: setValues,
+                            props: rest,
+                        });
                     }
                 });
-            }, setForm: setForm,
+            }, setValues: setValues,
             setErrors: setErrors,
@@ -92,4 +101,5 @@ setSubmitting: setSubmitting,
             isSubmitting: isSubmitting,
-            touched: touched }, rest, form));
+            touched: touched,
+            values: values }, rest));
     }));
 }

lib/index.d.ts

@@ -14,11 +14,11 @@ /// <reference types="react" />
 export declare function validateFormData<T>(data: T, schema: any, setErrors: (errors: FormikErrors) => void): Promise<boolean>;
-export interface FormikConfig<Props, FormState, Payload> {
+export interface FormikConfig<Props, Values, Payload> {
     displayName: string;
-    mapPropsToFormState?: (props: Props) => FormState;
-    mapFormStateToPayload?: (formState: FormState) => Payload;
+    mapPropsToValues?: (props: Props) => Values;
+    mapValuesToPayload?: (values: Values) => Payload;
     validationSchema: any;
-    handleSubmit: (payload: Payload) => void;
+    handleSubmit: (payload: Payload, formikBag: FormikBag) => void;
 }
-export interface FormikState<T> {
-    form?: T;
+export interface InjectedFormikProps<T> {
+    values: T;
     /** map of field names to specific error for that field */
@@ -30,13 +30,18 @@ errors: FormikErrors;
     isSubmitting: boolean;
-}
-export interface InjectedFormikProps {
-    /** 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;
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<any>) => void;
+    onChangeValue: (name: string, value: any) => void;
 }
+export interface FormikBag {
+    props: {
+        [field: string]: any;
+    };
+    setErrors: (errors: FormikErrors) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: FormikTouched) => void;
+    setValues: (values: FormikValues) => void;
+}
+export interface FormikValues {
+    [field: string]: any;
+}
 export interface FormikErrors {
@@ -48,2 +53,2 @@ [field: string]: string;
 }
-export default function Formik<Props, State, Payload>({displayName, mapPropsToFormState, mapFormStateToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, Props>;
+export default function Formik<Props, State, Payload>({displayName, mapPropsToValues, mapValuesToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, any>;

package.json

 {
   "name": "formik",
   "description": "An elegant way to handle forms in React",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "Jared Palmer <[e-mail]>",

umd/index.d.ts

@@ -14,11 +14,11 @@ /// <reference types="react" />
 export declare function validateFormData<T>(data: T, schema: any, setErrors: (errors: FormikErrors) => void): Promise<boolean>;
-export interface FormikConfig<Props, FormState, Payload> {
+export interface FormikConfig<Props, Values, Payload> {
     displayName: string;
-    mapPropsToFormState?: (props: Props) => FormState;
-    mapFormStateToPayload?: (formState: FormState) => Payload;
+    mapPropsToValues?: (props: Props) => Values;
+    mapValuesToPayload?: (values: Values) => Payload;
     validationSchema: any;
-    handleSubmit: (payload: Payload) => void;
+    handleSubmit: (payload: Payload, formikBag: FormikBag) => void;
 }
-export interface FormikState<T> {
-    form?: T;
+export interface InjectedFormikProps<T> {
+    values: T;
     /** map of field names to specific error for that field */
@@ -30,13 +30,18 @@ errors: FormikErrors;
     isSubmitting: boolean;
-}
-export interface InjectedFormikProps {
-    /** 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;
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<any>) => void;
+    onChangeValue: (name: string, value: any) => void;
 }
+export interface FormikBag {
+    props: {
+        [field: string]: any;
+    };
+    setErrors: (errors: FormikErrors) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: FormikTouched) => void;
+    setValues: (values: FormikValues) => void;
+}
+export interface FormikValues {
+    [field: string]: any;
+}
 export interface FormikErrors {
@@ -48,2 +53,2 @@ [field: string]: string;
 }
-export default function Formik<Props, State, Payload>({displayName, mapPropsToFormState, mapFormStateToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, Props>;
+export default function Formik<Props, State, Payload>({displayName, mapPropsToValues, mapValuesToPayload, validationSchema, handleSubmit}: FormikConfig<Props, State, Payload>): ComponentEnhancer<{}, any>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144110

increased by0.96%

Lines of code

549

increased by4.77%

No dependency changes