next-recomponents 2.0.4 → 2.0.5

package/src/table/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { DataGrid, GridRowModel, GridValidRowModel } from "@mui/x-data-grid";
-import { Box } from "@mui/material";
+import { Box, Dialog } from "@mui/material";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import useExcel from "../use-excel";
 import Button from "../button";
-import { Dialog } from "@mui/material";
-import Pre from "src/pre";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
 
 export interface TableButtonProps extends React.MouseEvent<
   HTMLButtonElement,
@@ -15,8 +15,10 @@ export interface TableButtonProps extends React.MouseEvent<
   row: Record<string, any>;
 }
 
+type FooterAggregation = "sum" | "avg" | "count";
+
 interface FooterType {
-  [key: string]: "sum" | "avg" | "count";
+  [key: string]: FooterAggregation;
 }
 
 interface TableProps {
@@ -34,37 +36,24 @@ interface TableProps {
   hideColumns?: string[];
   footer?: FooterType;
   symbols?: any;
-
   [key: string]: any;
 }
-export default function Table(props: TableProps) {
-  if (Array.isArray(props.data)) {
-    return <IHTable {...props} />;
-  } else {
-    return (
-      <div className=" bg-white border shadow rounded p-1">
-        <table className="rounded">
-          <tbody>
-            {Object.keys(props.data).map((k) => (
-              <tr key={k} className="border-b ">
-                <th className="font-bold p-3 text-right">{k}</th>
-                <td
-                  className={
-                    typeof props.data[k] === "number"
-                      ? "text-right"
-                      : "text-center"
-                  }
-                >
-                  {props.data[k]}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
+
+// ─── Height mapping ───────────────────────────────────────────────────────────
+
+const HEIGHT_MAP: Record<number, number> = {
+  1: 150,
+  2: 200,
+  3: 250,
+  4: 310,
+  5: 360,
+  6: 410,
+  7: 460,
+  8: 510,
+};
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
 function EditIcon() {
   return (
     <svg
@@ -76,66 +65,221 @@ function EditIcon() {
       width="20px"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"></path>
+      <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" />
     </svg>
   );
 }
-function IHTable({
-  data,
-  flex = 1,
-  editableFields,
+
+// ─── KeyValueTable (non-array data) ──────────────────────────────────────────
+
+function KeyValueTable({ data }: { data: Record<string, any> }) {
+  return (
+    <div className="bg-white border shadow rounded p-1">
+      <table className="rounded">
+        <tbody>
+          {Object.keys(data).map((key) => (
+            <tr key={key} className="border-b">
+              <th className="font-bold p-3 text-right">{key}</th>
+              <td
+                className={
+                  typeof data[key] === "number" ? "text-right" : "text-center"
+                }
+              >
+                {data[key]}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── CustomFooter ─────────────────────────────────────────────────────────────
+
+const FOOTER_LABELS: Record<FooterAggregation, string> = {
+  sum: "Suma",
+  avg: "Promedio",
+  count: "Conteo",
+};
+
+function computeAggregation(
+  rows: GridValidRowModel[],
+  key: string,
+  type: FooterAggregation,
+): number {
+  const values = rows.map((r) => Number(r[key] ?? 0)).filter((v) => !isNaN(v));
+
+  if (type === "sum") return values.reduce((acc, v) => acc + v, 0);
+  if (type === "count") return values.length;
+  if (type === "avg")
+    return values.length
+      ? values.reduce((acc, v) => acc + v, 0) / values.length
+      : 0;
+  return 0;
+}
+
+function CustomFooter({
+  rows,
+  footer,
+}: {
+  rows: GridValidRowModel[];
+  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 =
+          type === "avg"
+            ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
+            : value.toLocaleString();
+        return (
+          <span key={key}>
+            {FOOTER_LABELS[type]} de{" "}
+            <span className="text-gray-900">{key}</span>:{" "}
+            <span className="text-blue-700">{formatted}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── ModalDialog ──────────────────────────────────────────────────────────────
+
+interface ModalDialogProps {
+  open: boolean;
+  onClose: () => void;
+  modal: React.ReactNode;
+  selectedRow: GridValidRowModel | undefined;
+}
+
+function ModalDialog({ open, onClose, modal, selectedRow }: ModalDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+      <div className="flex justify-end">
+        <button
+          onClick={onClose}
+          className="text-gray-500 hover:text-gray-800 text-xl font-bold p-5"
+        >
+          &times;
+        </button>
+      </div>
+      <div className="mt-4 m-auto p-5">
+        {selectedRow &&
+          React.cloneElement(
+            modal as React.ReactElement,
+            { row: selectedRow } as any,
+          )}
+      </div>
+    </Dialog>
+  );
+}
+
+// ─── Toolbar ──────────────────────────────────────────────────────────────────
+
+interface ToolbarProps {
+  exportName?: string;
+  onSave?: (data: GridValidRowModel[]) => void;
+  onSelect?: (data: GridValidRowModel[]) => void;
+  rows: GridValidRowModel[];
+  filteredRows: GridValidRowModel[];
+}
+
+function Toolbar({
+  exportName,
   onSave,
   onSelect,
-  buttons,
-  exportName,
-  modal,
-  height = 600,
-  width = "100%",
-  header,
-  hideColumns = [],
-  footer,
-}: TableProps) {
-  const [open, setOpen] = useState(false);
-  if (modal) {
-    buttons = { ...buttons, Modal: "" };
-  }
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => {
-    setOpen(false);
-    setSelectedRows({
-      type: "include",
-      ids: new Set(),
-    });
+  rows,
+  filteredRows,
+}: ToolbarProps) {
+  const excel = useExcel();
+
+  const stripMeta = (r: GridValidRowModel) => {
+    const { _edited, ...rest } = r;
+    return rest;
   };
 
-  const excel = useExcel();
-  const [rows, setRows] = useState<GridValidRowModel[]>(data);
-  const [selectedRows, setSelectedRows] = useState<any>();
-  useEffect(() => {
-    setRows(data);
-  }, [data]);
+  if (!exportName && !onSave && !onSelect) return null;
+
+  return (
+    <div className="flex gap-2 bg-gray-200 border shadow rounded p-2">
+      {exportName && (
+        <Button
+          className="bg-green-800 text-white"
+          onClick={() =>
+            excel.export(rows.map(stripMeta), `${exportName}.xlsx`)
+          }
+        >
+          Exportar
+        </Button>
+      )}
+      {onSelect ? (
+        <Button
+          disabled={filteredRows.length === 0}
+          color={filteredRows.length === 0 ? "white" : "primary"}
+          onClick={() => onSelect(filteredRows.map(stripMeta))}
+        >
+          Guardar Selección
+        </Button>
+      ) : (
+        onSave && (
+          <Button onClick={() => onSave(rows.map(stripMeta))}>Guardar</Button>
+        )
+      )}
+    </div>
+  );
+}
+
+// ─── useColumns ───────────────────────────────────────────────────────────────
+
+function useColumns(
+  rows: GridValidRowModel[],
+  options: {
+    flex: number;
+    editableFields?: string[];
+    buttons?: Record<string, any>;
+    hideColumns: string[];
+    modal?: React.ReactNode;
+    handleRowUpdate: (row: GridRowModel) => GridRowModel;
+    onModalOpen: (row: GridValidRowModel) => void;
+  },
+) {
+  const {
+    flex,
+    editableFields,
+    buttons,
+    hideColumns,
+    modal,
+    handleRowUpdate,
+    onModalOpen,
+  } = options;
 
-  const columns = useMemo(() => {
+  return useMemo(() => {
     if (!rows.length) return [];
 
-    const arr = Object.keys(rows[0])
+    const cols = Object.keys(rows[0])
       .filter((key) => !key.startsWith("_") && !hideColumns.includes(key))
-      .map((key, i) => ({
+      .map((key) => ({
         field: key,
         headerName: key,
         flex,
-        editable: editableFields?.includes(key),
+        editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: buttons?.[key]
           ? (params: any) =>
               React.cloneElement(buttons[key], {
-                className: (params?.className ?? "") + " m-auto text-xs ",
+                className: `${params?.className ?? ""} m-auto text-xs`,
                 children: params?.row?.[key],
                 onClick: (e: any) => {
                   e.row = params?.row;
                   if (buttons[key]?.props?.onClick) {
                     const newVal = buttons[key].props.onClick(e);
-                    newVal && handleRowUpdate(newVal);
+                    if (newVal) handleRowUpdate(newVal);
                   }
                 },
               })
@@ -143,7 +287,7 @@ function IHTable({
       }));
 
     if (modal) {
-      arr.unshift({
+      cols.unshift({
         field: "Modal",
         headerName: "Modal",
         flex,
@@ -153,9 +297,7 @@ function IHTable({
           (
             <Button
               className="text-xs"
-              onClick={() => {
-                handleOpen();
-              }}
+              onClick={() => onModalOpen(params.row)}
               icon={<EditIcon />}
             >
               {params?.row?.["Modal"]}
@@ -164,186 +306,151 @@ function IHTable({
       });
     }
 
-    return arr;
+    return cols;
   }, [rows]);
+}
 
-  const handleRowUpdate = (newRow: GridRowModel) => {
-    if (!newRow.id) throw new Error("Fila sin id");
-    newRow._edited = true;
-    setRows((prev) => prev.map((row) => (row.id === newRow.id ? newRow : row)));
-    return newRow;
+// ─── IHTable (array data) ─────────────────────────────────────────────────────
+
+function IHTable({
+  data,
+  flex = 1,
+  editableFields,
+  onSave,
+  onSelect,
+  buttons,
+  exportName,
+  modal,
+  height = 510,
+  width = "100%",
+  header,
+  hideColumns = [],
+  footer = {},
+}: 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 [selectedRows, setSelectedRows] = useState<any>({
+    type: "include",
+    ids: new Set(),
+  });
+  const [modalRow, setModalRow] = useState<GridValidRowModel | undefined>();
+
+  // Inject Modal button key if modal is provided
+  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
+
+  useEffect(() => {
+    setRows(data);
+  }, [data]);
+
+  const handleModalOpen = (row: GridValidRowModel) => {
+    setModalRow(row);
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setModalRow(undefined);
   };
 
-  const ref = useRef<HTMLDialogElement>(null);
-  const cat1: any = {
-    1: 110,
-    2: 160,
-    3: 215,
-    4: 266,
-    5: 316,
+  const handleRowUpdate = (newRow: GridRowModel) => {
+    if (!newRow.id) throw new Error("Fila sin id");
+    const updated = { ...newRow, _edited: true } as any;
+    setRows((prev) =>
+      prev.map((row) => (row.id === updated.id ? updated : row)),
+    );
+    return updated;
   };
 
-  const filtered = useMemo(() => {
-    let filtered: any[] = [];
-
-    if (selectedRows?.type == "exclude") {
-      filtered = rows.filter(
-        (r) => !Array.from(selectedRows.ids).includes(r.id),
-      );
-    } else if (selectedRows?.type == "include") {
-      filtered = rows.filter((r) =>
-        Array.from(selectedRows.ids).includes(r.id),
-      );
+  const filteredRows = useMemo(() => {
+    if (selectedRows?.type === "exclude") {
+      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
     }
-    return filtered;
-  }, [selectedRows]);
+    if (selectedRows?.type === "include") {
+      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
+    }
+    return [];
+  }, [selectedRows, rows]);
+
+  const columns = useColumns(rows, {
+    flex,
+    editableFields,
+    buttons: resolvedButtons,
+    hideColumns,
+    modal,
+    handleRowUpdate,
+    onModalOpen: handleModalOpen,
+  });
+
+  if (!rows.length) return null;
 
   return (
-    rows.length > 0 && (
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          height: cat1?.[height] || height,
-          width,
-          zIndex: 999999999,
-        }}
-      >
-        {modal && (
-          <Dialog open={open} onClose={handleClose} maxWidth="xl" fullWidth>
-            <div className="flex justify-end">
-              <button
-                onClick={() => {
-                  handleClose();
-                }}
-                className="text-gray-500 hover:text-gray-800 text-xl font-bold p-5"
-              >
-                &times;
-              </button>
-            </div>
-            <div className="mt-4 m-auto p-5">
-              {selectedRows &&
-                Array.from(selectedRows?.ids).length > 0 &&
-                React.cloneElement(modal as any, {
-                  row: rows.find((r) =>
-                    Array.from(selectedRows?.ids).includes(r.id),
-                  ),
-                })}
-            </div>
-          </Dialog>
-        )}
-        {header && (
-          <div className="font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded">
-            {header}
-          </div>
-        )}
-        {(exportName || onSave || onSelect) && (
-          <div className="flex gap-2 bg-gray-200 border shadow rounded p-2">
-            {exportName && (
-              <Button
-                className="bg-green-800 text-white"
-                onClick={(e) => {
-                  excel.export(
-                    rows.map(({ _edited, ...r }) => r),
-                    `${exportName}.xlsx`,
-                  );
-                }}
-              >
-                Exportar
-              </Button>
-            )}
-            {onSelect ? (
-              <Button
-                disabled={filtered.length == 0}
-                color={filtered.length == 0 ? "white" : "primary"}
-                onClick={(e) => {
-                  onSelect?.(filtered.map(({ _edited, ...r }) => r));
-                }}
-              >
-                Guardar Selección
-              </Button>
-            ) : (
-              onSave && (
-                <Button
-                  onClick={(e) => {
-                    onSave?.(rows.map(({ _edited, ...r }) => r));
-                  }}
-                >
-                  Guardar
-                </Button>
-              )
-            )}
-          </div>
-        )}
-
-        <DataGrid
-          rows={rows}
-          columns={columns as any}
-          checkboxSelection={Boolean(onSelect)}
-          rowSelectionModel={selectedRows}
-          onRowSelectionModelChange={(newSelection) => {
-            setSelectedRows(newSelection);
-          }}
-          sx={{
-            "& .MuiDataGrid-cell--editable": {
-              backgroundColor: "#c6d8f0",
-              fontWeight: 500,
-            },
-          }}
-          editMode="row"
-          processRowUpdate={handleRowUpdate}
-          pageSizeOptions={[5, 10]}
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: HEIGHT_MAP[rows.length] ?? height,
+        width,
+        zIndex: 999999999,
+      }}
+    >
+      {modal && (
+        <ModalDialog
+          open={open}
+          onClose={handleClose}
+          modal={modal}
+          selectedRow={modalRow}
         />
-        <CustomFooter footer={footer || {}} rows={rows} />
-      </Box>
-    )
-  );
-}
+      )}
 
-function CustomFooter({
-  rows,
-  footer,
-}: {
-  rows: GridValidRowModel[];
-  footer: FooterType;
-}) {
-  const entries = Object.entries(footer);
-  if (!entries.length) return null;
+      {header && (
+        <div className="font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded">
+          {header}
+        </div>
+      )}
 
-  const compute = (key: string, type: "sum" | "avg" | "count") => {
-    const values = rows
-      .map((r) => Number(r[key] ?? 0))
-      .filter((v) => !isNaN(v));
-    if (type === "sum") return values.reduce((acc, v) => acc + v, 0);
-    if (type === "avg")
-      return values.length
-        ? values.reduce((acc, v) => acc + v, 0) / values.length
-        : 0;
-    if (type === "count") return values.length;
-    return 0;
-  };
+      <Toolbar
+        exportName={exportName}
+        onSave={onSave}
+        onSelect={onSelect}
+        rows={rows}
+        filteredRows={filteredRows}
+      />
 
-  const label: Record<string, string> = {
-    sum: "Suma",
-    avg: "Promedio",
-    count: "Conteo",
-  };
+      <DataGrid
+        rows={rows}
+        columns={columns as any}
+        checkboxSelection={Boolean(onSelect)}
+        rowSelectionModel={selectedRows}
+        onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+        sx={{
+          "& .MuiDataGrid-cell--editable": {
+            backgroundColor: "#c6d8f0",
+            fontWeight: 500,
+          },
+          ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
+            "& .MuiDataGrid-filler": {
+              display: "none",
+            },
+          }),
+        }}
+        editMode="row"
+        processRowUpdate={handleRowUpdate}
+        pageSizeOptions={[5, 10]}
+        hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
+      />
 
-  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 = compute(key, type);
-        const formatted =
-          type === "avg"
-            ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
-            : value.toLocaleString();
-        return (
-          <span key={key}>
-            {label[type]} de <span className="text-gray-900">{key}</span>:{" "}
-            <span className="text-blue-700">{formatted}</span>
-          </span>
-        );
-      })}
-    </div>
+      <CustomFooter footer={footer} rows={rows} />
+    </Box>
   );
 }
+
+// ─── Public export ────────────────────────────────────────────────────────────
+
+export default function Table(props: TableProps) {
+  if (Array.isArray(props.data)) {
+    return <IHTable {...props} />;
+  }
+  return <KeyValueTable data={props.data} />;
+}