phx-react
Version:
PHX REACT
189 lines • 14 kB
JavaScript
/* eslint-disable prettier/prettier */
import React, { useEffect, useState } 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, brSetSelectedPeople, itemBody, // Là bản ghi record từng hàng
selectedAllPeople, selectedPeople, thBody, thBodyComponent, thBodyFilter, onChange, directDetail, numericalOrder, disableSpacing, border, isCenterText, stickyColumnNumber, lefts, stickyColumnNumberRight, rights, hidePagination, dataTableAggregate, itemIndex, tableKey, }) => {
var _a;
function renderInclude(person) {
return !!selectedPeople.find((select) => select.id === person.id);
// @ts-ignore
// return selectedPeople.includes(person)
}
function indexLeft() {
switch (true) {
case (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable:
return bodyIndex + 1;
case (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable):
return bodyIndex;
default:
return bodyIndex - 1;
}
}
const [checked, setChecked] = useState(renderInclude(itemBody));
useEffect(() => {
setChecked(renderInclude(itemBody));
}, [renderInclude(itemBody)]);
/**
* Kiểm tra có phải đang lấy dữ liệu bên trong 1 object khác hay không
* @param value
*/
const nestedSplit = (value) => 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.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;
const renderKey = () => itemBody[thBody[bodyIndex]];
/**
* Kiểu render theo function đươợc truyền từ prod vào
* @param funcCallback
* @param value
* @param itemBody
*/
const isRenderColumnInRow = (funcCallback, { value, itemBody }) => {
const isArray = Array.isArray(value);
if (!isArray) {
const result = funcCallback(value, itemBody);
return (React.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', !disableSpacing.disable ? 'pl-8' : 'px-0.5', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex ? 'pl-8' : 'px-0.5', border && (!stickyColumnNumber || bodyIndex - 1 > stickyColumnNumber) && 'border-l', ((stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)) &&
'z-20 sm:sticky sm:top-0 sm:bg-white', stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumberRight &&
stickyColumnNumberRight - 1 === thBody.length - 1 - bodyIndex &&
'sm:drop-shadow-[-4px_0_4px_rgba(0,0,0,0.1)]', hidePagination &&
itemIndex === dataTableAggregate - 1 &&
bodyIndex === thBody.length - 1 &&
'rounded-br-lg'), style: (stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)
? {
...(indexLeft() >= lefts.length
? { right: rights[thBody.length - 1 - bodyIndex] }
: { left: lefts[indexLeft()] }),
}
: {} },
stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && border ? (React.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (React.createElement(React.Fragment, null)),
result));
}
// Nếu là kiểu mảng thì return luôn function, vì trong function xử lý mảng bên ngoài phải trả về list <td>
return funcCallback(value, itemBody);
};
const handleChange = (e) => {
setChecked(e.target.checked);
brSetSelectedPeople(e.target.checked
? // @ts-ignore
[...selectedPeople, itemBody]
: selectedPeople.filter((p) => p.id !== itemBody.id));
if (onChange)
onChange(e.target.checked
? // @ts-ignore
[...selectedPeople, itemBody]
: selectedPeople.filter((p) => p.id !== itemBody.id));
};
const handleDirectDetail = (e, item) => {
if (directDetail && directDetail.enable) {
e.stopPropagation();
directDetail.onClick(item);
}
else {
return;
}
};
return (React.createElement(React.Fragment, null,
bodyIndex === 0 && selectedAllPeople && selectedAllPeople.enable ? (React.createElement("td", { className: classNames('w-16 px-8', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', stickyColumnNumber
? 'z-20 sm:sticky sm:left-0 sm:top-0 sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: 'relative', stickyColumnNumber && hidePagination && 'rounded-bl-lg'), style: stickyColumnNumber ? { left: lefts[0] } : {} },
React.createElement("label", { className: 'absolute left-6 -ml-2 -mt-4 p-2 hover:cursor-pointer sm:top-1/2', onClick: (e) => e.stopPropagation() },
React.createElement(PHXCheckbox, { id: `${tableKey}-value-${itemIndex + 1}`, checked: checked, className: `${(itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? 'hidden' : ''} mt-1`, disabled: itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school, onChange: (e) => handleChange(e), type: 'checkbox', value: renderKey() })))) : (React.createElement(React.Fragment, null)),
bodyIndex === 0 && numericalOrder && numericalOrder.enable && (React.createElement("td", { className: classNames((_a = numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.className) !== null && _a !== void 0 ? _a : 'w-[10ch] whitespace-nowrap text-xs text-gray-900', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', !numericalOrder.disableSpacing ? 'mx-auto w-[10ch] pl-8' : '', stickyColumnNumber || (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky)
? 'sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: '', (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && 'z-20 sm:sticky sm:left-0 sm:top-0', (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && hidePagination && 'rounded-bl-lg'), style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky)
? {
left: selectedAllPeople && selectedAllPeople.enable ? lefts[1] : lefts[0],
}
: {} },
React.createElement("div", { className: classNames(isCenterText ? 'flex items-center justify-center' : '') }, numericalOrder.order))),
bodyIndex === 1 ? (React.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', selectedAllPeople && selectedAllPeople.enable ? 'px-3' : '', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', directDetail && directDetail.enable ? 'cursor-pointer hover:underline' : '', !disableSpacing.disable ? 'w-12 px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8' : 'px-0.5', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex
? 'w-12 px-6 pl-8 pr-3 sm:w-16 sm:px-8'
: 'px-0.5', border && !stickyColumnNumber && 'border-l', stickyColumnNumber &&
'z-20 sm:sticky sm:left-0 sm:top-0 sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumber &&
hidePagination &&
itemIndex === dataTableAggregate - 1 &&
(!numericalOrder || !numericalOrder.enable) &&
(!selectedAllPeople || !selectedAllPeople.enable) &&
'rounded-bl-lg', hidePagination &&
itemIndex === dataTableAggregate - 1 &&
!(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.enable) &&
!(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) &&
'rounded-bl-lg'), onClick: (e) => handleDirectDetail(e, itemBody), style: stickyColumnNumber
? {
left: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable
? lefts[2]
: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable)
? lefts[1]
: lefts[0],
}
: {} },
stickyColumnNumber && border ? React.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' }) : React.createElement(React.Fragment, null),
isFunctionRender ? isFunctionRender(value, itemBody) : value)) : (React.createElement(React.Fragment, null)),
bodyIndex > 1 ? (isFunctionRender ? (isRenderColumnInRow(isFunctionRender, { value, itemBody })) : (React.createElement("td", { className: classNames('whitespace-nowrap text-xs text-gray-900', !disableSpacing.disable ? 'px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8' : 'px-0.5', checked && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) ? '!bg-gray-50' : '', disableSpacing.disable && (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) > bodyIndex
? 'px-6 py-3 pl-8 pr-3 sm:w-16 sm:px-8'
: 'px-0.5', border && (!stickyColumnNumber || bodyIndex - 1 > stickyColumnNumber) && 'border-l', ((stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)) &&
'z-20 sm:sticky sm:top-0 sm:bg-white', stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumberRight &&
stickyColumnNumberRight - 1 === thBody.length - 1 - bodyIndex &&
'sm:drop-shadow-[-4px_0_4px_rgba(0,0,0,0.1)]', hidePagination &&
itemIndex === dataTableAggregate - 1 &&
bodyIndex === thBody.length - 1 &&
'rounded-br-lg'), style: (stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thBody.length - 1 - bodyIndex)
? {
...(indexLeft() >= lefts.length
? { right: rights[thBody.length - 1 - bodyIndex] }
: { left: lefts[indexLeft()] }),
}
: {} },
stickyColumnNumber && bodyIndex - 1 < stickyColumnNumber && border ? (React.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (React.createElement(React.Fragment, null)),
value))) : (React.createElement(React.Fragment, null))));
};
//# sourceMappingURL=RowTable.js.map