@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
82 lines (81 loc) • 4.58 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { createPortal } from 'react-dom';
import { useDispatch, useSelector } from 'react-redux';
import Dialog from '../../../../components/Dialog';
import { PopupHideWindow } from '../../../../Redux/ActionsReducers/PopupRedux';
import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
import { useAdaptable } from '../../../AdaptableContext';
import { ExternalRenderer } from '../../ExternalRenderer';
import { PanelWithImage } from '../../Panels/PanelWithImage';
import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
import { WINDOW_SHOW_TRANSPOSED_VIEW, windowFactory } from './windowFactory';
const NoopComponent = () => {
return _jsx(_Fragment, {});
};
export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
const ContainerPortal = ({ container, onContainerRemoved, children }) => {
React.useEffect(() => {
if (!document.contains(container)) {
onContainerRemoved();
return;
}
const observer = new MutationObserver(() => {
if (!document.contains(container)) {
onContainerRemoved();
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
return () => {
observer.disconnect();
};
}, [container, onContainerRemoved]);
return createPortal(children, container);
};
export const WindowPopups = () => {
const [windowModalSettings, setWindowModalSettings] = React.useState({});
const adaptable = useAdaptable();
const dispatch = useDispatch();
const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
return (_jsx(_Fragment, { children: windowItems?.map((windowItem) => {
let Component = windowFactory[windowItem.FactoryId] ?? null;
const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
const handleDismiss = () => {
dispatch(PopupHideWindow(windowItem.Id));
};
const size = windowModalSettings?.[windowItem.Id]?.size ??
windowItem?.PopupProps?.size ??
getWindowPopupSize();
const position = windowModalSettings?.[windowItem.Id]?.position ??
windowItem?.PopupProps?.position ??
getMiddlePosition(size);
let componentNode = null;
if (!Component &&
(windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
componentNode = (_jsx(ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
}
else {
Component = Component ?? NoopComponent;
componentNode = (_jsx(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
}
if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
if (transposedContainer) {
return (_jsx(ContainerPortal, { container: transposedContainer, onContainerRemoved: handleDismiss, children: componentNode }, windowItem.Id));
}
}
return (_jsx(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", 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, children: _jsx(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary", children: componentNode }) }, windowItem.Id));
}) }));
};