phx-react
Version:
PHX REACT
45 lines • 3.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const utils_1 = require("../utils");
const types_1 = require("../../types");
const Checkbox_1 = require("../../Checkbox");
function RowMerge({ mergeConfig, keyIdx, dataIdx, bodyKey, data, thBodyComponent, className, readonly, isHighlight, highlightReadonly, selectedAllPeople, tableKey, brSetSelectedPeople, selectedPeople, border, }) {
const rowSpan = (0, utils_1.renderCell)(data, bodyKey, thBodyComponent).row;
const currentColumnKey = (0, utils_1.findColumnKeyMerge)(mergeConfig, keyIdx);
const renderInclude = (person) => {
return !!selectedPeople.find((select) => JSON.stringify(select) === JSON.stringify(person));
};
const [checked, setChecked] = (0, react_1.useState)(renderInclude(data));
(0, react_1.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_1.default.createElement(react_1.default.Fragment, null,
keyIdx === 0 && selectedAllPeople && selectedAllPeople.enable && (react_1.default.createElement("td", { key: keyIdx, className: (0, types_1.classNames)(border && 'border-r', dataIdx !== 0 && 'border-t', !isHighlight
? readonly
? ''
: rowSpan > 1
? 'bg-white'
: 'group-hover:bg-gray-50 group-hover:cursor-pointer'
: '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '', renderInclude(data) && !isHighlight && 'bg-gray-50') },
react_1.default.createElement("div", { className: 'flex justify-center items-center pl-3', onClick: (event) => event.stopPropagation() },
react_1.default.createElement(Checkbox_1.PHXCheckbox, { id: `${tableKey}-${dataIdx}`, checked: checked, onChange: (event) => handleChange(event) })))),
data[`${currentColumnKey}_first_row`] || !(0, utils_1.findColumnKeyMerge)(mergeConfig, keyIdx) ? (react_1.default.createElement("td", { key: keyIdx, rowSpan: rowSpan, className: (0, types_1.classNames)(className, !isHighlight
? readonly
? ''
: rowSpan > 1
? 'bg-white'
: 'group-hover:bg-gray-50 group-hover:cursor-pointer'
: '', isHighlight && !highlightReadonly ? 'group-hover:bg-gray-50 group-hover:cursor-pointer' : '', renderInclude(data) && !isHighlight && rowSpan === 1 && 'bg-gray-50') }, (0, utils_1.renderCell)(data, bodyKey, thBodyComponent).value)) : (react_1.default.createElement(react_1.default.Fragment, null))));
}
exports.default = RowMerge;
//# sourceMappingURL=RowMerge.js.map