@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
59 lines (58 loc) • 3.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { PanelWithImage } from '../Panels/PanelWithImage';
import { UIHelper } from '../../UIHelper';
import Dialog from '../../../components/Dialog';
import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
import { useState } from 'react';
import { useAdaptable } from '../../AdaptableContext';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { Box, Flex } from '../../../components/Flex';
export const AdaptablePopupAlert = (props) => {
const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
const msg = props.adaptableAlert.message ?? '';
const headerColor = UIHelper.getColorByMessageType(messageType);
let header = messageType;
const { api, adaptableOptions } = useAdaptable();
if (props.adaptableAlert.header) {
header = `${header}: ${props.adaptableAlert.header}`;
}
let glyph = UIHelper.getGlyphByMessageType(messageType);
const defaultForm = React.useMemo(() => {
return api.alertApi.internalApi.getDefaultAlertNotificationForm();
}, []);
const [formData, setFormData] = useState({});
const context = React.useMemo(() => {
return {
alert: props.adaptableAlert,
...api.internalApi.buildBaseContext(),
formData: formData,
};
}, [JSON.stringify(formData), props.adaptableAlert]);
const alertForm = React.useMemo(() => resolveAlertFormForDefinition(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
const adaptableForm = React.useMemo(() => {
if (api.isDestroyed()) {
return null;
}
return api.alertApi.internalApi.getAdaptableFormFromAlertForm(alertForm, context, messageType);
}, [alertForm, messageType, context]);
const renderApplicationIcon = (icon) => {
if (!icon) {
return null;
}
return (_jsx(Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end", children: _jsx(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' }) }));
};
const content = (_jsx(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' }, children: _jsxs("div", { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", children: [renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
adaptableOptions.userInterfaceOptions.applicationIcon), typeof msg === 'string'
? msg.split('\n').map(function (item, index) {
return (_jsx(Flex, { flexDirection: "row", children: _jsxs(Box, { className: "twa:m-2", children: [item, _jsx("br", {})] }, index) }, index));
})
: msg] }), _jsx(Box, { className: "twa:m-2", children: adaptableForm ? (_jsx(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
props.onClose();
setTimeout(() => {
button.onClick?.(button, context);
}, 20);
} })) : null })] }) }));
return props.headless ? (content) : (_jsx(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]", children: content }));
};