@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
71 lines (70 loc) • 4.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SortSection = exports.SortSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ValueSelector_1 = require("../../../Components/ValueSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const Utilities_1 = require("./Utilities");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const SortSectionSummary = () => {
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, adaptable.api);
return (React.createElement(rebass_1.Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Sorts"))));
};
exports.SortSectionSummary = SortSectionSummary;
const ColumnRow = (props) => {
const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
return (React.createElement(rebass_1.Box, null,
props.column.friendlyName,
SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
};
const SortSection = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
const sortedSortColumns = React.useMemo(() => {
return ArrayExtensions_1.default.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allSortableColumns]);
const handleColumnsSelectionChange = React.useCallback((columnIds) => {
props.onChange({
...layout,
ColumnSorts: (columnIds || []).map((columnId) => {
const SortOrder = layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ?? 'Asc';
return {
ColumnId: columnId,
SortOrder: SortOrder,
};
}),
});
}, [layout]);
const handleSortChange = React.useCallback((columnId, SortOrder) => {
props.onChange({
...layout,
ColumnSorts: layout.ColumnSorts?.map((sort) => {
if (sort.ColumnId === columnId) {
return {
...sort,
SortOrder: SortOrder,
};
}
return sort;
}),
});
}, [layout]);
return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
React.createElement(Tabs_1.Tabs.Tab, null, "Column Sorts"),
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, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
return `Active sorts:`;
}, onChange: handleColumnsSelectionChange }))));
};
exports.SortSection = SortSection;