phx-react
Version:
PHX REACT
36 lines • 3.03 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { renderCell } from '../utils';
import { classNames } from '../../types';
import { PHXCheckbox } from '../../Checkbox';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
import TruncatedTooltip from './TruncatedTooltip';
function Row({ keyIdx, dataIdx, data, bodyKey, thBodyComponent, className, readonly, isHighlight, highlightReadonly, selectedAllPeople, tableKey, brSetSelectedPeople, selectedPeople, border, expandable, }) {
const cellValue = renderCell(data, bodyKey, thBodyComponent).value;
const renderInclude = (person) => {
return !!selectedPeople.find((select) => JSON.stringify(select) === JSON.stringify(person));
};
const [checked, setChecked] = useState(renderInclude(data));
useEffect(() => {
setChecked(renderInclude(data));
}, [renderInclude(data)]);
const handleChange = (e) => {
const checked = e.target.checked;
setChecked(checked);
const valueSelected = checked
? [...selectedPeople, data]
: selectedPeople.filter((p) => JSON.stringify(p) !== JSON.stringify(data));
brSetSelectedPeople(valueSelected);
};
return (React.createElement(React.Fragment, null,
keyIdx === 0 && selectedAllPeople && selectedAllPeople.enable && (React.createElement("td", { key: keyIdx, className: classNames(border && 'border-r', dataIdx !== 0 && 'border-t', !isHighlight ? (readonly ? '' : 'group-hover:bg-gray-50 group-hover:cursor-pointer') : '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '') },
React.createElement("div", { className: 'flex justify-center items-center pl-3', onClick: (event) => event.stopPropagation() },
React.createElement(PHXCheckbox, { id: `${tableKey}-${dataIdx}`, checked: checked, onChange: (event) => handleChange(event) })))),
React.createElement("td", { key: keyIdx, className: classNames(className, !isHighlight ? (readonly ? '' : 'group-hover:bg-gray-50 group-hover:cursor-pointer') : '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '') }, (expandable === null || expandable === void 0 ? void 0 : expandable.enable) ? (React.createElement("div", { className: 'relative min-w-0' },
React.createElement("button", { "aria-label": expandable.isExpanded ? 'Collapse row' : 'Expand row', className: 'absolute -left-8 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded text-gray-700 hover:bg-gray-100', onClick: (event) => {
event.stopPropagation();
expandable.onToggle();
}, type: 'button' }, expandable.isExpanded ? React.createElement(ChevronUpIcon, { className: 'h-3 w-3' }) : React.createElement(ChevronDownIcon, { className: 'h-3 w-3' })),
React.createElement(TruncatedTooltip, null, cellValue))) : (cellValue))));
}
export default Row;
//# sourceMappingURL=Row.js.map