terriajs
Version:
Geospatial data visualization platform.
58 lines • 2.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import Styles from "./explorer-window.scss";
const SLIDE_DURATION = 300;
const ModalPopup = (props) => {
const { t } = useTranslation();
const [inTransition, setInTransition] = useState(false);
const animationTimeout = useRef(null);
function slideIn() {
props.onStartAnimatingIn?.();
setInTransition(true);
animationTimeout.current = setTimeout(() => {
setInTransition(false);
setTimeout(() => {
props.onDoneAnimatingIn?.();
}, SLIDE_DURATION);
});
}
function slideOut() {
setInTransition(true);
animationTimeout.current = setTimeout(() => {
setInTransition(false);
}, SLIDE_DURATION);
}
useEffect(() => {
// Clear previous timeout
if (animationTimeout.current !== null) {
clearTimeout(animationTimeout.current);
animationTimeout.current = null;
}
if (props.isVisible) {
slideIn();
}
else {
slideOut();
}
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [props.isVisible]);
useEffect(() => {
const escKeyListener = (e) => {
// Only explicitly check share modal state, move to levels/"layers of modals" logic if we need to go any deeper
if (e.key === "Escape" && !props.viewState.shareModalIsVisible) {
props.onClose();
}
};
window.addEventListener("keydown", escKeyListener, true);
});
// Render explorer panel when explorer panel should be visible
// or when sliding out (animation)
const renderUi = props.isVisible || inTransition;
return renderUi ? (_jsxs("div", { className: classNames(Styles.modalWrapper, props.isTopElement ? "top-element" : ""), id: "explorer-panel-wrapper", "aria-hidden": !props.isVisible, children: [_jsx("div", { onClick: props.onClose, id: "modal-overlay", className: Styles.modalOverlay, tabIndex: -1 }), _jsxs("div", { id: "explorer-panel", className: classNames(Styles.explorerPanel, {
[Styles.isMounted]: props.isVisible && !inTransition
}), "aria-labelledby": "modalTitle", "aria-describedby": "modalDescription", role: "dialog", children: [_jsx("button", { type: "button", onClick: props.onClose, className: Styles.btnCloseModal, title: t("addData.closeDataPanel"), "data-target": "close-modal", children: t("addData.done") }), props.children] })] })) : null;
};
export default ModalPopup;
//# sourceMappingURL=ModalPopup.js.map