@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
85 lines (84 loc) • 5.15 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import Input from '../../../components/Input';
import { shortcutOperationList } from '../shortcutOperations';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tabs } from '../../../components/Tabs';
import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import HelpBlock from '../../../components/HelpBlock';
import { Select } from '../../../components/Select';
export const isSettingsValid = (data) => {
const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
const shortcutOperation = data.ShortcutOperation && typeof data.ShortcutOperation === 'string'
? ''
: 'Shortcut operation is not selected';
const result = [shortcutKey, shortcutValue, shortcutOperation].filter(Boolean);
return result.length ? result.join(', ') : true;
};
export const ShortcutSettingsSummary = () => {
const { data: shortcut } = useOnePageAdaptableWizardContext();
return (React.createElement(React.Fragment, null,
React.createElement(SummaryText, null,
"Shortcut Key ",
React.createElement(Tag, null, shortcut.ShortcutKey || 'Not selected')),
React.createElement(SummaryText, null,
"Value ",
React.createElement(Tag, null, shortcut.ShortcutValue ?? 'Not specified')),
React.createElement(SummaryText, null,
"Operation ",
React.createElement(Tag, null, shortcut.ShortcutOperation ?? 'Not Specified'))));
};
export const ShortcutSettingsWizard = (props) => {
const { data: shortcut } = useOnePageAdaptableWizardContext();
const handleKeyChange = React.useCallback((ShortcutKey) => {
props.onChange({
...shortcut,
ShortcutKey,
});
}, [shortcut]);
const handleOperationChange = React.useCallback((ShortcutOperation) => props.onChange({
...shortcut,
ShortcutOperation,
}), [shortcut]);
const handleOperationValueChange = React.useCallback((event) => {
props.onChange({
...shortcut,
ShortcutValue: event.target.value ? parseFloat(event.target.value) : event.target.value,
});
}, [shortcut]);
const optionActions = shortcutOperationList.map((operation) => ({
value: operation,
label: operation,
// onClick: () => handleOperationChange(operation),
}));
const optionKeys = props.availableKeys.map((key) => ({
value: key,
label: key,
}));
return (React.createElement(Box, { "data-name": "shortcut-column-settings" },
React.createElement(Tabs, { autoFocus: false },
React.createElement(Tabs.Tab, null, "Shortcut Settings"),
React.createElement(Tabs.Content, null,
React.createElement(FormLayout, null,
React.createElement(FormRow, null,
' ',
React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the Shortcut")),
React.createElement(FormRow, { label: "Key" },
React.createElement(Flex, { flexDirection: "row" },
React.createElement(Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
React.createElement(FormRow, null,
' ',
React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
React.createElement(FormRow, { label: "Operation" },
React.createElement(Flex, { flexDirection: "row" },
React.createElement(Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
React.createElement(FormRow, null,
' ',
React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
React.createElement(FormRow, { label: "Value" },
React.createElement(Flex, { flexDirection: "row" },
React.createElement(Input, { "data-name": "shortcut-value", style: { maxWidth: 100 }, flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
};