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

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

import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import Form from 'react-bootstrap/Form';
export default function useSelectAllCheckbox(content, idF, onSelectedIdsChange, onSelectedItemsChange, selectedIdsSet) {
    var allPageIds = useMemo(function () { return content.map(idF); }, [idF, content]);
    var allChecked = useMemo(function () { return allPageIds.every(function (id) { return selectedIdsSet.has(id); }); }, [allPageIds, selectedIdsSet]);
    var allUnchecked = useMemo(function () { return allPageIds.every(function (id) { return !selectedIdsSet.has(id); }); }, [allPageIds, selectedIdsSet]);
    var allIndeterminate = !allChecked && !allUnchecked;
    var ref = useRef(null);
    useEffect(function () {
        if (ref.current)
            ref.current.indeterminate = allIndeterminate;
    }, [allIndeterminate]);
    var handleTriggerAll = useCallback(function (_a) {
        var checked = _a.currentTarget.checked;
        onSelectedIdsChange(checked ? allPageIds : []);
        if (onSelectedItemsChange) {
            onSelectedItemsChange(checked ? content : []);
        }
    }, [allPageIds, content, onSelectedIdsChange, onSelectedItemsChange]);
    var handleCheckboxClick = useCallback(function (e) {
        e.stopPropagation();
    }, []);
    var handleCellClick = useCallback(function () {
        if (ref.current) {
            ref.current.click();
        }
    }, []);
    var selectAllCheckbox = useMemo(function () {
        var SelectAllCheckbox = function () { return React.createElement(Form.Check, { checked: allChecked && !allUnchecked, onChange: handleTriggerAll, onClick: handleCheckboxClick, ref: ref, type: "checkbox" }); };
        return SelectAllCheckbox;
    }, [allChecked, allUnchecked, handleTriggerAll, handleCheckboxClick, ref]);
    return useMemo(function () { return ({
        headerCellContent: selectAllCheckbox,
        headerCellProps: {
            onClick: handleCellClick,
            style: {
                cursor: 'pointer',
            },
        },
    }); }, [selectAllCheckbox, handleCellClick]);
}