@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
53 lines (52 loc) • 3.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PivotRowGroupingSection = exports.PivotRowGroupingSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Utilities_1 = require("./Utilities");
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ValueSelector_1 = require("../../../Components/ValueSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
const RowGroupingSection_1 = require("./RowGroupingSection");
const PivotRowGroupingSectionSummary = () => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
return (React.createElement(rebass_1.Box, null, layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
return (React.createElement(rebass_1.Box, { mb: 2 },
React.createElement(Tag_1.Tag, { key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
})) : (React.createElement(Tag_1.Tag, null, "No Pivot Row Grouping"))));
};
exports.PivotRowGroupingSectionSummary = PivotRowGroupingSectionSummary;
const PivotRowGroupingSection = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
const sortedGroupableColumns = React.useMemo(() => {
return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.PivotGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allGroupableColumns]);
const onChange = (layout) => {
props.onChange((0, LayoutHelpers_1.normalizeLayout)(layout));
};
const handleColumnsChange = (columnIds) => {
onChange({
...layout,
PivotGroupedColumns: columnIds,
});
};
const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
return `Selected Columns:`;
}, onChange: handleColumnsChange })),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
};
exports.PivotRowGroupingSection = PivotRowGroupingSection;