@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
67 lines (66 loc) • 4.16 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Button_1 = tslib_1.__importDefault(require("react-bootstrap/Button"));
var ButtonGroup_1 = tslib_1.__importDefault(require("react-bootstrap/ButtonGroup"));
var Col_1 = tslib_1.__importDefault(require("react-bootstrap/Col"));
var FieldsListControl_1 = tslib_1.__importDefault(require("./FieldsListControl"));
function SortableFieldsListControl(_a) {
var onSelectedChange = _a.onSelectedChange, options = _a.options, onOptionsChange = _a.onOptionsChange, placeholder = _a.placeholder, selected = _a.selected;
var handleTop = react_1.useCallback(function () {
return onOptionsChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(selected)), tslib_1.__read(options.map(function (_a) {
var key = _a.key;
return key;
}).filter(function (key) { return !selected.includes(key); }))));
}, [onOptionsChange, options, selected]);
var handleUp = react_1.useCallback(function () {
var _a;
var newResult = options.map(function (_a) {
var key = _a.key;
return key;
});
for (var i = 1; i < newResult.length; i++) {
// @ts-expect-error TS2345
if (selected.includes(newResult[i])) {
// @ts-expect-error TS2345
_a = tslib_1.__read([newResult[i], newResult[i - 1]], 2), newResult[i - 1] = _a[0], newResult[i] = _a[1];
}
}
return onOptionsChange(newResult);
}, [onOptionsChange, options, selected]);
var handleDown = react_1.useCallback(function () {
var _a;
var newResult = options.map(function (_a) {
var key = _a.key;
return key;
});
for (var i = newResult.length - 2; i >= 0; i--) {
// @ts-expect-error TS2345
if (selected.includes(newResult[i])) {
// @ts-expect-error TS2345
_a = tslib_1.__read([newResult[i + 1], newResult[i]], 2), newResult[i] = _a[0], newResult[i + 1] = _a[1];
}
}
return onOptionsChange(newResult);
}, [onOptionsChange, options, selected]);
var handleBottom = react_1.useCallback(function () {
return onOptionsChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(options.map(function (_a) {
var key = _a.key;
return key;
}).filter(function (key) { return !selected.includes(key); }))), tslib_1.__read(selected)));
}, [onOptionsChange, options, selected]);
return react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Col_1.default, null,
react_1.default.createElement(FieldsListControl_1.default, { onSelectedChange: onSelectedChange, options: options, placeholder: placeholder, selected: selected })),
react_1.default.createElement(Col_1.default, { as: ButtonGroup_1.default, lg: 1, style: { height: 'fit-content', padding: 0 }, vertical: true },
react_1.default.createElement(Button_1.default, { disabled: selected.length === 0, onClick: handleTop, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-double-up" })),
react_1.default.createElement(Button_1.default, { disabled: selected.length === 0, onClick: handleUp, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-up" })),
react_1.default.createElement(Button_1.default, { disabled: selected.length === 0, onClick: handleDown, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-down" })),
react_1.default.createElement(Button_1.default, { disabled: selected.length === 0, onClick: handleBottom, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-double-down" }))));
}
exports.default = react_1.default.memo(SortableFieldsListControl);