@tpr/govuk-react-jsx/govuk/components/input/index.js

[](https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.1) [![version](https://img.shields.io/npm/v/govuk-react-jsx.svg?styl

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Input = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _ = require("../..");

var _excluded = ["govukClassNames", "className", "aria-describedby", "errorMessage", "formGroup", "hint", "label", "name", "id", "prefix", "suffix"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Input = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var govukClassNames = props.govukClassNames,
      className = props.className,
      describedBy = props['aria-describedby'],
      errorMessage = props.errorMessage,
      formGroup = props.formGroup,
      hint = props.hint,
      label = props.label,
      name = props.name,
      id = props.id,
      prefix = props.prefix,
      suffix = props.suffix,
      attributes = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var classNames = govukClassNames || {};
  classNames['govuk-input'] = classNames['govuk-input'] || 'govuk-input';
  classNames['govuk-input--error'] = classNames['govuk-input--error'] || 'govuk-input--error';
  classNames['govuk-form-group'] = classNames['govuk-form-group'] || 'govuk-form-group';
  classNames['govuk-form-group--error'] = classNames['govuk-form-group--error'] || 'govuk-form-group--error';
  classNames['govuk-input__wrapper'] = classNames['govuk-input__wrapper'] || 'govuk-input__wrapper';
  classNames['govuk-input__prefix'] = classNames['govuk-input__prefix'] || 'govuk-input__prefix';
  classNames['govuk-input__suffix'] = classNames['govuk-input__suffix'] || 'govuk-input__suffix';
  var describedByValue = describedBy || '';
  var hintComponent;
  var errorMessageComponent;

  if (hint) {
    var hintId = "".concat(id, "-hint");
    describedByValue += " ".concat(hintId);
    hintComponent = /*#__PURE__*/_react["default"].createElement(_.Hint, (0, _extends2["default"])({}, hint, {
      id: hintId,
      govukClassNames: govukClassNames
    }));
  }

  if (errorMessage) {
    var errorId = id ? "".concat(id, "-error") : '';
    describedByValue += " ".concat(errorId);
    errorMessageComponent = /*#__PURE__*/_react["default"].createElement(_.ErrorMessage, (0, _extends2["default"])({}, errorMessage, {
      id: errorId,
      govukClassNames: govukClassNames
    }));
  }

  var input = /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
    ref: ref,
    id: id,
    className: "".concat(classNames['govuk-input'], " ").concat(className || '', " ").concat(errorMessage ? " ".concat(classNames['govuk-input--error']) : ''),
    name: name || id,
    "aria-describedby": describedByValue || null
  }, attributes));

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classNames['govuk-form-group'], " ").concat((formGroup === null || formGroup === void 0 ? void 0 : formGroup.className) || '', " ").concat(errorMessage ? classNames['govuk-form-group--error'] : '', " ")
  }, /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({}, label, {
    htmlFor: id,
    govukClassNames: govukClassNames
  })), hintComponent, errorMessageComponent, prefix || suffix ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classNames['govuk-input__wrapper']
  }, prefix ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    "aria-hidden": "true"
  }, _objectSpread(_objectSpread({}, prefix), {}, {
    className: "".concat(classNames['govuk-input__prefix'], " ").concat(prefix.className ? prefix.className : '')
  }))) : null, input, suffix ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    "aria-hidden": "true"
  }, _objectSpread(_objectSpread({}, suffix), {}, {
    className: "".concat(classNames['govuk-input__suffix'], " ").concat(suffix.className ? suffix.className : '')
  }))) : null) : input);
});

exports.Input = Input;
Input.displayName = 'Input';
Input.defaultProps = {
  type: 'text'
};