@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.38 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"));
function useSelectAllCheckbox(content, idF, onSelectedIdsChange, onSelectedItemsChange, selectedIdsSet) {
var allPageIds = react_1.useMemo(function () { return content.map(idF); }, [idF, content]);
var allChecked = react_1.useMemo(function () { return allPageIds.every(function (id) { return selectedIdsSet.has(id); }); }, [allPageIds, selectedIdsSet]);
var allUnchecked = react_1.useMemo(function () { return allPageIds.every(function (id) { return !selectedIdsSet.has(id); }); }, [allPageIds, selectedIdsSet]);
var allIndeterminate = !allChecked && !allUnchecked;
var ref = react_1.useRef(null);
react_1.useEffect(function () {
if (ref.current)
ref.current.indeterminate = allIndeterminate;
}, [allIndeterminate]);
var handleTriggerAll = react_1.useCallback(function (_a) {
var checked = _a.currentTarget.checked;
onSelectedIdsChange(checked ? allPageIds : []);
if (onSelectedItemsChange) {
onSelectedItemsChange(checked ? content : []);
}
}, [allPageIds, content, onSelectedIdsChange, onSelectedItemsChange]);
var handleCheckboxClick = react_1.useCallback(function (e) {
e.stopPropagation();
}, []);
var handleCellClick = react_1.useCallback(function () {
if (ref.current) {
ref.current.click();
}
}, []);
var selectAllCheckbox = react_1.useMemo(function () {
var SelectAllCheckbox = function () { return react_1.default.createElement(Form_1.default.Check, { checked: allChecked && !allUnchecked, onChange: handleTriggerAll, onClick: handleCheckboxClick, ref: ref, type: "checkbox" }); };
return SelectAllCheckbox;
}, [allChecked, allUnchecked, handleTriggerAll, handleCheckboxClick, ref]);
return react_1.useMemo(function () { return ({
headerCellContent: selectAllCheckbox,
headerCellProps: {
onClick: handleCellClick,
style: {
cursor: 'pointer',
},
},
}); }, [selectAllCheckbox, handleCellClick]);
}
exports.default = useSelectAllCheckbox;