next-recomponents 1.7.63 → 1.8.2

package/package.json

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

package/src/container/index.tsx

@@ -44,7 +44,7 @@ export default function Container({
           <h1 className="text-xl font-bold">{appName}</h1>
         </div>
         <div
-          className={` gap-2 bg-blue-400   text-white ${
+          className={` gap-2 bg-gray-800 text-white ${
             isSidebarOpen ? "px-[270px]" : "px-[60px]"
           } hidden sm:flex`}
         >
@@ -84,7 +84,7 @@ export default function Container({
                 ? 250
                 : 60,
           }}
-          className="bg-blue-400 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out"
+          className="bg-gray-800 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out"
         >
           <div className="p-4 ">
             {menuList && (
@@ -123,10 +123,7 @@ export default function Container({
                             </div>
                           )}
                           {!isSidebarOpen && (
-                            <div
-                              title={`${itemMenu.name}`}
-                              className="text-sm hover:bg-gray-200 hover:text-black rounded p-1"
-                            >
+                            <div className="text-sm hover:bg-gray-200 hover:text-black rounded p-1">
                               {icon}
                             </div>
                           )}

package/src/index.tsx

@@ -16,5 +16,4 @@ export { default as MyCalendar } from "./calendar";
 export type { TableEventProps } from "./table";
 export { useFormValues } from "./form";
 export { default as DocumentViewer } from "./doc-viewer";
-export { default as TableDos } from "./table2";
-export { default as useModal } from "./use-modal";
+export { default as Table3 } from "./table3";

package/src/table/filters.tsx

@@ -13,6 +13,21 @@ export function FilterOffIcon() {
     </svg>
   );
 }
+export function EditIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 576 512"
+      height="20px"
+      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>
+    </svg>
+  );
+}
 
 export function MdLastPage() {
   return (
@@ -110,21 +125,7 @@ export function ExcelIcon() {
     </svg>
   );
 }
-export function EditIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 576 512"
-      height="20px"
-      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>
-    </svg>
-  );
-}
+
 export function ArrowIcon() {
   return (
     <svg

package/src/table/h.tsx

@@ -67,14 +67,7 @@ export default function HTable({
 
         const isDate = !isObject && regex.test(`${d[key]}`);
         const cellTypeOf = isDate ? "date" : isObject ? "object" : typeOf;
-        const mapedIndex = mapedData.find((mpd) =>
-          `${d.id}`.includes(
-            (mpd?.id as any)?.content,
-            (mpd?._id as any)?.content
-          )
-        );
-
-        const mapedContent = (mapedIndex?.[key] as any)?.content;
+        const mapedContent = (mapedData[trkey][key] as any)?.content;
 
         const content =
           mapedContent ||
@@ -145,43 +138,41 @@ export default function HTable({
         )}
       </div>
       <table {...props} className="w-full border-collapse table-auto">
-        <thead className="bg-blue-400 text-white">
+        <thead className="bg-gray-800 text-white">
           <tr>
             {head.map((h, key) => {
               return (
-                h != "_id" && (
-                  <th
-                    key={h}
-                    className="whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] border-b "
+                <th
+                  key={h}
+                  className="whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] border-b p-2"
+                >
+                  <div
+                    className="cursor-pointer flex "
+                    onClick={(e) => {
+                      setSelectedFilter(key == selectedFilter ? null : key);
+                    }}
                   >
-                    <div
-                      className="cursor-pointer flex "
-                      onClick={(e) => {
-                        setSelectedFilter(key == selectedFilter ? null : key);
-                      }}
-                    >
-                      <div className="text-white w-full rounded  flex justify-center">
-                        {h}{" "}
-                        {!mapedData
-                          ?.map((d: any) => d[h]?.exclude)
-                          ?.every((d: any) => d === false) && (
-                          <div className="text-red-300">
-                            <FilterOffIcon />
-                          </div>
-                        )}
-                      </div>
+                    <div className="text-white w-full bg-black rounded  flex justify-center">
+                      {h}{" "}
+                      {!mapedData
+                        ?.map((d: any) => d[h]?.exclude)
+                        ?.every((d: any) => d === false) && (
+                        <div className="text-red-300">
+                          <FilterOffIcon />
+                        </div>
+                      )}
                     </div>
+                  </div>
 
-                    <FilterMenu
-                      h={h}
-                      mapedData={mapedData}
-                      setMapedData={setMapedData}
-                      index={key}
-                      selectedFilter={selectedFilter}
-                      setSelectedFilter={setSelectedFilter}
-                    />
-                  </th>
-                )
+                  <FilterMenu
+                    h={h}
+                    mapedData={mapedData}
+                    setMapedData={setMapedData}
+                    index={key}
+                    selectedFilter={selectedFilter}
+                    setSelectedFilter={setSelectedFilter}
+                  />
+                </th>
               );
             })}
           </tr>
@@ -201,7 +192,7 @@ export default function HTable({
                 return null;
               }
             }
-            const dataKey = md?._id?.content || md?.id?.content || trKey;
+            const dataKey = md?.id?.content || trKey;
 
             return (
               <tr
@@ -212,32 +203,24 @@ export default function HTable({
                 key={dataKey}
                 onClick={(e) => setSelected(trKey)}
                 className={[
-                  "hover:bg-blue-100 ",
+                  "hover:bg-green-100 ",
                   color,
-                  selected == trKey && " bg-blue-200 hover:bg-blue-300",
+                  selected == trKey && "bg-green-200 hover:bg-green-300",
                 ].join(" ")}
               >
                 {head.map((h, tdKey: number) => {
                   const item = md[h];
-                  const id =
-                    trKey +
-                    "-" +
-                    (md?.["_id"]?.content || md?.id?.content || tdKey) +
-                    "-" +
-                    h;
+                  const id = trKey + "-" + (md?.id?.content || tdKey) + "-" + h;
                   return (
-                    h != "_id" && (
-                      <TD
-                        data-key={id}
-                        key={id}
-                        index={trKey}
-                        symbols={symbols}
-                        item={item}
-                        color={color}
-                        mapedData={mapedData}
-                        setMapedData={setMapedData}
-                      />
-                    )
+                    <TD
+                      key={id}
+                      index={trKey}
+                      symbols={symbols}
+                      item={item}
+                      color={color}
+                      mapedData={mapedData}
+                      setMapedData={setMapedData}
+                    />
                   );
                 })}
               </tr>
@@ -245,13 +228,16 @@ export default function HTable({
           })}
         </tbody>
         {totals && (
-          <tfoot className="bg-blue-400 text-white">
+          <tfoot className="bg-gray-800 text-white">
             <tr>
               {head.map((h, fkey) => {
                 return (
-                  <th key={fkey} className="text-right border-b max-w-[200px] ">
+                  <th
+                    key={fkey}
+                    className="text-right border-b max-w-[200px] p-2 "
+                  >
                     {totals.includes(h) && (
-                      <div className="flex justify-between text-white w-full rounded ">
+                      <div className="flex justify-between text-white w-full bg-black rounded ">
                         <div className="p-1">
                           {symbols && symbols[h] && symbols[h]}
                         </div>

package/src/table/td.tsx

@@ -84,38 +84,19 @@ export default function TD({
       { ...symbols[item?.name]?.props }
     );
 
-  const typeOf = (value: any): string => {
-    if (value instanceof Date) return "date";
-    if (typeof value === "number") return "number";
-    if (typeof value === "string") {
-      // validar si es fecha en string
-      const d = new Date(value);
-      if (!isNaN(d.getTime())) return "date-string";
-      return "string";
-    }
-    return typeof value;
-  };
-
-  const result = typeOf(item?.content);
-
   return (
     <td
-      {...props}
       onDoubleClick={(e) => setIsHidded(!isHidded)}
       // title={item?.title}
       className={[
         isHidded && color,
-        !isHidded && "whitespace-nowrap overflow-hidden text-ellipsis ",
-        " px-2 ",
+        !isHidded && "whitespace-nowrap overflow-hidden text-ellipsis   ",
+        "border-b max-w-[200px] p-2 ",
+        // ["number", "money"].includes(item?.cellTypeOf) && "text-right",
       ].join(" ")}
     >
       <div
-        className={
-          symbols && symbols?.[item?.name]
-            ? symbols[item?.name]
-            : " flex   " +
-              (result == "number" ? "justify-end" : "justify-start")
-        }
+        className={symbols && symbols[item?.name] && "flex justify-between "}
       >
         {symbols ? (
           <div className="flex items-center justify-between gap-1">
@@ -133,7 +114,7 @@ export default function TD({
             <div>{!newProps?.["row"] && item?.content}</div>
           </div>
         ) : (
-          <div className="">{item?.content}</div>
+          <div>{item?.content}</div>
         )}
       </div>
     </td>

package/src/table/vtd.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { Dispatch, useMemo, useState } from "react";
 
 interface TDProps

package/src/table3/body.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import TR from "./tr";
+
+export default function TableBody({
+  objectData,
+  setObjectData,
+  headers,
+  handlers,
+  selectItems,
+  page,
+  maxItems,
+  colSizes,
+  modal,
+  modalRef,
+  dialogRow,
+  setDialogRow,
+  onChange,
+}: {
+  objectData: any;
+  setObjectData: any;
+  headers: string[];
+  handlers: Record<string, any>;
+  selectItems?: boolean;
+  page: number;
+  maxItems?: number;
+  colSizes?: Record<string, number>;
+  modal?: React.ReactNode;
+  modalRef: React.RefObject<HTMLDialogElement>;
+  dialogRow: any;
+  setDialogRow: any;
+  onChange?: any;
+}) {
+  const [selected, setSelected] = useState(-1);
+
+  return (
+    <tbody>
+      {Object.keys(objectData)
+        .reverse()
+        .filter((id) => {
+          return objectData[id]?._visible === true;
+        })
+        .filter((_id, key) => {
+          if (!maxItems) return true;
+          const start = (page - 1) * maxItems; // ej: 0 en la página 1
+          const end = page * maxItems; // ej: 10 en la página 1
+          return key >= start && key < end; // 👈 usamos < en vez de <=
+        })
+        .map((id, index) => {
+          const row = objectData[id];
+          return (
+            <TR
+              key={id}
+              {...{
+                headers,
+                index,
+                setObjectData,
+                id,
+                row,
+                handlers,
+                selectItems,
+                colSizes,
+                modal,
+                modalRef,
+                dialogRow,
+                setDialogRow,
+                setSelected,
+                selected,
+                onChange,
+              }}
+            />
+          );
+        })}
+    </tbody>
+  );
+}

package/src/table3/dialog.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react";
+
+function Dialog({
+  modalRef,
+  children,
+  dialogRow,
+  setDialogRow,
+  setObjectData,
+}: {
+  modalRef: React.RefObject<HTMLDialogElement>;
+  children: React.ReactNode;
+  dialogRow: any;
+  setDialogRow: any;
+  setObjectData: any;
+}) {
+  const show = () => modalRef.current?.showModal();
+  const hide = () => modalRef.current?.close();
+  const clonedModal = useMemo(() => {
+    if (dialogRow && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        key: JSON.stringify(dialogRow),
+        row: dialogRow,
+        show,
+        hide,
+        update: setObjectData,
+      });
+    }
+    return null;
+  }, [dialogRow, children]);
+  return (
+    <dialog
+      ref={modalRef}
+      className="p-6 rounded-xl shadow-2xl backdrop:bg-black/50  w-[100%] h-screen"
+    >
+      <div className="flex justify-between items-center mb-4">
+        <div></div>
+        <button
+          onClick={() => modalRef.current?.close()}
+          className="text-white hover:text-gray-100 text-xl border shadow rounded p-1 bg-red-500"
+        >
+          ✕
+        </button>
+      </div>
+      <div className="text-gray-700">{clonedModal}</div>
+    </dialog>
+  );
+}
+
+export default Dialog;

package/src/table3/filter.tsx

@@ -0,0 +1,213 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { FilterOffIcon } from "../../src/table/filters";
+
+export default function Filter({
+  h,
+  objectData,
+  setObjectData,
+  setPage,
+  colSizes,
+}: {
+  h: any;
+  objectData: any;
+  setObjectData: any;
+  setPage: any;
+  colSizes?: Record<string, number>;
+}) {
+  const [visible, setVisible] = useState(false);
+  const [text, setText] = useState("");
+  const items = useMemo(
+    () => [...new Set(Object.values(objectData).map((o: any) => o[h]))],
+    [objectData]
+  );
+  const [selected, setSelected] = useState<string[]>(items);
+
+  const itemsFiltered = useMemo(
+    () =>
+      items
+        .sort((a, b) => `${a}`.localeCompare(b))
+        .filter((item: string) => {
+          if (!text) return true;
+
+          return `${item}`.toLowerCase().includes(text.toLowerCase());
+        }),
+    [items, text]
+  );
+  function filtrar(itemsInterno: any[] = []) {
+    const array = Object.values(objectData);
+    let obj;
+    if (itemsInterno.length > 0) {
+      setSelected(items);
+      obj = array.map((row: any) => {
+        return row?._id
+          ? {
+              _id: row._id,
+              _visible: itemsInterno.includes(row[h]),
+            }
+          : { id: row.id, _visible: itemsInterno.includes(row[h]) };
+      });
+    } else {
+      obj = array.map((row: any) => {
+        return row?._id
+          ? {
+              _id: row._id,
+              _visible:
+                itemsFiltered.length < items.length
+                  ? itemsFiltered.includes(row[h])
+                  : selected.includes(row[h]),
+            }
+          : {
+              id: row.id,
+              _visible:
+                itemsFiltered.length < items.length
+                  ? itemsFiltered.includes(row[h])
+                  : selected.includes(row[h]),
+            };
+      });
+    }
+
+    setObjectData(obj);
+    setPage(1);
+    setVisible(false);
+    setText("");
+  }
+  const hidden = Object.values(objectData)
+    .filter((d: any) => d._visible === false)
+    .map((d: any) => d[h]);
+
+  return (
+    <th className="cursor-pointer">
+      <div className="relative">
+        {visible && (
+          <div
+            className=" w-full h-screen top-0 left-0 fixed"
+            style={{ zIndex: 9998 }}
+            onClick={(e) => setVisible(!visible)}
+          ></div>
+        )}
+      </div>
+      <div className="relative w-full justify-center flex">
+        <div
+          style={{
+            minWidth: "100px",
+            maxWidth: `${(colSizes?.[h] || 0) + 100}px`,
+            width: `${colSizes?.[h]}px`,
+          }}
+          className={`resize-x overflow-auto   text-center flex justify-evenly p-1 items-center`}
+          onClick={(e) => setVisible(!visible)}
+        >
+          <div>{h}</div>
+          {selected.length < items.length && (
+            <div className="text-red-500 ">
+              <FilterOffIcon />
+            </div>
+          )}
+        </div>
+        {visible && (
+          <div
+            className="border shadow rounded bg-white p-1 absolute fixed text-black"
+            style={{ zIndex: 9999 }}
+          >
+            <div className="flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto">
+              {selected.length < items.length && (
+                <div
+                  className="p-1 flex items-center justify-between px-2 bg-red-200 border shadow rounded"
+                  onClick={(e) => {
+                    filtrar(items);
+                  }}
+                >
+                  Borrar Filtro{" "}
+                  <div className="text-white ">
+                    <FilterOffIcon />
+                  </div>
+                </div>
+              )}
+              <div className="">
+                <input
+                  className="border shadow rounded p-2 w-full"
+                  type="search"
+                  onChange={(e) => setText(`${e.target.value}`)}
+                  value={text}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      setSelected(
+                        items.filter((i) =>
+                          `${i}`.toLowerCase().includes(`${text}`.toLowerCase())
+                        )
+                      );
+                      filtrar();
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                <label className="flex gap-1 cursor-pointer px-1">
+                  <input
+                    type="checkbox"
+                    checked={!Boolean(selected.length < items.length)}
+                    onChange={(e) => {
+                      if (selected.length < items.length) {
+                        setSelected(items);
+                      } else {
+                        setSelected([]);
+                      }
+                    }}
+                  />
+                  (Seleccionar Todo)
+                </label>
+              </div>
+              <div className="overflow-auto  flex gap-1 flex-col p-1 border shadow rounded h-[300px]">
+                {itemsFiltered.map((item) => {
+                  return (
+                    <div key={item} className="hover:bg-gray-100  ">
+                      <label className="flex gap-1 cursor-pointer truncate">
+                        <input
+                          type="checkbox"
+                          disabled={
+                            hidden.includes(item) && items.includes(item)
+                          }
+                          checked={selected.includes(item)}
+                          onChange={(e) => {
+                            const newSelected = [...selected];
+                            const index = newSelected.indexOf(item);
+                            if (index >= 0) {
+                              newSelected.splice(index, 1);
+                            } else {
+                              newSelected.push(item);
+                            }
+                            setSelected(newSelected);
+                          }}
+                        />
+                        {item || "(Vacias)"}
+                      </label>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="flex justify-between px-1">
+                <button
+                  className="p-1 shadow rounded border bg-red-500 text-white"
+                  onClick={(e) => {
+                    setText("");
+                    setVisible(false);
+                  }}
+                >
+                  Cancelar
+                </button>
+                <button
+                  className="p-1 shadow rounded border bg-blue-500 text-white"
+                  onClick={(e) => {
+                    filtrar();
+                  }}
+                >
+                  Aceptar
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </th>
+  );
+}