@aures/custom-react-table
Version:
dynamic table based on react table v7
124 lines • 5.51 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';
import { checkLists } from '../utils/important';
export default function ControlledCheckbox({ isHeader, row, dispatchSelectedRows, selectedRows, allRows, selectedFlatRows, isAllRowsSelected, toggleAllRowsSelected, indeterminate, movedLeft, filters, state, data, }) {
var _a;
let allData = flattenData(allRows);
const [turnAllChecked, setTurnAllChecked] = React.useState(false);
const [turnAllNotChecked, setTurnAllNotChecked] = React.useState(false);
const [checked, setChecked] = React.useState(false);
function getTotalLength(data) {
let totalLength = 0;
for (const item of data) {
totalLength++;
if (item.subRows) {
totalLength += getTotalLength(item === null || item === void 0 ? void 0 : item.subRows);
}
}
return totalLength;
}
function flattenData(data) {
const flattenedData = [];
function flattenRecursive(items, depth) {
for (const item of items) {
flattenedData.push(Object.assign(Object.assign({}, item), { depth }));
if (item.subRows) {
flattenRecursive(item.subRows, depth + 1);
}
}
}
flattenRecursive(data, 0);
return flattenedData;
}
const handleClickHeader = () => {
let isAllChecked = checkLists(state.customSelectedRows.map((x) => x.id), flattenData(data.flatRows).map((x) => x.id));
if (isAllChecked === false) {
setTurnAllChecked(true);
setTurnAllNotChecked(false);
}
else {
setTurnAllNotChecked(true);
setTurnAllChecked(false);
}
};
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(() => {
if (isHeader === true && turnAllChecked === true) {
dispatchSelectedRows({
type: 'customSelectAllV2',
payload: allData,
});
setTurnAllChecked(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [turnAllChecked]);
React.useEffect(() => {
if (isHeader === true && turnAllNotChecked === true) {
dispatchSelectedRows({
type: 'customUnSelectAllV2',
payload: flattenData(data.flatRows),
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [turnAllNotChecked]);
React.useEffect(() => {
if (isHeader === true) {
let isAllChecked = checkLists(state.customSelectedRows.map((x) => x.id), allData.map((x) => x.id));
// console.log({isAllChecked,allData});
setChecked(isAllChecked);
}
else {
setChecked(selectedRows.length > 0
? row !== undefined &&
(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map((x) => x.id).includes(row.id))
: false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [row, selectedRows, allData]);
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-click to select the element and its sub-elements`
: 'select/deselect', 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`,
position: 'relative',
left: isHeader === true ? '-159%' : '0px',
}, indeterminate: false }));
}
//# sourceMappingURL=ControlledCheckbox.js.map