@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
55 lines (54 loc) • 4 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React, { useEffect, useMemo, useCallback, } from 'react';
import { useUnmountDelay } from '../../hooks';
import { getStringId } from '../../utils';
import { ButtonGroup } from '../ButtonGroup';
import { FocusTrap } from '../FocusTrap';
import { Icon } from '../Icon';
import { IconButton } from '../IconButton';
import { Overlay } from '../Overlay';
/* eslint-disable jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events */
export var Modal = function (_a) {
var closeOnBackgroundClick = _a.closeOnBackgroundClick, closeOnEscape = _a.closeOnEscape, heading = _a.heading, open = _a.open, onClose = _a.onClose, fullWidth = _a.fullWidth, noUnmount = _a.noUnmount, wrapperClassName = _a.wrapperClassName, _b = _a.closeLabel, closeLabel = _b === void 0 ? 'Close' : _b, children = _a.children, buttonGroup = _a.buttonGroup, className = _a.className, _c = _a.role, role = _c === void 0 ? 'dialog' : _c, _d = _a["aria-modal"], ariaModal = _d === void 0 ? true : _d, props = __rest(_a, ["closeOnBackgroundClick", "closeOnEscape", "heading", "open", "onClose", "fullWidth", "noUnmount", "wrapperClassName", "closeLabel", "children", "buttonGroup", "className", "role", 'aria-modal']);
var mounted = useUnmountDelay(open).mounted;
var headingId = useMemo(function () { return getStringId('modal_heading'); }, []);
var bodyId = useMemo(function () { return getStringId('modal_body'); }, []);
useEffect(function () {
if (open && closeOnEscape && onClose) {
var listener_1 = function (event) {
if (event.key === 'Escape')
onClose(event);
};
window.addEventListener('keydown', listener_1);
return function () { return window.removeEventListener('keydown', listener_1); };
}
return;
}, [closeOnEscape, onClose, open]);
var backgroundIsButton = !!(open && closeOnBackgroundClick && onClose);
var handleBackgroundClick = useCallback(function (event) {
if (!backgroundIsButton)
return;
if (event.currentTarget !== event.target)
return;
onClose === null || onClose === void 0 ? void 0 : onClose(event);
}, [backgroundIsButton, onClose]);
var modalWrapperClass = classnames('ui__base ui__modal__wrapper', {
'ui__modal__wrapper--closed': !open,
'ui__modal__wrapper--fullWidth': fullWidth,
}, wrapperClassName);
var modalClass = classnames('ui__modal', { 'ui__modal--hidden': noUnmount && !mounted }, className);
var bodyClass = classnames('ui__modal__body', {
'ui__modal__body--noButton': !buttonGroup,
});
return (React.createElement(Overlay, null,
React.createElement("div", { role: backgroundIsButton ? 'button' : undefined, className: modalWrapperClass, onClick: handleBackgroundClick }, noUnmount || mounted ? (React.createElement("div", { className: "ui__modal__paddingFix" },
React.createElement(FocusTrap, { focusLastOnUnlock: true, locked: open },
React.createElement("div", __assign({ "aria-labelledby": heading ? headingId : undefined, "aria-describedby": bodyId }, props, { className: modalClass, role: role, "aria-modal": ariaModal }),
React.createElement("div", { className: "ui__modal__top" },
React.createElement("div", { className: "ui__modal__top__heading", id: headingId }, heading),
onClose ? (React.createElement(IconButton, { className: "ui__modal__top__close", onClick: onClose, "aria-label": closeLabel },
React.createElement(Icon, { icon: "Close" }))) : undefined),
React.createElement("div", { className: bodyClass, id: bodyId }, children),
buttonGroup ? React.createElement(ButtonGroup, { className: "ui__modal__buttonGroup" }, buttonGroup) : undefined)))) : undefined)));
};