Merge pull request #849 from rvsia/muiWarning

Hyperkid123 · web-flow · commit 748b77ea4b4b · 2020-10-22T12:53:07.000+02:00
feat(mui): implement warning validation
diff --git a/packages/mui-component-mapper/src/files/checkbox.js b/packages/mui-component-mapper/src/files/checkbox.js
@@ -33,7 +33,7 @@ export const SingleCheckbox = (props) => {
     type: 'checkbox'
   });
   const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+  const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
@@ -57,7 +57,7 @@ export const SingleCheckbox = (props) => {
             disabled={isDisabled || isReadOnly}
             label={<FormLabel {...FormLabelProps}>{label}</FormLabel>}
           />
-          {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+          {text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
         </FormGroup>
       </FormControl>
     </FormFieldGrid>
diff --git a/packages/mui-component-mapper/src/files/date-picker.js b/packages/mui-component-mapper/src/files/date-picker.js
@@ -34,7 +34,7 @@ const DatePicker = (props) => {
           fullWidth
           margin="normal"
           label={label}
-          helperText={invalid || helperText || description}
+          helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
           disabled={isDisabled || isReadOnly}
           placeholder={placeholder}
           required={isRequired}
diff --git a/packages/mui-component-mapper/src/files/dual-list-select.js b/packages/mui-component-mapper/src/files/dual-list-select.js
@@ -309,7 +309,7 @@ const DualListSelect = ({
 }) => {
   const classes = useStyles();
   const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+  const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
@@ -475,7 +475,7 @@ const DualListSelect = ({
             />
           </Grid>
         </Grid>
-        {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+        {text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
       </FormControl>
     </FormFieldGrid>
   );
diff --git a/packages/mui-component-mapper/src/files/radio.js b/packages/mui-component-mapper/src/files/radio.js
@@ -73,7 +73,7 @@ const Radio = ({ name, ...props }) => {
   });
   const classes = useStyles();
   const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+  const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
   return (
     <FormFieldGrid className={classes.grid} {...FormFieldGridProps}>
       <FormControl required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
@@ -83,7 +83,7 @@ const Radio = ({ name, ...props }) => {
         {options.map((option) => (
           <RadioOption key={option.value} name={name} option={option} isDisabled={isDisabled} isReadOnly={isReadOnly} {...rest} />
         ))}
-        {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+        {text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
       </FormControl>
     </FormFieldGrid>
   );
diff --git a/packages/mui-component-mapper/src/files/select.js b/packages/mui-component-mapper/src/files/select.js
@@ -98,7 +98,7 @@ const InternalSelect = ({
             {...params}
             required={required}
             error={!!invalid}
-            helperText={invalid ? meta.error : helperText || description}
+            helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
             label={label}
             margin="normal"
             {...TextFieldProps}
diff --git a/packages/mui-component-mapper/src/files/slider.js b/packages/mui-component-mapper/src/files/slider.js
@@ -32,7 +32,7 @@ const Slider = (props) => {
   } = useFieldApi(props);
 
   const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+  const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
@@ -62,7 +62,7 @@ const Slider = (props) => {
               </Grid>
             )}
           </Grid>
-          {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+          {text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
         </FormGroup>
       </FormControl>
     </FormFieldGrid>
diff --git a/packages/mui-component-mapper/src/files/switch.js b/packages/mui-component-mapper/src/files/switch.js
@@ -33,7 +33,7 @@ export const Switch = (props) => {
     type: 'checkbox'
   });
   const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+  const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
@@ -52,7 +52,7 @@ export const Switch = (props) => {
             label={<FormLabel {...FormLabelProps}>{input.checked ? onText || label : offText || label}</FormLabel>}
             {...FormControlLabelProps}
           />
-          {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
+          {text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
         </FormGroup>
       </FormControl>
     </FormFieldGrid>
diff --git a/packages/mui-component-mapper/src/files/text-field.js b/packages/mui-component-mapper/src/files/text-field.js
@@ -31,7 +31,7 @@ const TextField = (props) => {
         {...input}
         fullWidth
         error={!!invalid}
-        helperText={invalid || helperText || description}
+        helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
         disabled={isDisabled}
         label={label}
         placeholder={placeholder}
diff --git a/packages/mui-component-mapper/src/files/textarea.js b/packages/mui-component-mapper/src/files/textarea.js
@@ -30,7 +30,7 @@ const Textarea = (props) => {
         {...input}
         fullWidth
         error={!!invalid}
-        helperText={invalid || helperText || description}
+        helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
         disabled={isDisabled}
         label={label}
         placeholder={placeholder}
diff --git a/packages/mui-component-mapper/src/files/time-picker.js b/packages/mui-component-mapper/src/files/time-picker.js
@@ -34,7 +34,7 @@ const TimePicker = (props) => {
           fullWidth
           margin="normal"
           label={label}
-          helperText={invalid || helperText || description}
+          helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
           disabled={isDisabled || isReadOnly}
           placeholder={placeholder}
           required={isRequired}
diff --git a/packages/mui-component-mapper/src/tests/form-fields.test.js b/packages/mui-component-mapper/src/tests/form-fields.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { FormLabel } from '@material-ui/core';
 import MultipleChoiceListCommon from '@data-driven-forms/common/src/multiple-choice-list';
 import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
@@ -98,7 +99,39 @@ describe('formFields', () => {
           ).toEqual(errorText);
         });
 
-        it('renders with helperText', () => {
+        it('renders with warning', async () => {
+          const errorField = {
+            ...field,
+            validate: [{ type: validatorTypes.REQUIRED, warning: true }],
+            useWarnings: true
+          };
+          let wrapper;
+
+          await act(async () => {
+            wrapper = mount(
+              <RendererWrapper
+                schema={{
+                  fields: [errorField, { name: 'error-reset-touched', component: componentTypes.TEXT_FIELD, validate: [{ type: 'required' }] }]
+                }}
+              />
+            );
+          });
+          wrapper.update();
+
+          await act(async () => {
+            wrapper.find('form').simulate('submit');
+          });
+          wrapper.update();
+
+          expect(
+            wrapper
+              .find('.MuiFormHelperText-root')
+              .first()
+              .text()
+          ).toEqual(errorText);
+        });
+
+        it('renders with helperText', async () => {
           const helpertextField = {
             ...field,
             helperText
