@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
81 lines (80 loc) • 3.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckBox } from '../../../../components/CheckBox';
import { NewDropdownButton } from '../../../../components/DropdownButton';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import HelpBlock from '../../../../components/HelpBlock';
import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
import { Box, Flex } from '../../../../components/Flex';
const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
const prepareSidebarDef = (sideBar) => {
sideBar = sideBar;
if (typeof sideBar === 'boolean') {
sideBar = {
toolPanels: ALL_SIDEBAR_OPTIONS,
};
}
if (typeof sideBar === 'string') {
sideBar = {
toolPanels: [sideBar],
};
}
if (Array.isArray(sideBar)) {
sideBar = {
toolPanels: sideBar,
};
}
return sideBar ?? { toolPanels: [] };
};
const isSidebarChecked = (sideBar, panelName) => {
return (sideBar?.toolPanels ?? []).some((panel) => {
const panelId = typeof panel === 'string' ? panel : panel.id;
return panelId === panelName;
});
};
export const UIOptionsSidebarForm = (props) => {
const { gridOptions, onChange } = props;
const sideBar = prepareSidebarDef(gridOptions.sideBar);
const renderSidebarCheckbox = (sidebarName) => {
return (_jsx(CheckBox, { className: "twa:mr-3", checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check), children: StringExtensions.Humanize(sidebarName) }, sidebarName));
};
const handleToolpanelsChange = (panelName, check) => {
let newPanels = sideBar?.toolPanels ?? [];
if (check) {
newPanels = [...newPanels, panelName];
}
else {
newPanels = newPanels.filter((panel) => {
const panelId = typeof panel === 'string' ? panel : panel.id;
return panelId !== panelName;
});
}
let hiddenByDefault = sideBar.hiddenByDefault ?? false;
if (newPanels.length === 0) {
hiddenByDefault = true;
}
const newGridOptions = {
...gridOptions,
sideBar: {
...sideBar,
toolPanels: newPanels,
hiddenByDefault,
},
};
props.onChange(newGridOptions);
};
let sidebarPosition = sideBar?.position ?? 'right';
const handleSidebarPositionChange = (position) => {
const newGridOptions = {
...gridOptions,
sideBar: {
...sideBar,
position,
},
};
props.onChange(newGridOptions);
};
return (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Tool Panels" }), _jsxs(Box, { className: "twa:m-2", children: [_jsx(Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), _jsx(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }], children: _jsx(FormRow, { label: "Position", children: _jsx(NewDropdownButton, { items: [
{ label: 'Left', onClick: () => handleSidebarPositionChange('left') },
{ label: 'Right', onClick: () => handleSidebarPositionChange('right') },
], children: sidebarPosition === 'left' ? 'Left' : 'Right' }) }) })] })] }));
};