@vlsergey/react-bootstrap-pagetable/lib/esm/actions/ActionsToolbar.js

Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.

import { __awaiter, __generator } from "tslib";
import React, { useCallback, useMemo } from 'react';
import { useControlledContext } from '../controlled/ControlledContext';
import { useActionsContext } from './ActionsContext';
import Toolbar from './Toolbar';
function filterItemsByIdsImpl(itemModel, items, ids) {
    var item2Id = itemModel.idF;
    var idsSet = new Set(ids);
    return items.filter(function (item) { return idsSet.has(item2Id(item)); });
}
function ActionsToolbar() {
    var _this = this;
    var _a = useActionsContext(), actions = _a.actions, onAfterAction = _a.onAfterAction, onRefreshRequired = _a.onRefreshRequired, selectedIds = _a.selectedIds;
    var _b = useControlledContext(), itemModel = _b.itemModel, page = _b.page, size = _b.size;
    var handleAfterAction = useCallback(function (action, items) { return __awaiter(_this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (!onAfterAction) return [3 /*break*/, 2];
                    return [4 /*yield*/, onAfterAction(action, items)];
                case 1:
                    _a.sent();
                    _a.label = 2;
                case 2:
                    if (!(action.refreshAfterAction && onRefreshRequired)) return [3 /*break*/, 4];
                    return [4 /*yield*/, onRefreshRequired()];
                case 3:
                    _a.sent();
                    _a.label = 4;
                case 4: return [2 /*return*/];
            }
        });
    }); }, [onAfterAction, onRefreshRequired]);
    var selectedItems = useMemo(function () {
        return filterItemsByIdsImpl(itemModel, page.content, selectedIds);
    }, [itemModel, page.content, selectedIds]);
    if (!actions) {
        return null;
    }
    return React.createElement(Toolbar, { actions: actions, onAfterAction: handleAfterAction, selectedItems: selectedItems, size: size });
}
export default React.memo(ActionsToolbar);