@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
92 lines (91 loc) • 3.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIOptionsSidebarForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../../../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;
});
};
const UIOptionsSidebarForm = (props) => {
const { gridOptions, onChange } = props;
const sideBar = prepareSidebarDef(gridOptions.sideBar);
const renderSidebarCheckbox = (sidebarName) => {
return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.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(rebass_1.Box, null,
React.createElement(HelpBlock_1.default, null, "Tool Panels"),
React.createElement(rebass_1.Box, { m: 2 },
React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
React.createElement(FormLayout_1.FormRow, { label: "Position" },
React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
{ label: 'Left', onClick: () => handleSidebarPositionChange('left') },
{ label: 'Right', onClick: () => handleSidebarPositionChange('right') },
] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
};
exports.UIOptionsSidebarForm = UIOptionsSidebarForm;