@pinuts/bsr-uikit-relaunch/dist/items/Modal/Modal.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 _Modal = _interopRequireDefault(require("react-bootstrap/Modal"));
var _reactI18next = require("react-i18next");
var _Button = _interopRequireDefault(require("../Button/Button.jsx"));
var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
var _Icon = _interopRequireDefault(require("../Icon/Icon.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 {
  getClassNames
} = _formBuilder.utils;
const {
  useUniqueIds
} = _formBuilder.hooks;
const Modal = (_ref, props) => {
  let {
    isOpen,
    isAlert = false,
    onHide,
    onSubmit,
    submitButtonText,
    closeButtonText,
    headerProps,
    bodyProps,
    footerProps,
    noClose = false
  } = _ref;
  const {
    t
  } = (0, _reactI18next.useTranslation)();
  const uniqueId = useUniqueIds('modal');
  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, props, {
    show: isOpen,
    size: "lg"
  }, headerProps.title && {
    'aria-labelledby': uniqueId.fieldId
  }, {
    centered: true,
    onEscapeKeyDown: noClose ? undefined : onHide,
    className: _ModalModule.default.modalOuter,
    backdrop: "static",
    role: isAlert ? '   ' : 'dialog'
  }), /*#__PURE__*/_react.default.createElement("div", null, headerProps.title && /*#__PURE__*/_react.default.createElement(_Modal.default.Header, {
    className: getClassNames([headerProps.className, noClose ? '' : 'd-flex ', 'p-relative w-100'])
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _ModalModule.default.headerInnerWrap
  }, /*#__PURE__*/_react.default.createElement("h2", {
    id: uniqueId.fieldId,
    className: "w-100"
  }, headerProps.title), !noClose && /*#__PURE__*/_react.default.createElement(_Button.default, {
    ariaLabel: t('bsrModal.closeButton'),
    onClick: onHide,
    color: "white",
    rounded: true
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    color: "white",
    className: _ModalModule.default.closeButtonIcon,
    icon: "x"
  }))))), /*#__PURE__*/_react.default.createElement(_Modal.default.Body, {
    className: getClassNames([bodyProps.className])
  }, bodyProps.children), footerProps && /*#__PURE__*/_react.default.createElement(_Modal.default.Footer, {
    className: getClassNames([footerProps.className])
  }, footerProps.children ? /*#__PURE__*/_react.default.createElement("div", {
    className: "row justify-content-center w-100"
  }, footerProps.children) : /*#__PURE__*/_react.default.createElement("div", {
    className: "row justify-content-center w-100"
  }, closeButtonText && /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "col-4 m-1",
    color: "tuerkis-20",
    onClick: onHide,
    ariaLabel: t(closeButtonText)
  }, t(closeButtonText)), submitButtonText && /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "col-4 m-1",
    color: "blau",
    onClick: onSubmit || onHide,
    ariaLabel: t(submitButtonText)
  }, t(submitButtonText)))));
};
Modal.propTypes = {
  noClose: _propTypes.default.bool,
  closeButtonText: _propTypes.default.string,
  submitButtonText: _propTypes.default.string,
  headerProps: _propTypes.default.shape({
    title: _propTypes.default.string.isRequired,
    children: _propTypes.default.node,
    className: _propTypes.default.string
  }),
  bodyProps: _propTypes.default.shape({
    children: _propTypes.default.node,
    className: _propTypes.default.string
  }),
  footerProps: _propTypes.default.shape({
    children: _propTypes.default.node,
    className: _propTypes.default.string
  }),
  isAlert: _propTypes.default.bool,
  isOpen: _propTypes.default.bool,
  onHide: _propTypes.default.func,
  onSubmit: _propTypes.default.func
};
var _default = exports.default = Modal;