@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
66 lines (65 loc) • 3.55 kB
JavaScript
import * as React from 'react';
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';
const WindowDialog = (props) => {
const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
const adaptable = useAdaptable();
const dispatch = useDispatch();
const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
let popupSettings = useSelector((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
const handleWindowSettings = (settings) => {
dispatch(SettingsPanelSet(settingsPanelOptionsKey, settings));
};
if (!popupSettings) {
const size = isActionModule
? getActionPanelSize()
: settingsPanelOptions.size ?? getSettingsPanelSize();
popupSettings = {
size: size,
position: settingsPanelOptions.position ?? getMiddlePosition(size),
};
}
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 (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: { ...props.style, height: '100%' }, padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }));
};
const PopupDialog = (props) => {
const { style, className, onHide, children, ...dialogProps } = props;
return (React.createElement(Dialog, { fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
};
export const AdaptablePopupDialog = (props) => {
const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
if (modalContainer) {
let ref = null;
if (typeof modalContainer === 'string') {
ref = globalThis.document.querySelector(modalContainer);
}
else {
ref = modalContainer;
}
return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
}
if (isWindowModal) {
const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
}
else {
const modalStyle = {
...style,
...(isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }),
};
return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
}
};