@vaibhavp1725/react-ions/src/components/FormGroup/ValidatedField.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import { string } from 'prop-types'
import optclass from '../internal/OptClass'
import style from './style.scss'

const ValidatedField = WrappedComponent => {
  return class extends React.Component {
    static propTypes = {
      error: string,
      label: string
    }

    render = () => {
      const { className, ...fieldProps } = this.props
      const wrapperErrorClass = fieldProps.error ? 'has-error' : ''
      const validatedFieldClass = optclass(style, ['validated-field', wrapperErrorClass, className])
      const ariaLabel = fieldProps.value || !fieldProps.label ? null : "Please complete the " + fieldProps.label + " field"

      return (
        <div className={validatedFieldClass}>
          <WrappedComponent {...fieldProps} />
          {fieldProps.error &&
            <span role='alert' aria-label={ ariaLabel } className={style['has-error__message']}>
              {fieldProps.error}
            </span>
          }
        </div>
      )
    }
  }
}

export default ValidatedField