@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
218 lines (217 loc) • 10.8 kB
JavaScript
import { Flex, Box, Text } from 'rebass';
import * as React from 'react';
import { sentenceCase } from 'sentence-case';
import SimpleButton from '../../../components/SimpleButton';
import Input from '../../../components/Input';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { CheckBox } from '../../../components/CheckBox';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
import { Select } from '../../../components/Select';
const TONE_OPTIONS = [
{
label: 'Tone: Use Alert Tone',
value: 'text',
},
...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
return {
label: renderTone({ label: StringExtensions.CapitaliseFirstLetter(tone), value: tone }),
value: tone,
};
}),
];
function renderTone(option) {
return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
React.createElement(SimpleButton, { mr: 2, style: {
width: 10,
height: 10,
lineHeight: 0,
borderRadius: '100%',
background: 'currentColor',
}, tone: option.value, variant: "text" }),
option.label));
}
export const AlertButtonsEditor = (props) => {
const { api, adaptableAlert } = props;
const onChange = (newButtons) => {
props.onChange(newButtons);
};
const alertDefinition = adaptableAlert.alertDefinition;
// const rowAddedAlert =
// api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
// except row change
const hasHighlightCell = props.alertType !== 'RowChange';
// all, except row removed
const hasHighlightRow = !isRowRemovedAlert;
// except row removed
const hasJumpToCell = props.alertType !== 'RowChange';
// all
const hasJumpToRow = !isRowRemovedAlert;
// all
const hasSuspend = true;
// only data change
const hasUndo = props.alertType === 'DataChange';
const AlertButtons = cloneObject(props.AlertButtons || []) || [];
const buttonCommands = [];
if (hasHighlightRow) {
buttonCommands.push('highlight-row');
}
if (hasJumpToRow) {
buttonCommands.push('jump-to-row');
}
if (hasHighlightCell) {
buttonCommands.push('highlight-cell');
}
if (hasJumpToCell) {
buttonCommands.push('jump-to-cell');
}
if (hasUndo) {
buttonCommands.push('undo');
}
if (hasSuspend) {
buttonCommands.push('suspend');
}
return (React.createElement(React.Fragment, null,
React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked"),
React.createElement(SimpleButton, { icon: "plus", onClick: () => {
onChange([
...(AlertButtons || []),
{
Label: 'OK',
ButtonStyle: {
variant: 'raised',
},
},
]);
} }, "Add")),
AlertButtons.map((button, index) => {
let buttonStyle = button.ButtonStyle;
let buttonLabel = button.Label;
let btnCommands = [];
if (button.Command && typeof button.Command === 'string') {
btnCommands = [button.Command];
}
else if (button.Command && Array.isArray(button.Command)) {
btnCommands = button.Command;
}
// filter out the adaptable standard commands
const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
const setVariant = (variant) => {
onChange(AlertButtons.map((btn, i) => {
if (i === index) {
const buttonStyle = { ...btn.ButtonStyle };
buttonStyle.variant = variant;
return {
...btn,
ButtonStyle: buttonStyle,
};
}
return btn;
}));
};
const setTone = (tone) => {
onChange(AlertButtons.map((btn, i) => {
if (i === index) {
const buttonStyle = { ...btn.ButtonStyle };
if (tone == null) {
delete buttonStyle.tone;
}
else {
buttonStyle.tone = tone;
}
return {
...btn,
ButtonStyle: buttonStyle,
};
}
return btn;
}));
};
const handleCommandChange = (checked, commandName) => {
let commands = btnCommands;
if (!checked) {
// remove current Command
commands = commands.filter((a) => a !== commandName);
}
else {
commands = [...commands, commandName];
}
onChange(AlertButtons.map((btn, i) => {
if (i === index) {
return {
...btn,
Command: commands.length ? commands : undefined,
};
}
return btn;
}));
};
let iconSelector = null;
if (!button.icon || (button.icon && 'name' in button.icon)) {
iconSelector = (React.createElement(AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
onChange(AlertButtons.map((btn) => {
if (btn === button) {
return {
...btn,
icon: {
name: iconName,
},
};
}
return btn;
}));
} }));
}
return (React.createElement(Box, { key: index, marginLeft: 3, style: {
borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
} },
React.createElement(FormLayout, { marginBottom: 2, paddingTop: 2 },
React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
React.createElement(Flex, { flexDirection: "row" },
React.createElement(Input, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
onChange(AlertButtons.map((btn, i) => {
if (i === index) {
return { ...btn, Label: e.target.value };
}
return btn;
}));
} }),
React.createElement(Box, { mr: 2 },
React.createElement(Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
return {
label: StringExtensions.CapitaliseFirstLetter(variant),
value: variant,
};
}), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
setVariant(value);
} })),
React.createElement(Select, { options: TONE_OPTIONS, onChange: (value) => {
if (value === 'text') {
setTone(null);
return;
}
setTone(value);
}, value: buttonStyle?.tone ?? 'text' }),
React.createElement(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
onChange(AlertButtons.filter((btn) => btn !== button));
} }))),
React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Actions") },
buttonCommands.map((commandName) => {
return (React.createElement(CheckBox, { key: commandName, marginRight: 3, onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
(Array.isArray(button.Command) && button.Command.includes(commandName)) },
React.createElement(Text, { fontSize: 2 }, sentenceCase(commandName))));
}),
btnUserFunctions.length ? (React.createElement(CheckBox, { checked: true, disabled: true },
React.createElement(Text, { fontSize: 2 },
"User function",
btnUserFunctions.length > 1 ? 's' : '',
":",
' ',
btnUserFunctions.join(', ')))) : null),
iconSelector && (React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Icon") },
React.createElement(Box, null, iconSelector))))));
})));
};