Comparing version 0.3.1 to 0.4.0
@@ -30,6 +30,6 @@ /// <reference types="react" /> | ||
isSubmitting: boolean; | ||
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
onChange: (e: React.ChangeEvent<any>) => void; | ||
onBlur: (e: any) => void; | ||
onChangeValue: (name: string, value: any) => void; | ||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
handleChange: (e: React.ChangeEvent<any>) => void; | ||
handleBlur: (e: any) => void; | ||
handleChangeValue: (name: string, value: any) => void; | ||
setError: (e: any) => void; | ||
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void; |
@@ -53,3 +53,3 @@ import * as tslib_1 from "tslib"; | ||
var values = _a.values, error = _a.error, errors = _a.errors, touched = _a.touched, isSubmitting = _a.isSubmitting, setError = _a.setError, setErrors = _a.setErrors, setValues = _a.setValues, setTouched = _a.setTouched, setSubmitting = _a.setSubmitting, rest = tslib_1.__rest(_a, ["values", "error", "errors", "touched", "isSubmitting", "setError", "setErrors", "setValues", "setTouched", "setSubmitting"]); | ||
return (tslib_1.__assign({ onChange: function (e) { | ||
return (tslib_1.__assign({ handleChange: function (e) { | ||
e.persist(); | ||
@@ -69,7 +69,7 @@ var _a = e.target, type = _a.type, name = _a.name, value = _a.value, checked = _a.checked; | ||
var _b, _c; | ||
}, onBlur: function (e) { | ||
}, handleBlur: function (e) { | ||
e.persist(); | ||
setTouched(tslib_1.__assign({}, values, (_a = {}, _a[e.target.name] = true, _a))); | ||
var _a; | ||
}, onChangeValue: function (name, value) { | ||
}, handleChangeValue: function (name, value) { | ||
// Set changed fields as touched | ||
@@ -82,3 +82,3 @@ setTouched(tslib_1.__assign({}, touched, (_a = {}, _a[name] = true, _a))); | ||
var _a, _b, _c; | ||
}, onSubmit: function (e) { | ||
}, handleSubmit: function (e) { | ||
e.preventDefault(); | ||
@@ -113,3 +113,3 @@ setTouched(touchAllFields(values)); | ||
} | ||
}, onReset: function () { | ||
}, handleReset: function () { | ||
setSubmitting(false); | ||
@@ -116,0 +116,0 @@ setErrors({}); |
@@ -30,6 +30,6 @@ /// <reference types="react" /> | ||
isSubmitting: boolean; | ||
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
onChange: (e: React.ChangeEvent<any>) => void; | ||
onBlur: (e: any) => void; | ||
onChangeValue: (name: string, value: any) => void; | ||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
handleChange: (e: React.ChangeEvent<any>) => void; | ||
handleBlur: (e: any) => void; | ||
handleChangeValue: (name: string, value: any) => void; | ||
setError: (e: any) => void; | ||
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void; |
{ | ||
"name": "formik", | ||
"description": "An elegant way to handle forms in React", | ||
"version": "0.3.1", | ||
"version": "0.4.0", | ||
"license": "MIT", | ||
@@ -6,0 +6,0 @@ "author": "Jared Palmer <jared@palmer.net>", |
@@ -29,7 +29,7 @@ # Formik | ||
- `error: any` - A top-level error object, can be whatever you need. | ||
- `onSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>` | ||
- `onReset: () => void` - Reset handler. This should be passed to `<button onClick={onReset}>...</button>` | ||
- `handleSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>` | ||
- `handleReset: () => void` - Reset handler. This should be passed to `<button onClick={handleReset}>...</button>` | ||
- `isSubmitting: boolean` - Submitting state. Either true or false. | ||
- `onChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute. | ||
- `onChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update. | ||
- `handleChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute. | ||
- `handleChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update. | ||
@@ -77,7 +77,7 @@ | ||
// are injected into a prop called `values`. Additionally, Formik injects | ||
// a single onChange handler that you can use on every input. You also get | ||
// onSubmit, errors, and isSubmitting for free. This makes building custom | ||
// an onChange handler that you can use on every input. You also get | ||
// handleSubmit, errors, and isSubmitting for free. This makes building custom | ||
// inputs easy. | ||
const SimpleForm = ({ values, onChange, onSubmit, onReset, errors, error isSubmitting, }) => | ||
<form onSubmit={onSubmit}> | ||
const SimpleForm = ({ values, handleChange, handleSubmit, handleReset, errors, error, isSubmitting, }) => | ||
<form onSubmit={handleSubmit}> | ||
<input | ||
@@ -87,3 +87,3 @@ type="text" | ||
value={values.email} | ||
onChange={onChange} | ||
onChange={handleChange} | ||
placeholder="john@apple.com" | ||
@@ -96,3 +96,3 @@ /> | ||
value={values.facebook} | ||
onChange={onChange} | ||
onChange={handleChange} | ||
placeholder="facebook username" | ||
@@ -105,3 +105,3 @@ /> | ||
value={values.twitter} | ||
onChange={onChange} | ||
onChange={handleChange} | ||
placeholder="twitter username" | ||
@@ -111,3 +111,3 @@ /> | ||
{error && error.message && <div style={{color: 'red'}}>Top Level Error: {error.message}</div>} | ||
<button onClick={onReset}>Reset</button> | ||
<button onClick={handleReset}>Reset</button> | ||
<button type="submit" disabled={isSubmitting}>Submit</button> | ||
@@ -114,0 +114,0 @@ </form>; |
@@ -30,6 +30,6 @@ /// <reference types="react" /> | ||
isSubmitting: boolean; | ||
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
onChange: (e: React.ChangeEvent<any>) => void; | ||
onBlur: (e: any) => void; | ||
onChangeValue: (name: string, value: any) => void; | ||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
handleChange: (e: React.ChangeEvent<any>) => void; | ||
handleBlur: (e: any) => void; | ||
handleChangeValue: (name: string, value: any) => void; | ||
setError: (e: any) => void; | ||
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
152106