next-recomponents 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/calendar/index.tsx

@@ -9,6 +9,7 @@ import {
 import DatePicker from "react-datepicker";
 import "./react-datepicker.css";
 import CalendarIcon from "./calendar.icon";
+import { Dialog } from "@mui/material";
 
 interface CalendarProps extends DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
@@ -29,16 +30,15 @@ export default function MyCalendar({
   value,
   ...otherProps
 }: CalendarProps) {
-  const modalRef = useRef<HTMLDialogElement>(null);
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [dateStr, setDateStr] = useState<string | number | readonly string[]>(
     defaultValue || value || "",
   );
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    setVisible(typeof window !== "undefined");
-  }, []);
+  // useEffect(() => {
+  //   setVisible(typeof window !== "undefined");
+  // }, []);
 
   function handleChange(date: Date | null) {
     if (!date) return;
@@ -46,7 +46,7 @@ export default function MyCalendar({
     const formattedDate = date.toISOString().split("T")[0];
     setDateStr(formattedDate);
     onChange?.({ target: { value: formattedDate } });
-    modalRef.current?.close?.();
+    setOpen(false);
   }
 
   // 🔧 Convertir strings a fechas sin zona horaria
@@ -69,8 +69,8 @@ export default function MyCalendar({
         </div>
         <div>
           <div
-            onClick={() => modalRef?.current?.showModal?.()}
             className="cursor-pointer flex items-center justify-center"
+            onClick={(e) => setOpen(true)}
           >
             <input
               {...otherProps}
@@ -91,27 +91,24 @@ export default function MyCalendar({
         </div>
       </label>
 
-      {visible && (
-        <dialog
-          ref={modalRef}
-          id="my-calendar-modal-item"
-          onClick={(e) => {
-            const el = e.target as HTMLElement;
-            if (el?.id === "my-calendar-modal-item") {
-              modalRef.current?.close();
-            }
-          }}
-        >
-          <div className=" w-[300px] flex items-start justify-center h-[300px]  p-5">
-            <DatePicker
-              inline
-              selected={selectedDate}
-              onChange={handleChange}
-              includeDates={normalizedEnabledDates}
-            />
-          </div>
-        </dialog>
-      )}
+      <Dialog open={open}>
+        <div className="flex justify-end p-5 font-bold">
+          <button
+            className=" border-lg w-[20px] bg-red-500 text-white shadow rounded"
+            onClick={(e) => setOpen(false)}
+          >
+            x
+          </button>
+        </div>
+        <div className=" w-[300px] flex items-start justify-center h-[300px]  p-5">
+          <DatePicker
+            inline
+            selected={selectedDate}
+            onChange={handleChange}
+            includeDates={normalizedEnabledDates}
+          />
+        </div>
+      </Dialog>
     </div>
   );
 }

package/src/table/index.tsx

@@ -34,6 +34,7 @@ interface TableProps {
   hideColumns?: string[];
   footer?: FooterType;
   symbols?: any;
+
   [key: string]: any;
 }
 export default function Table(props: TableProps) {
@@ -88,7 +89,7 @@ function IHTable({
   buttons,
   exportName,
   modal,
-  height = 370,
+  height = 600,
   width = "100%",
   header,
   hideColumns = [],
@@ -118,7 +119,7 @@ function IHTable({
     if (!rows.length) return [];
 
     const arr = Object.keys(rows[0])
-      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key)) // 👈 omitimos campos privados
+      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key))
       .map((key, i) => ({
         field: key,
         headerName: key,
@@ -128,6 +129,7 @@ function IHTable({
         renderCell: buttons?.[key]
           ? (params: any) =>
               React.cloneElement(buttons[key], {
+                className: (params?.className ?? "") + " m-auto text-xs ",
                 children: params?.row?.[key],
                 onClick: (e: any) => {
                   e.row = params?.row;
@@ -164,6 +166,7 @@ function IHTable({
 
     return arr;
   }, [rows]);
+
   const handleRowUpdate = (newRow: GridRowModel) => {
     if (!newRow.id) throw new Error("Fila sin id");
     newRow._edited = true;
@@ -171,15 +174,6 @@ function IHTable({
     return newRow;
   };
 
-  // useEffect(() => {
-  //   if (modal) {
-  //     const ids = Array.from(selectedRows?.ids || []);
-  //     if (ids.length == 1) {
-  //       // ref.current?.showModal();
-  //       handleOpen();
-  //     }
-  //   }
-  // }, [selectedRows]);
   const ref = useRef<HTMLDialogElement>(null);
   const cat1: any = {
     1: 110,
@@ -203,6 +197,7 @@ function IHTable({
     }
     return filtered;
   }, [selectedRows]);
+
   return (
     rows.length > 0 && (
       <Box
@@ -215,13 +210,7 @@ function IHTable({
         }}
       >
         {modal && (
-          <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="xl"
-            fullWidth
-            // className="w-lg h-screen rounded-lg p-6 shadow-lg border border-gray-300 bg-white"
-          >
+          <Dialog open={open} onClose={handleClose} maxWidth="xl" fullWidth>
             <div className="flex justify-end">
               <button
                 onClick={() => {
@@ -293,7 +282,6 @@ function IHTable({
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={(newSelection) => {
-            console.log(newSelection);
             setSelectedRows(newSelection);
           }}
           sx={{
@@ -305,8 +293,6 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          // pagination={true}
-          // hideFooter={hideFooter}
         />
         <CustomFooter footer={footer || {}} rows={rows} />
       </Box>
@@ -314,17 +300,48 @@ function IHTable({
   );
 }
 
-function CustomFooter(props: any) {
-  const { rows, footer } = props; // si necesitas filas, pásalas externamente
+function CustomFooter({
+  rows,
+  footer,
+}: {
+  rows: GridValidRowModel[];
+  footer: FooterType;
+}) {
+  const entries = Object.entries(footer);
+  if (!entries.length) return null;
+
+  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;
+  };
+
+  const label: Record<string, string> = {
+    sum: "Suma",
+    avg: "Promedio",
+    count: "Conteo",
+  };
 
   return (
-    <div>
-      {Object.keys(footer).map((k) => {
-        const total = rows.reduce((acc: number, r: any) => acc + r[k], 0);
+    <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 (
-          <div className="flex justify-end w-full pr-4 font-bold" key={k}>
-            Suma de {k}: {total}
-          </div>
+          <span key={key}>
+            {label[type]} de <span className="text-gray-900">{key}</span>:{" "}
+            <span className="text-blue-700">{formatted}</span>
+          </span>
         );
       })}
     </div>

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2019",
     "module": "ESNext",
     "jsx": "react-jsx",
     "declaration": true,