@pinuts/bsr-uikit-relaunch
Version:
BSR UI-KIT Relaunch
144 lines (141 loc) • 6.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactI18next = require("react-i18next");
var _uuid = require("uuid");
var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
var _Close = _interopRequireDefault(require("../../icons/Close.jsx"));
var _isWindowAvailable = require("../../utils/isWindowAvailable.js");
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; }
const Modal = _ref => {
let {
modalClassNames = {
modal: '',
modalDialog: '',
modalContent: ''
},
modalLabel,
showModal,
toggleModal,
children
} = _ref;
const closeButtonRef = (0, _react.useRef)(null); // Create a ref for the close button
const modalRef = (0, _react.useRef)(null);
const {
t
} = (0, _reactI18next.useTranslation)();
const currentId = (0, _uuid.v4)();
const modalLabelId = `modal-label-${currentId}`;
const modalDescriptionId = `modal-description-${currentId}`;
const outerRef = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
const modalElement = modalRef.current;
if (showModal && modalElement) {
//add any focusable HTML element you want to include to this string
const focusableElements = modalElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
// Set focus on the close button
(closeButtonRef.current || null)?.focus();
const handleTabKeyPress = event => {
if (event.key === 'Tab' && (0, _isWindowAvailable.isWindowAvailable)()) {
if (event.shiftKey && document.activeElement === firstElement) {
event.preventDefault();
lastElement.focus();
} else if (!event.shiftKey && document.activeElement === lastElement) {
event.preventDefault();
firstElement.focus();
}
}
};
const handleEscapeKeyPress = event => {
if (event.key === 'Escape') {
toggleModal();
}
};
if ((0, _isWindowAvailable.isWindowAvailable)()) {
modalElement.addEventListener('keydown', handleTabKeyPress);
modalElement.addEventListener('keydown', handleEscapeKeyPress);
document.body.classList.add(_ModalModule.default.modalOpen || '');
}
return () => {
if ((0, _isWindowAvailable.isWindowAvailable)()) {
modalElement.removeEventListener('keydown', handleTabKeyPress);
modalElement.removeEventListener('keydown', handleEscapeKeyPress);
document.body.classList.remove(_ModalModule.default.modalOpen || '');
}
};
}
(0, _isWindowAvailable.isWindowAvailable)() && document.body.classList.remove(_ModalModule.default.modalOpen || '');
}, [showModal, toggleModal]);
const classNames = {
modal: ['modal', _ModalModule.default.modal, modalClassNames.modal].join(' '),
modalDialog: ['modal-dialog', 'container', _ModalModule.default.modalDialog, modalClassNames.modalDialog].join(' '),
modalContent: ['modal-content', _ModalModule.default.modalContent, modalClassNames.modalContent].join(' '),
modalHeader: ['modal-header', 'col-lg-8', 'col-10', 'align-self-center', _ModalModule.default.modalHeader, !modalLabel ? _ModalModule.default.noHeadline : ''].join(' '),
modalTitle: ['modal-title'].join(''),
modalBody: ['modal-body', 'col-10', 'align-self-center', _ModalModule.default.modalBody].join(' '),
closeButton: ['btn', 'close', _ModalModule.default.closeButton].join(' ')
};
return /*#__PURE__*/_react.default.createElement("div", {
ref: outerRef,
className: `${showModal ? 'd-flex' : ''} ${classNames.modal}`,
onClick: e => {
e.stopPropagation();
toggleModal();
},
"aria-labelledby": modalLabel ? modalLabelId : undefined,
"aria-describedby": modalDescriptionId,
onKeyDown: event => {
if (event.key === 'Escape' && showModal) {
toggleModal();
}
},
role: "button",
tabIndex: -1
}, /*#__PURE__*/_react.default.createElement("div", {
className: classNames.modalDialog,
ref: modalRef,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": modalLabel ? modalLabelId : undefined
}, /*#__PURE__*/_react.default.createElement("div", {
className: classNames.modalContent,
role: "document"
}, /*#__PURE__*/_react.default.createElement("div", {
className: classNames.modalHeader
}, modalLabel && /*#__PURE__*/_react.default.createElement("h2", {
id: modalLabelId,
className: classNames.modalTitle
}, modalLabel), /*#__PURE__*/_react.default.createElement("button", {
ref: closeButtonRef,
type: "button",
className: classNames.closeButton,
"data-dismiss": "modal",
"aria-label": t('aria.atoms.modal.close'),
onClick: toggleModal
}, /*#__PURE__*/_react.default.createElement("span", {
"aria-hidden": "true"
}, t('general.close')), /*#__PURE__*/_react.default.createElement(_Close.default, {
width: 20,
height: 20
}))), /*#__PURE__*/_react.default.createElement("div", {
id: modalDescriptionId,
className: classNames.modalBody
}, children))));
};
//add prop types
Modal.propTypes = {
modalClassNames: _propTypes.default.object,
modalLabel: _propTypes.default.string,
showModal: _propTypes.default.bool.isRequired,
toggleModal: _propTypes.default.func.isRequired,
children: _propTypes.default.node.isRequired
};
var _default = exports.default = Modal;