@pinuts/bsr-uikit-relaunch/dist/items/FieldLabel/FieldLabel.js

BSR UI-KIT Relaunch

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _formBuilder = require("@pinuts/form-builder");
var _reactI18next = require("react-i18next");
var _reactRouterDom = require("react-router-dom");
var _Icon = _interopRequireDefault(require("../../assets/Icon.jsx"));
var _HTMLParserSanitized = require("../HTMLParserSanitized/HTMLParserSanitized.jsx");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const FieldLabel = _ref => {
  let {
    id,
    targetId,
    labelText,
    isRequired,
    isInvalid,
    isLegend,
    isFocused,
    viewMode,
    stepId
  } = _ref;
  const [t] = (0, _reactI18next.useTranslation)();
  // Doppelpunkte und HTML-Tags zerstören das i18n?
  const usedLabelText = labelText && !labelText.includes(':') && !labelText.includes('<') ? t(labelText) : labelText;
  const children = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, usedLabelText), isRequired && /*#__PURE__*/_react.default.createElement("span", {
    "aria-hidden": "true",
    className: _formBuilder.utils.getClassNames(['required', isInvalid && 'is-invalid'])
  }, "*"));
  if (viewMode) {
    const ErrorTag = stepId ? _reactRouterDom.Link : 'div';
    return !isInvalid ? /*#__PURE__*/_react.default.createElement("div", {
      className: "form-label"
    }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, usedLabelText)) : /*#__PURE__*/_react.default.createElement(ErrorTag, _extends({
      className: "form-label"
    }, stepId ? {
      to: `../${stepId}`
    } : {}), usedLabelText, stepId && /*#__PURE__*/_react.default.createElement(_Icon.default, {
      icon: "chevronRight",
      className: "my-1",
      height: "16",
      width: "16"
    }));
  }
  const labelClassNames = _formBuilder.utils.getClassNames(['label', isFocused && 'labelFocused']);
  const outerComponentProps = {
    id,
    className: labelClassNames,
    children
  };
  if (isLegend) {
    return /*#__PURE__*/_react.default.createElement("legend", outerComponentProps);
  }
  return /*#__PURE__*/_react.default.createElement("label", _extends({}, outerComponentProps, {
    htmlFor: targetId
  }));
};
FieldLabel.propTypes = {
  id: _propTypes.default.string,
  targetId: _propTypes.default.string.isRequired,
  isRequired: _propTypes.default.bool,
  isFocused: _propTypes.default.bool,
  isInvalid: _propTypes.default.bool,
  labelText: _propTypes.default.string.isRequired,
  isLegend: _propTypes.default.bool,
  viewMode: _propTypes.default.bool,
  stepId: _propTypes.default.string
};
var _default = exports.default = FieldLabel;