next-recomponents 2.0.56 → 2.0.57

package/src/table-advanced/header.tsx

@@ -28,7 +28,7 @@ export function Header({
   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);
@@ -95,7 +95,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,10 +118,12 @@ export function Header({
     );
   } else
     return (
-      <div className="">
+      <div className=" ">
         <div
           ref={cellRef}
-          className={"shadow   "}
+          className={" 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 ">
@@ -173,14 +175,14 @@ export function Header({
               className="icon font-bold  p-1 cursor-pointer pr-3 "
               onClick={(e) => setVisible(true)}
             >
-              <DropIcon />
+              {hovered ? <DropIcon /> : ""}
             </div>
           </div>
 
           {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 }}
             />
           )}

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/use.pagination.tsx

@@ -0,0 +1,59 @@
+import { useState, useMemo, useCallback } from "react";
+
+function usePaginacion({
+  total,
+  tamanioPagina = 100,
+  paginaInicial = 1,
+}: {
+  total: number;
+  tamanioPagina?: number;
+  paginaInicial?: number;
+}) {
+  const totalPaginas = 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],
+  );
+
+  return {
+    rango,
+    inicio,
+    fin,
+    total,
+    pagina,
+    totalPaginas,
+    hasNext,
+    hasPrev,
+    next,
+    prev,
+    irAPagina,
+  };
+}
+
+export default usePaginacion;