@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
80 lines (79 loc) • 7.09 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import Input from '../../../components/Input';
import { calculateShortcutResult, getShortcutOperationSymbol, shortcutOperationList, SHORTCUT_PREVIEW_EXAMPLE_VALUE, } from '../shortcutOperations';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import { Box, Flex } from '../../../components/Flex';
import { SingleSelect } from '../../../components/NewSelect';
import { Card } from '../../../components/Card';
export const isSettingsValid = (data, api) => {
if (!data.Name?.trim()) {
return 'Name is required';
}
const allShortcuts = api.shortcutApi.getShortcuts();
const isDuplicateName = allShortcuts.some((s) => s.Name === data.Name && s.Uuid !== data.Uuid);
if (isDuplicateName) {
return 'A Shortcut already exists with that name';
}
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 (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: shortcut.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Shortcut Key ", _jsx(Tag, { children: shortcut.ShortcutKey || 'Not selected' })] }), _jsxs(SummaryText, { children: ["Value ", _jsx(Tag, { children: shortcut.ShortcutValue ?? 'Not specified' })] }), _jsxs(SummaryText, { children: ["Operation ", _jsx(Tag, { children: shortcut.ShortcutOperation ?? 'Not Specified' })] })] }));
};
export const ShortcutSettingsWizard = (props) => {
const { data: shortcut } = useOnePageAdaptableWizardContext();
const handleNameChange = (event) => {
props.onChange({
...shortcut,
Name: event.target.value,
});
};
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,
}));
const optionKeys = props.availableKeys.map((key) => ({
value: key,
label: key,
}));
const preview = React.useMemo(() => {
const { ShortcutOperation, ShortcutValue } = shortcut;
if (!ShortcutOperation || typeof ShortcutValue !== 'number') {
return null;
}
const result = calculateShortcutResult(SHORTCUT_PREVIEW_EXAMPLE_VALUE, ShortcutValue, ShortcutOperation);
if (result === null) {
return { error: 'Cannot divide by zero' };
}
return {
expression: `${SHORTCUT_PREVIEW_EXAMPLE_VALUE} ${getShortcutOperationSymbol(ShortcutOperation)} ${ShortcutValue}`,
result,
};
}, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
};