phx-react
Version:
PHX REACT
143 lines • 10.7 kB
JavaScript
'use client';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { classNames } from '../types';
import { applyUrlQuery, buildHeaderRows, buildRowSpan, getMaxDepth, renderCell } from './utils';
import TableBodyRows from './component/TableBodyRows';
import Search from './component/Search';
import { PHXEmptyRecord } from '../EmptyRecord';
import { PHXSkeleton } from '../Skeleton';
import Pagination from './component/Pagination';
import Header from './component/Header';
import SelectedAction from '../TableV3/SelectedAction';
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import { PHXEmptySearch } from '../EmptySearch';
import { PHXUseDirectLink } from '../../hooks/direct-link';
export 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 = useRef();
/**
* Falls back to the shared direct-link hook when a router instance is not provided.
*
* @returns A direct-link navigation callback.
*/
const directLink = PHXUseDirectLink();
const [isSearch, setIsSearch] = useState(false);
const [selectedPeople, setSelectedPeople] = useState([]);
const [checked, setChecked] = useState(false);
const [indeterminate, setIndeterminate] = useState(false);
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [offset, setOffset] = useState(0);
const maxDepth = getMaxDepth(thHeader);
const rows = buildHeaderRows(thHeader, 0, [], maxDepth, 0);
const rowClassName = (keyIdx, dataIdx) => 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 = 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);
}
};
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]);
useEffect(() => {
if (onSelectionChange) {
onSelectionChange(selectedPeople);
}
}, [selectedPeople]);
useEffect(() => {
if (forceClearSelection) {
setSelectedPeople([]);
}
}, [forceClearSelection]);
useEffect(() => {
var _a;
if (isResetPagination) {
setCurrentPage(1);
setOffset(0);
if (pagination === null || pagination === void 0 ? void 0 : pagination.onChange) {
pagination.onChange(1);
}
if (configUrlApply) {
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.createElement(React.Fragment, null,
loading ? (React.createElement(PHXSkeleton, { type: 'table' })) : (React.createElement(React.Fragment, null, tableData.length > 0 || (tableData.length === 0 && isSearch) ? (React.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.createElement("div", { className: 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.createElement(Search, { 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.createElement("button", { className: 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.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })),
React.createElement("div", { className: 'absolute bottom-0 left-0 h-[1px] w-full bg-white' }))),
React.createElement("div", { className: 'flex flex-col' }, tableData.length > 0 ? (React.createElement("div", { className: 'overflow-x-auto' },
React.createElement("div", { className: classNames('overflow-auto ring-black ring-opacity-5', search && search.enable ? 'rounded-tl-none rounded-tr-none' : '') },
React.createElement(React.Fragment, null,
React.createElement("table", { className: 'min-w-full divide-y divide-gray-300' },
React.createElement("thead", null,
React.createElement(Header, { isHeaderBgWhite: isHeaderBgWhite, border: border, checkbox: checkbox, checked: checked, rows: rows, search: search, selectedAllPeople: selectedAllPeople, tableKey: tableKey, toggleAll: toggleAll, spacing: spacing, textCenter: textCenter })),
React.createElement("tbody", null,
React.createElement(TableBodyRows, { 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: buildRowSpan(tableData, mergeConfig), selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, spacing: spacing, tableKey: tableKey, textCenter: textCenter, thBody: thBody, thBodyComponent: thBodyComponent, toggleRowExpanded: toggleRowExpanded }))))))) : (React.createElement("div", { className: 'overflow-hidden rounded-lg' },
React.createElement(PHXEmptySearch, null)))),
tableData.length > 0 && pagination && (pagination === null || pagination === void 0 ? void 0 : pagination.enable) && (React.createElement(Pagination, { pagination: pagination, currentPage: currentPage, setCurrentPage: setCurrentPage, offset: offset, setOffset: setOffset, tableKey: tableKey, configUrlApply: configUrlApply })))) : (React.createElement("div", { className: 'overflow-hidden rounded-lg border' },
React.createElement(PHXEmptyRecord, null))))),
selectedAllPeople && selectedAllPeople.enable && (React.createElement(SelectedAction, { selectedBtn: selectedAllPeople.selectedAction.actions, selectedPeople: selectedPeople, slectedTitle: selectedAllPeople.selectedAction.label, toggleAll: toggleAll }))));
}
//# sourceMappingURL=TableReport.js.map