phx-react
Version:
PHX REACT
72 lines • 8.24 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
function HeaderTable(_a) {
var checkbox = _a.checkbox, checked = _a.checked, numericalOrder = _a.numericalOrder, selectedAllPeople = _a.selectedAllPeople, thHeader = _a.thHeader, toggleAll = _a.toggleAll, disableSpacing = _a.disableSpacing, border = _a.border, isCenterText = _a.isCenterText, stickyColumnNumber = _a.stickyColumnNumber, refs = _a.refs, lefts = _a.lefts, selectedPeople = _a.selectedPeople, stickyColumnNumberRight = _a.stickyColumnNumberRight, rights = _a.rights, refRights = _a.refRights, search = _a.search;
var spacingIndex = numericalOrder.enable && disableSpacing.disable ? (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) - 1 : disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart;
var indexLeft = function (index, isSelected, isNumerical) {
if (isSelected) {
return 0;
}
if (isNumerical && (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky)) {
return selectedAllPeople && selectedAllPeople.enable ? 1 : 0;
}
if ((numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable) {
return index + 2;
}
if ((numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable)) {
return index + 1;
}
return index;
};
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("tr", null,
selectedAllPeople && selectedAllPeople.enable ? (react_1["default"].createElement("th", {
// @ts-ignore
ref: function (el) { return (refs.current[indexLeft(0, true, false)] = el); }, className: (0, types_1.classNames)('w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', stickyColumnNumber && selectedPeople.length === 0
? 'relative z-10 bg-white sm:sticky sm:left-0 sm:top-0'
: 'relative'), scope: 'col', style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) ? { left: lefts[indexLeft(0, true, false)] } : {} },
react_1["default"].createElement("label", { className: 'absolute left-4 top-1/2 -ml-2 -mt-4 p-2 hover:cursor-pointer sm:left-6' }, !selectedAllPeople.maxSelectedPeople && (react_1["default"].createElement("input", { ref: checkbox, checked: checked, className: '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', onChange: toggleAll, type: 'checkbox' }))))) : null,
numericalOrder.enable && (react_1["default"].createElement("th", { key: 'stt',
// @ts-ignore
ref: function (el) { return (refs.current[indexLeft(0, false, true)] = el); }, className: (0, types_1.classNames)('whitespace-nowrap text-xs font-medium text-gray-800', !(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.disableSpacing) ? 'min-w-[135px] px-3 py-2.5 pl-8' : '', isCenterText ? 'text-center align-middle' : 'text-left align-top', stickyColumnNumber && selectedPeople.length === 0
? 'sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: '', (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedPeople.length === 0
? 'z-10 rounded-tl-lg sm:sticky sm:left-0 sm:top-0 sm:bg-white sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: '', !stickyColumnNumber && !(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && 'rounded-lg'), style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) ? { left: lefts[indexLeft(0, false, true)] } : {}, scope: 'col' }, numericalOrder.title)),
thHeader.map(function (item, index) {
return index === 0 ? (react_1["default"].createElement("th", { key: index,
// @ts-ignore
ref: function (el) { return (refs.current[indexLeft(index, false, false)] = el); }, className: (0, types_1.classNames)('whitespace-nowrap text-xs font-medium', (!search || !search.enable) &&
(!numericalOrder || !numericalOrder.enable) &&
(!selectedAllPeople || !selectedAllPeople.enable) &&
'rounded-tl-lg', selectedAllPeople && selectedAllPeople.enable ? 'pl-6 sm:pl-8' : '', !disableSpacing.disable ? 'min-w-[160px] px-3 py-2.5 pl-8' : '', disableSpacing.disable && spacingIndex > index ? 'min-w-[160px] px-3 py-2.5 pl-8' : '', numericalOrder && numericalOrder.enable && border && !stickyColumnNumber ? 'border-l' : '', isCenterText ? 'text-center align-middle' : 'text-left align-top', stickyColumnNumber && selectedPeople.length === 0
? 'z-10 sm:sticky sm:left-0 sm:top-0 sm:bg-white'
: '', stickyColumnNumber === 1 && selectedPeople.length === 0
? 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: ''), style: stickyColumnNumber ? { left: lefts[indexLeft(index, false, false)] } : {}, scope: 'col' },
stickyColumnNumber && border ? (react_1["default"].createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
react_1["default"].createElement("p", { className: 'text-gray-800' }, item))) : (react_1["default"].createElement("th", { key: index,
// @ts-ignore
ref: function (el) {
return indexLeft(index, false, false) >= lefts.length && thHeader.length - 1 - index < stickyColumnNumberRight
? (refRights.current[thHeader.length - 1 - index] = el)
: (refs.current[indexLeft(index, false, false)] = el);
}, className: (0, types_1.classNames)('whitespace-nowrap text-xs font-medium', index === thHeader.length - 1 && 'rounded-br-lg rounded-tr-lg', !disableSpacing.disable ? 'min-w-[135px] px-3 py-2.5 pl-8' : '', disableSpacing.disable && spacingIndex > index ? 'min-w-[135px] px-3 py-2.5 pl-8' : '', border && (!stickyColumnNumber || index > stickyColumnNumber) && 'border-l', isCenterText ? 'text-center align-middle' : 'text-left align-top', ((stickyColumnNumber && index < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thHeader.length - 1 - index)) &&
selectedPeople.length === 0 &&
'bg-white sm:sticky sm:left-0 sm:top-0', stickyColumnNumber && index < stickyColumnNumber && 'sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumberRight &&
stickyColumnNumberRight - 1 === thHeader.length - 1 - index &&
'sm:drop-shadow-[-4px_0_4px_rgba(0,0,0,0.1)]'), scope: 'col', style: (stickyColumnNumber && index < stickyColumnNumber) ||
(stickyColumnNumberRight && stickyColumnNumberRight > thHeader.length - 1 - index)
? tslib_1.__assign({}, (indexLeft(index, false, false) >= lefts.length
? { right: rights[thHeader.length - 1 - index] }
: { left: lefts[indexLeft(index, false, false)] })) : {} },
stickyColumnNumber && index < stickyColumnNumber && border ? (react_1["default"].createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (react_1["default"].createElement(react_1["default"].Fragment, null)),
react_1["default"].createElement("p", { className: 'text-gray-800' }, item)));
}))));
}
exports["default"] = HeaderTable;
//# sourceMappingURL=HeaderTable.js.map