@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
62 lines (61 loc) • 4.66 kB
JavaScript
import chunk from 'lodash/chunk';
import * as React from 'react';
import { Flex } from 'rebass';
import { CheckBox } from '../components/CheckBox';
import FormLayout, { FormRow } from '../components/FormLayout';
import { Tabs } from '../components/Tabs';
import { useAdaptable } from './AdaptableContext';
export const SpecialColumnSettingsWizardStep = (props) => {
const adaptable = 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, { marginTop: 2, autoFocus: false },
React.createElement(Tabs.Tab, null, "Column Properties"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flexDirection: "column" },
React.createElement(FormLayout, { style: { width: '100%' }, columns: [
{ name: 'first', size: '30%' },
{ size: '30%', name: 'second' },
{ size: '30%', name: 'third' },
] },
React.createElement(FormRow, null,
React.createElement(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
React.createElement(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
React.createElement(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
React.createElement(FormRow, null,
React.createElement(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
React.createElement(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
React.createElement(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
React.createElement(FormRow, null,
React.createElement(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
React.createElement(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
React.createElement(CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs, { marginTop: 2, autoFocus: false },
React.createElement(Tabs.Tab, null, "Column Types"),
React.createElement(Tabs.Content, null,
React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormRow, { key: first },
first && (React.createElement(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
second && (React.createElement(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
};