@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
84 lines (83 loc) • 7.15 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 { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
import { normalizePlusMinusTrigger, plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
import { KeyComboCaptureInput } from './KeyComboCaptureInput';
export const PlusMinusSettingsSummary = () => {
const { data, api } = useOnePageAdaptableWizardContext();
const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Nudge Value ", _jsx(Tag, { children: data.NudgeValue ?? 'Not selected' })] }), _jsxs(SummaryText, { children: ["Keys ", _jsx(Tag, { children: incrementKey }), " / ", _jsx(Tag, { children: decrementKey })] })] }));
};
export const isSettingsValid = (data, api, _context) => {
if (!data.Name?.trim()) {
return 'A name is required.';
}
const allPlusMinusNudges = api.plusMinusApi.getAllPlusMinus();
const isDuplicateName = allPlusMinusNudges.some((nudge) => nudge.Name === data.Name && nudge.Uuid !== data.Uuid);
if (isDuplicateName) {
return 'A Plus/Minus Nudge with this name already exists.';
}
if (typeof data.NudgeValue !== 'number') {
return 'A nudge value is required.';
}
if (data.NudgeValue === 0) {
return 'Nudge value must not be zero.';
}
if (plusMinusResolvedKeysConflict(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {})) {
return 'Increment and decrement keys cannot be the same for this nudge.';
}
return true;
};
export const PlusMinusSettingsWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const pmOpts = api.optionsApi.getEditOptions().plusMinusOptions ?? {};
const incrementBaseline = plusMinusIncrementKeyFromOptionsOnly(pmOpts);
const decrementBaseline = plusMinusDecrementKeyFromOptionsOnly(pmOpts);
const incrementUsingDefault = !data.IncrementKey?.trim();
const decrementUsingDefault = !data.DecrementKey?.trim();
const incrementDisplayValue = incrementUsingDefault
? incrementBaseline
: (data.IncrementKey ?? '').trim();
const decrementDisplayValue = decrementUsingDefault
? decrementBaseline
: (data.DecrementKey ?? '').trim();
const commitIncrementKey = React.useCallback((trigger) => {
const next = plusMinusTriggerSameAsBaseline(trigger, incrementBaseline) ? undefined : trigger;
props.onChange({ ...data, IncrementKey: next });
}, [data, incrementBaseline, props.onChange]);
const commitDecrementKey = React.useCallback((trigger) => {
const next = plusMinusTriggerSameAsBaseline(trigger, decrementBaseline) ? undefined : trigger;
props.onChange({ ...data, DecrementKey: next });
}, [data, decrementBaseline, props.onChange]);
const resetIncrementKey = React.useCallback(() => {
props.onChange({ ...data, IncrementKey: undefined });
}, [data, props.onChange]);
const resetDecrementKey = React.useCallback(() => {
props.onChange({ ...data, DecrementKey: undefined });
}, [data, props.onChange]);
const SAME_KEYS_MESSAGE = 'Increment and decrement keys cannot be the same.';
const validateIncrementCapture = React.useCallback((trigger) => normalizePlusMinusTrigger(trigger) === normalizePlusMinusTrigger(decrementDisplayValue)
? SAME_KEYS_MESSAGE
: undefined, [decrementDisplayValue]);
const validateDecrementCapture = React.useCallback((trigger) => normalizePlusMinusTrigger(trigger) === normalizePlusMinusTrigger(incrementDisplayValue)
? SAME_KEYS_MESSAGE
: undefined, [incrementDisplayValue]);
const handleNameChange = (event) => {
props.onChange({
...data,
Name: event.target.value,
});
};
const handleNudgeValueChange = (event) => {
const newValue = parseFloat(event.target.value);
props.onChange({
...data,
NudgeValue: isNaN(newValue) ? '' : newValue,
});
};
return (_jsx(Box, { "data-name": "plus-minus-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 Plus / Minus Nudge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Amount added to or subtracted from the cell value when Plus / Minus is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Trigger Keys" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Click a field and press the keys that should trigger increment / decrement." })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Increment key" }), _jsx(KeyComboCaptureInput, { "data-name": "plus-minus-increment-key", value: incrementDisplayValue, isUsingDefault: incrementUsingDefault, onCapture: commitIncrementKey, onReset: resetIncrementKey, validateCapture: validateIncrementCapture })] }), _jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Decrement key" }), _jsx(KeyComboCaptureInput, { "data-name": "plus-minus-decrement-key", value: decrementDisplayValue, isUsingDefault: decrementUsingDefault, onCapture: commitDecrementKey, onReset: resetDecrementKey, validateCapture: validateDecrementCapture })] })] }) })] })] }) }));
};