fleet/frontend/components/forms/FormField/FormField.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

const baseClass = 'form-field';

class FormField extends Component {
  static propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    error: PropTypes.string,
    hint: PropTypes.oneOfType([PropTypes.array, PropTypes.node, PropTypes.string]),
    label: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.node]),
    name: PropTypes.string,
    type: PropTypes.string,
  };

  renderLabel = () => {
    const { error, label, name } = this.props;
    const labelWrapperClasses = classnames(
      `${baseClass}__label`,
      { [`${baseClass}__label--error`]: error },
    );

    if (!label) {
      return false;
    }

    return (
      <label className={labelWrapperClasses} htmlFor={name}>
        {error || label}
      </label>
    );
  }

  renderHint = () => {
    const { hint } = this.props;

    if (hint) {
      return <span className={`${baseClass}__hint`}>{hint}</span>;
    }

    return false;
  }

  render () {
    const { renderLabel, renderHint } = this;
    const { children, className, type } = this.props;

    const formFieldClass = classnames(baseClass, {
      [`${baseClass}--${type}`]: type,
    }, className);

    return (
      <div className={formFieldClass}>
        {renderLabel()}
        {children}
        {renderHint()}
      </div>
    );
  }
}

export default FormField;