@pinuts/bsr-uikit-relaunch/dist/items/ArrayFieldset/ArrayFieldset.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 _formBuilder = require("@pinuts/form-builder");
var _reactI18next = require("react-i18next");
var _Button = _interopRequireDefault(require("../Button/Button.jsx"));
var _Icon = _interopRequireDefault(require("../Icon/Icon.jsx"));
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; }
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); } // FormBuilder
const {
  useFormikContext,
  FieldArray
} = _formBuilder.formik;

// ArrayFieldset Conventions
// obligatory:
// * defaultValue of empty Array
// * children des ArrayFieldsets müssen einen key beginnend mit 'fidx.' haben
// example:
// {
//     "component": "ArrayFieldset",
//     "config": {
//         "key": "nameData", -> WICHTIG: der key muss mit dem prefix der componenten keys übereinstimmen -> nameData.afidx.firstName
//         "defaultValue": [],
//         "label": "Kindernamen",
//         "showItemTitle": true,
//         "singularItemForList": "Kind",
//         "addButtonLabel": "Kind hinzufügen",
//         "addAnotherButtonLabel": "Weiteres Kind hinzufügen",
//         "removeButtonLabel": "Kindereintrag entfernen",
//         "helpText": "Hier ist der HelpText der erklärt, dass Sie hier weitere Felder ein und aus blenden bzw hinzufügen und entfernen können.",
//         "minElements": 1,
//         "maxElements": 3
//     },
//     "components": [
//         {
//             "component": "TextInputField",
//             "wrapperComponent": "FormFieldWrapper",
//             "config": {
//                 "key": "nameData.afidx.firstName" -> WICHTIG: Prefix "nameData" muss mit dem key des ArrayFieldsets übereinstimmen
//                 "label": "Vorname",
//                 "helpText": "Vorname bitte hier eingeben",
//                 "validation": ["required"]
//             }
//         },   <---
// ...

// FIXME required logik - bzw ungültig machen wenn required und mindestanzahl nicht erfüllt

const ArrayFieldset = _ref => {
  let {
    config,
    components
  } = _ref;
  const {
    values
  } = useFormikContext();
  const [arrayValues, valuesWereFilled] = (0, _react.useMemo)(() => {
    const valueFromForm = values[config.key];
    if (valueFromForm?.length < config.minElements) {
      return [[...valueFromForm, ...Array(config.minElements - (valueFromForm?.length || 0)).fill({})], true];
    }
    return [valueFromForm || [], false];
  }, [values, config.key, config.minElements]);
  const arrayLength = arrayValues.length;
  const stringifiedComponents = (0, _react.useMemo)(() => JSON.stringify(components) || [], [components]);
  const showDeleteButton = (0, _react.useMemo)(() => arrayLength > (config.minElements || 0), [arrayLength, config.minElements]);
  const showAddButton = (!config.maxElements || arrayLength < config.maxElements) && !valuesWereFilled;
  const [t] = (0, _reactI18next.useTranslation)();
  const usedAddButtonLabel = config.addButtonLabel ?? t('bsrItems.arrayFieldset.addButtonLabel');
  const usedAddAnotherButtonLabel = config.addAnotherButtonLabel ?? t('bsrItems.arrayFieldset.addAnotherButtonLabel');
  const usedRemoveButtonLabel = config.removeButtonLabel ?? t('bsrItems.arrayFieldset.removeButtonLabel');
  const usedSingularItemForList = config.singularItemForList ?? t('bsrItems.arrayFieldset.singularItemForList');
  const labelTemplate = config.labelTemplate;
  const AddElementButton = (0, _react.useCallback)(_ref2 => {
    let {
      arrayHelpers
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement("li", {
      className: "d-flex justify-content-end"
    }, arrayLength > 0 && /*#__PURE__*/_react.default.createElement("hr", {
      className: "tuerkis-20"
    }), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
      onClick: () => arrayHelpers.push({}),
      ariaLabel: arrayLength === 0 ? usedAddButtonLabel : usedAddAnotherButtonLabel,
      rounded: true,
      color: "tuerkis-20"
    }, config.addButtonProps || {}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
      icon: "circlePlus",
      className: "me-2"
    }), arrayLength === 0 ? usedAddButtonLabel : usedAddAnotherButtonLabel));
  }, [arrayLength, usedAddButtonLabel, usedAddAnotherButtonLabel, config.addButtonProps]);
  const renderFields = arrayHelpers => arrayValues.map((item, index) => {
    const componentsAsString = stringifiedComponents.replace(/afidx/g, index.toString());
    const modifiedComponents = JSON.parse(componentsAsString).map(element => ({
      ...element,
      config: {
        ...element.config,
        parentKey: config.key,
        readOnly: config.readOnly || config.disabled,
        disabled: config.readOnly || config.disabled
      }
    }));
    const itemTitleId = `${config.key}-${index}-heading`;
    const ariaLablelledbyAttr = config.showItemTitle ? {
      'aria-labelledby': itemTitleId
    } : {};
    const itemTitleFromLabelTemplate = labelTemplate?.replace(/(?:{)(.*?)(?:})/g, (_, key) => item[key] || '');
    const itemTitle = labelTemplate && itemTitleFromLabelTemplate.trim() ? itemTitleFromLabelTemplate : `${index + 1}. ${usedSingularItemForList}`;
    return /*#__PURE__*/_react.default.createElement("li", _extends({
      key: itemTitleId
    }, ariaLablelledbyAttr, {
      className: "p-4"
    }), config.showItemTitle && itemTitle && /*#__PURE__*/_react.default.createElement("h4", {
      className: "h5",
      id: itemTitleId
    }, itemTitle), /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {
      formId: `${config.key}-${index}-array-fieldset-formId`,
      components: modifiedComponents
    }), showDeleteButton && /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
      onClick: () => arrayHelpers.remove(index),
      ariaLabel: usedRemoveButtonLabel,
      rounded: true,
      color: "tuerkis-20"
    }, config.removeButtonProps || {}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
      icon: "trash",
      className: "me-2"
    }), usedRemoveButtonLabel));
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "arrayFieldSet"
  }, /*#__PURE__*/_react.default.createElement("fieldset", {
    className: ""
  }, /*#__PURE__*/_react.default.createElement("legend", null, /*#__PURE__*/_react.default.createElement("h3", {
    className: "h5"
  }, config.label)), config.helpText && /*#__PURE__*/_react.default.createElement("p", {
    className: "helperText"
  }, config.helpText), /*#__PURE__*/_react.default.createElement("ul", {
    className: "list-unstyled"
  }, /*#__PURE__*/_react.default.createElement(FieldArray, {
    name: config.key,
    render: arrayHelpers => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFields(arrayHelpers), showAddButton && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AddElementButton, {
      key: "add-button",
      arrayHelpers: arrayHelpers
    })))
  }))));
};
ArrayFieldset.propTypes = {
  components: _propTypes.default.instanceOf(Array).isRequired,
  config: _propTypes.default.shape({
    key: _propTypes.default.string,
    minElements: _propTypes.default.number,
    maxElements: _propTypes.default.number,
    addButtonLabel: _propTypes.default.string,
    addAnotherButtonLabel: _propTypes.default.string,
    addButtonAria: _propTypes.default.string,
    addButtonProps: _propTypes.default.object,
    removeButtonLabel: _propTypes.default.string,
    removeButtonAria: _propTypes.default.string,
    removeButtonProps: _propTypes.default.object,
    singularItemForList: _propTypes.default.string,
    labelTemplate: _propTypes.default.string,
    showItemTitle: _propTypes.default.bool,
    label: _propTypes.default.string,
    helpText: _propTypes.default.string,
    readOnly: _propTypes.default.bool,
    disabled: _propTypes.default.bool
  }).isRequired
};
(0, _formBuilder.registerComponent)('ArrayFieldset', ArrayFieldset);
var _default = exports.default = ArrayFieldset;