@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
78 lines • 4.01 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { useManyClickHandlers } from './useManyClickHandlers';
import { RowCheckbox } from '../Table/TableStyle';
import { getNestedId } from '../utils/getNestedId';
import { filterByReference } from '../utils';
export default function ControlledCheckbox({ isHeader, row, dispatchSelectedRows, selectedRows, allRows, selectedFlatRows, isAllRowsSelected, toggleAllRowsSelected, indeterminate, movedLeft, }) {
var _a;
const [checked, setChecked] = React.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 = 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 = 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 = useManyClickHandlers(singleClickHandler, doubleClickHandler);
React.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 (_jsx(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 }));
}
//# sourceMappingURL=ControlledCheckbox.js.map