@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
68 lines (67 loc) • 3.84 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createPortal } from 'react-dom';
import { useDispatch, useSelector } from 'react-redux';
import Dialog from '../../../../components/Dialog';
import { SettingsPanelSet } from '../../../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../../../AdaptableContext';
import { getActionPanelSize, getMiddlePosition, getSettingsPanelSize } from '../Utilities';
import { cn } from '../../../../lib/utils';
const WindowDialog = (props) => {
const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, dataName, ...dialogProps } = props;
const adaptable = useAdaptable();
const dispatch = useDispatch();
const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
const wizardOptions = adaptable.adaptableOptions.wizardOptions;
let popupSettings = useSelector((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
const handleWindowSettings = (settings) => {
dispatch(SettingsPanelSet(settingsPanelOptionsKey, settings));
};
if (!popupSettings) {
const size = isActionModule
? wizardOptions?.size ?? getActionPanelSize()
: settingsPanelOptions.size ?? getSettingsPanelSize();
const position = isActionModule
? wizardOptions?.position ?? getMiddlePosition(size)
: settingsPanelOptions.position ?? getMiddlePosition(size);
popupSettings = {
size,
position,
};
}
const windowModalProps = {
handleSelector: isActionModule
? `.${baseClassName} .ab-Panel__header`
: '.ab-Adaptable-Popup__TopBar',
minHeight: 460,
minWidth: 400,
size: popupSettings.size,
position: popupSettings.position,
onChange: handleWindowSettings,
};
return (_jsx(Dialog, { "data-name": dataName, windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: cn('twa:p-0 twa:h-full', className) }));
};
const PopupDialog = (props) => {
const { style, className, onHide, children, ...dialogProps } = props;
return (_jsx(Dialog, { fixed: false, style: props.style, className: cn('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
};
export const AdaptablePopupDialog = (props) => {
const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
if (modalContainer) {
return createPortal(_jsx(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className, children: children }), modalContainer);
}
if (isWindowModal) {
const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
return (_jsx(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className, children: children }));
}
else {
if (isActionModule) {
return (_jsx(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: cn('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
}
const modalStyle = {
...style,
maxWidth: 1200,
maxHeight: 1000,
};
return (_jsx(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className, children: children }));
}
};