@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
87 lines (86 loc) • 3.52 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import { CheckBox } from '../../../../components/CheckBox';
import DropdownButton from '../../../../components/DropdownButton';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import HelpBlock from '../../../../components/HelpBlock';
import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
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 (React.createElement(CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions.Humanize(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 (React.createElement(Box, null,
React.createElement(HelpBlock, null, "Tool Panels"),
React.createElement(Box, { m: 2 },
React.createElement(Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
React.createElement(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }] },
React.createElement(FormRow, { label: "Position" },
React.createElement(DropdownButton, { columns: ['label'], items: [
{ label: 'Left', onClick: () => handleSidebarPositionChange('left') },
{ label: 'Right', onClick: () => handleSidebarPositionChange('right') },
] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
};