@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
87 lines (86 loc) • 7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useRef } from 'react';
import Input from '../../../components/Input';
import usePrevious from '../../../components/utils/usePrevious';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CodeBlock } from '../../../components/CodeBlock';
import { CheckBox } from '../../../components/CheckBox';
import { Box, Flex } from '../../../components/Flex';
import { Tag } from '../../../components/Tag';
import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
import { Card } from '../../../components/Card';
import { TypeRadio } from '../../Wizard/TypeRadio';
export const isSettingsValid = (data, api) => {
if (!data.Name?.trim()) {
return 'Name is required';
}
const allFlashingCells = api.flashingCellApi.getFlashingCellDefinitions();
const isDuplicateName = allFlashingCells.some((fc) => fc.Name === data.Name && fc.Uuid !== data.Uuid);
if (isDuplicateName) {
return 'A Flashing Cell already exists with that name';
}
return true;
};
const formatFlashTarget = (flashTarget) => {
if (!flashTarget) {
return 'Not specified';
}
if (typeof flashTarget === 'string') {
return flashTarget;
}
return flashTarget.join(', ');
};
export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: flashingAlert.Name || 'Not specified' })] }), _jsx(Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? (_jsx(_Fragment, { children: "Flashing is never removed" })) : (_jsxs(_Fragment, { children: ["Flashing is removed after ", _jsx(CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) }), _jsxs(SummaryText, { children: ["Flash Target ", _jsx(Tag, { children: formatFlashTarget(flashingAlert.FlashTarget) })] })] }));
};
export const FlashingAlertSettingsWizardSection = (props) => {
let { data: flashingCell } = useOnePageAdaptableWizardContext();
flashingCell = flashingCell ?? props.flashingCell;
const handleNameChange = (event) => {
props.onChange({
...flashingCell,
Name: event.target.value,
});
};
const setDuration = (FlashDuration) => {
props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
};
const duration = flashingCell.FlashDuration ?? 500;
const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);
const inputRef = useRef(null);
const oldDuration = usePrevious(duration, duration);
React.useEffect(() => {
if (oldDuration === 'always' && duration != oldDuration) {
inputRef.current?.focus();
}
}, [duration, oldDuration]);
const handleDurationTypeChange = (type) => {
setDuration(type === 'number' ? numberDuration.current : 'always');
};
const handleTargetChange = (type, checked) => {
let FlashTarget = flashingCell.FlashTarget ?? [];
if (typeof FlashTarget === 'string') {
FlashTarget = [FlashTarget];
}
if (Array.isArray(FlashTarget)) {
if (checked) {
FlashTarget = [...FlashTarget, type];
}
else {
FlashTarget = FlashTarget.filter((target) => type != target);
}
}
props.onChange({
...flashingCell,
FlashTarget,
});
};
const isTargetChecked = (type) => flashingCell?.FlashTarget === type || flashingCell?.FlashTarget?.includes?.(type);
return (_jsx(Box, { "data-name": "flashing-cell-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 Flashing Cell rule" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "flashing-cell-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Flash Duration" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how long the flash style remains visible after a change" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsx(TypeRadio, { "data-name": "duration-always", text: "Always", description: "The flash style is never removed automatically", checked: duration === 'always', onClick: () => handleDurationTypeChange('always') }), _jsx(TypeRadio, { "data-name": "duration-timed", text: "Timed", description: "The flash style is removed after a set number of milliseconds", checked: duration !== 'always', onClick: () => handleDurationTypeChange('number') }), duration !== 'always' ? (_jsxs(Flex, { alignItems: "center", className: "twa:ml-6", children: [_jsx(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-24 twa:mr-2", value: duration, onChange: (event) => {
const value = event.target.value;
const parsed = Number(value);
numberDuration.current = isNaN(parsed) ? 500 : parsed;
setDuration(numberDuration.current);
} }), _jsx(Box, { className: "twa:text-2", children: "ms" })] })) : null] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Flash Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which parts of the grid flash when a change occurs" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), checked: isTargetChecked('cell'), children: "Cell" }), _jsx(CheckBox, { "data-name": "flashing-target-row", onChange: (checked) => handleTargetChange('row', checked), checked: isTargetChecked('row'), children: "Row" }), _jsx(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: isTargetChecked('aggFuncCell'), children: "Aggregated Function Cell" })] }) })] })] }) }));
};