@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
126 lines (125 loc) • 5.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dialog = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
const captureTabNavigation_1 = tslib_1.__importDefault(require("../utils/captureTabNavigation"));
const rebass_1 = require("rebass");
const Modal_1 = require("../Modal");
const useIsOpen_1 = tslib_1.__importDefault(require("./useIsOpen"));
const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"));
const icons_1 = require("../icons");
const WindowModal_1 = require("../WindowModal");
const baseClassName = 'ab-Dialog';
exports.Dialog = React.forwardRef((props, dialogRef) => {
let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, ...boxProps } = props;
modal = props.modal === undefined ? true : props.modal;
fixed = props.fixed === undefined ? true : props.fixed;
const [isOpen, setIsOpen] = (0, useIsOpen_1.default)(props);
const boxRef = (0, react_1.useRef)(null);
(0, useAutoFocus_1.default)({
isOpen,
autoFocus: props.autoFocus,
previous: ({ autoFocus }) => autoFocus && isOpen,
shouldFocus: ({ autoFocus }) => autoFocus && isOpen,
}, boxRef);
const showCloseButton = props.showCloseButton === undefined ? true : props.showCloseButton;
const onKeyDown = (e) => {
if (props.onKeyDown) {
props.onKeyDown(e);
}
(0, captureTabNavigation_1.default)(boxRef.current, e);
if (e.key === 'Escape') {
if (e.nativeEvent.anotherModalClosed) {
return;
}
e.nativeEvent.anotherModalClosed = true;
const activeElement = document.activeElement;
const ignoreTags = {
input: 1,
a: 1,
button: 1,
};
if (activeElement && !!ignoreTags[activeElement.tagName]) {
return;
}
setIsOpen(false);
}
(0, captureTabNavigation_1.default)(boxRef.current, event);
};
(0, react_1.useEffect)(() => {
if (dismissOnClickOutside && isOpen) {
const dismissDialog = (e) => {
requestAnimationFrame(() => {
if (e.preventDialogDismiss) {
return;
}
setIsOpen(false);
});
};
document.documentElement.addEventListener('click', dismissDialog, {
passive: true,
capture: false,
});
return () => {
document.documentElement.removeEventListener('click', dismissDialog);
};
}
}, [isOpen, dismissOnClickOutside]);
const bringToFront = React.useCallback(() => {
if (boxRef.current &&
boxRef.current.focus &&
(!document.activeElement || !(0, contains_1.default)(boxRef.current, document.activeElement))) {
boxRef.current.focus();
}
}, [boxRef]);
React.useImperativeHandle(dialogRef, () => ({
bringToFront,
}));
(0, react_1.useEffect)(() => {
let listener;
if (focusOnBrowserVisible) {
listener = () => {
if (document.visibilityState === 'visible' && autoFocus && focusOnBrowserVisible) {
bringToFront();
}
};
document.addEventListener('visibilitychange', listener);
}
return () => {
if (listener) {
document.removeEventListener('visibilitychange', listener);
}
};
}, [autoFocus, focusOnBrowserVisible]);
if (!isOpen) {
return null;
}
const closeButton = showCloseButton ? (React.createElement(rebass_1.Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
React.createElement(icons_1.Icon, { size: 24, name: "close" }))) : null;
const setPreventDismissFlag = (e) => {
if (dismissOnClickOutside) {
e.nativeEvent.preventDialogDismiss = true;
}
};
const box = (React.createElement(rebass_1.Box, { ...boxProps, onClick: (e) => {
setPreventDismissFlag(e);
if (boxProps && boxProps.onClick) {
boxProps.onClick(e);
}
}, onKeyDown: onKeyDown, className: (0, join_1.default)(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
children,
closeButton));
const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: `${baseClassName}-fixed-wrapper` }, box)) : (box);
if (windowModal) {
return React.createElement(WindowModal_1.WindowModal, { ...windowModalProps }, content);
}
if (modal) {
return (React.createElement(Modal_1.Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront }, box));
}
return content;
});
exports.default = exports.Dialog;