feat(mui): implement warning validation

Author: rvsia

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>

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}

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>
   );

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>
   );

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}

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>

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>

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}

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}

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}