@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
71 lines (70 loc) • 4.21 kB
JavaScript
import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import Radio, { RadioGroup } from '../../../components/Radio';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Text } from 'rebass';
import { CodeBlock } from '../../../components/CodeBlock';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
import { AlertMessageDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
import Textarea from '../../../components/Textarea';
import HelpBlock from '../../../components/HelpBlock';
export const renderAlertMessageSummary = () => {
const { data } = useOnePageAdaptableWizardContext();
return (React.createElement(Text, { fontSize: 2 },
"Message Type ",
React.createElement(CodeBlock, null, data.MessageType)));
};
export const AlertMessageWizardSection = (props) => {
const { data, api } = 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, { "data-name": "message-type" },
React.createElement(Tabs.Tab, null, "Message Type"),
React.createElement(Tabs.Content, null,
React.createElement(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
props.onChange({
...data,
MessageType,
});
} },
React.createElement(Radio, { marginLeft: 1, value: "Info" }, "Info"),
React.createElement(Radio, { marginLeft: 4, value: "Success" }, "Success"),
React.createElement(Radio, { marginLeft: 4, value: "Warning" }, "Warning"),
React.createElement(Radio, { marginLeft: 4, value: "Error" }, "Error")))),
React.createElement(Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
React.createElement(Tabs.Tab, null, "Message Text"),
React.createElement(Tabs.Content, null,
React.createElement(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, null,
React.createElement(FormRow, { label: "Header" },
React.createElement(Textarea, { 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(FormRow, { label: "Message" },
React.createElement(Textarea, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
fontSize: 'var(--ab-font-size-3)',
padding: 0,
} },
React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(AlertMessageDocsLink, '_blank') }),
"See how to create dynamic Alert Messages using placeholders"))))));
};