phx-react
Version:
PHX REACT
60 lines • 7.1 kB
JavaScript
import React from 'react';
import { classNames } from '../types';
import { PHXCheckbox } from '../Checkbox';
function HeaderTable({ checkbox, checked, numericalOrder, selectedAllPeople, thHeader, toggleAll, disableSpacing, border, isCenterText, stickyColumnNumber, refs, lefts, selectedPeople, stickyColumnNumberRight, rights, refRights, search, tableKey, }) {
const spacingIndex = numericalOrder.enable && disableSpacing.disable ? (disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart) - 1 : disableSpacing === null || disableSpacing === void 0 ? void 0 : disableSpacing.indexStart;
const indexLeft = (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.createElement(React.Fragment, null,
React.createElement("tr", { className: 'bg-gray-50' },
selectedAllPeople && selectedAllPeople.enable ? (React.createElement("th", {
// @ts-ignore
ref: (el) => (refs.current[indexLeft(0, true, false)] = el), className: classNames('w-16 bg-gray-50 px-8 py-2.5', stickyColumnNumber ? 'relative z-10 sm:sticky sm:left-0 sm:top-0' : 'relative', (!search || !search.enable) && 'rounded-tl-lg'), scope: 'col', style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) ? { left: lefts[indexLeft(0, true, false)] } : {} },
React.createElement("label", { className: 'absolute left-6 top-1/2 -ml-2 -mt-4 p-2 hover:cursor-pointer' }, !selectedAllPeople.maxSelectedPeople && (React.createElement(PHXCheckbox, { inputRef: checkbox, checked: checked, className: 'mt-1', onChange: toggleAll, id: `${tableKey}-check-all` }))))) : null,
numericalOrder.enable && (React.createElement("th", { key: 'stt',
// @ts-ignore
ref: (el) => (refs.current[indexLeft(0, false, true)] = el), className: classNames('whitespace-nowrap bg-gray-50 text-xs font-medium text-gray-800', !(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.disableSpacing) ? 'min-w-[60px] py-2.5 pl-8' : '', isCenterText ? 'text-center align-middle' : 'text-left align-top', stickyColumnNumber && selectedPeople.length === 0 ? '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:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'
: '', !stickyColumnNumber && !(numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && (!search || !search.enable) && 'rounded-tl-lg'), style: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) ? { left: lefts[indexLeft(0, false, true)] } : {}, scope: 'col' }, numericalOrder.title)),
thHeader.map((item, index) => index === 0 ? (React.createElement("th", { key: index,
// @ts-ignore
ref: (el) => (refs.current[indexLeft(index, false, false)] = el), className: classNames('whitespace-nowrap bg-gray-50 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 ? 'z-10 sm:sticky sm:left-0 sm:top-0' : '', stickyColumnNumber === 1 ? '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.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (React.createElement(React.Fragment, null)),
React.createElement("p", { className: 'text-gray-800' }, item))) : (React.createElement("th", { key: index,
// @ts-ignore
ref: (el) => 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: classNames('whitespace-nowrap bg-gray-50 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 &&
'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)
? {
...(indexLeft(index, false, false) >= lefts.length
? { right: rights[thHeader.length - 1 - index] }
: { left: lefts[indexLeft(index, false, false)] }),
}
: {} },
stickyColumnNumber && index < stickyColumnNumber && border ? (React.createElement("div", { className: 'absolute -left-0 top-0 h-full w-[1px] bg-gray-300' })) : (React.createElement(React.Fragment, null)),
React.createElement("p", { className: 'text-gray-800' }, item)))))));
}
export default HeaderTable;
//# sourceMappingURL=HeaderTable.js.map