@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
46 lines (45 loc) • 2.56 kB
JavaScript
import { __assign, __awaiter, __generator, __read, __spreadArray } from "tslib";
import React, { useCallback, useMemo } from 'react';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import ActionButton from './ActionButton';
// const EMPTY_ACTIONS = [] as Action<unknown>[];
var EMPTY_PROPS = {};
function Toolbar(_a) {
var _this = this;
var _b = _a.actions, actions = _b === void 0 ? [] : _b, _c = _a.buttonProps, buttonProps = _c === void 0 ? function () { return EMPTY_PROPS; } : _c, _d = _a.toolbarProps, toolbarProps = _d === void 0 ? EMPTY_PROPS : _d, _e = _a.onAfterAction, onAfterAction = _e === void 0 ? function () { } : _e, selectedItems = _a.selectedItems, size = _a.size;
var handleAction = useCallback(function (action) {
var etc = [];
for (var _i = 1; _i < arguments.length; _i++) {
etc[_i - 1] = arguments[_i];
}
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, , 2, 5]);
return [4 /*yield*/, action.onAction.apply(action, __spreadArray([selectedItems], __read(etc)))];
case 1: return [2 /*return*/, _a.sent()];
case 2:
if (!onAfterAction) return [3 /*break*/, 4];
return [4 /*yield*/, onAfterAction(action, selectedItems)];
case 3:
_a.sent();
_a.label = 4;
case 4: return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
});
}, [onAfterAction, selectedItems]);
var buttons = useMemo(function () { return actions
.filter(function (_a) {
var visible = _a.visible;
return !visible || visible(selectedItems);
})
.map(function (action) { return React.createElement(ActionButton, __assign({ action: action, disabled: action.enabled && !action.enabled(selectedItems), key: action.key, onAction: handleAction, selectedItems: selectedItems, size: size }, (buttonProps ? buttonProps(action, selectedItems) : {}))); }); }, [actions, buttonProps, handleAction, selectedItems, size]);
if (!buttons.length) {
return null;
}
return React.createElement(ButtonToolbar, __assign({}, (toolbarProps || {})), buttons);
}
export default React.memo(Toolbar);