@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
78 lines (77 loc) • 4.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptablePopupAlert = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PanelWithImage_1 = require("../Panels/PanelWithImage");
const UIHelper_1 = require("../../UIHelper");
const rebass_1 = require("rebass");
const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
const react_1 = require("react");
const AdaptableContext_1 = require("../../AdaptableContext");
const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
const AdaptablePopupAlert = (props) => {
const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
const msg = props.adaptableAlert.message ?? '';
const headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
let header = messageType;
const { api, adaptableOptions } = (0, AdaptableContext_1.useAdaptable)();
if (props.adaptableAlert.header) {
header = `${header}: ${props.adaptableAlert.header}`;
}
let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(messageType);
// we still need the defauld
const defaultForm = React.useMemo(() => {
return api.alertApi.internalApi.getDefaultAlertNotificationForm();
}, []);
const [formData, setFormData] = (0, react_1.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(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
' ',
React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
};
const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
React.createElement("div", null,
React.createElement(rebass_1.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(rebass_1.Flex, { flexDirection: "row", key: index },
React.createElement(rebass_1.Text, { key: index, margin: 2 },
item,
React.createElement("br", null))));
})
: msg),
React.createElement(rebass_1.Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.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_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
minHeight: 'auto',
minWidth: '20vw',
maxWidth: '70vw',
} }, content));
};
exports.AdaptablePopupAlert = AdaptablePopupAlert;