From 2401051c8128ffd8a17468bd8ec1f9ed0bf5b281 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Sun, 18 Apr 2021 21:13:31 +0800 Subject: [PATCH] Refactor(form-state): reset `isSubmitted` state when the user attempts to submit the form --- .changeset/red-mice-clean.md | 5 ++++ docs/getting-started/bundle-size-overview.md | 6 ++--- docs/getting-started/form-state.md | 24 ++++++++++---------- src/useForm.test.tsx | 6 +++++ src/useForm.ts | 1 + 5 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 .changeset/red-mice-clean.md diff --git a/.changeset/red-mice-clean.md b/.changeset/red-mice-clean.md new file mode 100644 index 00000000..0421fa28 --- /dev/null +++ b/.changeset/red-mice-clean.md @@ -0,0 +1,5 @@ +--- +"react-cool-form": patch +--- + +Refactor(form-state): reset `isSubmitted` state when the user attempts to submnit the form diff --git a/docs/getting-started/bundle-size-overview.md b/docs/getting-started/bundle-size-overview.md index 94041a06..4236f59c 100644 --- a/docs/getting-started/bundle-size-overview.md +++ b/docs/getting-started/bundle-size-overview.md @@ -8,10 +8,10 @@ React Cool Form is a tiny size library ([~ 7KB](https://bundlephobia.com/result? | Name | Size | | --------------------------------------------------- | ------- | | [useForm](../api-reference/use-form) | ~ 5.6kB | -| [useFormMethods](../api-reference/use-form-methods) | ~ 254B | -| [useFormState](../api-reference/use-form-state) | ~ 301B | +| [useFormMethods](../api-reference/use-form-methods) | ~ 255B | +| [useFormState](../api-reference/use-form-state) | ~ 302B | | [useControlled](../api-reference/use-controlled) | ~ 783B | -| [useFieldArray](../api-reference/use-field-array) | ~ 869B | +| [useFieldArray](../api-reference/use-field-array) | ~ 870B | | [get](../api-reference/utility-functions#get) | ~ 5B | | [set](../api-reference/utility-functions#set) | ~ 5B | | [unset](../api-reference/utility-functions#unset) | ~ 6B | diff --git a/docs/getting-started/form-state.md b/docs/getting-started/form-state.md index 2b9fa596..10562688 100644 --- a/docs/getting-started/form-state.md +++ b/docs/getting-started/form-state.md @@ -16,18 +16,18 @@ Here we will explore the form state and some [best practices for using it](#best Form state is an `object` containing the following properties: -| Name | Type | Description | -| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| values | `object` | The current values of the form. | -| errors | `object` | The current validation errors. [The shape will (should) match the shape of the form's values](./validation-guide#how-to-run). | -| touched | `object` | An object containing all the fields the user has touched/visited. | -| isDirty | `boolean` | Returns `true` if the user modifies any of the fields. `false` otherwise. | -| dirty | `object` | An object containing all the fields the user has modified. | -| isValidating | `boolean` | Returns `true` if the form is currently being validated. `false` otherwise. | -| isValid | `boolean` | Returns `true` if the form doesn't have any errors (i.e. the `errors` object is empty). `false` otherwise. | -| isSubmitting | `boolean` | Returns `true` if the form is currently being submitted. `false` if otherwise. | -| isSubmitted | `boolean` | Returns `true` if the form has been submitted successfully. `false` if otherwise. The value will remain until the [form is reset](./reset-form). | -| submitCount | `number` | Number of times the user tried to submit the form. The value will remain until the [form is reset](./reset-form). | +| Name | Type | Description | +| ------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------- | +| values | `object` | The current values of the form. | +| errors | `object` | The current validation errors. [The shape will (should) match the shape of the form's values](./validation-guide#how-to-run). | +| touched | `object` | An object containing all the fields the user has touched/visited. | +| isDirty | `boolean` | Returns `true` if the user modifies any of the fields. `false` otherwise. | +| dirty | `object` | An object containing all the fields the user has modified. | +| isValidating | `boolean` | Returns `true` if the form is currently being validated. `false` otherwise. | +| isValid | `boolean` | Returns `true` if the form doesn't have any errors (i.e. the `errors` object is empty). `false` otherwise. | +| isSubmitting | `boolean` | Returns `true` if the form is currently being submitted. `false` if otherwise. | +| isSubmitted | `boolean` | Returns `true` if the form has been submitted successfully. `false` if otherwise. | +| submitCount | `number` | Number of times the user tried to submit the form. The value will remain until the [form is reset](./reset-form). | ## Using the Form State diff --git a/src/useForm.test.tsx b/src/useForm.test.tsx index 26e8fc76..10bb79d5 100644 --- a/src/useForm.test.tsx +++ b/src/useForm.test.tsx @@ -247,6 +247,7 @@ describe("useForm", () => { ), }); + const value = "🍎"; fireEvent.input(getByTestId("foo"), { target: { value } }); fireEvent.submit(getByTestId("form")); @@ -275,6 +276,11 @@ describe("useForm", () => { isSubmitting: false, isSubmitted: true, }); + + fireEvent.submit(getByTestId("form")); + expect(getState("isSubmitted")).toBeFalsy(); + await waitFor(() => expect(onSubmit).toHaveBeenCalled()); + expect(getState("isSubmitted")).toBeTruthy(); }); it('should call "onError" event correctly', async () => { diff --git a/src/useForm.ts b/src/useForm.ts index 50b117c0..33202f2b 100644 --- a/src/useForm.ts +++ b/src/useForm.ts @@ -765,6 +765,7 @@ export default ({ }, stateRef.current.touched); setStateRef("touched", nextTouched); + setStateRef("isSubmitted", false); setStateRef("isSubmitting", true); try {