@vlsergey/react-bootstrap-pagetable/lib/esm/selectable/withSelectable.js

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

import { __assign, __read, __rest, __spreadArray } from "tslib";
import React, { useCallback, useMemo } from 'react';
import Form from 'react-bootstrap/Form';
import useSelectAllCheckbox from './useSelectAllCheckbox';
function renderCheckboxField(_a) {
    var value = _a.value;
    return React.createElement(Form.Check, { checked: value, readOnly: true, type: "checkbox" });
}
export 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 = __rest(_a, ["itemFieldCellHyperlink", "itemModel", "page", "selectable", "onSelectedIdsChange", "onSelectedItemsChange", "selectedIds"]);
        var idF = useMemo(function () { return itemModel.idF; }, [itemModel]);
        var selectedIdsSet = useMemo(function () { return new Set(selectedIds); }, [selectedIds]);
        var itemsMap = useMemo(function () {
            return new Map(page.content.map(function (item) { return [itemModel.idF(item), item]; }));
        }, [page, itemModel]);
        var handleTrigger = useCallback(function (item) {
            var itemKey = idF(item);
            var index = selectedIds.indexOf(itemKey);
            if (index === -1) {
                var newSelectedIds = __spreadArray(__spreadArray([], __read(selectedIds)), [itemKey]);
                if (onSelectedItemsChange) {
                    onSelectedItemsChange(newSelectedIds.map(function (id) { return itemsMap.get(id); }));
                }
                return onSelectedIdsChange(newSelectedIds);
            }
            var spliced = __spreadArray([], __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 = useCallback(function (item) { return ({
            onClick: function () { return handleTrigger(item); },
            style: { cursor: 'pointer' },
        }); }, [handleTrigger]);
        var selectableFieldGetter = useCallback(function (item) {
            return selectedIdsSet.has(idF(item));
        }, [idF, selectedIdsSet]);
        var selectAllProps = useSelectAllCheckbox(page.content, idF, onSelectedIdsChange, onSelectedItemsChange, selectedIdsSet);
        var newItemModel = useMemo(function () { return (__assign(__assign({}, itemModel), { fields: __spreadArray([
                __assign({ key: '$selectable', getter: selectableFieldGetter, render: renderCheckboxField, title: '[item checkbox]' }, selectAllProps)
            ], __read(itemModel.fields)) })); }, [selectAllProps, itemModel, selectableFieldGetter]);
        var hasSelectedIds = selectedIds.length > 0;
        var newItemFieldCellHyperlink = 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.createElement(Child, __assign({}, etcProps, { itemFieldCellHyperlink: itemFieldCellHyperlink, itemModel: itemModel, page: page }));
        }
        return React.createElement(Child, __assign({}, etcProps, { itemFieldCellHyperlink: newItemFieldCellHyperlink, itemModel: newItemModel, page: page, rowProps: rowProps }));
    };
});