@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
42 lines (41 loc) • 2.57 kB
JavaScript
import * as React from 'react';
import { Box } from 'rebass';
import { columnFilter } from './Utilities';
import { Tabs } from '../../../../components/Tabs';
import { Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { ValueSelector } from '../../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
export const PivotRowGroupingSectionSummary = () => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
return (React.createElement(Box, null, layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
return (React.createElement(Box, { mb: 2 },
React.createElement(Tag, { key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
})) : (React.createElement(Tag, null, "No Pivot Row Grouping"))));
};
export const PivotRowGroupingSection = (props) => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
const sortedGroupableColumns = React.useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allGroupableColumns]);
const onChange = (layout) => {
props.onChange(normalizeLayout(layout));
};
const handleColumnsChange = (columnIds) => {
onChange({
...layout,
PivotGroupedColumns: columnIds,
});
};
return (React.createElement(Tabs, { style: { height: '100%' } },
React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
React.createElement(Tabs.Content, null,
React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
return `Selected Columns:`;
}, onChange: handleColumnsChange }))));
};