@magaya/react-components/dist/components/Form/FormInput.js

Magaya React Components Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FormInput = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _FieldWrapper = require("./FieldWrapper");
var _Labels = require("../Labels");
var _Inputs = require("../Inputs");
var _excluded = ["validationMessage", "touched", "label", "id", "valid", "disabled", "hint", "type", "required", "max", "value"];
var FormInput = function FormInput(fieldRenderProps) {
  var validationMessage = fieldRenderProps.validationMessage,
    touched = fieldRenderProps.touched,
    label = fieldRenderProps.label,
    id = fieldRenderProps.id,
    valid = fieldRenderProps.valid,
    disabled = fieldRenderProps.disabled,
    hint = fieldRenderProps.hint,
    type = fieldRenderProps.type,
    required = fieldRenderProps.required,
    max = fieldRenderProps.max,
    value = fieldRenderProps.value,
    others = (0, _objectWithoutProperties2["default"])(fieldRenderProps, _excluded);
  var showValidationMessage = touched && validationMessage;
  var showHint = !showValidationMessage && hint;
  var hintId = showHint ? "".concat(id, "_hint") : '';
  var errorId = showValidationMessage ? "".concat(id, "_error") : '';
  var remainingCharacters = max - (value === null || value === void 0 ? void 0 : value.length);
  var showRemainingCharacters = remainingCharacters > 0;
  return /*#__PURE__*/_react["default"].createElement(_FieldWrapper.FieldWrapper, null, /*#__PURE__*/_react["default"].createElement(_Labels.Label, {
    editorId: id,
    editorDisabled: disabled
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "k-label-text"
  }, label), required && /*#__PURE__*/_react["default"].createElement("span", {
    className: "k-label-required"
  }, "(required)"), showRemainingCharacters && /*#__PURE__*/_react["default"].createElement(_Labels.Hint, {
    direction: 'end',
    style: {
      position: 'absolute',
      right: 0
    }
  }, remainingCharacters)), /*#__PURE__*/_react["default"].createElement("div", {
    className: 'k-form-field-wrap'
  }, /*#__PURE__*/_react["default"].createElement(_Inputs.Input, Object.assign({
    valid: valid,
    type: type,
    id: id,
    disabled: disabled,
    maxLength: max,
    value: value,
    ariaDescribedBy: "".concat(hintId, " ").concat(errorId)
  }, others)), showHint && /*#__PURE__*/_react["default"].createElement(_Labels.Hint, {
    id: hintId
  }, hint), showValidationMessage && /*#__PURE__*/_react["default"].createElement(_Labels.Error, {
    id: errorId
  }, validationMessage)));
};
exports.FormInput = FormInput;