@adaptabletools/adaptable/src/View/SpecialColumnSettingsWizardStep.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { chunk } from '../Utilities/Extensions/ArrayExtensions';
import { CheckBox } from '../components/CheckBox';
import FormLayout, { FormRow } from '../components/FormLayout';
import { useAdaptable } from './AdaptableContext';
import { Box, Flex } from '../components/Flex';
import { Card } from '../components/Card';
export const SpecialColumnSettingsWizardStep = (props) => {
    const adaptable = useAdaptable();
    const behaviourSpellingVariant = adaptable.api.internalApi.getCorrectEnglishVariant('behaviours');
    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 (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Properties" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Choose which grid ", behaviourSpellingVariant, " apply to this Column"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:w-full", columns: [
                                { name: 'first', size: '30%' },
                                { size: '30%', name: 'second' },
                                { size: '30%', name: 'third' },
                            ], children: [_jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), _jsx(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), _jsx(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), _jsx(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), _jsx(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), _jsx(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), _jsx(CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) })] }), Boolean(possibleColumnTypes?.length) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Types" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (_jsxs(FormRow, { children: [first && (_jsx(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && (_jsx(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
};