@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
118 lines (117 loc) • 6.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIOptionsStatusbarForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const FormBox_1 = require("../Components/FormBox");
const UIOptionsStatusbarForm = (props) => {
const allPanels = props.gridOptions?.statusBar?.statusPanels ?? [];
const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
if (previousItem) {
return {
...previousItem,
align,
};
}
else {
const newPanel = {
statusPanel: panelId,
align,
};
return newPanel;
}
});
const leftPanels = allPanels.filter((panel) => !panel?.align || panel.align === 'left');
const centerPanels = allPanels.filter((panel) => panel.align === 'center');
const rightPanels = allPanels.filter((panel) => panel.align === 'right');
const handleTabChange = (tabs) => {
const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
props.onChange({
...props.gridOptions,
statusBar: {
...props.gridOptions.statusBar,
statusPanels: newStatusbarPanels,
},
});
};
const disabled = false;
const panelToTabItemId = (panel) => panel.key ?? panel.statusPanel;
const tabs = [
{
Name: 'Left',
Items: leftPanels.map(panelToTabItemId),
},
{
Name: 'Center',
Items: centerPanels.map(panelToTabItemId),
},
{
Name: 'Right',
Items: rightPanels.map(panelToTabItemId),
},
];
const allOptions = [
{ Id: 'agTotalRowCountComponent', Title: 'Row Count' },
{ Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
{ Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
{ Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
{ Id: 'agAggregationComponent', Title: 'Aggregation' },
];
const availableItems = allOptions;
const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
const alignOptions = [
{ onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
{ onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
{ onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
];
const handleNewAdaptablePanel = () => {
const newAdaptablePanel = {
statusPanel: 'AdaptableStatusPanel',
align: adaptablePanelAlign,
key: adaptablePanelTitle,
};
const newStatusbarPanels = [...allPanels, newAdaptablePanel];
setAdaptablePanelTitle('');
setAdaptablePanelAlign('left');
props.onChange({
...props.gridOptions,
statusBar: {
...props.gridOptions.statusBar,
statusPanels: newStatusbarPanels,
},
});
};
return (React.createElement(rebass_1.Box, null,
React.createElement(HelpBlock_1.default, null, "Status Bar"),
React.createElement(rebass_1.Box, { p: 2 },
React.createElement(FormBox_1.NocodeWizardFormBox, null,
React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
React.createElement(FormLayout_1.default, { mt: 2 },
React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
React.createElement(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
React.createElement(FormLayout_1.FormRow, { label: "Align" },
React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, alignOptions.find((option) => option.value === adaptablePanelAlign)?.label)),
React.createElement(FormLayout_1.FormRow, { label: "" },
React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
!isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
createTab: false,
dragAndDropTab: false,
deleteTab: false,
editTabName: false,
}, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
};
exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;