feat: add focus error decorator

scaleway · Jan 10, 2022 · 0f8d3e8 · 0f8d3e8
1 parent d1fd3da
commit 0f8d3e8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -100,6 +100,7 @@
     "@scaleway/ui": "0.123.0",
     "final-form": "4.20.6",
     "final-form-arrays": "3.0.2",
+    "final-form-focus": "1.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-final-form": "6.5.7"
@@ -144,6 +145,7 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
+    "@types/final-form-focus": "^1.1.1",
     "@types/react-dom": "17.0.11",
     "babel-loader": "8.2.3",
     "babel-plugin-annotate-pure-calls": "0.4.0",
@@ -173,6 +175,7 @@
     "@scaleway/ui": "0.123.0",
     "final-form": "4.20.6",
     "final-form-arrays": "3.0.2",
+    "final-form-focus": "1.1.2",
     "react-final-form": "6.5.7"
   },
   "dependenciesMeta": {

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
@@ -1,33 +1,41 @@
-import { Config } from 'final-form'
+import type { Decorator } from 'final-form'
 import arrayMutators from 'final-form-arrays'
+import createDecorator from 'final-form-focus'
 import React, { ReactNode } from 'react'
 import {
   FormRenderProps,
   Form as ReactFinalForm,
-  RenderableProps,
+  FormProps as ReactFinalFormProps,
 } from 'react-final-form'
 import ErrorProvider from '../../providers/ErrorContext'
 import { FormErrors, OnSubmitErrorFn, OnSubmitSucccessFn } from '../../types'
 
+const focusOnErrors = createDecorator()
+
 export type FormProps<FormValues = unknown> = {
   children?:
     | ((props: FormRenderProps<FormValues, Partial<FormValues>>) => ReactNode)
     | ReactNode
   errors: FormErrors
-  onSubmit?: Config<FormValues, Partial<FormValues>>['onSubmit']
+  onSubmit?: ReactFinalFormProps<FormValues, Partial<FormValues>>['onSubmit']
   onSubmitSuccess?: OnSubmitSucccessFn<FormValues>
   onSubmitError?: OnSubmitErrorFn
   initialValues?: Partial<FormValues>
-  validateOnBlur?: Config<FormValues, Partial<FormValues>>['validateOnBlur']
-  validate?: Config<FormValues, Partial<FormValues>>['validate']
+  validateOnBlur?: ReactFinalFormProps<
+    FormValues,
+    Partial<FormValues>
+  >['validateOnBlur']
+  validate?: ReactFinalFormProps<FormValues, Partial<FormValues>>['validate']
   /**
    * The form name attribute
    */
   name?: string
-  render?: RenderableProps<
-    FormRenderProps<FormValues, Partial<FormValues>>
-  >['render']
-  mutators?: Config<FormValues, Partial<FormValues>>['mutators']
+  render?: ReactFinalFormProps<FormValues, Partial<FormValues>>['render']
+  decorators?: ReactFinalFormProps<
+    FormValues,
+    Partial<FormValues>
+  >['decorators']
+  mutators?: ReactFinalFormProps<FormValues, Partial<FormValues>>['mutators']
   keepDirtyOnReinitialize?: boolean
 }
 const Form = <T,>({
@@ -49,6 +57,7 @@ const Form = <T,>({
       initialValues={initialValues}
       validateOnBlur={validateOnBlur}
       validate={validate}
+      decorators={[focusOnErrors as unknown as Decorator<T, Partial<T>>]}
       mutators={{
         ...arrayMutators,
         ...mutators,

diff --git a/yarn.lock b/yarn.lock
@@ -3379,6 +3379,7 @@ __metadata:
     "@testing-library/react": 12.1.2
     "@testing-library/react-hooks": 7.0.2
     "@testing-library/user-event": 13.5.0
+    "@types/final-form-focus": ^1.1.1
     "@types/react-dom": 17.0.11
     babel-loader: 8.2.3
     babel-plugin-annotate-pure-calls: 0.4.0
@@ -3389,6 +3390,7 @@ __metadata:
     eslint-plugin-mdx: 1.16.0
     final-form: 4.20.6
     final-form-arrays: 3.0.2
+    final-form-focus: 1.1.2
     husky: 7.0.4
     jest: 27.4.7
     jest-junit: 13.0.0
@@ -3411,6 +3413,7 @@ __metadata:
     "@scaleway/ui": 0.123.0
     final-form: 4.20.6
     final-form-arrays: 3.0.2
+    final-form-focus: 1.1.2
     react: 17.0.2
     react-dom: 17.0.2
     react-final-form: 6.5.7
@@ -5746,6 +5749,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/final-form-focus@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@types/final-form-focus@npm:1.1.1"
+  dependencies:
+    final-form: 4.x.x
+  checksum: f21dafa79423148f1102ac7da4994d83fdfd6a1d371f520608c5df015cf85a22c20384b476ba252f0136778f21221736f01f8e1a7721c049ab82c7aca9608ccc
+  languageName: node
+  linkType: hard
+
 "@types/glob-base@npm:^0.3.0":
   version: 0.3.0
   resolution: "@types/glob-base@npm:0.3.0"
@@ -11369,7 +11381,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"final-form@npm:4.20.6":
+"final-form-focus@npm:1.1.2":
+  version: 1.1.2
+  resolution: "final-form-focus@npm:1.1.2"
+  peerDependencies:
+    final-form: ">=1.3.0"
+  checksum: f1be0caad728d349bb6433f342acf7e9972e937447575b1299787710e97f2a53c7da8ffe11c6765ade9b8fae893075a6968f726d9ac9fc77d45b27c0e150906b
+  languageName: node
+  linkType: hard
+
+"final-form@npm:4.20.6, final-form@npm:4.x.x":
   version: 4.20.6
   resolution: "final-form@npm:4.20.6"
   dependencies: