Merge pull request #956 from fhlavac/validate-on-mount

rvsia · web-flow · commit ef6d9e5823f5 · 2021-02-18T10:38:51.000+01:00
Add validateOnMount option
diff --git a/packages/pf4-component-mapper/README.md b/packages/pf4-component-mapper/README.md
@@ -96,6 +96,23 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 - [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=pf4)
 - [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=pf4)
 
+
+### ValidateOnMount
+
+PF4 mapper provides an option to validate a field when the component is mounted. Just set `validateOnMount` to `true`.
+
+```jsx
+{
+    component: 'text-field',
+    name: 'required-field',
+    validate: [{type: 'required'}],
+    validateOnMount: true
+}
+```
+
+This field will show the error immediately.
+
+
 ### Useful links
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
diff --git a/packages/pf4-component-mapper/src/common/form-group.js b/packages/pf4-component-mapper/src/common/form-group.js
@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 
 import showError from './show-error';
 
-const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id, FormGroupProps }) => (
+const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, description, hideLabel, children, id, FormGroupProps }) => (
   <Pf4FormGroup
     isRequired={isRequired}
     label={!hideLabel && label}
     fieldId={id}
     helperText={(meta.touched && meta.warning) || helperText}
     helperTextInvalid={meta.error || meta.submitError}
-    {...showError(meta)}
+    {...showError(meta, validateOnMount)}
     {...FormGroupProps}
   >
     {description && (
@@ -30,6 +30,7 @@ FormGroup.propTypes = {
   meta: PropTypes.object.isRequired,
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
+  validateOnMount: PropTypes.bool,
   id: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
   FormGroupProps: PropTypes.object
diff --git a/packages/pf4-component-mapper/src/common/show-error.js b/packages/pf4-component-mapper/src/common/show-error.js
@@ -1,13 +1,13 @@
-const showError = ({ error, touched, warning, submitError }) => {
-  if (touched && error) {
+const showError = ({ error, touched, warning, submitError }, validateOnMount) => {
+  if ((touched || validateOnMount) && error) {
     return { validated: 'error' };
   }
 
-  if (touched && submitError) {
+  if ((touched || validateOnMount) && submitError) {
     return { validated: 'error' };
   }
 
-  if (touched && warning) {
+  if ((touched || validateOnMount) && warning) {
     return { validated: 'warning' };
   }
 
diff --git a/packages/pf4-component-mapper/src/files/checkbox.js b/packages/pf4-component-mapper/src/files/checkbox.js
@@ -7,12 +7,26 @@ import { Checkbox as Pf4Checkbox } from '@patternfly/react-core';
 import IsRequired from '../common/is-required';
 
 const SingleCheckbox = (props) => {
-  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps,
+    ...rest
+  } = useFieldApi(props);
   return (
     <FormGroup
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel
       id={id || input.name}
@@ -33,6 +47,7 @@ const SingleCheckbox = (props) => {
 
 SingleCheckbox.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/date-picker.js b/packages/pf4-component-mapper/src/files/date-picker.js
@@ -6,27 +6,49 @@ import FormGroup from '../common/form-group';
 import showError from '../common/show-error';
 
 const DatePicker = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
-    props
-  );
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    hideLabel,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps,
+    ...rest
+  } = useFieldApi(props);
   return (
     <FormGroup
       label={label}
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <TextInput {...input} {...showError(meta)} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
+      <TextInput
+        {...input}
+        {...showError(meta, validateOnMount)}
+        {...rest}
+        type="date"
+        id={id || input.name}
+        isReadOnly={isReadOnly}
+        isDisabled={isDisabled}
+      />
     </FormGroup>
   );
 };
 
 DatePicker.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/dual-list-select.js b/packages/pf4-component-mapper/src/files/dual-list-select.js
@@ -13,6 +13,7 @@ const DualList = (props) => {
     isRequired,
     helperText,
     meta,
+    validateOnMount,
     description,
     hideLabel,
     id,
@@ -81,6 +82,7 @@ const DualList = (props) => {
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
@@ -109,6 +111,7 @@ const DualList = (props) => {
 
 DualList.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
   description: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/radio.js b/packages/pf4-component-mapper/src/files/radio.js
@@ -35,7 +35,20 @@ const Radio = ({ name, options, type, ...props }) => {
    * You cannot assign type radio to PF4 radio buttons input. It will break and will not set input value, only checked property
    * It has to be reqular input and we have change the radio value manully to the option value
    */
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps } = useFieldApi({
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    hideLabel,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps
+  } = useFieldApi({
     name,
     ...props
   });
@@ -45,6 +58,7 @@ const Radio = ({ name, options, type, ...props }) => {
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
@@ -59,6 +73,7 @@ const Radio = ({ name, options, type, ...props }) => {
 
 Radio.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/select.js b/packages/pf4-component-mapper/src/files/select.js
@@ -5,15 +5,28 @@ import FormGroup from '../common/form-group';
 import DataDrivenSelect from '../common/select/select';
 
 const Select = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
-    props
-  );
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    hideLabel,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps,
+    ...rest
+  } = useFieldApi(props);
   return (
     <FormGroup
       label={label}
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
@@ -26,6 +39,7 @@ const Select = (props) => {
 
 Select.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/slider.js b/packages/pf4-component-mapper/src/files/slider.js
@@ -5,14 +5,28 @@ import FormGroup from '../common/form-group';
 import { Slider as PF4Slider } from '@patternfly/react-core';
 
 const Slider = (props) => {
-  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps,
+    ...rest
+  } = useFieldApi(props);
 
   return (
     <FormGroup
       label={label}
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       id={id || input.name}
       FormGroupProps={FormGroupProps}
@@ -24,6 +38,7 @@ const Slider = (props) => {
 
 Slider.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/switch.js b/packages/pf4-component-mapper/src/files/switch.js
@@ -13,6 +13,7 @@ const Switch = (props) => {
     isRequired,
     helperText,
     meta,
+    validateOnMount,
     description,
     input,
     isReadOnly,
@@ -29,6 +30,7 @@ const Switch = (props) => {
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel
       id={id || input.name}
@@ -48,6 +50,7 @@ const Switch = (props) => {
 
 Switch.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/text-field.js b/packages/pf4-component-mapper/src/files/text-field.js
@@ -6,27 +6,41 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import showError from '../common/show-error';
 
 const TextField = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
-    props
-  );
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    hideLabel,
+    input,
+    isReadOnly,
+    isDisabled,
+    id,
+    FormGroupProps,
+    ...rest
+  } = useFieldApi(props);
   return (
     <FormGroup
       label={label}
       isRequired={isRequired}
       helperText={helperText}
       meta={meta}
+      validateOnMount={validateOnMount}
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <TextInput {...input} {...showError(meta)} {...rest} id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
+      <TextInput {...input} {...showError(meta, validateOnMount)} {...rest} id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
     </FormGroup>
   );
 };
 
 TextField.propTypes = {
   label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   isRequired: PropTypes.bool,
   helperText: PropTypes.node,
diff --git a/packages/pf4-component-mapper/src/files/textarea.js b/packages/pf4-component-mapper/src/files/textarea.js
diff --git a/packages/pf4-component-mapper/src/files/time-picker.js b/packages/pf4-component-mapper/src/files/time-picker.js
diff --git a/packages/pf4-component-mapper/src/tests/form-fields.test.js b/packages/pf4-component-mapper/src/tests/form-fields.test.js
diff --git a/packages/pf4-component-mapper/src/tests/show-error.test.js b/packages/pf4-component-mapper/src/tests/show-error.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`		`-const showError = ({ error, touched, warning, submitError }) => {`
`2`		`- if (touched && error) {`
	`1`	`+const showError = ({ error, touched, warning, submitError }, validateOnMount) => {`
	`2`	`+ if ((touched \|\| validateOnMount) && error) {`
`3`	`3`	`return { validated: 'error' };`
`4`	`4`	`}`
`5`	`5`
`6`		`- if (touched && submitError) {`
	`6`	`+ if ((touched \|\| validateOnMount) && submitError) {`
`7`	`7`	`return { validated: 'error' };`
`8`	`8`	`}`
`9`	`9`
`10`		`- if (touched && warning) {`
	`10`	`+ if ((touched \|\| validateOnMount) && warning) {`
`11`	`11`	`return { validated: 'warning' };`
`12`	`12`	`}`
`13`	`13`