next-recomponents 2.0.30 → 2.0.31

package/src/table/index.tsx

@@ -2,7 +2,7 @@
 
 import { DataGrid, GridRowModel, GridValidRowModel } from "@mui/x-data-grid";
 import { Box, Dialog } from "@mui/material";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import useExcel from "../use-excel";
 import Button from "../button";
 import regularExpresions from "../regular-expresions";
@@ -26,7 +26,6 @@ type GridDensity = "compact" | "standard" | "comfortable";
 
 interface TableProps {
   data: any;
-  /** Muestra un input de búsqueda general que filtra filas por palabras clave */
   searchable?: boolean;
   flex?: number;
   editableFields?: string[];
@@ -48,35 +47,9 @@ interface TableProps {
   className?: string;
   fontSize?: string;
   colSize?: Record<string, number>;
-  /**
-   * Alto fijo de fila en px.
-   * Si se omite usa el default de MUI según `density`
-   * (compact ≈ 36, standard ≈ 52, comfortable ≈ 68).
-   * Se ignora automáticamente cuando `wrapText` es true.
-   */
   rowHeight?: number;
-  /**
-   * Cuando es true el texto largo hace wrap en lugar de truncarse,
-   * y el alto de cada fila crece para mostrar todo el contenido.
-   * Internamente activa `getRowHeight={() => "auto"}` en el DataGrid.
-   */
   wrapText?: boolean;
-  /**
-   * Densidad visual de la tabla.
-   * Afecta el padding de celdas y encabezados independientemente
-   * del tamaño de fuente.
-   * - "compact"     → padding mínimo, tabla muy densa
-   * - "standard"    → (default) comportamiento por defecto de MUI
-   * - "comfortable" → padding generoso, fácil de leer
-   */
   density?: GridDensity;
-  /**
-   * Cuando es true, el alto del contenedor se ajusta automáticamente
-   * al contenido de la tabla, eliminando el scroll vertical.
-   * Compatible con `wrapText` (filas de alto variable) y con
-   * cualquier valor de `density`. Cuando está activo, las props
-   * `height` y `HEIGHT_MAP` se ignoran.
-   */
   autoHeight?: boolean;
   [key: string]: any;
 }
@@ -114,7 +87,7 @@ function EditIcon() {
   );
 }
 
-// ─── KeyValueTable (non-array data) ──────────────────────────────────────────
+// ─── KeyValueTable ────────────────────────────────────────────────────────────
 
 function KeyValueTable({ data }: { data: Record<string, any> }) {
   return (
@@ -139,7 +112,7 @@ function KeyValueTable({ data }: { data: Record<string, any> }) {
   );
 }
 
-// ─── CustomFooter ─────────────────────────────────────────────────────────────
+// ─── Footer ───────────────────────────────────────────────────────────────────
 
 const FOOTER_LABELS: Record<FooterAggregation, string> = {
   sum: "Suma",
@@ -160,6 +133,7 @@ function computeAggregation(
     return values.length
       ? values.reduce((acc, v) => acc + v, 0) / values.length
       : 0;
+
   return 0;
 }
 
@@ -171,21 +145,19 @@ function CustomFooter({
   footer: FooterType;
 }) {
   const entries = Object.entries(footer);
+
   if (!entries.length) return null;
 
   return (
     <div className="flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700">
       {entries.map(([key, type]) => {
         const value = computeAggregation(rows, key, type);
-        const formatted = value.toLocaleString("en-US", {
-          minimumFractionDigits: value % 1 !== 0 ? 2 : 0,
-          maximumFractionDigits: value % 1 !== 0 ? 2 : 0,
-        });
+
         return (
           <span key={key}>
             {FOOTER_LABELS[type]} de{" "}
             <span className="text-gray-900">{key}</span>:{" "}
-            <span className="text-blue-700">{formatted}</span>
+            <span className="text-blue-700">{value.toLocaleString()}</span>
           </span>
         );
       })}
@@ -193,31 +165,66 @@ function CustomFooter({
   );
 }
 
-// ─── ModalDialog ──────────────────────────────────────────────────────────────
+// ─── Modal ────────────────────────────────────────────────────────────────────
 
 interface ModalDialogProps {
   open: boolean;
   onClose: () => void;
   modal: React.ReactNode;
   selectedRow: GridValidRowModel | undefined;
+  onPrev: () => void;
+  onNext: () => void;
+  hasPrev: boolean;
+  hasNext: boolean;
 }
 
-function ModalDialog({ open, onClose, modal, selectedRow }: ModalDialogProps) {
+function ModalDialog({
+  open,
+  onClose,
+  modal,
+  selectedRow,
+  onPrev,
+  onNext,
+  hasPrev,
+  hasNext,
+}: ModalDialogProps) {
   return (
     <Dialog open={open} maxWidth="xl" fullWidth>
-      <div className="flex justify-end">
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="flex gap-2">
+          <button
+            disabled={!hasPrev}
+            onClick={onPrev}
+            className="px-4 py-2 rounded border bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+          >
+            ← Anterior
+          </button>
+
+          <button
+            disabled={!hasNext}
+            onClick={onNext}
+            className="px-4 py-2 rounded border bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+          >
+            Siguiente →
+          </button>
+        </div>
+
         <button
           onClick={onClose}
-          className=" font-bold p-1 m-5 w-[30px] h-[30px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white"
+          className="font-bold w-[35px] h-[35px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white"
         >
           &times;
         </button>
       </div>
+
       <div className="mt-4 m-auto p-5">
         {selectedRow &&
           React.cloneElement(
             modal as React.ReactElement,
-            { row: selectedRow, hide: onClose } as any,
+            {
+              row: selectedRow,
+              hide: onClose,
+            } as any,
           )}
       </div>
     </Dialog>
@@ -226,21 +233,7 @@ function ModalDialog({ open, onClose, modal, selectedRow }: ModalDialogProps) {
 
 // ─── Toolbar ──────────────────────────────────────────────────────────────────
 
-interface ToolbarProps {
-  exportName?: string;
-  onSave?: (data: GridValidRowModel[]) => void;
-  onSelect?: (data: GridValidRowModel[]) => void;
-  rows: GridValidRowModel[];
-  filteredRows: GridValidRowModel[];
-}
-
-function Toolbar({
-  exportName,
-  onSave,
-  onSelect,
-  rows,
-  filteredRows,
-}: ToolbarProps) {
+function Toolbar({ exportName, onSave, onSelect, rows, filteredRows }: any) {
   const excel = useExcel();
 
   const stripMeta = (r: GridValidRowModel) => {
@@ -251,7 +244,7 @@ function Toolbar({
   if (!exportName && !onSave && !onSelect) return null;
 
   return (
-    <div className="flex gap-2  p-2 text-xs">
+    <div className="flex gap-2 p-2 text-xs">
       {exportName && (
         <Button
           className="bg-green-800 text-white"
@@ -262,6 +255,7 @@ function Toolbar({
           Exportar
         </Button>
       )}
+
       {onSelect ? (
         <Button
           disabled={filteredRows.length === 0}
@@ -279,158 +273,7 @@ function Toolbar({
   );
 }
 
-// ─── useColumns ───────────────────────────────────────────────────────────────
-
-function useColumns(
-  rows: GridValidRowModel[],
-  currentCoin: string,
-  options: {
-    flex: number;
-    editableFields?: string[];
-    buttons?: Record<string, any>;
-    hideColumns: string[];
-    modal?: React.ReactNode;
-    wrapText?: boolean;
-    handleRowUpdate: (row: GridRowModel) => GridRowModel;
-    onModalOpen: (row: GridValidRowModel) => void;
-  },
-  colSize?: Record<string, number>,
-) {
-  const {
-    flex,
-    editableFields,
-    buttons,
-    hideColumns,
-    modal,
-    wrapText,
-    handleRowUpdate,
-    onModalOpen,
-  } = options;
-
-  return useMemo(() => {
-    if (!rows.length) return [];
-
-    const cols = Object.keys(rows[0])
-      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key))
-      .map((key) => ({
-        field: key,
-        headerName: key,
-        valueFormatter: (value: any) => {
-          if (value == null || value === "") return "";
-          const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
-          if (`${value}`.match(isDate)) {
-            return value
-              .toString()
-              .split("T")[0]
-              .split("-")
-              .reverse()
-              .join("/");
-          }
-
-          const splited = `${value}`.split(".");
-          const hasDecimals =
-            splited.length == 2 &&
-            splited.every((v: any) => `${v}`.match(regularExpresions.number));
-
-          if (hasDecimals) {
-            return [
-              currentCoin,
-              (+`${value}`).toLocaleString("en-US", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-              }),
-            ].join(" ");
-          }
-
-          const isNumber = typeof value === "number";
-
-          if (isNumber) {
-            if (isNaN(value)) return value;
-            return value;
-          }
-
-          return value;
-        },
-        flex: key == "id" ? false : !colSize?.[key],
-        width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
-        editable: editableFields?.includes(key) ?? false,
-        type: typeof rows[0][key] === "number" ? "number" : "string",
-        // When wrapText is enabled, allow cells to grow vertically
-        ...(wrapText && {
-          renderHeader: (params: any) => (
-            <span
-              style={{
-                whiteSpace: "normal",
-                lineHeight: 1.3,
-                wordBreak: "break-word",
-              }}
-            >
-              {params.colDef.headerName}
-            </span>
-          ),
-        }),
-        renderCell: buttons?.[key]
-          ? (params: any) => {
-              const children =
-                buttons?.[key]?.type == "input" ? null : params?.row?.[key];
-
-              return React.cloneElement(buttons[key], {
-                className: `${params?.className ?? ""} m-auto text-xs`,
-                children,
-                row: params?.row,
-                onClick: async (e: TableButtonProps) => {
-                  e.row = params?.row;
-                  if (buttons[key]?.props?.onClick) {
-                    const newVal = await buttons[key].props.onClick(e);
-
-                    if (newVal) handleRowUpdate({ ...e.row, newVal });
-                  }
-                },
-              });
-            }
-          : wrapText
-            ? (params: any) => (
-                // Plain cell with wrap — no custom button
-                <span
-                  style={{
-                    whiteSpace: "normal",
-                    wordBreak: "break-word",
-                    lineHeight: 1.4,
-                    padding: "6px 0",
-                    display: "block",
-                  }}
-                >
-                  {params.formattedValue ?? params.value}
-                </span>
-              )
-            : null,
-      }));
-
-    if (modal) {
-      cols.unshift({
-        field: "Modal",
-        headerName: "Modal",
-        editable: false,
-        type: "string",
-        width: 10,
-        renderCell: (params: any) =>
-          (
-            <Button
-              className="text-xs"
-              onClick={() => onModalOpen(params.row)}
-              icon={<EditIcon />}
-            >
-              {params?.row?.["Modal"]}
-            </Button>
-          ) as any,
-      } as any);
-    }
-
-    return cols;
-  }, [rows, wrapText]);
-}
-
-// ─── SearchBar ────────────────────────────────────────────────────────────────
+// ─── Search ───────────────────────────────────────────────────────────────────
 
 function SearchBar({
   value,
@@ -441,50 +284,32 @@ function SearchBar({
 }) {
   return (
     <div className="flex items-center gap-2 px-2 pb-1">
-      <svg
-        className="text-gray-400 shrink-0"
-        width="14"
-        height="14"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fillRule="evenodd"
-          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          clipRule="evenodd"
-        />
-      </svg>
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder="Buscar…"
-        className="w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition"
+        className="w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1"
       />
-      {value && (
-        <button
-          onClick={() => onChange("")}
-          className="text-gray-400 hover:text-gray-600 text-sm leading-none"
-          title="Limpiar búsqueda"
-        >
-          &times;
-        </button>
-      )}
     </div>
   );
 }
 
-/** Devuelve true si la fila contiene TODAS las palabras del query */
 function rowMatchesSearch(row: GridValidRowModel, query: string): boolean {
   if (!query.trim()) return true;
+
   const words = query.trim().toLowerCase().split(/\s+/);
+
   const rowText = Object.values(row)
     .filter((v) => v != null && v !== "")
     .join(" ")
     .toLowerCase();
+
   return words.every((word) => rowText.includes(word));
 }
 
+// ─── Main Table ───────────────────────────────────────────────────────────────
+
 function IHTable({
   data,
   flex = 1,
@@ -510,108 +335,203 @@ function IHTable({
   searchable = false,
   autoHeight = false,
 }: TableProps) {
-  if (modal && onSelect)
-    throw new Error("Solo se puede usar modal o onSelect por separado");
-
   const [open, setOpen] = useState(false);
+
   const [rows, setRows] = useState<GridValidRowModel[]>(data);
+
+  const [modalIndex, setModalIndex] = useState<number | null>(null);
+
   const [selectedRows, setSelectedRows] = useState<any>({
     type: "include",
     ids: new Set(),
   });
-  const [modalRow, setModalRow] = useState<GridValidRowModel | undefined>();
-  const [searchQuery, setSearchQuery] = useState("");
 
-  // Inject Modal button key if modal is provided
-  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     setRows(data);
   }, [data]);
 
+  const filteredRows = useMemo(() => {
+    if (selectedRows?.type === "exclude") {
+      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
+    }
+
+    if (selectedRows?.type === "include") {
+      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
+    }
+
+    return [];
+  }, [selectedRows, rows]);
+
+  const displayRows = useMemo(
+    () =>
+      searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable],
+  );
+
+  const modalRow = modalIndex != null ? displayRows[modalIndex] : undefined;
+
   const handleModalOpen = (row: GridValidRowModel) => {
-    setModalRow(row);
+    const index = displayRows.findIndex((r) => r.id === row.id);
+
+    if (index === -1) return;
+
+    setModalIndex(index);
     setOpen(true);
   };
+
   const handleClose = async () => {
-    const pass = onCloseModal ? await onCloseModal?.(modalRow) : true;
+    const pass = onCloseModal ? await onCloseModal(modalRow) : true;
 
     if (!pass) return;
+
     setOpen(false);
-    setModalRow(undefined);
+    setModalIndex(null);
+  };
+
+  const handlePrevRow = () => {
+    setModalIndex((prev) => {
+      if (prev == null) return prev;
+      return Math.max(prev - 1, 0);
+    });
+  };
+
+  const handleNextRow = () => {
+    setModalIndex((prev) => {
+      if (prev == null) return prev;
+      return Math.min(prev + 1, displayRows.length - 1);
+    });
   };
 
   const handleRowUpdate = (newRow: GridRowModel) => {
     if (!newRow.id) throw new Error("Fila sin id");
-    const updated = { ...newRow, _edited: true } as any;
+
+    const updated: any = { ...newRow, _edited: true };
+
     setRows((prev) =>
       prev.map((row) => (row.id === updated.id ? updated : row)),
     );
+
     return updated;
   };
 
-  const filteredRows = useMemo(() => {
-    if (selectedRows?.type === "exclude") {
-      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
-    }
-    if (selectedRows?.type === "include") {
-      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
-    }
-    return [];
-  }, [selectedRows, rows]);
+  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
 
-  // Rows after applying the search filter (only when searchable is enabled)
-  const displayRows = useMemo(
-    () =>
-      searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
-    [rows, searchQuery, searchable],
-  );
+  const columns = useMemo(() => {
+    if (!displayRows.length) return [];
 
-  const columns = useColumns(
-    displayRows,
-    currentCoin,
-    {
-      flex,
-      editableFields,
-      buttons: resolvedButtons,
-      hideColumns,
-      modal,
-      wrapText,
-      handleRowUpdate,
-      onModalOpen: handleModalOpen,
-    },
-    colSize,
-  );
+    const cols = Object.keys(displayRows[0])
+      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key))
+      .map((key) => ({
+        field: key,
+        headerName: key,
+        flex: key == "id" ? false : !colSize?.[key],
+        width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
+        editable: editableFields?.includes(key) ?? false,
+        type: typeof displayRows[0][key] === "number" ? "number" : "string",
+
+        valueFormatter: (value: any) => {
+          if (value == null || value === "") return "";
+
+          const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
+
+          if (`${value}`.match(isDate)) {
+            return value
+              .toString()
+              .split("T")[0]
+              .split("-")
+              .reverse()
+              .join("/");
+          }
+
+          const splited = `${value}`.split(".");
+
+          const hasDecimals =
+            splited.length == 2 &&
+            splited.every((v: any) => `${v}`.match(regularExpresions.number));
+
+          if (hasDecimals) {
+            return [
+              currentCoin,
+              (+`${value}`).toLocaleString("en-US", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }),
+            ].join(" ");
+          }
+
+          return value;
+        },
+
+        renderCell: resolvedButtons?.[key]
+          ? (params: any) => {
+              const children =
+                resolvedButtons?.[key]?.type == "input"
+                  ? null
+                  : params?.row?.[key];
+
+              return React.cloneElement(resolvedButtons[key], {
+                className: `${params?.className ?? ""} m-auto text-xs`,
+                children,
+                row: params?.row,
+
+                onClick: async (e: TableButtonProps) => {
+                  e.row = params?.row;
+
+                  if (resolvedButtons[key]?.props?.onClick) {
+                    const newVal = await resolvedButtons[key].props.onClick(e);
+
+                    if (newVal) {
+                      handleRowUpdate({ ...e.row, newVal });
+                    }
+                  }
+                },
+              });
+            }
+          : null,
+      }));
+
+    if (modal) {
+      cols.unshift({
+        field: "Modal",
+        headerName: "Modal",
+        width: 100,
+
+        renderCell: (params: any) => (
+          <Button
+            className="text-xs"
+            onClick={() => handleModalOpen(params.row)}
+            icon={<EditIcon />}
+          >
+            Abrir
+          </Button>
+        ),
+      } as any);
+    }
+
+    return cols;
+  }, [displayRows]);
 
   if (!rows.length) return null;
 
-  // ─── Row height props ──────────────────────────────────────────────────────
-  // Priority: wrapText always wins (variable row height).
-  // autoHeight delegates height control to MUI; rowHeight prop is still
-  // respected when neither wrapText nor autoHeight forces auto sizing.
   const rowHeightProps = wrapText
     ? { getRowHeight: () => "auto" as const }
     : rowHeight != null
       ? { rowHeight }
       : {};
 
-  // ─── Container height ──────────────────────────────────────────────────────
-  // When autoHeight is active the Box must NOT constrain the height so that
-  // MUI's own autoHeight can expand the grid to fit all rows without scroll.
-  // We still honour HEIGHT_MAP for small datasets when autoHeight is off,
-  // falling back to the explicit `height` prop for larger ones.
   const containerHeight = autoHeight
-    ? undefined // let MUI decide
+    ? undefined
     : (HEIGHT_MAP[displayRows.length] ?? height);
 
-  // Whether to hide MUI's built-in pagination footer.
-  // With autoHeight all rows are visible, so pagination is never needed.
   const hideFooter =
     autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
 
   return (
     <div className="m-2">
-      {header && <div className="font-bold  p-2 ">{header}</div>}
+      {header && <div className="font-bold p-2">{header}</div>}
+
       <div className="flex justify-between">
         <Toolbar
           exportName={exportName}
@@ -620,6 +540,7 @@ function IHTable({
           rows={rows}
           filteredRows={filteredRows}
         />
+
         {searchable && (
           <SearchBar value={searchQuery} onChange={setSearchQuery} />
         )}
@@ -629,10 +550,8 @@ function IHTable({
         sx={{
           display: "flex",
           flexDirection: "column",
-          // undefined height lets the child DataGrid size itself freely
           height: containerHeight,
           width,
-          zIndex: 999999999,
         }}
       >
         {modal && (
@@ -641,6 +560,10 @@ function IHTable({
             onClose={handleClose}
             modal={modal}
             selectedRow={modalRow}
+            onPrev={handlePrevRow}
+            onNext={handleNextRow}
+            hasPrev={(modalIndex ?? 0) > 0}
+            hasNext={(modalIndex ?? -1) < displayRows.length - 1}
           />
         )}
 
@@ -649,8 +572,6 @@ function IHTable({
           rows={displayRows}
           columns={columns as any}
           density={density}
-          // MUI's native autoHeight prop — renders all rows and sizes the
-          // grid to fit them, regardless of density or wrapText.
           autoHeight={autoHeight}
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
@@ -658,37 +579,19 @@ function IHTable({
           {...rowHeightProps}
           sx={{
             fontSize,
+
             "& .MuiDataGrid-cell": {
               fontSize,
-              // Allow cells to wrap text when wrapText is enabled
-              ...(wrapText && {
-                alignItems: "flex-start",
-                paddingTop: "8px",
-                paddingBottom: "8px",
-                whiteSpace: "normal",
-                wordBreak: "break-word",
-              }),
             },
+
             "& .MuiDataGrid-columnHeader": {
               fontSize,
-              ...(wrapText && {
-                whiteSpace: "normal",
-                "& .MuiDataGrid-columnHeaderTitle": {
-                  whiteSpace: "normal",
-                  lineHeight: 1.3,
-                  wordBreak: "break-word",
-                },
-              }),
             },
+
             "& .MuiDataGrid-cell--editable": {
               backgroundColor: "#c6d8f0",
               fontWeight: 500,
             },
-            ...(displayRows.length <= Object.keys(HEIGHT_MAP).length && {
-              "& .MuiDataGrid-filler": {
-                display: "none",
-              },
-            }),
           }}
           editMode="row"
           processRowUpdate={handleRowUpdate}
@@ -696,16 +599,18 @@ function IHTable({
           hideFooter={hideFooter}
         />
       </Box>
+
       <CustomFooter footer={footer} rows={displayRows} />
     </div>
   );
 }
 
-// ─── Public export ────────────────────────────────────────────────────────────
+// ─── Export ───────────────────────────────────────────────────────────────────
 
 export default function Table(props: TableProps) {
   if (Array.isArray(props.data)) {
     return <IHTable {...props} />;
   }
+
   return <KeyValueTable data={props.data} />;
 }