Merge pull request 8base#397 from 8base/feat-add-showErrorOnTouched-prop-to-all-fields

feat: add showErrorOnTouched prop to the all fields

Author: PetrBukov

src/components/CheckboxField/CheckboxField.js

@@ -22,6 +22,8 @@ type CheckboxFieldProps = {
   nowrap?: boolean,
   /** when true then stretch to the maximal width */
   stretch?: boolean,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 const CheckboxField = ({
@@ -32,13 +34,14 @@ const CheckboxField = ({
   disabled,
   color,
   nowrap,
+  showErrorOnTouched,
   ...rest
 }: CheckboxFieldProps) => {
   const { name, value, onChange, onFocus, onBlur } = input;
-  const hasError = formUtils.hasError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
   return (
-    <FormField { ...rest } input={ input } meta={ meta } stretch={ stretch }>
+    <FormField { ...rest } input={ input } meta={ meta } stretch={ stretch } showErrorOnTouched={ showErrorOnTouched }>
       <Checkbox
         label={ label }
         name={ name }
@@ -56,4 +59,8 @@ const CheckboxField = ({
   );
 };
 
+CheckboxField.defaultProps = {
+  showErrorOnTouched: true,
+};
+
 export { CheckboxField };

src/components/Form/FormField.js

@@ -15,6 +15,7 @@ type FormFieldProps = {
   hideErrorLabel?: boolean,
   direction?: 'row' | 'column',
   meta?: MetaType,
+  showErrorOnTouched?: boolean,
 };
 
 const name = 'formField';
@@ -101,10 +102,11 @@ const FormField = ({
   note,
   children,
   hideErrorLabel,
+  showErrorOnTouched,
   ...rest
 }: FormFieldProps) => {
-  const hasError = formUtils.hasError(meta);
-  let error: any = formUtils.getError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
+  let error: any = formUtils.getError(meta, showErrorOnTouched);
 
   const hasLabel = !!label;
 
@@ -142,6 +144,7 @@ FormField.defaultProps = {
   hideErrorLabel: false,
   stretch: true,
   direction: 'column',
+  showErrorOnTouched: true,
 };
 
 export { FormField, theme, FormLabel, ControlErrorTag };

src/components/InputField/InputField.js

@@ -45,6 +45,8 @@ type InputFieldProps = {
   min?: string | number,
   max?: string | number,
   mask?: string,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 const InputField = ({
@@ -74,11 +76,12 @@ const InputField = ({
   min,
   max,
   mask,
+  showErrorOnTouched,
   ...rest
 }: InputFieldProps) => {
   const { name, value, onChange, onFocus, onBlur } = input;
 
-  const hasError = formUtils.hasError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
   return (
     <FormField
@@ -89,6 +92,7 @@ const InputField = ({
       hideErrorLabel={ hideErrorLabel }
       input={ input }
       meta={ meta }
+      showErrorOnTouched={ showErrorOnTouched }
     >
       <Input
         align={ align }
@@ -128,6 +132,7 @@ InputField.defaultProps = {
   type: 'text',
   input: {},
   meta: {},
+  showErrorOnTouched: true,
 };
 
 export { InputField };

src/components/RadioGroupField/RadioGroupField.js

@@ -30,6 +30,8 @@ type RadioGroupFieldProps = {
   alignContent?: PropLayout,
   alignItems?: PropLayoutStretch,
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse',
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 const RadioGroupField = ({
@@ -46,14 +48,15 @@ const RadioGroupField = ({
   alignContent,
   alignItems,
   flexWrap,
+  showErrorOnTouched,
   ...rest
 }: RadioGroupFieldProps) => {
   const { name, value, onChange } = input;
 
-  const hasError = formUtils.hasError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
   return (
-    <FormField { ...rest } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
+    <FormField { ...rest } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta } showErrorOnTouched={ showErrorOnTouched }>
       <Radio.Group
         direction={ direction }
         gap={ gap }
@@ -75,4 +78,8 @@ const RadioGroupField = ({
   );
 };
 
+RadioGroupField.defaultProps = {
+  showErrorOnTouched: true,
+};
+
 export { RadioGroupField };

src/components/SelectField/SelectField.js

@@ -23,21 +23,27 @@ type SelectFieldProps = {
   inputValue?: string,
   /** callback to control search value */
   onInputChange?: (value: string, event?: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 class SelectField extends React.Component<SelectFieldProps> {
+  static defaultProps = {
+    showErrorOnTouched: true,
+  };
+
   collectFormFieldProps() {
-    const { meta, input, stretch, label } = this.props;
+    const { meta, input, stretch, label, showErrorOnTouched } = this.props;
 
-    return { meta, input, stretch, label };
+    return { meta, input, stretch, label, showErrorOnTouched };
   }
 
   collectSelectProps() {
     const {
-      input = {}, meta, placeholder, options, multiple, isMulti, creatable, stretch, filterOption, getOptionValue, getOptionLabel,
+      input = {}, meta, placeholder, options, multiple, isMulti, creatable, stretch, filterOption, getOptionValue, getOptionLabel, showErrorOnTouched,
     } = this.props;
 
-    const hasError = formUtils.hasError(meta);
+    const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
     return {
       ...this.props,

src/components/SwitchField/SwitchField.js

@@ -11,20 +11,22 @@ type SwitchFieldProps = {
   label?: string,
   input: InputType,
   meta?: MetaType,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
-const SwitchField = ({ label, input, meta, ...rest }: SwitchFieldProps) => {
+const SwitchField = ({ label, input, meta, showErrorOnTouched, ...rest }: SwitchFieldProps) => {
   const {
     name,
     value,
     onChange,
     onFocus,
     onBlur,
   } = input;
-  const hasError = formUtils.hasError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
   return (
-    <FormField { ...rest } input={ input } meta={ meta }>
+    <FormField { ...rest } input={ input } meta={ meta } showErrorOnTouched={ showErrorOnTouched }>
       <Switch
         name={ name }
         label={ label }
@@ -38,5 +40,9 @@ const SwitchField = ({ label, input, meta, ...rest }: SwitchFieldProps) => {
   );
 };
 
+SwitchField.defaultProps = {
+  showErrorOnTouched: true,
+};
+
 export { SwitchField };
 

src/components/TextAreaField/TextAreaField.js

@@ -21,6 +21,8 @@ type TextAreaFieldProps = {
   input: Object,
   /** form meta object */
   meta?: Object,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 
@@ -32,14 +34,15 @@ function TextAreaField({
   placeholder,
   rows,
   stretch,
+  showErrorOnTouched,
   ...rest
 }: TextAreaFieldProps) {
   const { name, value, onChange } = input;
 
-  const hasError = formUtils.hasError(meta);
+  const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
   return (
-    <FormField label={ label } stretch={ stretch } input={ input } meta={ meta }>
+    <FormField label={ label } stretch={ stretch } input={ input } meta={ meta } showErrorOnTouched={ showErrorOnTouched }>
       <TextArea
         { ...rest }
         hasError={ hasError }
@@ -55,4 +58,8 @@ function TextAreaField({
   );
 }
 
+TextAreaField.defaultProps = {
+  showErrorOnTouched: true,
+};
+
 export { TextAreaField };

src/components/TreeSelectField/TreeSelectField.js

@@ -20,9 +20,14 @@ type TreeSelectFieldProps = {
   input: InputType,
   /** form meta object */
   meta?: MetaType,
+  /** show error only for touched fields */
+  showErrorOnTouched?: boolean,
 };
 
 class TreeSelectField extends React.Component<TreeSelectFieldProps> {
+  static defaultProps = {
+    showErrorOnTouched: true,
+  };
 
   onChange = (currenNode: Object, selectedNodes: Object[]) => {
     const { input } = this.props;
@@ -32,15 +37,15 @@ class TreeSelectField extends React.Component<TreeSelectFieldProps> {
   };
 
   collectFormFieldProps() {
-    const { meta, input, stretch, label } = this.props;
+    const { meta, input, stretch, label, showErrorOnTouched } = this.props;
 
-    return { meta, input, stretch, label };
+    return { meta, input, stretch, label, showErrorOnTouched };
   }
 
   collectSelectProps() {
-    const { input, meta, placeholder, options, stretch } = this.props;
+    const { input, meta, placeholder, options, stretch, showErrorOnTouched } = this.props;
 
-    const hasError = formUtils.hasError(meta);
+    const hasError = formUtils.hasError(meta, showErrorOnTouched);
 
     return {
       ...this.props,

src/utils/forms.js

@@ -1,11 +1,11 @@
-export const hasError = (meta: Object = {}) => {
+export const hasError = (meta: Object = {}, showErrorOnTouched: boolean = true) => {
   const { submitError, dirtySinceLastSubmit, error, touched } = meta;
 
-  return (!!error || (!!submitError && !dirtySinceLastSubmit)) && !!touched;
+  return (!!error || (!!submitError && !dirtySinceLastSubmit)) && (!!showErrorOnTouched ? !!touched : true);
 };
 
-export const getError = (meta: Object) => {
-  if (hasError(meta)) {
+export const getError = (meta: Object, showErrorOnTouched: boolean = true) => {
+  if (hasError(meta, showErrorOnTouched)) {
     const { submitError, error } = meta;
 
     return error || submitError;