From 8a18a1533ed770d0ae6b2815997624a8dd4eab3d Mon Sep 17 00:00:00 2001 From: Alex Young Date: Wed, 24 Jan 2018 21:12:46 +0000 Subject: [PATCH 01/14] Small change to field events --- package.json | 5 +++-- src/lib/Field.tsx | 18 +++++++++++++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 84573cc..faed9e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "form-and-function", - "version": "0.0.2", + "version": "0.0.3", "main": "dist/form-and-function.cjs.js", "module": "dist/form-and-function.esm.js", "browser": "dist/form-and-function.umd.js", @@ -38,6 +38,7 @@ "test": "react-scripts-ts test --env=jsdom", "eject": "react-scripts-ts eject", "remove-rollup-ts": - "rimraf node_modules/rollup-plugin-typescript/node_modules/typescript" + "rimraf node_modules/rollup-plugin-typescript/node_modules/typescript", + "prepublish": "yarn build" } } diff --git a/src/lib/Field.tsx b/src/lib/Field.tsx index 956fa5d..1588d65 100644 --- a/src/lib/Field.tsx +++ b/src/lib/Field.tsx @@ -158,20 +158,30 @@ export const makeField = ( })); }; - handleFocus = () => + handleFocus = (e: SyntheticEvent) => { + const { onFocus } = this.props; + + onFocus && onFocus(e); + this.updateState({ meta: { touched: true, active: true } }); + }; + + handleBlur = (e: SyntheticEvent) => { + const { onBlur } = this.props; + + onBlur && onBlur(e); - handleBlur = () => this.updateState({ meta: { active: false } }); + }; /** * When the field changes we need to update the value in the parent Form @@ -182,11 +192,9 @@ export const makeField = ( handleChange = (e: SyntheticEvent) => { // Pulled into a variable so we don't lose this when the event is disposed const { value } = e.currentTarget; - const { onChange, onBlur, onFocus } = this.props; + const { onChange } = this.props; onChange && onChange(e); - onBlur && onBlur(e); - onFocus && onFocus(e); return Promise.all([ this.updateState({ From 21d848a05dff2fe1e137f283499cf747ef638222 Mon Sep 17 00:00:00 2001 From: Alex Young Date: Wed, 24 Jan 2018 21:25:33 +0000 Subject: [PATCH 02/14] Comments --- src/lib/Field.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/Field.tsx b/src/lib/Field.tsx index 1588d65..ea2736b 100644 --- a/src/lib/Field.tsx +++ b/src/lib/Field.tsx @@ -121,6 +121,7 @@ export const makeField = ( * Take a partial update to the fields state (stored in Form) and * convert it into an update that can be applied to the Form state * without losing other field's state + * This is to simplify the other updaters */ updateState = ( fieldState: Partial @@ -158,6 +159,9 @@ export const makeField = ( })); }; + /** + * Calls props.onFocus as we have not passed this to input + */ handleFocus = (e: SyntheticEvent) => { const { onFocus } = this.props; From f6e71d951e255626003727ec8c65dbfc488f5ed0 Mon Sep 17 00:00:00 2001 From: Alex Young Date: Sat, 27 Jan 2018 16:39:09 +0000 Subject: [PATCH 03/14] Field covalidation --- src/demo/PrettyForm.tsx | 21 ++--- src/demo/forms/Intl.tsx | 3 +- src/demo/forms/Validated.tsx | 15 +++- src/lib/Field.tsx | 36 +------- src/lib/Form.tsx | 152 ++++++++++++++++++++++++++++--- src/lib/index.ts | 2 +- src/lib/validators.ts | 167 ++++++++++++++++++++++++++++------- tsconfig.json | 1 - 8 files changed, 307 insertions(+), 90 deletions(-) diff --git a/src/demo/PrettyForm.tsx b/src/demo/PrettyForm.tsx index 9a20bc8..a421b30 100644 --- a/src/demo/PrettyForm.tsx +++ b/src/demo/PrettyForm.tsx @@ -31,7 +31,6 @@ export const PrettyForm: React.SFC<