@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
92 lines (91 loc) • 6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShortcutSettingsWizard = exports.ShortcutSettingsSummary = exports.isSettingsValid = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const shortcutOperations_1 = require("../shortcutOperations");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const Tabs_1 = require("../../../components/Tabs");
const OnePageAdaptableWizard_2 = require("../../../View/Wizard/OnePageAdaptableWizard");
const Tag_1 = require("../../../components/Tag");
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Select_1 = require("../../../components/Select");
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;
};
exports.isSettingsValid = isSettingsValid;
const ShortcutSettingsSummary = () => {
const { data: shortcut } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
return (React.createElement(React.Fragment, null,
React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
"Shortcut Key ",
React.createElement(Tag_1.Tag, null, shortcut.ShortcutKey || 'Not selected')),
React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
"Value ",
React.createElement(Tag_1.Tag, null, shortcut.ShortcutValue ?? 'Not specified')),
React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
"Operation ",
React.createElement(Tag_1.Tag, null, shortcut.ShortcutOperation ?? 'Not Specified'))));
};
exports.ShortcutSettingsSummary = ShortcutSettingsSummary;
const ShortcutSettingsWizard = (props) => {
const { data: shortcut } = (0, OnePageAdaptableWizard_1.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 = shortcutOperations_1.shortcutOperationList.map((operation) => ({
value: operation,
label: operation,
// onClick: () => handleOperationChange(operation),
}));
const optionKeys = props.availableKeys.map((key) => ({
value: key,
label: key,
}));
return (React.createElement(rebass_1.Box, { "data-name": "shortcut-column-settings" },
React.createElement(Tabs_1.Tabs, { autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Shortcut Settings"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, null,
' ',
React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the Shortcut")),
React.createElement(FormLayout_1.FormRow, { label: "Key" },
React.createElement(rebass_1.Flex, { flexDirection: "row" },
React.createElement(Select_1.Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
React.createElement(FormLayout_1.FormRow, null,
' ',
React.createElement(HelpBlock_1.default, { 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(FormLayout_1.FormRow, { label: "Operation" },
React.createElement(rebass_1.Flex, { flexDirection: "row" },
React.createElement(Select_1.Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
React.createElement(FormLayout_1.FormRow, null,
' ',
React.createElement(HelpBlock_1.default, { 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(FormLayout_1.FormRow, { label: "Value" },
React.createElement(rebass_1.Flex, { flexDirection: "row" },
React.createElement(Input_1.default, { "data-name": "shortcut-value", style: { maxWidth: 100 }, flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
};
exports.ShortcutSettingsWizard = ShortcutSettingsWizard;