next-recomponents 1.7.63 → 1.8.2

package/src/table3/footer.tsx

@@ -0,0 +1,56 @@
+export default function TableFooter({
+  objectData,
+  headers,
+  footer,
+  selectItems,
+  modal,
+}: {
+  objectData: any;
+  headers: string[];
+  footer?: Record<string, "count" | "sum" | "avg">;
+  selectItems?: any;
+  modal?: any;
+}) {
+  function operacion(tipo: "count" | "sum" | "avg", header: string): any {
+    switch (tipo) {
+      case "count":
+        return Object.values(objectData).filter(
+          (data: any) => data._visible === true
+        ).length;
+      case "sum":
+        return Object.values(objectData)
+          .filter((data: any) => data._visible === true)
+          .reduce((acc, data: any) => acc + data?.[header], 0);
+      case "avg":
+        return (
+          Object.values(objectData)
+            .filter((data: any) => data._visible === true)
+            .reduce((acc: number, data: any) => acc + data?.[header], 0) /
+          Object.values(objectData).filter(
+            (data: any) => data._visible === true
+          ).length
+        );
+      default:
+        return null;
+    }
+  }
+  return (
+    footer && (
+      <tfoot>
+        <tr className="bg-blue-500 text-white">
+          {selectItems && <th></th>}
+          {modal && <th></th>}
+          {headers.map((header) => {
+            if (header.startsWith("_")) {
+              return null;
+            } else if (footer?.[header]) {
+              return <th key={header}>{operacion(footer[header], header)}</th>;
+            }
+
+            return <th key={header}></th>;
+          })}
+        </tr>
+      </tfoot>
+    )
+  );
+}

package/src/table3/head.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import Filter from "./filter";
+
+export default function TableHead({
+  headers,
+  selectItems,
+  setObjectData,
+  objectData,
+  page,
+  setPage,
+  maxItems,
+  colSizes,
+  modal,
+}: {
+  headers: string[];
+  selectItems?: boolean;
+  setObjectData: any;
+  objectData: any;
+  page: number;
+  setPage: any;
+  maxItems?: number;
+  colSizes?: Record<string, any>;
+  modal?: React.ReactNode;
+}) {
+  return (
+    <thead>
+      <tr className="bg-blue-500 text-white font-bold">
+        {modal && <th>-</th>}
+        {selectItems && (
+          <th>
+            <input
+              className="m-2"
+              type="checkbox"
+              checked={Object.values(objectData).every(
+                (d: any) => d._selected === true
+              )}
+              onChange={(e) => {
+                const newVal = Object.values(objectData).map((d: any) => {
+                  if (d?._id) {
+                    return {
+                      _id: d._id,
+                      _selected: e.target.checked,
+                    };
+                  } else {
+                    return {
+                      id: d.id,
+                      _selected: e.target.checked,
+                    };
+                  }
+                });
+                setObjectData(newVal);
+              }}
+            />
+          </th>
+        )}
+        {Object.values(headers).map((h) => {
+          if (h.startsWith("_")) return null;
+          return (
+            <Filter
+              key={h}
+              objectData={objectData}
+              h={h}
+              setObjectData={setObjectData}
+              setPage={setPage}
+              colSizes={colSizes}
+            />
+          );
+        })}
+      </tr>
+    </thead>
+  );
+}

package/src/table3/index.tsx

@@ -0,0 +1,190 @@
+"use client";
+import React, {
+  DetailedHTMLProps,
+  TableHTMLAttributes,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+
+import TableHead from "./head";
+import TableBody from "./body";
+import Panel from "./panel";
+import TableFooter from "./footer";
+import Dialog from "./dialog";
+
+interface Table3Props
+  extends DetailedHTMLProps<
+    TableHTMLAttributes<HTMLTableElement>,
+    HTMLTableElement
+  > {
+  data: Record<string, any>[];
+  selectItems?: boolean;
+  maxItems?: number;
+  onSave?: (e: any) => void;
+  exportName?: string;
+  colSizes?: Record<string, number>;
+  modal?: React.ReactNode;
+  footer?: Record<string, "sum" | "count" | "avg">;
+  header?: React.ReactNode;
+  onChange?: (e: any) => any;
+}
+
+export default function Table3({
+  data,
+  selectItems,
+  maxItems,
+  onSave,
+  exportName,
+  colSizes,
+  modal,
+  header,
+  footer,
+  onChange,
+  ...props
+}: Table3Props) {
+  const [handlers, setHandlers] = useState<Record<string, any>>({});
+  const [page, setPage] = useState(1);
+
+  function dataReducer(a: any, b: any) {
+    if (b == null) return {};
+    if (Array.isArray(b)) {
+      const obj = b.reduce((acc: any, bb: any) => {
+        const id = bb?.id || bb?._id;
+        if (!id) throw new Error("Se necesita el id o _id");
+
+        const cc = a?.[id]?._updated
+          ? {
+              ...bb,
+              ...a?.[id],
+              _selected: bb?._selected,
+              _visible: bb?._visible == false ? false : true,
+            }
+          : {
+              ...bb,
+              _selected: bb?._selected,
+              _visible: bb?._visible == false ? false : true,
+            };
+
+        const newHandlers = { ...handlers };
+
+        for (let item in cc) {
+          const isReactComponent = React.isValidElement(cc[item]);
+
+          if (isReactComponent) {
+            // guarda el componente original
+            newHandlers[item] = cc[item];
+
+            // guarda el valor "actual" en la data
+            const value =
+              (cc[item] as any)?.props?.value ||
+              (typeof (cc[item] as any)?.props?.children !== "object"
+                ? (cc[item] as any)?.props?.children
+                : "");
+            cc[item] = value || "";
+          }
+        }
+
+        setHandlers(newHandlers);
+
+        acc[id] = { ...bb, ...cc };
+
+        return acc;
+      }, {});
+
+      return obj;
+    } else {
+      const newA = { ...a };
+      const id = b?.id || b?._id;
+      if (!id) throw new Error("Se necesita el id o _id para actualizar");
+
+      newA[id] = { ...newA[id], ...b };
+
+      return newA;
+    }
+  }
+  const [objectData, setObjectData] = useReducer(dataReducer, null);
+
+  useEffect(() => {
+    setObjectData(data);
+    setPage(1);
+  }, [data]);
+
+  const headers = useMemo<string[]>(() => {
+    if (!objectData) return [];
+    return [
+      ...new Set<any>(
+        Object.values(objectData)
+          .map((o: any) => Object.keys(o))
+          .flat()
+      ),
+    ];
+  }, [objectData]);
+  const totalPages = useMemo(() => {
+    if (!objectData) return 0;
+    return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
+  }, [objectData, maxItems]);
+
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [dialogRow, setDialogRow] = useState<any>({});
+  const context = {
+    objectData,
+    headers,
+    handlers,
+    setObjectData,
+    page,
+    setPage,
+    totalPages,
+    exportName,
+    onSave,
+    modalRef,
+    modal,
+    dialogRow,
+    setDialogRow,
+    selectItems,
+    maxItems,
+    colSizes,
+    header,
+    footer,
+    onChange,
+    ...props,
+  };
+
+  useEffect(() => {
+    if (dialogRow?.id || dialogRow?._id) {
+      const newDialogRow =
+        objectData[dialogRow?.id] || objectData[dialogRow?._id];
+      setDialogRow(newDialogRow);
+    }
+  }, [objectData]);
+
+  const style: any = props?.style
+    ? { ...props.style, tableLayout: "fixed" }
+    : { tableLayout: "fixed" };
+
+  if (!objectData) return null;
+  console.log({ objectData });
+  return (
+    <div className="border shadow rounded m-1 p-1 bg-white">
+      {modal && (
+        <Dialog
+          modalRef={modalRef}
+          dialogRow={dialogRow}
+          setDialogRow={setDialogRow}
+          setObjectData={setObjectData}
+        >
+          {modal}
+        </Dialog>
+      )}
+      <div className="font-bold text-2xl py-5 px-2 bg-blue-50">{header}</div>
+      <Panel {...context} />
+      <table {...props} style={style}>
+        <TableHead {...context} />
+        <TableBody {...context} />
+        <TableFooter {...context} />
+      </table>
+    </div>
+  );
+}

package/src/table3/panel.tsx

@@ -0,0 +1,85 @@
+import { ExcelIcon, SaveIcon } from "../../src/table/filters";
+import useExcel from "../../src/use-excel";
+
+export default function Panel({
+  page,
+  setPage,
+  onSave,
+  objectData,
+  exportName,
+  totalPages,
+}: {
+  page: number;
+  setPage: any;
+  onSave?: any;
+  objectData: any;
+  exportName?: string;
+  totalPages: number;
+}) {
+  const excel = useExcel();
+  return (
+    <div className="flex gap-2 bg-gray-100 items-center">
+      <div className="flex gap-1 ">
+        {onSave && (
+          <button
+            className="p-2 border shadow rounded bg-blue-500 text-white flex items-center gap-1 text-md"
+            onClick={(e) => {
+              onSave?.(Object.values(objectData).reverse());
+            }}
+          >
+            {" "}
+            <SaveIcon />
+            Guardar
+          </button>
+        )}
+        {exportName && (
+          <button
+            className="p-2 border shadow rounded bg-green-800 text-white flex items-center gap-1 text-md"
+            onClick={(e) => {
+              excel.export(
+                Object.values(objectData)
+                  .reverse()
+                  .map((d: any) => {
+                    const { _visible, _id, _selected, ...data } = d;
+                    return data;
+                  }) as any[],
+                exportName + ".xlsx"
+              );
+            }}
+          >
+            <ExcelIcon />
+            Exportar
+          </button>
+        )}
+      </div>
+
+      <div className="flex gap-2 items-center text-2xl">
+        <button onClick={() => setPage(1)} disabled={page === 1}>
+          ⏮
+        </button>
+
+        <button onClick={() => setPage(page - 1)} disabled={page === 1}>
+          ◀
+        </button>
+
+        <span className="text-sm">
+          Página {page} / {totalPages}
+        </span>
+
+        <button
+          onClick={() => setPage(page + 1)}
+          disabled={page === totalPages}
+        >
+          ▶
+        </button>
+
+        <button
+          onClick={() => setPage(totalPages)}
+          disabled={page === totalPages}
+        >
+          ⏭
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/table3/tr.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { EditIcon } from "../../src/table/filters";
+
+export default function TR({
+  handlers,
+  setObjectData,
+  id,
+  row,
+  headers,
+  selectItems,
+  colSizes,
+  modal,
+  modalRef,
+  dialogRow,
+  setDialogRow,
+  index,
+  selected,
+  setSelected,
+  onChange,
+}: {
+  handlers: any;
+  setObjectData: any;
+  headers: string[];
+  id: any;
+  row: any;
+  selectItems?: boolean;
+  colSizes?: Record<string, any>;
+  modal?: React.ReactNode;
+  modalRef: React.RefObject<HTMLDialogElement>;
+  dialogRow: any;
+  setDialogRow: any;
+  index: number;
+  selected: number;
+  setSelected: any;
+  onChange: any;
+}) {
+  const color =
+    selected == index
+      ? "bg-blue-600 text-white hover:bg-blue-800"
+      : index % 2 == 0
+      ? "bg-white"
+      : "bg-blue-50";
+  return (
+    <tr
+      key={id}
+      className={` hover:bg-blue-100 ${color} cursor-pointer`}
+      onClick={(e) => {
+        setSelected(selected == index ? -1 : index);
+      }}
+    >
+      {modal && (
+        <th className="border">
+          <button
+            className="p-1 border shadow-rounded bg-blue-500 rounded text-white"
+            onClick={(e) => {
+              modalRef.current?.showModal();
+              setDialogRow(row);
+            }}
+          >
+            <EditIcon />
+          </button>
+        </th>
+      )}
+      {selectItems && (
+        <th className="border">
+          <input
+            type="checkbox"
+            checked={Boolean(row?._selected)}
+            onChange={(e) => {
+              if (row?._id) {
+                setObjectData({ _id: +id, _selected: e.target.checked });
+              } else {
+                setObjectData({ id: +id, _selected: e.target.checked });
+              }
+            }}
+          />
+        </th>
+      )}
+      {headers.map((h) => {
+        const colSize = colSizes?.[h];
+        if (h.startsWith("_")) {
+          return null;
+        } else if (handlers?.[h]) {
+          const original = handlers[h];
+
+          const cloned = React.cloneElement(original, {
+            // si es controlado por value → actualiza con row[h]
+            value: original.props?.value !== undefined ? row[h] : undefined,
+
+            // si usa children → actualiza con row[h] también
+            children: original.props?.children
+              ? typeof original.props.children == "object"
+                ? original.props?.children
+                : row?.[h]
+              : null,
+
+            ...Object.keys({
+              ...original.props,
+              onChange: original.props?.onChange,
+            })
+              .filter((action) => action.startsWith("on"))
+              .reduce((acc, action) => {
+                acc[action] = (e: any) => {
+                  e.row = row;
+
+                  const userResponse = original.props?.[action]?.(e) || {};
+                  const newObject = row?._id
+                    ? {
+                        _id: row?._id,
+                        [h]: e.target.value,
+                        _updated: true,
+                        _visible: true,
+                        ...userResponse,
+                      }
+                    : {
+                        id: row?.id || null,
+                        [h]: e.target.value,
+                        _updated: true,
+                        _visible: true,
+                        ...userResponse,
+                      };
+
+                  const finalResponse =
+                    action == "onChange" && onChange
+                      ? onChange({ ...e, row: { ...e.row, ...newObject } })
+                      : {};
+
+                  setObjectData({ ...newObject, ...finalResponse });
+                };
+                return acc;
+              }, {} as any),
+          });
+
+          return (
+            <td key={h} className={`text-black `}>
+              {cloned}
+            </td>
+          );
+        }
+        return (
+          <td key={h} className={`text-center border max-w-[${colSize}px]`}>
+            {row[h]}
+          </td>
+        );
+      })}
+    </tr>
+  );
+}

package/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
     "target": "ES6",
-    "module": "node16",
-    "moduleResolution": "node16",
+    "module": "ESNext",
     "jsx": "react-jsx",
     "declaration": true,
     "outDir": "dist",
     "esModuleInterop": true,
+    "moduleResolution": "node",
     "skipLibCheck": true,
     "strict": true,
     "baseUrl": "."

package/src/table2/context.tsx

@@ -1,141 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import useExcel from "src/use-excel";
-
-export default function useTableContext({
-  data,
-  maxItems,
-  symbols,
-  handlers,
-  onSave,
-  exportName,
-  selectItems,
-  colSizes,
-}: {
-  data: Record<string, any>[];
-  maxItems: number;
-  symbols: Record<string, React.ReactNode>;
-  handlers: Record<string, React.ReactNode>;
-  onSave?: (data: Record<string, any>[]) => void;
-  exportName?: string;
-  selectItems?: boolean;
-  colSizes?: Record<string, number>;
-}) {
-  function dataReduce(datums: Record<string, any>[]) {
-    return datums
-      .map((row: any) => {
-        for (let key in row) {
-          if (typeof row[key] === "object") {
-            row[key] = JSON.stringify(row[key]);
-          }
-        }
-        return row;
-      })
-      .reduce((acc, d) => {
-        const id = d?._id || d?.id;
-        if (!id) throw new Error("Data must have an '_id' or 'id' field");
-        acc[id] = d;
-        acc[id]._checkedItem = false;
-        return acc;
-      }, {});
-  }
-  const excel = useExcel();
-
-  const [defaultData, setDefaultData] = useState(dataReduce(data));
-
-  const [page, setPage] = useState(1);
-
-  const headers = useMemo(() => {
-    return [...new Set(data.flatMap((d) => Object.keys(d)))];
-  }, [data]);
-
-  const list = useMemo(() => {
-    return headers.reduce((acc, h) => {
-      acc[h] = [
-        ...new Set(
-          Object.values(defaultData).map((row: any) => {
-            const value =
-              typeof row[h] === "object" ? JSON.stringify(row[h]) : row[h];
-            return value;
-          })
-        ),
-      ];
-      return acc;
-    }, {} as any);
-  }, [headers, defaultData]);
-
-  const [filters, setFilters] = useState<any>(
-    headers.reduce((acc, h) => {
-      acc[h] = list[h].reduce((ac: any, l: any) => {
-        ac[l] = true;
-        return ac;
-      }, {});
-      return acc;
-    }, {} as any)
-  );
-
-  const bodyKeys = useMemo(() => Object.keys(defaultData), [defaultData]);
-  const body = useMemo(() => defaultData, [defaultData]);
-
-  const filteredBody = useMemo(() => {
-    return bodyKeys.filter((key) => {
-      return headers.every((header) => {
-        return (
-          filters?.[`${header}`]?.[body?.[`${key}`]?.[`${header}`]] !== false
-        );
-      });
-    });
-  }, [filters, headers, defaultData]);
-
-  const paginatedBody = useMemo(() => {
-    return filteredBody.filter((k, index) => {
-      if (maxItems === Infinity) return true;
-
-      const desde = (page - 1) * maxItems;
-      const hasta = desde + maxItems;
-      return index >= desde && index < hasta;
-    });
-  }, [filteredBody, page]);
-
-  const totalPages = useMemo(
-    () =>
-      maxItems === Infinity ? 1 : Math.ceil(filteredBody.length / maxItems),
-    [filteredBody, maxItems]
-  );
-
-  useEffect(() => {
-    const original = dataReduce(data);
-    const originalKeys = Object.keys(original);
-    setDefaultData((prevDefaultData: any) => {
-      const newDefault: any = {};
-      for (let key of originalKeys) {
-        // si ya existía en el estado anterior, lo conservamos
-        newDefault[key] = prevDefaultData?.[key] ?? original[key];
-      }
-      return newDefault;
-    });
-  }, [data]);
-
-  return {
-    page,
-    setPage,
-    defaultData,
-    setDefaultData,
-    totalPages,
-    headers,
-    filters,
-    setFilters,
-    list,
-    filteredBody,
-    maxItems,
-    paginatedBody,
-    handlers,
-    symbols,
-    onSave,
-    exportName,
-    excel,
-    selectItems,
-    colSizes,
-  };
-}
-
-export type TableContextType = ReturnType<typeof useTableContext>;

package/src/table2/h.table.tsx

@@ -1,5 +0,0 @@
-import { TableContextType } from "./context";
-
-export default function HTable({ context }: { context: TableContextType }) {
-  return <></>;
-}