phx-react
Version:
PHX REACT
117 lines • 7.35 kB
JavaScript
;
exports.__esModule = true;
exports.RowTable = void 0;
var tslib_1 = require("tslib");
/* eslint-disable prettier/prettier */
var react_1 = tslib_1.__importDefault(require("react"));
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
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
*/
var RowTable = function (_a) {
var bodyIndex = _a.bodyIndex, brSetSelectedPeople = _a.brSetSelectedPeople, itemBody = _a.itemBody, // Là bản ghi record từng hàng
selectedAllPeople = _a.selectedAllPeople, selectedPeople = _a.selectedPeople, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, onChange = _a.onChange, directDetail = _a.directDetail, numericalOrder = _a.numericalOrder;
function renderInclude(person) {
// @ts-ignore
return selectedPeople.includes(person);
}
/**
* 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 nestedSplit = function (value) { return value.split('.'); };
var 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
*/
var renderValue = function () {
var _a, _b, _c, _d, _e, _f;
var splitSize = dataNestedSplit.length;
var 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]
};
};
var _b = renderValue(), thBodyKey = _b.thBodyKey, value = _b.value;
// 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)
var isFunctionRender = thBodyComponent ? thBodyComponent[thBodyKey] : undefined;
var renderKey = function () { return itemBody[thBody[bodyIndex]]; };
/**
* Kiểu render theo function đươợc truyền từ prod vào
* @param funcCallback
* @param value
* @param itemBody
*/
var isRenderColumnInRow = function (funcCallback, _a) {
var value = _a.value, itemBody = _a.itemBody;
var isArray = Array.isArray(value);
if (!isArray) {
var result = funcCallback(value, itemBody);
return react_1["default"].createElement("td", { className: 'whitespace-nowrap pl-8 text-xs text-gray-900' }, 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);
};
var handleChange = function (e) {
brSetSelectedPeople(e.target.checked
? // @ts-ignore
tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedPeople, true), [itemBody], false) : selectedPeople.filter(function (p) { return p !== itemBody; }));
if (onChange)
onChange(e.target.checked
? // @ts-ignore
tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedPeople, true), [itemBody], false) : selectedPeople.filter(function (p) { return p !== itemBody; }));
};
var handleDirectDetail = function (e, item) {
if (directDetail && directDetail.enable) {
e.stopPropagation();
directDetail.onClick(item);
}
else {
return;
}
};
return (react_1["default"].createElement(react_1["default"].Fragment, null,
bodyIndex === 0 && selectedAllPeople && selectedAllPeople.enable ? (react_1["default"].createElement("td", { className: 'relative w-16 px-8' },
(itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school)
? !(itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school)
: renderInclude(itemBody) && react_1["default"].createElement("div", { className: 'absolute inset-y-0 left-0 w-0.5 bg-indigo-600' }),
react_1["default"].createElement("input", { checked: (itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? false : renderInclude(itemBody), className: "".concat((itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school) ? 'hidden' : '', " absolute left-4 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6"), disabled: itemBody === null || itemBody === void 0 ? void 0 : itemBody.entered_school, onChange: function (e) { return handleChange(e); }, onClick: function (e) { return e.stopPropagation(); }, type: 'checkbox', value: renderKey() }))) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
bodyIndex === 0 && numericalOrder && numericalOrder.enable && (react_1["default"].createElement("td", { className: 'w-[10ch] whitespace-nowrap rounded-lg pl-8 text-xs text-gray-900' }, numericalOrder.order)),
bodyIndex === 1 ? (react_1["default"].createElement("td", { className: classNames('w-12 whitespace-nowrap px-6 py-3 pr-3 text-xs font-medium text-gray-900 sm:w-16 sm:px-8 rounded-lg', selectedAllPeople && selectedAllPeople.enable ? 'px-3' : 'px-8', renderInclude(itemBody) ? 'text-indigo-600' : 'text-gray-900', directDetail && directDetail.enable ? 'hover:underline cursor-pointer' : ''), onClick: function (e) { return handleDirectDetail(e, itemBody); } }, isFunctionRender ? isFunctionRender(value, itemBody) : value)) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
bodyIndex > 1 ? (isFunctionRender ? (isRenderColumnInRow(isFunctionRender, { value: value, itemBody: itemBody })) : (react_1["default"].createElement("td", { className: 'whitespace-nowrap pl-8 text-xs text-gray-900 rounded-lg' }, value))) : (react_1["default"].createElement(react_1["default"].Fragment, null))));
};
exports.RowTable = RowTable;
//# sourceMappingURL=RowTable.js.map