@pinuts/bsr-uikit-relaunch/dist/items/GroupInputField/GroupInputField.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 _useGetOptionList = _interopRequireDefault(require("../../hooks/useGetOptionList.js"));
var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
var _getUikitClassNames = require("../../utils/getUikitClassNames.js");
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); } /* eslint-disable jsx-a11y/role-supports-aria-props */ // form-builder
// components
const {
  getClassNames
} = _formBuilder.utils;
const getIsSelected = (value, opt) => Array.isArray(value) ? value.includes(opt.value) : value === opt.value;
const GroupInputField = _ref => {
  let {
    viewMode,
    readOnly,
    inputProps = {},
    field = {},
    options,
    skipOptions,
    inline,
    emptyOptionLabel,
    multipleChoice = true,
    onChange = () => {},
    value,
    fieldIds,
    isInvalid,
    disabled,
    helpText
  } = _ref;
  const [t] = (0, _reactI18next.useTranslation)();
  const inputOptions = (0, _useGetOptionList.default)(options, emptyOptionLabel, skipOptions);
  const inputClassNames = (0, _getUikitClassNames.getInputClassNames)(isInvalid, readOnly, disabled, inputProps.className, [['input']]);
  const handleCheckboxChange = e => {
    const nextValue = inputOptions[e.target.value]?.value;
    if (!value) {
      onChange([nextValue]);
    } else if (value.indexOf(nextValue) === -1) {
      onChange([...(value || []), nextValue]);
    } else {
      onChange([...(value || []).filter(el => el !== nextValue)]);
    }
  };
  const handleRadioChange = e => {
    onChange(inputOptions[e.target.value]?.value);
  };
  const translateLabel = function () {
    let label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    return !label.includes(':') && !label.includes('<') ? t(label) : label;
  };
  if (viewMode) {
    return /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, inputOptions.filter(opt => getIsSelected(value, opt)).map(opt => translateLabel(opt.label)).join(', '));
  }
  const ariaDescribedBy = [helpText && fieldIds.helpText, isInvalid && fieldIds.errorMessage].filter(Boolean).join(' ');
  return /*#__PURE__*/_react.default.createElement("div", null, inputOptions.length ? /*#__PURE__*/_react.default.createElement("ul", {
    className: `${inline ? 'inline' : ''} ${'groupInputList  mt-1'}`
  }, inputOptions.map((opt, index) => {
    const typeConfig = multipleChoice ? {
      type: 'checkbox',
      onChange: !readOnly && !viewMode ? handleCheckboxChange : null,
      checked: getIsSelected(value, opt),
      'aria-describedby': ariaDescribedBy,
      'aria-checked': getIsSelected(value, opt)
    } : {
      type: 'radio',
      onChange: !readOnly && !viewMode ? handleRadioChange : null,
      checked: value === opt.value,
      'aria-describedby': ariaDescribedBy,
      'aria-checked': value === opt.value
    };
    const usedId = `${fieldIds.fieldId}_${typeof opt.value === 'string' ? opt.value.replaceAll(' ', '_') : opt.value}`;
    return /*#__PURE__*/_react.default.createElement("li", {
      className: `${inline ? 'inline me-4' : ''}`,
      key: opt.value
    }, /*#__PURE__*/_react.default.createElement("input", _extends({
      disabled: readOnly,
      readOnly: readOnly
    }, field, {
      name: fieldIds.fieldId,
      value: index,
      className: getClassNames([inputClassNames]),
      "aria-disabled": readOnly
    }, typeConfig, inputProps, {
      id: usedId
    })), /*#__PURE__*/_react.default.createElement("label", {
      className: "label ps-2",
      htmlFor: usedId
    }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateLabel(opt.label))));
  })) : /*#__PURE__*/_react.default.createElement("div", {
    className: "error-text"
  }, t('bsrItems.noOptionsGiven')));
};
GroupInputField.propTypes = {
  ..._FormFieldChildPropTypes.default,
  options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
  }), _propTypes.default.string])).isRequired,
  skipOptions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string])
};
GroupInputField.formFieldConfig = {
  labelIsLegend: true,
  isFieldset: true
};
const HigherOrderGroupInputField = (0, _withFieldGroup.default)(GroupInputField);

// wrap the field label, error message help text and more
const WrappedGroupInputField = props => {
  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderGroupInputField, props));
};
(0, _formBuilder.registerComponent)('GroupInputField', WrappedGroupInputField);
(0, _formBuilder.registerComponent)('GroupInputFieldBasic', HigherOrderGroupInputField);
var _default = exports.default = WrappedGroupInputField;