@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
117 lines (116 loc) • 7.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = exports.isSettingsValid = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
const Tabs_1 = require("../../../components/Tabs");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const CodeBlock_1 = require("../../../components/CodeBlock");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const CheckBox_1 = require("../../../components/CheckBox");
const Flex_1 = require("../../../components/Flex");
const Tag_1 = require("../../../components/Tag");
const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
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;
};
exports.isSettingsValid = isSettingsValid;
const renderFlashingAlertSettingsSummary = (flashingAlert) => {
return (React.createElement(React.Fragment, null,
React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
"Name ",
React.createElement(Tag_1.Tag, null, flashingAlert.Name || 'Not specified')),
React.createElement(Flex_1.Box, { className: "twa:text-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_1.CodeBlock, null, flashingAlert.FlashDuration),
' ',
"milliseconds")))));
};
exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
const FlashingAlertSettingsWizardSection = (props) => {
let { data: flashingCell } = (0, OnePageAdaptableWizard_1.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 = (0, react_1.useRef)(null);
const oldDuration = (0, usePrevious_1.default)(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_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Name" },
React.createElement(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }))))),
React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
React.createElement(Tabs_1.Tabs.Tab, null, "Flash Duration"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "" },
React.createElement(Flex_1.Flex, { alignItems: "center" },
React.createElement(CheckBox_1.CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
duration !== 'always' && (React.createElement(React.Fragment, null,
React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
const value = event.target.value;
setDuration(isNaN(Number(value)) ? 500 : Number(value));
} }),
React.createElement(Flex_1.Box, { className: "twa:text-2" }, "ms")))))))),
' ',
React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
React.createElement(Tabs_1.Tabs.Tab, null, "Flash Target"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "" },
React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
};
exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;