@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
73 lines (72 loc) • 4.06 kB
JavaScript
import * as React from 'react';
import { PanelWithImage } from '../Panels/PanelWithImage';
import { UIHelper } from '../../UIHelper';
import { Flex, Text, Box } from 'rebass';
import Dialog from '../../../components/Dialog';
import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
import { useState } from 'react';
import { useAdaptable } from '../../AdaptableContext';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
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);
// we still need the defauld
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 adaptableForm = React.useMemo(() => {
if (api.isDestroyed()) {
return null;
}
return api.alertApi.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
}, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
const renderApplicationIcon = (icon) => {
if (!icon) {
return null;
}
return (React.createElement(Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
' ',
React.createElement(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
};
const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
React.createElement("div", null,
React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
adaptableOptions.userInterfaceOptions.applicationIcon),
typeof msg === 'string'
? msg.split('\n').map(function (item, index) {
return (React.createElement(Flex, { flexDirection: "row", key: index },
React.createElement(Text, { key: index, margin: 2 },
item,
React.createElement("br", null))));
})
: msg),
React.createElement(Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
props.onClose();
// we want to give the current popup time to close
// and we reopen with a delay in case this button action causes another popup
setTimeout(() => {
button.onClick?.(button, context);
}, 20);
} })) : null))));
return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
minHeight: 'auto',
minWidth: '20vw',
maxWidth: '70vw',
} }, content));
};