UNPKG

@adaptabletools/adaptable

Version:

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

66 lines (65 loc) 3.59 kB
import * as React from 'react'; import { Box } from 'rebass'; import { Tabs } from '../../../../components/Tabs'; import FormLayout, { FormRow } from '../../../../components/FormLayout'; import Input from '../../../../components/Input'; import { CheckBox } from '../../../../components/CheckBox'; import { Select } from '../../../../components/Select'; const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error']; export const ScheduleSettingsReminder = (props) => { const messageTypes = MESSAGE_TYPES.map((messageType) => ({ label: messageType, value: messageType, onClick: () => { props.onChange({ ...props.reminderSchedule, MessageType: messageType, }); }, })); const handleHeaderChange = (event) => { props.onChange({ ...props.reminderSchedule, Header: event.target?.value, }); }; const handleMessageChange = (event) => { props.onChange({ ...props.reminderSchedule, Message: event.target?.value, }); }; const handleDisplayNotificationChange = (checked) => { props.onChange({ ...props.reminderSchedule, DisplayNotification: checked, }); }; const handleDisplaySystemStatusChange = (checked) => { props.onChange({ ...props.reminderSchedule, DisplaySystemStatusMessage: checked, }); }; return (React.createElement(Box, { "data-name": "schedule-settings-remainder" }, React.createElement(Tabs, { autoFocus: false }, React.createElement(Tabs.Tab, null, "Reminder Schedule Settings"), React.createElement(Tabs.Content, null, React.createElement(FormLayout, null, React.createElement(FormRow, { label: "Header" }, React.createElement(Input, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })), React.createElement(FormRow, { label: "Message" }, React.createElement(Input, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })), React.createElement(FormRow, { label: "Type" }, React.createElement(Box, { maxWidth: 300 }, React.createElement(Select, { "data-name": "message-type", placeholder: "Select Option", options: messageTypes, value: props.reminderSchedule?.MessageType, onChange: (value) => { props.onChange({ ...props.reminderSchedule, MessageType: value, }); } }))), React.createElement(FormRow, { label: "" }, React.createElement(CheckBox, { "data-name": "display-notification", checked: props.reminderSchedule?.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as a Notification")), React.createElement(FormRow, { label: "" }, React.createElement(CheckBox, { "data-name": "display-system-status", checked: props.reminderSchedule?.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message"))))))); };