@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
81 lines (80 loc) • 5.38 kB
JavaScript
import * as React from 'react';
import { useRef } from 'react';
import { Flex, Text } from 'rebass';
import Input from '../../../components/Input';
import usePrevious from '../../../components/utils/usePrevious';
import Radio from '../../../components/Radio';
import { Tabs } from '../../../components/Tabs';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CodeBlock } from '../../../components/CodeBlock';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { CheckBox } from '../../../components/CheckBox';
export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
return (React.createElement(React.Fragment, null,
React.createElement(Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
"Flashing is removed after ",
React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
' ',
"milliseconds")))));
};
export const FlashingAlertSettingsWizardSection = (props) => {
let { data: flashingCell } = useOnePageAdaptableWizardContext();
flashingCell = flashingCell ?? props.flashingCell;
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 handleTypeChange = (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,
});
};
return (React.createElement(Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
React.createElement(Tabs, { autoFocus: false, padding: 2 },
React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
React.createElement(Tabs.Content, null,
React.createElement(FormLayout, null,
React.createElement(FormRow, { label: "Duration Type" },
React.createElement(Radio, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
React.createElement(Radio, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
React.createElement(FormRow, { label: "" },
duration !== 'always' && (React.createElement(Flex, { flexDirection: "row", alignItems: "baseline" },
React.createElement(Text, { fontSize: 2, mr: 2 }, "After"),
React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
const value = event.target.value;
setDuration(isNaN(Number(value)) ? 500 : Number(value));
} }),
React.createElement(Text, { fontSize: 2 }, "milliseconds"))),
duration === 'always' && (React.createElement(Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
React.createElement(FormRow, { label: "Flash Target" },
React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: flashingCell?.FlashTarget === 'cell' ||
flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
React.createElement(CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
};