@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
113 lines (112 loc) • 6.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAlertNotificationSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../components/Tabs");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const CheckBox_1 = require("../../../components/CheckBox");
const rebass_1 = require("rebass");
const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
const renderAlertNotificationSummary = () => {
const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
if (!data.AlertProperties?.DisplayNotification) {
return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
}
return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
};
exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) => {
const mapButtons = React.useCallback((button) => {
let buttonStyle = button.ButtonStyle;
if (buttonStyle && buttonStyle.tone == null && alertDefinition?.MessageType) {
return {
...button,
ButtonStyle: {
tone: alertDefinition.MessageType.toLowerCase(),
...buttonStyle,
},
};
}
return button;
}, [alertDefinition?.MessageType]);
const alertToPreview = React.useMemo(() => {
const alertForm = alertDefinition.AlertForm || api.alertApi.internalApi.getDefaultAlertNotificationForm();
if (typeof alertForm !== 'string') {
alertForm.Buttons = (alertForm.Buttons ?? []).map(mapButtons);
}
const result = {
alertType: 'generic',
header: api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
message: api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
alertDefinition: {
...alertDefinition,
AlertForm: alertForm,
},
};
return result;
}, [alertDefinition]);
return (React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: {
border: '1px solid var(--ab-color-inputborder)',
...boxProps.style,
} },
React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
};
exports.AlertPreview = AlertPreview;
const AlertNotificationWizardSection = (props) => {
const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const adaptableAlert = {
alertType: 'generic',
header: data.MessageType,
message: '',
alertDefinition: data,
};
if (data.AlertProperties.DisplayNotification && data.AlertForm == undefined) {
data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
}
return (React.createElement(React.Fragment, null,
React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement("div", null,
React.createElement(CheckBox_1.CheckBox, { checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
const newAlertDefinition = {
...data,
AlertProperties: {
...data.AlertProperties,
DisplayNotification,
},
};
if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
delete newAlertDefinition.AlertForm.Buttons;
}
if (DisplayNotification && newAlertDefinition.AlertForm == undefined) {
newAlertDefinition.AlertForm =
api.alertApi.internalApi.getDefaultAlertNotificationForm();
}
// make sure we have at least one button
if (typeof newAlertDefinition.AlertForm === 'object' &&
(!newAlertDefinition.AlertForm?.Buttons ||
newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
newAlertDefinition.AlertForm.Buttons = [
api.alertApi.internalApi.getDefaultButton(),
];
}
props.onChange(newAlertDefinition);
} }, "Display a Notification when Alert is triggered (with action buttons)")),
data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
props.onChange({
...data,
AlertForm: {
...data.AlertForm,
Buttons: buttons,
},
});
} }))) : null)),
data.AlertProperties?.DisplayNotification ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Alert Preview"),
React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
};
exports.AlertNotificationWizardSection = AlertNotificationWizardSection;