@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
83 lines (82 loc) • 5.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormatColumnSettingsWizardSection = exports.renderFormatColumnSettingsSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const Tag_1 = require("../../../components/Tag");
const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
const Flex_1 = require("../../../components/Flex");
const Tabs_1 = require("../../../components/Tabs");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const TypeRadio_1 = require("../../Wizard/TypeRadio");
const renderFormatColumnSettingsSummary = (data) => {
return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
React.createElement(Flex_1.Box, { className: "twa:mt-3" },
"Name ",
React.createElement(Tag_1.Tag, null, data.Name)),
React.createElement(Flex_1.Box, { className: "twa:mt-3" },
"Target",
' ',
React.createElement(Tag_1.Tag, null, !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header')),
' ',
React.createElement(Flex_1.Box, { className: "twa:mt-3" },
"Apply on Column Groups:",
' ',
React.createElement(Tag_1.Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
? 'Always'
: data.ColumnGroupScope))));
};
exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
const FormatColumnSettingsWizardSection = (props) => {
const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const currentTarget = data.Target ? data.Target : 'cell';
const handleTargetChange = (target) => {
// Update the formatColumn object
props.onChange({
...data,
Target: target,
});
};
const onNameChange = (event) => {
props.onChange({
...data,
Name: event.target.value,
});
};
const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
return (React.createElement(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' } },
React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(Flex_1.Flex, { flexDirection: "row" },
React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
React.createElement(FormLayout_1.FormRow, { label: "Name" },
React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(Flex_1.Flex, { flexDirection: "column" },
React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })))),
React.createElement(Tabs_1.Tabs, null,
React.createElement(Tabs_1.Tabs.Tab, null,
"Column Group ",
behaviourSpellingVariant,
" "),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(Flex_1.Flex, { flexDirection: "row" },
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
props.onChange({
...data,
ColumnGroupScope: columnGroupScope,
});
} },
React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
};
exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;