next-recomponents 2.0.56 → 2.0.58

package/src/table-advanced/header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import DropIcon, {
   ArrowDownIcon,
@@ -17,18 +17,22 @@ export function Header({
   context,
   drag,
   padding,
+  index,
+  length,
 }: {
   header: string;
   context: ContextType & Omit<TableProps, "data">;
+  index: number;
   drag: {
     widths: Record<string, number>;
     gridTemplateColumns: string;
     startDrag: (e: React.MouseEvent, headerKey: string) => void;
   };
+  length: number;
   padding: string;
 }) {
   const [visible, setVisible] = useState(false);
-
+  const [hovered, setHovered] = useState(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
   const [text, setText] = useState("");
   const cellRef = useRef<HTMLDivElement>(null);
@@ -36,17 +40,21 @@ export function Header({
     null,
   );
 
-  const filteredValues = [
-    ...new Set(context.data.map((d) => d[header])),
-  ].filter((d) => {
-    if (text == "") return true;
-    return `${d}`.toLowerCase().includes(text.toLowerCase());
-  });
+  const filteredValues = useMemo(() => {
+    return [...new Set(context.data.map((d) => d[header]))].filter((d) => {
+      if (text == "") return true;
+      return `${d}`.toLowerCase().includes(text.toLowerCase());
+    });
+  }, [context.data, header, text]);
 
-  const [selected, setSelected] = useState([...filteredValues]);
+  const [selected, setSelected] = useState<any[]>([]);
 
   const hasFilter = context.filters.find((b) => b.field == header);
 
+  useEffect(() => {
+    setSelected(filteredValues);
+  }, [filteredValues]);
+
   useEffect(() => {
     if (visible) {
       context.setCurrentHeader(header);
@@ -95,7 +103,7 @@ export function Header({
       <div className="">
         <div
           className={
-            "border flex items-center justify-center  text-center relative  "
+            " flex items-center justify-center  text-center relative  "
           }
           style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
         >
@@ -118,45 +126,52 @@ export function Header({
     );
   } else
     return (
-      <div className="">
+      <div className=" ">
         <div
           ref={cellRef}
-          className={"shadow   "}
+          className={index < length - 1 ? "border-r" : ""}
+          onMouseEnter={(e) => setHovered(true)}
+          onMouseLeave={(e) => setHovered(false)}
           style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
         >
           <div className="flex justify-between items-center ">
-            <div className="flex gap-2">
-              {hasFilter ? (
+            {!context.disabled ? (
+              <div className="flex gap-2">
+                {hasFilter ? (
+                  <div
+                    className="cursor-pointer"
+                    onClick={(e) => {
+                      context.setFilters(null);
+                      setSelected(filteredValues);
+                    }}
+                  >
+                    <FilterIcon />
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+
                 <div
-                  className="cursor-pointer"
                   onClick={(e) => {
-                    context.setFilters(null);
-                    setSelected(filteredValues);
+                    context.setSort({
+                      [header]: "TOGGLE",
+                    });
                   }}
                 >
-                  <FilterIcon />
-                </div>
-              ) : (
-                <div></div>
-              )}
-              <div
-                onClick={(e) => {
-                  context.setSort({
-                    [header]: "TOGGLE",
-                  });
-                }}
-              >
-                {sortIndex >= 0 ? (
-                  context.sort[sortIndex].type === "ASC" ? (
-                    <ArrowUPIcon />
+                  {sortIndex >= 0 ? (
+                    context.sort[sortIndex].type === "ASC" ? (
+                      <ArrowUPIcon />
+                    ) : (
+                      <ArrowDownIcon />
+                    )
                   ) : (
-                    <ArrowDownIcon />
-                  )
-                ) : (
-                  <div></div>
-                )}
+                    <div></div>
+                  )}
+                </div>
               </div>
-            </div>
+            ) : (
+              <div></div>
+            )}
             <div
               className="font-bold flex truncate text-xs items-center "
               style={{ height: `${padding}px` }}
@@ -168,19 +183,23 @@ export function Header({
             >
               {header}
             </div>
-            <div
-              style={{ zIndex: 10 }}
-              className="icon font-bold  p-1 cursor-pointer pr-3 "
-              onClick={(e) => setVisible(true)}
-            >
-              <DropIcon />
-            </div>
+            {!context.disabled ? (
+              <div
+                style={{ zIndex: 10 }}
+                className="icon font-bold  p-1 cursor-pointer pr-3 "
+                onClick={(e) => setVisible(true)}
+              >
+                {hovered ? <DropIcon /> : ""}
+              </div>
+            ) : (
+              <div></div>
+            )}
           </div>
 
-          {context.currentHeader != header && (
+          {!context.disabled && context.currentHeader != header && (
             <div
               onMouseDown={(e) => drag.startDrag(e, header)}
-              className="absolute top-0 h-full cursor-col-resize hover:bg-blue-300  p-2"
+              className="absolute top-0 h-full cursor-col-resize hover:bg-blue-300   "
               style={{ right: -2, width: 6, zIndex: 20 }}
             />
           )}
@@ -302,7 +321,13 @@ export function Header({
                                     }}
                                     checked={text != "" || selected.includes(d)}
                                   />
-                                  <div className="truncate">{d}</div>
+                                  <div className="truncate">
+                                    {d == ""
+                                      ? "Vacias"
+                                      : !Boolean(d)
+                                        ? "null"
+                                        : d}
+                                  </div>
                                 </div>
                               );
                             })}

package/src/table-advanced/icons.tsx

@@ -16,6 +16,43 @@ export default function DropIcon() {
     </svg>
   );
 }
+
+export function PrevIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        fill="none"
+        strokeWidth="2"
+        points="7 2 17 12 7 22"
+        transform="matrix(-1 0 0 1 24 0)"
+      ></polyline>
+    </svg>
+  );
+}
+
+export function NextIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline fill="none" stroke-width="2" points="7 2 17 12 7 22"></polyline>
+    </svg>
+  );
+}
 export function EditIcon() {
   return (
     <svg

package/src/table-advanced/searchable.tsx

@@ -8,7 +8,7 @@ export default function Searchable({
   context: ContextType & Omit<TableProps, "data">;
 }) {
   return (
-    <div className="flex justify-start p-2 relative w-96">
+    <div className="flex justify-start p-2 relative w-96 text-xs">
       <input
         type="search"
         placeholder="Buscar por ...."

package/src/table-advanced/types.ts

@@ -52,6 +52,7 @@ export interface TableProps {
   flex?: number;
   sortBy?: Record<string, "DESC" | "ASC">;
   onCloseModal?: (data: GridValidRowModel) => Promise<boolean>;
+  disabled?: boolean;
   [key: string]: any;
 }
 

package/src/table-advanced/use.pagination.tsx

@@ -0,0 +1,65 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+
+function usePaginacion({
+  total,
+  tamanioPagina = 100,
+  paginaInicial = 1,
+}: {
+  total: number;
+  tamanioPagina?: number;
+  paginaInicial?: number;
+}) {
+  const [totalPaginas, setTotalPaginas] = useState(
+    Math.max(1, Math.ceil(total / tamanioPagina)),
+  );
+
+  const [pagina, setPagina] = useState(
+    Math.min(Math.max(paginaInicial, 1), totalPaginas),
+  );
+
+  const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
+  const fin = Math.min(pagina * tamanioPagina, total);
+
+  const rango = useMemo(() => {
+    if (total === 0) return "0 a 0";
+    return `${inicio} a ${fin}`;
+  }, [inicio, fin, total]);
+
+  const hasNext = pagina < totalPaginas;
+  const hasPrev = pagina > 1;
+
+  const next = useCallback(() => {
+    setPagina((p) => Math.min(p + 1, totalPaginas));
+  }, [totalPaginas]);
+
+  const prev = useCallback(() => {
+    setPagina((p) => Math.max(p - 1, 1));
+  }, []);
+
+  const irAPagina = useCallback<(n: number) => void>(
+    (n) => {
+      setPagina(Math.min(Math.max(n, 1), totalPaginas));
+    },
+    [totalPaginas],
+  );
+
+  useEffect(() => {
+    setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
+    setPagina(1);
+  }, [total]);
+  return {
+    rango,
+    inicio,
+    fin,
+    total,
+    pagina,
+    totalPaginas,
+    hasNext,
+    hasPrev,
+    next,
+    prev,
+    irAPagina,
+  };
+}
+
+export default usePaginacion;