@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
52 lines (51 loc) • 5.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Radio, { RadioGroup } from '../../../components/Radio';
import { SummaryText, useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import { AlertType } from '../Utilities/getAlertType';
import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
import { AlertMessageDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
import Textarea from '../../../components/Textarea';
import HelpBlock from '../../../components/HelpBlock';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
export const renderAlertMessageSummary = (alertType, data) => {
if (alertType === AlertType.Scheduled) {
return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }), _jsxs(SummaryText, { children: ["Header: ", _jsx(Tag, { children: data.MessageHeader || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Body: ", _jsx(Tag, { children: data.MessageText || 'Not specified' })] })] }));
}
return (_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }));
};
export const AlertMessageWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const messageType = data.MessageType;
const isScheduled = props.alertType === AlertType.Scheduled;
const messageText = isScheduled
? data.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 (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsx(Box, { "data-name": "message-type", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Message Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how the Alert message is styled" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
props.onChange({
...data,
MessageType,
});
}, children: [_jsx(Radio, { className: "twa:ml-1", value: "Info", children: "Info" }), _jsx(Radio, { className: "twa:ml-4", value: "Success", children: "Success" }), _jsx(Radio, { className: "twa:ml-4", value: "Warning", children: "Warning" }), _jsx(Radio, { className: "twa:ml-4", value: "Error", children: "Error" })] }) })] }) }), _jsx(Box, { "data-name": "message-header", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Header" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
? 'Enter the header shown when this scheduled alert fires'
: 'Optional header text (leave blank to use the default)' })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", rows: 3, placeholder: isScheduled ? 'Enter header (required)' : '(Use Default Header Message)', type: 'text', autoFocus: false, value: messageHeader, onChange: (e) => onMessageHeaderChange(e) }) })] }) }), _jsx(Box, { "data-name": "message-body", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Body" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
? 'Enter the message body shown when this scheduled alert fires'
: 'Alert message body (leave blank to show automated message based on Alert Type)' })] }), _jsxs(Card.Body, { className: "twa:p-1", children: [_jsx(Textarea, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", rows: 3, type: 'text', autoFocus: false, placeholder: isScheduled ? 'Enter message (required)' : undefined, value: messageText, onChange: (e) => onMessageTextChange(e) }), showDocumentationLinks && !isScheduled && (_jsxs(HelpBlock, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(AlertMessageDocsLink, '_blank') }), "See how to create dynamic Alert Messages using placeholders"] }))] })] }) })] }));
};