@tpr/govuk-react-jsx/govuk/components/date-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.DateInput = DateInput;

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", "errorMessage", "fieldset", "formGroup", "hint", "id", "items", "namePrefix", "onChange"],
    _excluded2 = ["name", "inputMode", "label", "reactListKey", "id", "className", "pattern"];

function DateInput(props) {
  var govukClassNames = props.govukClassNames,
      className = props.className,
      errorMessage = props.errorMessage,
      fieldset = props.fieldset,
      formGroup = props.formGroup,
      hint = props.hint,
      id = props.id,
      items = props.items,
      namePrefix = props.namePrefix,
      onChange = props.onChange,
      attributes = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var classNames = govukClassNames || {};
  classNames['govuk-input--width-2'] = classNames['govuk-input--width-2'] || 'govuk-input--width-2';
  classNames['govuk-input--width-4'] = classNames['govuk-input--width-4'] || 'govuk-input--width-4';
  classNames['govuk-date-input'] = classNames['govuk-date-input'] || 'govuk-date-input';
  classNames['govuk-date-input__item'] = classNames['govuk-date-input__item'] || 'govuk-date-input__item';
  classNames['govuk-date-input__label'] = classNames['govuk-date-input__label'] || 'govuk-date-input__label';
  classNames['govuk-date-input__input'] = classNames['govuk-date-input__input'] || 'govuk-date-input__input';
  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';
  var describedBy = fieldset !== null && fieldset !== void 0 && fieldset['aria-describedby'] ? fieldset['aria-describedby'] : '';
  var hintComponent;
  var errorMessageComponent;
  var dateInputItems = [];

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

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

  if (items && items.length > 0) {
    dateInputItems = items;
  } else {
    dateInputItems = [{
      name: 'day',
      className: classNames['govuk-input--width-2'],
      type: 'text'
    }, {
      name: 'month',
      className: classNames['govuk-input--width-2'],
      type: 'text'
    }, {
      name: 'year',
      className: classNames['govuk-input--width-4'],
      type: 'text'
    }];
  }

  var itemComponents = dateInputItems.filter(function (item) {
    return item;
  }).map(function (item, index) {
    var itemName = item.name,
        itemInputMode = item.inputMode,
        itemLabel = item.label,
        itemReactListKey = item.reactListKey,
        itemId = item.id,
        itemClassName = item.className,
        itemPattern = item.pattern,
        itemAttributes = (0, _objectWithoutProperties2["default"])(item, _excluded2);
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: itemReactListKey || index,
      className: classNames['govuk-date-input__item']
    }, /*#__PURE__*/_react["default"].createElement(_.Input, (0, _extends2["default"])({
      onChange: onChange
    }, itemAttributes, {
      label: {
        children: itemLabel || itemName.charAt(0).toUpperCase() + itemName.slice(1),
        className: classNames['govuk-date-input__label']
      },
      id: itemId || "".concat(id, "-").concat(itemName),
      className: "".concat(classNames['govuk-date-input__input'], " ").concat(itemClassName || ''),
      name: namePrefix ? "".concat(namePrefix, "-").concat(itemName) : itemName,
      type: "text",
      inputMode: itemInputMode || 'numeric',
      pattern: itemPattern || '[0-9]*',
      govukClassNames: govukClassNames
    })));
  });

  var innerHtml = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hintComponent, errorMessageComponent, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: "".concat(classNames['govuk-date-input'], " ").concat(className || '')
  }, attributes, {
    id: id
  }), itemComponents));

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classNames['govuk-form-group']).concat(errorMessage ? " ".concat(classNames['govuk-form-group--error']) : '', " ").concat((formGroup === null || formGroup === void 0 ? void 0 : formGroup.className) || '')
  }, fieldset ? /*#__PURE__*/_react["default"].createElement(_.Fieldset, (0, _extends2["default"])({}, fieldset, {
    "aria-describedby": describedBy || null,
    role: "group",
    govukClassNames: govukClassNames
  }), innerHtml) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, innerHtml));
}