@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
67 lines (66 loc) • 5.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpecialColumnSettingsWizardStep = void 0;
const tslib_1 = require("tslib");
const chunk_1 = tslib_1.__importDefault(require("lodash/chunk"));
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../components/CheckBox");
const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
const Tabs_1 = require("../components/Tabs");
const AdaptableContext_1 = require("./AdaptableContext");
const SpecialColumnSettingsWizardStep = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = props.settings ?? {};
const handleColumnTypeChange = (columnType, checked) => {
const columnTypes = props.settings?.ColumnTypes ?? [];
if (checked) {
props.onChange({
...props.settings,
ColumnTypes: [...columnTypes, columnType],
});
}
else {
props.onChange({
...props.settings,
ColumnTypes: columnTypes?.filter?.((item) => item !== columnType),
});
}
};
const onSettingsChange = (values) => {
props.onChange({
...props.settings,
...values,
});
};
return (React.createElement(React.Fragment, null,
React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Column Properties"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(rebass_1.Flex, { flexDirection: "column" },
React.createElement(FormLayout_1.default, { style: { width: '100%' }, columns: [
{ name: 'first', size: '30%' },
{ size: '30%', name: 'second' },
{ size: '30%', name: 'third' },
] },
React.createElement(FormLayout_1.FormRow, null,
React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
React.createElement(FormLayout_1.FormRow, null,
React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
React.createElement(FormLayout_1.FormRow, null,
React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormLayout_1.FormRow, { key: first },
first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
};
exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;