seti-ramesesv1
Version:
Reusable components and context for Next.js apps
54 lines (51 loc) • 6.18 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React__default from 'react';
import '../../ui/Button/Button.module.css.js';
import '../../../styles/Checkbox.module.css.js';
import '../../../styles/Text.module.css.js';
import '../../../styles/Modal.module.css.js';
import '../../../styles/Panel.module.css.js';
import '../../../styles/Radio.module.css.js';
import '../RadioGroup.js';
import '../../ui/Select/Select.module.css.js';
import Tooltip from '../../ui/Tooltip.js';
import ListFilter from '../../../node_modules/lucide-react/dist/esm/icons/list-filter.js';
import ChevronLeft from '../../../node_modules/lucide-react/dist/esm/icons/chevron-left.js';
import ChevronDown from '../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
/**
* Helper to get nested value by path, e.g., "user.name.first"
*/
const getNestedValue = (obj, path) => path.split(".").reduce((acc, part) => acc?.[part], obj);
const DataListBody = ({ items, visibleCols, showActions, allRowActions, dropdown, expandedRowIndex, setExpandedRowIndex, loading, limit, emptyState, openItem, }) => {
// Slice the items to current page limit
const displayedItems = items.slice(0, limit);
// Calculate empty rows to keep table height consistent
const emptyRows = limit - displayedItems.length;
return (jsx("tbody", { children: loading ? (Array.from({ length: limit }).map((_, idx) => (jsxs("tr", { className: "h-10", children: [visibleCols.map((col) => (jsx("td", { className: "px-4 py-3 align-middle", children: jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse" }) }, col.id))), showActions && (jsx("td", { className: "px-4 py-3 align-middle", children: jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse" }) })), dropdown && (jsx("td", { className: "px-4 py-3 align-middle", children: jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse" }) }))] }, idx)))) : visibleCols.length === 0 ? (
/* 🟥 No columns selected */
jsx("tr", { children: jsxs("td", { colSpan: (showActions ? 1 : 0) + (dropdown ? 1 : 0) + 1, className: "text-center py-10 text-gray-500", children: [jsx("p", { className: "font-semibold text-gray-600", children: "No columns selected" }), jsxs("p", { className: "text-sm", children: ["Please use the", " ", jsxs("span", { className: "inline-flex items-center text-blue-600 font-medium", children: [jsx(ListFilter, { size: 14, className: "mr-1" }), " Columns"] }), " ", "menu to select which columns to show."] })] }) })) : displayedItems.length === 0 ? (
/* 🟧 Empty state — no data */
jsx("tr", { children: jsxs("td", { colSpan: visibleCols.length + (showActions ? 1 : 0) + (dropdown ? 1 : 0), className: "text-center py-8", children: [jsx("p", { className: "font-semibold", children: emptyState?.title ?? "No Data" }), jsx("p", { children: emptyState?.message ?? "Try adjusting filters or search." })] }) })) : (
/* 🟩 Render actual data rows */
jsxs(Fragment, { children: [displayedItems.map((item, idx) => {
const isExpanded = expandedRowIndex === idx;
return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: "h-10 hover:bg-blue-100", onClick: () => openItem?.(item), style: { cursor: openItem ? "pointer" : undefined }, children: [visibleCols.map((col) => {
const cellValue = col.render ? col.render(item) : getNestedValue(item, col.id) ?? "-";
return (jsx("td", { className: "px-4 py-3 align-middle border-b text-sm", style: {
width: col.width ? `${col.width}px` : "auto",
maxWidth: col.width ? `${col.width}px` : "none",
}, children: jsx("div", { className: "truncate overflow-hidden whitespace-nowrap", title: typeof cellValue === "string" || typeof cellValue === "number" ? String(cellValue) : undefined, children: cellValue }) }, col.id));
}), showActions && (jsx("td", { className: "px-4 py-3 align-middle whitespace-nowrap border-b", children: jsx("div", { className: "flex gap-1 justify-center", children: allRowActions
.filter((action) => !action.hidden?.(item))
.map((action) => (jsx(Tooltip, { content: action.name, position: "top", color: "dark", children: jsx("button", { type: "button", className: "p-1 rounded hover:bg-[#f0f0f0]", onClick: (e) => {
e.stopPropagation();
action.onClick?.(item);
}, children: React__default.isValidElement(action.icon) ? React__default.cloneElement(action.icon) : action.icon }) }, action.name))) }) })), dropdown && (jsx("td", { className: "px-4 py-3 align-middle", children: jsx("button", { type: "button", className: "p-1 rounded hover:bg-gray-100", onClick: (e) => {
e.stopPropagation();
setExpandedRowIndex(isExpanded ? null : idx);
}, children: isExpanded ? jsx(ChevronLeft, { size: 16 }) : jsx(ChevronDown, { size: 16 }) }) }))] }), dropdown && isExpanded && (jsx("tr", { className: "bg-gray-100", children: jsx("td", { colSpan: visibleCols.length + (showActions ? 1 : 0), className: "p-4", children: dropdown(item) }) }))] }, idx));
}), emptyRows > 0 &&
Array.from({ length: emptyRows }).map((_, idx) => (jsxs("tr", { className: "h-10", children: [visibleCols.map((col) => (jsx("td", { className: "px-4 py-3 align-middle border-b", children: jsx("div", { className: "h-6 bg-transparent" }) }, col.id))), showActions && jsx("td", { className: "px-4 py-3 border-b" }), dropdown && jsx("td", { className: "px-4 py-3 border-b" })] }, `empty-${idx}`)))] })) }));
};
export { DataListBody as default };
//# sourceMappingURL=DataListBody.js.map