@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
101 lines (100 loc) • 5.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ModuleManager } from '../../../../components/DragAndDropContext/ModuleManager';
import HelpBlock from '../../../../components/HelpBlock';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import Input from '../../../../components/Input';
import { ButtonNew } from '../../../Components/Buttons/ButtonNew';
import { NewDropdownButton } from '../../../../components/DropdownButton';
import { NocodeWizardFormBox } from '../Components/FormBox';
import { Box } from '../../../../components/Flex';
export 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 (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Status Bar" }), _jsxs(Box, { className: "twa:p-2", children: [_jsxs(NocodeWizardFormBox, { children: [_jsx(Box, { as: "b", children: "Create Adaptable Statusbar Panel" }), _jsxs(FormLayout, { className: "twa:mt-2", children: [_jsx(FormRow, { label: "Panel Name", children: _jsx(Input, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) }) }), _jsx(FormRow, { label: "Align", children: _jsx(NewDropdownButton, { items: alignOptions, children: alignOptions.find((option) => option.value === adaptablePanelAlign)?.label }) }), _jsxs(FormRow, { label: "", children: [_jsx(ButtonNew, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, children: "Add" }), !isAdaptablePanelTitleAvailable && (_jsx(Box, { className: "twa:mt-2 twa:text-destructive", children: "Adaptable panel name must be unique." }))] })] })] }), _jsx(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" })] })] }));
};