phx-react
Version:
PHX REACT
106 lines • 7.56 kB
JavaScript
/* eslint-disable prettier/prettier */
import React from 'react';
import { PHXCheckbox } from '../Checkbox';
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
/**
*
* @param bodyIndex
* @param item
* @param thBody eg: ["id", "admissions_code", "student_name", "created_at"]
* @param thBodyFilter
* @param selectedPeople
* @param brSetSelectedPeople
* @constructor
*/
export const RowTable = ({ bodyIndex, border, isBulkAction, itemBody, itemIndex, lefts, setSelectedCheckbox, stickyColumnNumber, thBody, thBodyComponent, thBodyFilter, thHeaderVertical, selectedCheckbox, }) => {
/**
* Kiểm tra có phải đang lấy dữ liệu bên trong 1 object khác hay không
* @param value
*/
var _a, _b, _c, _d, _e;
const nestedSplit = (value) => value === null || value === void 0 ? void 0 : value.split('.');
const dataNestedSplit = nestedSplit(thBody[bodyIndex]);
/**
* Lấy value bên trong 1 object khác, hoặc lấy giá trị theo index mặc định
* ví dụ: customer.name hoặc customer.address.name
*/
const renderValue = () => {
var _a, _b, _c, _d, _e, _f;
const splitSize = dataNestedSplit === null || dataNestedSplit === void 0 ? void 0 : dataNestedSplit.length;
let value = '';
switch (splitSize) {
case 1:
value = itemBody[thBody[bodyIndex]]; // itemBody[0], itemBody[1], itemBody[2], lấy value theo index của object javascript
break;
case 2:
value = (_a = itemBody[dataNestedSplit[0]]) === null || _a === void 0 ? void 0 : _a[dataNestedSplit[1]];
break;
case 3:
value = (_c = (_b = itemBody[dataNestedSplit[0]]) === null || _b === void 0 ? void 0 : _b[dataNestedSplit[1]]) === null || _c === void 0 ? void 0 : _c[dataNestedSplit[2]];
break;
case 4:
value = (_f = (_e = (_d = itemBody[dataNestedSplit[0]]) === null || _d === void 0 ? void 0 : _d[dataNestedSplit[1]]) === null || _e === void 0 ? void 0 : _e[dataNestedSplit[2]]) === null || _f === void 0 ? void 0 : _f[dataNestedSplit[3]];
break;
default:
break;
}
return {
value: thBodyFilter ? thBodyFilter(value) : value,
thBodyKey: thBody[bodyIndex], // trả về vị trí của index ví dụ 0, 1, 2
};
};
const { thBodyKey, value } = renderValue();
// Body component là 1 function hoặc là 1 value, nó sẽ là 1 function để callback ra ngoài để customize lại lớp render
// thBodyComponent = value
// thBodyComponent[thBodyKey] = function(param1, param2)
const isFunctionRender = thBodyComponent ? thBodyComponent[thBodyKey] : undefined;
/**
* Kiểu render theo function đươợc truyền từ prod vào
* @param funcCallback
* @param value
* @param itemBody
*/
const handleChangeBulkCheckbox = (index, checked) => {
setSelectedCheckbox((prev) => {
var _a;
if ((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.isDisable) {
return prev;
}
return {
...prev,
[index]: {
...prev[index],
checked,
},
};
});
};
const isRenderColumnInRow = (funcCallback, { itemBody, value }, bodyIndex) => {
if (!Array.isArray(value)) {
return (React.createElement("td", { className: classNames('min-w-12 whitespace-nowrap border-t px-3 py-2 text-xs text-gray-900', border && 'border-l', stickyColumnNumber &&
bodyIndex - 1 < stickyColumnNumber &&
'sticky top-0 bg-white shadow-[8px_0_6px_0_rgba(0,0,0,0.08)]'), style: stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber ? { left: lefts[bodyIndex - 1] } : {} }, funcCallback(value, itemBody)));
}
return funcCallback(value, itemBody); // Trường hợp trả về nhiều <td>
};
return (React.createElement(React.Fragment, null,
bodyIndex === 1 ? (React.createElement(React.Fragment, null,
thHeaderVertical && ((_a = thHeaderVertical[itemIndex]) === null || _a === void 0 ? void 0 : _a.parent_name) && (React.createElement("td", { className: classNames(stickyColumnNumber &&
thHeaderVertical &&
'sticky left-0 top-0 z-10 shadow-[8px_0_6px_0_rgba(0,0,0,0.08)]', 'whitespace-nowrap bg-white px-3 py-3 text-xs font-medium text-gray-900', '!border-r', 'relative top-0 before:absolute before:left-0 before:h-px before:w-full before:bg-gray-200 before:content-[""]', 'top-0 before:-top-[1px]'), rowSpan: (_b = thHeaderVertical[itemIndex]) === null || _b === void 0 ? void 0 : _b.parent_row, style: {
...(stickyColumnNumber && !thHeaderVertical ? { left: lefts[0] } : {}),
} }, (_c = thHeaderVertical[itemIndex]) === null || _c === void 0 ? void 0 : _c.parent_name)),
React.createElement("td", { className: classNames('w-12 whitespace-nowrap !border-t px-3 py-3 pr-3 text-xs font-medium text-gray-900', // Thêm !border-t để ưu tiên
border && 'border-l', stickyColumnNumber &&
!thHeaderVertical &&
'sticky left-0 top-0 z-20 bg-white shadow-[8px_0_6px_0_rgba(0,0,0,0.08)]'), style: stickyColumnNumber ? { left: lefts[0] } : {} }, isFunctionRender ? isFunctionRender(value, itemBody) : value))) : (React.createElement(React.Fragment, null)),
bodyIndex > 1 ? ((isBulkAction === null || isBulkAction === void 0 ? void 0 : isBulkAction.enable) && (itemBody === null || itemBody === void 0 ? void 0 : itemBody.isBulkCheckbox) ? (React.createElement("td", { className: classNames('whitespace-nowrap border-t px-3 py-3 pr-3 text-xs text-gray-900', border && 'border-l', stickyColumnNumber &&
bodyIndex - 1 < stickyColumnNumber &&
'sticky top-0 z-20 bg-white shadow-[8px_0_6px_0_rgba(0,0,0,0.08)]'), style: stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber ? { left: lefts[bodyIndex - 1] } : {} }, (isBulkAction === null || isBulkAction === void 0 ? void 0 : isBulkAction.enable) && (itemBody === null || itemBody === void 0 ? void 0 : itemBody.isBulkCheckbox) && stickyColumnNumber < bodyIndex && (React.createElement("div", { className: 'ml-4 py-1' },
React.createElement(PHXCheckbox, { checked: ((_d = selectedCheckbox[bodyIndex]) === null || _d === void 0 ? void 0 : _d.checked) || false, disabled: ((_e = selectedCheckbox[bodyIndex]) === null || _e === void 0 ? void 0 : _e.isDisable) || false, id: `bulk-checkbox-${bodyIndex}`, isLarge: isBulkAction === null || isBulkAction === void 0 ? void 0 : isBulkAction.isLarge, onChange: (e) => handleChangeBulkCheckbox(bodyIndex, e.target.checked) }))))) : isFunctionRender ? (isRenderColumnInRow(isFunctionRender, { value, itemBody }, bodyIndex)) : (React.createElement("td", { className: classNames('whitespace-nowrap border-t px-3 py-3 pr-3 text-xs text-gray-900', border && 'border-l', stickyColumnNumber &&
bodyIndex - 1 < stickyColumnNumber &&
'sticky top-0 z-20 bg-white shadow-[8px_0_6px_0_rgba(0,0,0,0.08)]'), style: stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber ? { left: lefts[bodyIndex - 1] } : {} }, value))) : (React.createElement(React.Fragment, null))));
};
//# sourceMappingURL=RowTable.js.map