feat(suir): implement warning as helperText

rvsia · rvsia · commit 559ac910d852 · 2020-10-22T14:28:50.000+02:00
diff --git a/packages/suir-component-mapper/src/common/helpers.js b/packages/suir-component-mapper/src/common/helpers.js
@@ -5,3 +5,11 @@ export const validationError = (meta, validateOnMount) => {
 
   return meta.touched && meta.error;
 };
+
+export const validationWarning = (meta, validateOnMount) => {
+  if (validateOnMount) {
+    return meta.warning;
+  }
+
+  return meta.touched && meta.warning;
+};
diff --git a/packages/suir-component-mapper/src/files/checkbox.js b/packages/suir-component-mapper/src/files/checkbox.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormCheckbox } from 'semantic-ui-react';
 
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import MultipleChoiceList from '../common/multiple-choice-list';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
@@ -28,7 +28,7 @@ export const SingleCheckbox = (props) => {
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormCheckbox
         {...input}
         required={isRequired}
diff --git a/packages/suir-component-mapper/src/files/date-picker.js b/packages/suir-component-mapper/src/files/date-picker.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormField from '../common/form-field';
 
@@ -24,7 +24,7 @@ const DatePicker = (props) => {
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormField
         label={label}
         {...input}
diff --git a/packages/suir-component-mapper/src/files/dual-list-select.js b/packages/suir-component-mapper/src/files/dual-list-select.js
@@ -7,7 +7,7 @@ import FormField from '../common/form-field';
 import { createUseStyles } from 'react-jss';
 import clsx from 'clsx';
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 
 const useListStyles = createUseStyles({
   root: {
@@ -180,7 +180,7 @@ const DualList = ({
   const invalid = validationError(meta, validateOnMount);
   const classes = useDualListStyles();
   return (
-    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormField
         label={label}
         required={isRequired}
diff --git a/packages/suir-component-mapper/src/files/radio.js b/packages/suir-component-mapper/src/files/radio.js
@@ -4,7 +4,7 @@ import { FormRadio, FormField } from 'semantic-ui-react';
 import { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 const RadioOption = ({ name, option, isDisabled, isReadOnly, ...props }) => {
@@ -51,7 +51,7 @@ const Radio = ({ name, ...props }) => {
   });
   const invalid = validationError(meta, validateOnMount);
   return (
-    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormField {...FormFieldProps} disabled={isDisabled} required={isRequired} error={invalid && { content: meta.error }} label={label} />
       {options.map((option) => (
         <RadioOption key={option.value} name={name} option={option} isDisabled={isDisabled} isReadOnly={isReadOnly} {...rest} />
diff --git a/packages/suir-component-mapper/src/files/select.js b/packages/suir-component-mapper/src/files/select.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import CommonSelect from '@data-driven-forms/common/src/select';
 import parseInternalValue from '@data-driven-forms/common/src/select/parse-internal-value';
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import { Dropdown } from 'semantic-ui-react';
@@ -38,7 +38,7 @@ const SuirSelect = ({
   const internalValue = parseInternalValue(value, isMulti);
 
   return (
-    <FormFieldGrid helperText={helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
       <FormField
         disabled={isDisabled}
         readOnly={isReadOnly}
diff --git a/packages/suir-component-mapper/src/files/switch.js b/packages/suir-component-mapper/src/files/switch.js
@@ -6,7 +6,7 @@ import FormFieldGrid from '../common/form-field-grid';
 import { createUseStyles } from 'react-jss';
 import clsx from 'clsx';
 
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import FormField from '../common/form-field';
 
 const useStyles = createUseStyles({
@@ -49,7 +49,7 @@ export const Switch = (props) => {
   const classes = useStyles();
   const controlLabel = input.checked ? onText : offText;
   return (
-    <FormFieldGrid helperText={helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
       <FormField
         required={isRequired}
         className={clsx(classes.root, className)}
diff --git a/packages/suir-component-mapper/src/files/text-field.js b/packages/suir-component-mapper/src/files/text-field.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
 
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormFieldGrid from '../common/form-field-grid';
 import FormField from '../common/form-field';
@@ -25,7 +25,7 @@ const TextField = (props) => {
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
       <FormField
         {...rest}
         control={Input}
diff --git a/packages/suir-component-mapper/src/files/textarea.js b/packages/suir-component-mapper/src/files/textarea.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormTextArea } from 'semantic-ui-react';
 
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormField from '../common/form-field';
 
@@ -23,7 +23,7 @@ const Textarea = (props) => {
   } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
   return (
-    <FormFieldGrid helperText={helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
       <FormField
         required={isRequired}
         disabled={isDisabled}
diff --git a/packages/suir-component-mapper/src/files/time-picker.js b/packages/suir-component-mapper/src/files/time-picker.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import FormFieldGrid from '../common/form-field-grid';
-import { validationError } from '../common/helpers';
+import { validationError, validationWarning } from '../common/helpers';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormField from '../common/form-field';
 
@@ -13,7 +13,7 @@ const TimePicker = (props) => {
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
+    <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelpertextProps={HelpertextProps} {...FormFieldGridProps}>
       <FormField
         required={isRequired}
         readOnly={isReadOnly}
diff --git a/packages/suir-component-mapper/src/tests/form-fields.test.js b/packages/suir-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 MultipleChoiceListCommon from '@data-driven-forms/common/src/multiple-choice-list';
 import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
 import Checkbox from '../files/checkbox';
@@ -101,6 +102,28 @@ describe('formFields', () => {
           ).toEqual(errorText);
         });
 
+        it('renders with warning', async () => {
+          const errorField = {
+            ...field,
+            validate: [{ type: validatorTypes.REQUIRED, warning: true }],
+            useWarnings: true,
+            validateOnMount: true
+          };
+          let wrapper;
+
+          await act(async () => {
+            wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
+          });
+          wrapper.update();
+
+          expect(
+            wrapper
+              .find(HelperText)
+              .last()
+              .text()
+          ).toEqual(errorText);
+        });
+
         it('renders with helperText', () => {
           const helpertextField = {
             ...field,
