@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
64 lines (63 loc) • 4.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Form_1 = tslib_1.__importDefault(require("react-bootstrap/Form"));
var useSelectAllCheckbox_1 = tslib_1.__importDefault(require("./useSelectAllCheckbox"));
function renderCheckboxField(_a) {
var value = _a.value;
return react_1.default.createElement(Form_1.default.Check, { checked: value, readOnly: true, type: "checkbox" });
}
exports.default = (function (Child) {
return function WithSelectable(_a) {
var itemFieldCellHyperlink = _a.itemFieldCellHyperlink, itemModel = _a.itemModel, page = _a.page, selectable = _a.selectable, onSelectedIdsChange = _a.onSelectedIdsChange, onSelectedItemsChange = _a.onSelectedItemsChange, selectedIds = _a.selectedIds, etcProps = tslib_1.__rest(_a, ["itemFieldCellHyperlink", "itemModel", "page", "selectable", "onSelectedIdsChange", "onSelectedItemsChange", "selectedIds"]);
var idF = react_1.useMemo(function () { return itemModel.idF; }, [itemModel]);
var selectedIdsSet = react_1.useMemo(function () { return new Set(selectedIds); }, [selectedIds]);
var itemsMap = react_1.useMemo(function () {
return new Map(page.content.map(function (item) { return [itemModel.idF(item), item]; }));
}, [page, itemModel]);
var handleTrigger = react_1.useCallback(function (item) {
var itemKey = idF(item);
var index = selectedIds.indexOf(itemKey);
if (index === -1) {
var newSelectedIds = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(selectedIds)), [itemKey]);
if (onSelectedItemsChange) {
onSelectedItemsChange(newSelectedIds.map(function (id) { return itemsMap.get(id); }));
}
return onSelectedIdsChange(newSelectedIds);
}
var spliced = tslib_1.__spreadArray([], tslib_1.__read(selectedIds));
spliced.splice(index, 1);
if (onSelectedItemsChange) {
onSelectedItemsChange(spliced.map(function (id) { return itemsMap.get(id); }));
}
return onSelectedIdsChange(spliced);
}, [idF, itemsMap, onSelectedIdsChange, onSelectedItemsChange, selectedIds]);
var rowProps = react_1.useCallback(function (item) { return ({
onClick: function () { return handleTrigger(item); },
style: { cursor: 'pointer' },
}); }, [handleTrigger]);
var selectableFieldGetter = react_1.useCallback(function (item) {
return selectedIdsSet.has(idF(item));
}, [idF, selectedIdsSet]);
var selectAllProps = useSelectAllCheckbox_1.default(page.content, idF, onSelectedIdsChange, onSelectedItemsChange, selectedIdsSet);
var newItemModel = react_1.useMemo(function () { return (tslib_1.__assign(tslib_1.__assign({}, itemModel), { fields: tslib_1.__spreadArray([
tslib_1.__assign({ key: '$selectable', getter: selectableFieldGetter, render: renderCheckboxField, title: '[item checkbox]' }, selectAllProps)
], tslib_1.__read(itemModel.fields)) })); }, [selectAllProps, itemModel, selectableFieldGetter]);
var hasSelectedIds = selectedIds.length > 0;
var newItemFieldCellHyperlink = react_1.useMemo(function () {
if (!itemFieldCellHyperlink)
return itemFieldCellHyperlink;
return function (item, field) {
if (field.key === '$selectable' || hasSelectedIds) {
return null;
}
return itemFieldCellHyperlink(item, field);
};
}, [itemFieldCellHyperlink, hasSelectedIds]);
if (!selectable) {
return react_1.default.createElement(Child, tslib_1.__assign({}, etcProps, { itemFieldCellHyperlink: itemFieldCellHyperlink, itemModel: itemModel, page: page }));
}
return react_1.default.createElement(Child, tslib_1.__assign({}, etcProps, { itemFieldCellHyperlink: newItemFieldCellHyperlink, itemModel: newItemModel, page: page, rowProps: rowProps }));
};
});