@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
95 lines (94 loc) • 5.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_dom_1 = require("react-dom");
const react_redux_1 = require("react-redux");
const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ExternalRenderer_1 = require("../../ExternalRenderer");
const PanelWithImage_1 = require("../../Panels/PanelWithImage");
const Utilities_1 = require("../Utilities");
const windowFactory_1 = require("./windowFactory");
const NoopComponent = () => {
return React.createElement(React.Fragment, null);
};
exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
/**
* Portals children into a target container element.
* Monitors the container with a MutationObserver — if the container is removed
* from the DOM, `onContainerRemoved` is called so callers can clean up React/Redux state.
*/
const ContainerPortal = ({ container, onContainerRemoved, children }) => {
React.useEffect(() => {
// If the container is already detached, clean up immediately
if (!document.contains(container)) {
onContainerRemoved();
return;
}
const observer = new MutationObserver(() => {
if (!document.contains(container)) {
onContainerRemoved();
observer.disconnect();
}
});
// Observe the entire document body for subtree removals
observer.observe(document.body, { childList: true, subtree: true });
return () => {
observer.disconnect();
};
}, [container, onContainerRemoved]);
return (0, react_dom_1.createPortal)(children, container);
};
const WindowPopups = () => {
const [windowModalSettings, setWindowModalSettings] = React.useState({});
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const dispatch = (0, react_redux_1.useDispatch)();
const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
return (React.createElement(React.Fragment, null, windowItems?.map((windowItem) => {
let Component = windowFactory_1.windowFactory[windowItem.FactoryId] ?? null;
const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
const handleDismiss = () => {
dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));
};
const size = windowModalSettings?.[windowItem.Id]?.size ??
windowItem?.PopupProps?.size ??
(0, Utilities_1.getWindowPopupSize)();
const position = windowModalSettings?.[windowItem.Id]?.position ??
windowItem?.PopupProps?.position ??
(0, Utilities_1.getMiddlePosition)(size);
let componentNode = null;
if (!Component &&
(windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
}
else {
Component = Component ?? NoopComponent;
componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
}
// Transposed View: portal into custom container if configured
if (windowItem.FactoryId === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
const transposedContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
if (transposedContainer) {
return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
}
}
return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
...windowModalProps,
onChange: (settings) => {
setWindowModalSettings((settingsMap) => ({
...settingsMap,
[windowItem.Id]: settings,
}));
},
handleSelector: '.ab-Window-Modal .ab-Panel__header',
size: size,
position: position,
}, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
React.createElement(PanelWithImage_1.PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
})));
};
exports.WindowPopups = WindowPopups;