fix(Form): handle final form errors

8base · Oct 10, 2018 · b5c0f9a · b5c0f9a
1 parent 3bdaddd
commit b5c0f9a
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/src/atoms/dataEntry/CheckboxField/CheckboxField.js b/src/atoms/dataEntry/CheckboxField/CheckboxField.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import type { InputType, MetaType } from '../formTypes';
+import * as formUtils from '../../../utils/forms';
 import { Checkbox } from '../Checkbox';
 import { FormField } from '../Form/FormField';
 
@@ -22,9 +23,9 @@ const CheckboxField = ({
   meta = {},
   ...rest
   }: CheckboxFieldProps) => {
-  const { error, touched } = meta;
-  const { name, value, onChange, onBlur, onFocus } = input;
-  const hasError = !!error && !!touched;
+  const { name, value, onChange, onFocus, onBlur } = input;
+
+  const hasError = formUtils.hasError(meta);
 
   return (
     <FormField input={ input } meta={ meta }>

diff --git a/src/atoms/dataEntry/Form/FormField.js b/src/atoms/dataEntry/Form/FormField.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { createStyledTag, createTheme } from '../../../utils';
+import * as formUtils from '../../../utils/forms';
 import type { InputType, MetaType } from '../formTypes';
 
 type FormFieldProps = {
@@ -67,8 +68,9 @@ const FormField = ({
   hideErrorLabel,
   ...rest
   }: FormFieldProps) => {
-  const { error, touched } = meta;
-  const hasError = !!error && !!touched;
+  const hasError = formUtils.hasError(meta);
+  const error = formUtils.getError(meta);
+
   const hasLabel = !!label;
 
   return (

diff --git a/src/atoms/dataEntry/InputField/InputField.js b/src/atoms/dataEntry/InputField/InputField.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { createTheme } from '../../../utils';
+import * as formUtils from '../../../utils/forms';
 import { Input } from '../Input';
 import { FormField } from '../Form/FormField';
 
@@ -51,9 +52,9 @@ const InputField = ({
   stretch,
   ...rest
   }: InputFieldProps) => {
-  const { error, touched } = meta;
   const { name, value, onChange, onFocus, onBlur } = input;
-  const hasError = !!error && !!touched;
+
+  const hasError = formUtils.hasError(meta);
 
   return (
     <FormField label={ label } stretch={ stretch } direction={ direction } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>

diff --git a/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js b/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import type { InputType, MetaType } from '../formTypes';
+import * as formUtils from '../../../utils/forms';
 import { Radio } from '../Radio';
 import { FormField } from '../Form/FormField';
 
@@ -24,9 +25,9 @@ const RadioGroupField = ({
   meta = {},
   ...rest
   }: RadioGroupFieldProps) => {
-  const { error, touched } = meta;
   const { name, value, onChange } = input;
-  const hasError = !!error && !!touched;
+
+  const hasError = formUtils.hasError(meta);
 
   return (
     <FormField hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>

diff --git a/src/atoms/dataEntry/SelectField/SelectField.js b/src/atoms/dataEntry/SelectField/SelectField.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { createTheme } from '../../../utils';
+import * as formUtils from '../../../utils/forms';
 import { Select } from '../Select';
 import { FormField } from '../Form/FormField';
 
@@ -38,8 +39,8 @@ function SelectField({
   ...rest
   }: SelectFieldProps) {
   const { name, value, onChange } = input;
-  const { error, touched } = meta;
-  const hasError = !!error && !!touched;
+
+  const hasError = formUtils.hasError(meta);
 
   const selectedOption = options.find((option) => option.value === value);
 

diff --git a/src/utils/forms.js b/src/utils/forms.js
@@ -0,0 +1,13 @@
+export const hasError = (meta: Object) => {
+  const { submitError, dirtySinceLastSubmit, error, touched } = meta;
+
+  return (!!error || !!submitError) && !!touched && !dirtySinceLastSubmit;
+};
+
+export const getError = (meta: Object) => {
+  if (hasError(meta)) {
+    const { submitError, error } = meta;
+
+    return error || submitError;
+  }
+};