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

BSR UI-KIT Relaunch

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uuid = require("uuid");
var _reactI18next = require("react-i18next");
var _formBuilder = require("@pinuts/form-builder");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// FormBuilder

const FieldsetWrapper = _ref => {
  let {
    config,
    components
  } = _ref;
  const {
    label,
    helpText,
    headingLevel = '4',
    className = ''
  } = config;
  const [t] = (0, _reactI18next.useTranslation)();
  const formId = (0, _react.useMemo)(() => (0, _uuid.v4)().slice(0, 6), []);
  const HeadingTag = `h${headingLevel}`;
  // Doppelpunkte und HTML-Tags zerstören das i18n?
  const usedLabel = label && !label.includes(':') && !label.includes('<') ? t(label) : label;
  const usedHelpText = helpText && !helpText.includes(':') && !helpText.includes('<') ? t(helpText) : helpText;
  const populatorFormId = (0, _react.useMemo)(() => `${formId}-${usedLabel?.replaceAll(' ', '')}-fieldset-wrapper`, [usedLabel, formId]);
  return /*#__PURE__*/_react.default.createElement("fieldset", {
    className: `my-3 ${className}`
  }, usedLabel && /*#__PURE__*/_react.default.createElement("legend", null, /*#__PURE__*/_react.default.createElement(HeadingTag, {
    className: "legend-custom"
  }, /*#__PURE__*/_react.default.createElement("span", null, usedLabel)), helpText && /*#__PURE__*/_react.default.createElement("p", {
    className: "helperText"
  }, usedHelpText)), /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {
    formId: populatorFormId,
    components: components
  }));
};
FieldsetWrapper.propTypes = {
  components: _propTypes.default.instanceOf(Array).isRequired,
  config: _propTypes.default.shape({
    label: _propTypes.default.string.isRequired,
    helpText: _propTypes.default.string,
    headingLevel: _propTypes.default.string,
    className: _propTypes.default.string
  }).isRequired
};
(0, _formBuilder.registerComponent)('FieldsetWrapper', FieldsetWrapper);
(0, _formBuilder.registerComponent)('Fieldset', FieldsetWrapper);
var _default = exports.default = FieldsetWrapper;