phx-react
Version:
PHX REACT
147 lines • 11.6 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTableReport = PHXTableReport;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const types_1 = require("../types");
const utils_1 = require("./utils");
const TableBodyRows_1 = tslib_1.__importDefault(require("./component/TableBodyRows"));
const Search_1 = tslib_1.__importDefault(require("./component/Search"));
const EmptyRecord_1 = require("../EmptyRecord");
const Skeleton_1 = require("../Skeleton");
const Pagination_1 = tslib_1.__importDefault(require("./component/Pagination"));
const Header_1 = tslib_1.__importDefault(require("./component/Header"));
const SelectedAction_1 = tslib_1.__importDefault(require("../TableV3/SelectedAction"));
const solid_1 = require("@heroicons/react/24/solid");
const EmptySearch_1 = require("../EmptySearch");
const direct_link_1 = require("../../hooks/direct-link");
function PHXTableReport({ tableData, thHeader, thBody, thBodyComponent, mergeConfig = { isMergeRowData: false, columnPosition: [] }, rowHighlightConfig, search = {
enable: false,
loading: false,
}, loading, pagination, readonly = false, onClick, type = 'default', selectedAllPeople, tableKey = 'table-report', border = true, spacing = true, textCenter = true, isHeaderBgWhite = false, isResetPagination = false, configUrlApply, onSelectionChange, forceClearSelection = false, }) {
const checkbox = (0, react_1.useRef)();
/**
* Falls back to the shared direct-link hook when a router instance is not provided.
*
* @returns A direct-link navigation callback.
*/
const directLink = (0, direct_link_1.PHXUseDirectLink)();
const [isSearch, setIsSearch] = (0, react_1.useState)(false);
const [selectedPeople, setSelectedPeople] = (0, react_1.useState)([]);
const [checked, setChecked] = (0, react_1.useState)(false);
const [indeterminate, setIndeterminate] = (0, react_1.useState)(false);
const [expandedRowKeys, setExpandedRowKeys] = (0, react_1.useState)([]);
const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
const [offset, setOffset] = (0, react_1.useState)(0);
const maxDepth = (0, utils_1.getMaxDepth)(thHeader);
const rows = (0, utils_1.buildHeaderRows)(thHeader, 0, [], maxDepth, 0);
const rowClassName = (keyIdx, dataIdx) => (0, types_1.classNames)('text-xs whitespace-nowrap text-gray-900', textCenter ? 'text-center' : 'pl-8 text-left', spacing ? 'px-2 py-2.5' : '', keyIdx !== 0 && border && 'border-l', dataIdx !== 0 && 'border-t', dataIdx === tableData.length - 1 && keyIdx === 0 && !(pagination === null || pagination === void 0 ? void 0 : pagination.enable) && 'rounded-bl-lg', dataIdx === tableData.length - 1 && keyIdx === thBody.length - 1 && !(pagination === null || pagination === void 0 ? void 0 : pagination.enable) && 'rounded-br-lg');
const isHighLight = (data) => !!((rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.key) && data[rowHighlightConfig.key] === rowHighlightConfig.value);
/**
* Resolves a stable key for expansion state tracking.
*
* @param data - Current table row data.
* @param dataIdx - Current row index.
* @returns Stable row key.
*/
const getRowKey = (data, dataIdx) => String(data.id || data._id || data.key || `${tableKey}-${dataIdx}`);
/**
* Finds the first body column that declares child rows.
*
* @param data - Current table row data.
* @returns Child row configuration, or null when the row has no children.
*/
const getRowChildren = (data) => {
var _a;
for (const [columnIndex, bodyKey] of thBody.entries()) {
const children = (0, utils_1.renderCell)(data, bodyKey, thBodyComponent).children;
if (!((_a = children === null || children === void 0 ? void 0 : children.data) === null || _a === void 0 ? void 0 : _a.length)) {
continue;
}
return { columnIndex, children };
}
return null;
};
/**
* Toggles the expanded state for one table row.
*
* @param rowKey - Stable row key to toggle.
* @returns void.
*/
const toggleRowExpanded = (rowKey) => {
setExpandedRowKeys((current) => current.includes(rowKey) ? current.filter((item) => item !== rowKey) : [...current, rowKey]);
};
const handleClick = (data, isHighlightRow) => {
if (isHighlightRow && !(rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.readonly)) {
if (onClick) {
onClick(data);
}
}
if (!isHighlightRow && onClick && !readonly) {
onClick(data);
}
};
(0, react_1.useLayoutEffect)(() => {
const isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < tableData.length;
setChecked(selectedPeople.length === tableData.length && tableData.length > 0);
setIndeterminate(isIndeterminate);
if (checkbox.current) {
checkbox.current.indeterminate = isIndeterminate;
}
}, [selectedPeople, tableData.length]);
(0, react_1.useEffect)(() => {
if (onSelectionChange) {
onSelectionChange(selectedPeople);
}
}, [selectedPeople]);
(0, react_1.useEffect)(() => {
if (forceClearSelection) {
setSelectedPeople([]);
}
}, [forceClearSelection]);
(0, react_1.useEffect)(() => {
var _a;
if (isResetPagination) {
setCurrentPage(1);
setOffset(0);
if (pagination === null || pagination === void 0 ? void 0 : pagination.onChange) {
pagination.onChange(1);
}
if (configUrlApply) {
utils_1.applyUrlQuery.set(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
{ key: `pagi-${tableKey}`, value: '1' },
]);
}
}
}, [isResetPagination]);
const toggleAll = () => {
setSelectedPeople(checked || indeterminate ? [] : tableData);
setChecked(!checked && !indeterminate);
setIndeterminate(false);
};
const brSetSelectedPeople = (value) => {
const maxSelectedPeople = (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.maxSelectedPeople) || 0;
setSelectedPeople(maxSelectedPeople > 0 ? value.slice(-maxSelectedPeople) : value);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
loading ? (react_1.default.createElement(Skeleton_1.PHXSkeleton, { type: 'table' })) : (react_1.default.createElement(react_1.default.Fragment, null, tableData.length > 0 || (tableData.length === 0 && isSearch) ? (react_1.default.createElement("div", { className: 'overflow-hidden rounded-lg bg-white shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)] ring-1 ring-gray-300' },
search && search.enable && (react_1.default.createElement("div", { className: (0, types_1.classNames)('relative flex h-9 flex-row items-center rounded-tl-lg rounded-tr-lg px-3 ring-1 ring-gray-300', isSearch ? 'border-none' : 'justify-end', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
react_1.default.createElement(Search_1.default, { isSearch: isSearch, search: search, setIsSearch: setIsSearch, type: type, setCurrentPage: setCurrentPage, setOffset: setOffset, paginationChange: pagination === null || pagination === void 0 ? void 0 : pagination.onChange, tableKey: tableKey, configUrlApply: configUrlApply }),
react_1.default.createElement("button", { className: (0, types_1.classNames)('ml-1 flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:ml-0', isSearch ? 'pointer-events-none opacity-0' : 'opacity-100'), onClick: () => setIsSearch(true), type: 'button' },
react_1.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' })),
react_1.default.createElement("div", { className: 'absolute bottom-0 left-0 h-[1px] w-full bg-white' }))),
react_1.default.createElement("div", { className: 'flex flex-col' }, tableData.length > 0 ? (react_1.default.createElement("div", { className: 'overflow-x-auto' },
react_1.default.createElement("div", { className: (0, types_1.classNames)('overflow-auto ring-black ring-opacity-5', search && search.enable ? 'rounded-tl-none rounded-tr-none' : '') },
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("table", { className: 'min-w-full divide-y divide-gray-300' },
react_1.default.createElement("thead", null,
react_1.default.createElement(Header_1.default, { isHeaderBgWhite: isHeaderBgWhite, border: border, checkbox: checkbox, checked: checked, rows: rows, search: search, selectedAllPeople: selectedAllPeople, tableKey: tableKey, toggleAll: toggleAll, spacing: spacing, textCenter: textCenter })),
react_1.default.createElement("tbody", null,
react_1.default.createElement(TableBodyRows_1.default, { border: border, brSetSelectedPeople: brSetSelectedPeople, expandedRowKeys: expandedRowKeys, getRowChildren: getRowChildren, getRowKey: getRowKey, handleClick: handleClick, isHighLight: isHighLight, mergeConfig: mergeConfig, readonly: readonly, rowClassName: rowClassName, rowHighlightReadonly: !!(rowHighlightConfig === null || rowHighlightConfig === void 0 ? void 0 : rowHighlightConfig.readonly), rows: (0, utils_1.buildRowSpan)(tableData, mergeConfig), selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, spacing: spacing, tableKey: tableKey, textCenter: textCenter, thBody: thBody, thBodyComponent: thBodyComponent, toggleRowExpanded: toggleRowExpanded }))))))) : (react_1.default.createElement("div", { className: 'overflow-hidden rounded-lg' },
react_1.default.createElement(EmptySearch_1.PHXEmptySearch, null)))),
tableData.length > 0 && pagination && (pagination === null || pagination === void 0 ? void 0 : pagination.enable) && (react_1.default.createElement(Pagination_1.default, { pagination: pagination, currentPage: currentPage, setCurrentPage: setCurrentPage, offset: offset, setOffset: setOffset, tableKey: tableKey, configUrlApply: configUrlApply })))) : (react_1.default.createElement("div", { className: 'overflow-hidden rounded-lg border' },
react_1.default.createElement(EmptyRecord_1.PHXEmptyRecord, null))))),
selectedAllPeople && selectedAllPeople.enable && (react_1.default.createElement(SelectedAction_1.default, { selectedBtn: selectedAllPeople.selectedAction.actions, selectedPeople: selectedPeople, slectedTitle: selectedAllPeople.selectedAction.label, toggleAll: toggleAll }))));
}
//# sourceMappingURL=TableReport.js.map