@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
77 lines (76 loc) • 4.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertMessageWizardSection = exports.renderAlertMessageSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../components/Tabs");
const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const rebass_1 = require("rebass");
const CodeBlock_1 = require("../../../components/CodeBlock");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const renderAlertMessageSummary = () => {
const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
return (React.createElement(rebass_1.Text, { fontSize: 2 },
"Message Type ",
React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
};
exports.renderAlertMessageSummary = renderAlertMessageSummary;
const AlertMessageWizardSection = (props) => {
const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const messageType = data.MessageType;
const messageText = api.alertApi.internalApi.getAlertDescriptionForDataChange(data);
const messageHeader = data.MessageHeader;
const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
const onMessageTextChange = (e) => {
const { value } = e.target;
props.onChange({
...data,
MessageText: value,
});
};
const onMessageHeaderChange = (e) => {
const { value } = e.target;
props.onChange({
...data,
MessageHeader: value,
});
};
return (React.createElement(React.Fragment, null,
React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
props.onChange({
...data,
MessageType,
});
} },
React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
' ',
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Header" },
React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "(Use Default Header Message)", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader ?? '',
// placeholder="defaults to column name"
onChange: (e) => onMessageHeaderChange(e) })),
React.createElement(FormLayout_1.FormRow, { label: "Message" },
React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
fontSize: 'var(--ab-font-size-3)',
padding: 0,
} },
React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
"See how to create dynamic Alert Messages using placeholders"))))));
};
exports.AlertMessageWizardSection = AlertMessageWizardSection;