feat(pf4): add validated to components supporting it

Author: rvsia

packages/pf4-component-mapper/src/common/form-group.js

@@ -2,27 +2,25 @@ import React from 'react';
 import { FormGroup as Pf4FormGroup, TextContent, Text } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
-const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id }) => {
-  const { error, touched } = meta;
-  const showError = touched && error;
-  return (
-    <Pf4FormGroup
-      isRequired={isRequired}
-      label={!hideLabel && label}
-      fieldId={id}
-      isValid={!showError}
-      helperText={helperText}
-      helperTextInvalid={meta.error}
-    >
-      {description && (
-        <TextContent>
-          <Text component="small">{description}</Text>
-        </TextContent>
-      )}
-      {children}
-    </Pf4FormGroup>
-  );
-};
+import showError from './show-error';
+
+const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id }) => (
+  <Pf4FormGroup
+    isRequired={isRequired}
+    label={!hideLabel && label}
+    fieldId={id}
+    helperText={helperText}
+    helperTextInvalid={meta.error}
+    {...showError(meta)}
+  >
+    {description && (
+      <TextContent>
+        <Text component="small">{description}</Text>
+      </TextContent>
+    )}
+    {children}
+  </Pf4FormGroup>
+);
 
 FormGroup.propTypes = {
   label: PropTypes.node,

packages/pf4-component-mapper/src/common/show-error.js

@@ -0,0 +1,3 @@
+const showError = ({ error, touched }) => ({ validated: touched && error ? 'error' : 'default' });
+
+export default showError;

packages/pf4-component-mapper/src/files/date-picker.js

@@ -3,6 +3,7 @@ import { TextInput } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 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, ...rest } = useFieldApi(props);
@@ -16,7 +17,7 @@ const DatePicker = (props) => {
       hideLabel={hideLabel}
       id={id || input.name}
     >
-      <TextInput {...input} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
+      <TextInput {...input} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} {...showError(meta)} />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/files/dual-list-select.js

@@ -12,9 +12,9 @@ import {
   Text,
   TextVariants,
   TextContent,
-  DataToolbar,
-  DataToolbarItem,
-  DataToolbarContent
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent
 } from '@patternfly/react-core';
 
 import {
@@ -72,10 +72,10 @@ List.defaultProps = {
   value: []
 };
 
-const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, value, placeholder, id }) => (
-  <DataToolbar className="pf-u-p-0 ddorg__pf4-component-mapper__dual-list-select-toolbar" id={id}>
-    <DataToolbarContent className="pf-u-p-0 pf-u-pb-md">
-      <DataToolbarItem>
+const InternalToolbar = ({ sortTitle, onFilter, onSort, sortDirection, value, placeholder, id }) => (
+  <Toolbar className="pf-u-p-0 ddorg__pf4-component-mapper__dual-list-select-toolbar" id={id}>
+    <ToolbarContent className="pf-u-p-0 pf-u-pb-md">
+      <ToolbarItem>
         <InputGroup>
           <TextInput
             name="filterOptions"
@@ -90,17 +90,17 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, value, placeholde
             <SearchIcon />
           </Button>
         </InputGroup>
-      </DataToolbarItem>
-      <DataToolbarItem>
+      </ToolbarItem>
+      <ToolbarItem>
         <Button onClick={onSort} title={sortTitle} variant="plain">
           {!sortDirection ? <PficonSortCommonAscIcon size="md" /> : <PficonSortCommonDescIcon size="md" />}
         </Button>
-      </DataToolbarItem>
-    </DataToolbarContent>
-  </DataToolbar>
+      </ToolbarItem>
+    </ToolbarContent>
+  </Toolbar>
 );
 
-Toolbar.propTypes = {
+InternalToolbar.propTypes = {
   sortTitle: PropTypes.node,
   onFilter: PropTypes.func.isRequired,
   onSort: PropTypes.func.isRequired,
@@ -167,7 +167,7 @@ const DualList = ({
               </TextContent>
             </GridItem>
             <GridItem md={12}>
-              <Toolbar
+              <InternalToolbar
                 sortDirection={state.sortLeftDesc}
                 onSort={sortOptions}
                 onFilter={filterOptions}
@@ -238,7 +238,7 @@ const DualList = ({
               </TextContent>
             </GridItem>
             <GridItem md={12}>
-              <Toolbar
+              <InternalToolbar
                 sortDirection={state.sortRightDesc}
                 onSort={sortValues}
                 onFilter={filterValues}

packages/pf4-component-mapper/src/files/text-field.js

@@ -3,6 +3,7 @@ import FormGroup from '../common/form-group';
 import { TextInput } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 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, ...rest } = useFieldApi(props);
@@ -16,7 +17,7 @@ const TextField = (props) => {
       hideLabel={hideLabel}
       id={id || input.name}
     >
-      <TextInput {...input} {...rest} id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
+      <TextInput {...input} {...rest} id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} {...showError(meta)} />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/files/textarea.js

@@ -3,6 +3,7 @@ import { TextArea as Pf4TextArea } from '@patternfly/react-core';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import PropTypes from 'prop-types';
 import FormGroup from '../common/form-group';
+import showError from '../common/show-error';
 
 const Textarea = (props) => {
   const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
@@ -16,7 +17,7 @@ const Textarea = (props) => {
       hideLabel={hideLabel}
       id={id || input.name}
     >
-      <Pf4TextArea disabled={isDisabled || isReadOnly} {...input} id={id || input.name} {...rest} />
+      <Pf4TextArea disabled={isDisabled || isReadOnly} {...input} id={id || input.name} {...rest} {...showError(meta)} />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/files/time-picker.js

@@ -3,6 +3,7 @@ import FormGroup from '../common/form-group';
 import { TextInput } from '@patternfly/react-core';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import PropTypes from 'prop-types';
+import showError from '../common/show-error';
 
 const TimePicker = (props) => {
   const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
@@ -16,7 +17,7 @@ const TimePicker = (props) => {
       hideLabel={hideLabel}
       id={id || input.name}
     >
-      <TextInput {...input} {...rest} type="time" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
+      <TextInput {...input} {...rest} type="time" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} {...showError(meta)} />
     </FormGroup>
   );
 };