@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
84 lines • 4.39 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useManyClickHandlers_1 = require("./useManyClickHandlers");
const TableStyle_1 = require("../Table/TableStyle");
const getNestedId_1 = require("../utils/getNestedId");
const utils_1 = require("../utils");
function ControlledCheckbox({ isHeader, row, dispatchSelectedRows, selectedRows, allRows, selectedFlatRows, isAllRowsSelected, toggleAllRowsSelected, indeterminate, movedLeft, }) {
var _a;
const [checked, setChecked] = react_1.default.useState(false);
const handleClickHeader = () => {
//toggleAllRowsSelected();
isAllRowsSelected
? dispatchSelectedRows({
type: 'customUnSelectAll',
payload: selectedFlatRows,
})
: dispatchSelectedRows({
type: 'customSelectAll',
payload: selectedFlatRows,
});
};
const handleSingleClick = () => {
(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.filter((elm) => elm.id === row.id).length) > 0
? dispatchSelectedRows({
type: 'customUnSelectRow',
payload: row.id,
})
: dispatchSelectedRows({ type: 'customSelectRow', payload: row });
};
const handleDoubleClick = () => {
const nestedRowsId = (0, getNestedId_1.getNestedId)((x) => x.id)(row);
if ((selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.filter((elm) => elm.id === row.id).length) > 0) {
dispatchSelectedRows({
type: 'unSelectedNestedRows',
payload: nestedRowsId,
});
}
else {
const RowsSelected = (0, utils_1.filterByReference)(allRows, nestedRowsId, true);
dispatchSelectedRows({
type: 'selectedNestedRows',
payload: [...RowsSelected],
});
}
};
const singleClickHandler = (e) => {
isHeader ? handleClickHeader() : handleSingleClick();
setChecked(!checked);
};
const doubleClickHandler = (e) => {
!isHeader && handleDoubleClick();
setChecked(!checked);
};
const clickHandler = (0, useManyClickHandlers_1.useManyClickHandlers)(singleClickHandler, doubleClickHandler);
react_1.default.useEffect(() => {
isHeader
? setChecked(allRows &&
(allRows === null || allRows === void 0 ? void 0 : allRows.length) > 0 &&
(allRows === null || allRows === void 0 ? void 0 : allRows.length) === (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length)
? true
: false)
: setChecked(allRows &&
(allRows === null || allRows === void 0 ? void 0 : allRows.length) > 0 &&
(allRows === null || allRows === void 0 ? void 0 : allRows.length) === (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length)
? true
: row !== undefined &&
(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.filter((elm) => elm.id === row.id).length) > 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [row, selectedRows, allRows]);
return ((0, jsx_runtime_1.jsx)(TableStyle_1.RowCheckbox, { onClick: clickHandler, checked: checked, title: ((_a = row === null || row === void 0 ? void 0 : row.subRows) === null || _a === void 0 ? void 0 : _a.length) > 0
? `Double-cliquer pour sélectionner l'élément et ses sous-éléments`
: 'sélectionner/Désélectionner', style: {
paddingLeft: (row === null || row === void 0 ? void 0 : row.depth) === 0 || movedLeft === undefined
? '9px'
: `${(row === null || row === void 0 ? void 0 : row.depth) * 1.5}rem`,
}, indeterminate: indeterminate }));
}
exports.default = ControlledCheckbox;
//# sourceMappingURL=ControlledCheckbox.js.map