next-recomponents 2.0.56 → 2.0.58

package/src/table-advanced/h.table.tsx

@@ -10,12 +10,13 @@ import React, {
 import Pre from "../pre";
 import { ContextType } from "./context";
 import { Header } from "./header";
-import { ExcelIcon, SearchIcon } from "./icons";
+import { ExcelIcon, NextIcon, PrevIcon, SearchIcon } from "./icons";
 import Searchable from "./searchable";
 import Modal from "../modal";
 import { EditIcon } from "./icons";
 import regularExpresions, { TableProps } from "./types";
 import { valueFormatter } from "./formatter";
+import usePaginacion from "./use.pagination";
 type Widths = Record<string, number>;
 export default function HTable({
   context,
@@ -120,15 +121,7 @@ export default function HTable({
           sizeadosLength -
           personalizados.length -
           ocultos.length);
-      console.log({
-        w,
-        ancho,
-        sizeadosWidth,
-        personalizadosSum,
-        headers,
-        sizeadosLength,
-        personalizados,
-      });
+
       setWidths(
         Object.fromEntries(
           headers.map((h) => [
@@ -145,19 +138,24 @@ export default function HTable({
     observer.observe(tableRef.current);
     return () => observer.disconnect();
   }, [headers.length]);
-  const searchedData = context.filteredData.filter((row) => {
-    if (context.searchBy === "") return true;
 
-    return Object.values(row).some((value) =>
-      String(value).toLowerCase().includes(context.searchBy.toLowerCase()),
-    );
-  });
+  const searchedData = useMemo(() => {
+    return context.filteredData.filter((row) => {
+      if (context.searchBy === "") return true;
+
+      return Object.values(row).some((value) =>
+        String(value).toLowerCase().includes(context.searchBy.toLowerCase()),
+      );
+    });
+  }, [context.filteredData]);
+
+  const pagination = usePaginacion({ total: searchedData.length });
   return (
     <div
       className={[
         context.className,
         "bg-white relative",
-        "p-2 border shadow rounded-2xl",
+        "p-2 border shadow rounded-2xl w-full rounded-lg ",
       ].join(" ")}
       ref={tableRef}
     >
@@ -180,10 +178,11 @@ export default function HTable({
                   }
                   return obj;
                 }),
+                `${context.exportName}.xlsx`,
               );
             }}
             className={
-              "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 px-2"
+              "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 p-1 text-xs"
             }
           >
             <ExcelIcon />
@@ -193,8 +192,7 @@ export default function HTable({
         {context.onSelect && (
           <button
             className={
-              "border shadow rounded p-1 text-white px-2 " +
-              (context.selected.length > 0 ? "bg-blue-500" : "bg-gray-500")
+              "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer "
             }
             disabled={context.selected.length == 0}
             onClick={async (e) => {
@@ -215,7 +213,9 @@ export default function HTable({
         )}
         {context.onSave && (
           <button
-            className={"border shadow rounded p-1 text-white px-2 bg-blue-500"}
+            className={
+              "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer "
+            }
             onClick={async (e) => {
               setIsloading(true);
               const ex = context.filteredData.map((d) => {
@@ -230,278 +230,348 @@ export default function HTable({
           </button>
         )}
       </div>
-      <div className="grid " style={{ gridTemplateColumns }}>
-        {headers.map((header, i) => {
-          if (context?.hideColumns?.includes?.(header)) return null;
-          if (header.startsWith("_") && !header.startsWith("__")) return null;
-          return (
-            <div
-              key={header}
-              className="bg-white relative w-full bg-red-100"
-              // style={{ position: "relative" }}
-            >
-              <Header
-                padding={padding}
-                header={header}
-                context={context}
-                drag={{ gridTemplateColumns, startDrag, widths }}
-              />
-              {i < headers.length - 1 && (
-                <div
-                  onMouseDown={(e) => startDrag(e, header)}
-                  style={{
-                    position: "absolute",
-                    right: -3,
-                    top: 0,
-                    width: 6,
-                    height: "100%",
-                    cursor: "col-resize",
-                    background: "transparent",
-                  }}
-                  onMouseEnter={(e) =>
-                    (e.currentTarget.style.background =
-                      "var(--border-strong, #ccc)")
-                  }
-                  onMouseLeave={(e) =>
-                    (e.currentTarget.style.background = "transparent")
-                  }
+      <div
+      // className={["grid w-full bg-green-100"].join(" ")}
+      // style={{ gridTemplateColumns }}
+      >
+        <div
+          style={{
+            gridTemplateColumns,
+            width: Object.values(widths).reduce((acc, i) => acc + i, 0),
+          }}
+          className={["grid  w-full "].join(" ")}
+        >
+          {headers.map((header, i) => {
+            if (context?.hideColumns?.includes?.(header)) return null;
+            if (header.startsWith("_") && !header.startsWith("__")) return null;
+            return (
+              <div
+                key={header}
+                className="bg-white relative w-full bg-red-100"
+                // style={{ position: "relative" }}
+              >
+                <Header
+                  length={headers.length}
+                  index={i}
+                  padding={padding}
+                  header={header}
+                  context={context}
+                  drag={{ gridTemplateColumns, startDrag, widths }}
                 />
-              )}
-            </div>
-          );
-        })}
-        {searchedData.map((row, rowIndex) => {
-          const items: any[] = Object.entries(row);
+                {/* {i < headers.length - 1 && (
+                  <div
+                    onMouseDown={(e) => startDrag(e, header)}
+                    className="hover:bg-blue-100"
+                    style={{
+                      position: "absolute",
+                      right: -3,
+                      top: 0,
+                      width: "15px",
+                      height: "100%",
+                      cursor: "col-resize",
+                      background: "transparent",
+                    }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.background =
+                        "var(--border-strong, #ccc)")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.background = "transparent")
+                    }
+                  />
+                )} */}
+              </div>
+            );
+          })}
+        </div>
+        <div
+          style={{
+            gridTemplateColumns,
+            width: Object.values(widths).reduce((acc, i) => acc + i, 0),
+          }}
+          className={[
+            "grid max-h-[500px]  ",
+            context.filteredData.length >= 5
+              ? "overflow-hidden overflow-y-scroll "
+              : "",
+          ].join(" ")}
+        >
+          {searchedData
+            .slice(pagination.inicio - 1, pagination.fin)
+            .map((row, rowIndex) => {
+              const items: any[] = Object.entries(row);
 
-          return items.map(([key, item], i) => {
-            if (context?.hideColumns?.includes?.(key)) return null;
-            if (key.startsWith("_") && !key.startsWith("__")) return null;
+              return items.map(([key, item], i) => {
+                if (context?.hideColumns?.includes?.(key)) return null;
+                if (key.startsWith("_") && !key.startsWith("__")) return null;
 
-            if (key == "__modal__") {
-              return (
-                <div
-                  onMouseEnter={(e) => setCurrentIndex(rowIndex)}
-                  key={row.id + i}
-                  style={{
-                    height: `${padding}px`,
-                  }}
-                  className={
-                    (rowIndex == currentIndex
-                      ? " bg-blue-100 "
-                      : " bg-white ") +
-                    " border-b p-2 flex items-center justify-center  " +
-                    (context.searchBy &&
-                    String(item)
-                      .toLowerCase()
-                      .includes(context.searchBy.toLowerCase())
-                      ? "bg-yellow-100"
-                      : "")
-                  }
-                >
-                  {context?.modalButton || (
-                    <button
-                      className="border shadow rounded bg-blue-500 text-white p-2 "
-                      onClick={(e) => {
-                        setCurrentIndex(rowIndex);
-                        modalRef.current?.click();
+                if (key == "__modal__") {
+                  return (
+                    <div
+                      onMouseEnter={(e) => setCurrentIndex(rowIndex)}
+                      key={row.id + i}
+                      style={{
+                        height: `${padding}px`,
                       }}
+                      className={
+                        (rowIndex == currentIndex
+                          ? " bg-blue-100 "
+                          : " bg-white ") +
+                        " border-b p-2 flex items-center justify-center  " +
+                        (context.searchBy &&
+                        String(item)
+                          .toLowerCase()
+                          .includes(context.searchBy.toLowerCase())
+                          ? "bg-yellow-100"
+                          : "")
+                      }
                     >
-                      <EditIcon />
-                    </button>
-                  )}
-                </div>
-              );
-            }
+                      {context?.modalButton || (
+                        <button
+                          className="border shadow rounded bg-blue-500 text-white p-2 "
+                          onClick={(e) => {
+                            setCurrentIndex(rowIndex);
+                            modalRef.current?.click();
+                          }}
+                        >
+                          <EditIcon />
+                        </button>
+                      )}
+                    </div>
+                  );
+                }
 
-            if (key == "__select__") {
-              return (
-                <div
-                  key={row.id + i}
-                  onMouseEnter={(e) => setCurrentIndex(rowIndex)}
-                  style={{
-                    height: `${padding}px`,
-                  }}
-                  className={
-                    (rowIndex == currentIndex
-                      ? " bg-blue-100 "
-                      : " bg-white ") +
-                    " border-b p-2 flex items-center justify-center " +
-                    (context.searchBy &&
-                    String(item)
-                      .toLowerCase()
-                      .includes(context.searchBy.toLowerCase())
-                      ? "bg-yellow-100"
-                      : "")
-                  }
-                >
-                  <input
-                    type="checkbox"
-                    className="w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 "
-                    checked={Boolean(
-                      context.selected.find((s) => s == row?.id),
-                    )}
-                    onChange={(e) => {
-                      const newSelected = [...context.selected];
-                      const index = newSelected.findIndex((s) => s == row?.id);
-                      if (index >= 0) {
-                        newSelected.splice(index, 1);
-                      } else {
-                        newSelected.push(row?.id);
+                if (key == "__select__") {
+                  return (
+                    <div
+                      key={row.id + i}
+                      onMouseEnter={(e) => setCurrentIndex(rowIndex)}
+                      style={{
+                        height: `${padding}px`,
+                      }}
+                      className={
+                        (rowIndex == currentIndex
+                          ? " bg-blue-100 "
+                          : " bg-white ") +
+                        " border-b  flex items-start p-2 justify-center " +
+                        (context.searchBy &&
+                        String(item)
+                          .toLowerCase()
+                          .includes(context.searchBy.toLowerCase())
+                          ? "bg-yellow-100"
+                          : "")
                       }
-                      context.setSelected(newSelected);
-                    }}
-                  />
-                </div>
-              );
-            }
-
-            return (
-              <div
-                onMouseEnter={(e) => setCurrentIndex(rowIndex)}
-                key={row.id + i}
-                style={{
-                  fontSize: context.fontSize,
-                  ...(context?.wrapText
-                    ? { minHeight: `${padding}px` }
-                    : { height: `${padding}px` }),
-                }}
-                className={
-                  " flex  justify-center items-center " +
-                  (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") +
-                  (context.wrapText ? " text-wrap truncate " : "  truncate ") +
-                  " border-b  " +
-                  (context.searchBy &&
-                  String(item)
-                    .toLowerCase()
-                    .includes(context.searchBy.toLowerCase())
-                    ? rowIndex == currentIndex
-                      ? " bg-yellow-200 "
-                      : " bg-yellow-100 "
-                    : "")
+                    >
+                      <input
+                        type="checkbox"
+                        className="w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 "
+                        checked={Boolean(
+                          context.selected.find((s) => s == row?.id),
+                        )}
+                        onChange={(e) => {
+                          const newSelected = [...context.selected];
+                          const index = newSelected.findIndex(
+                            (s) => s == row?.id,
+                          );
+                          if (index >= 0) {
+                            newSelected.splice(index, 1);
+                          } else {
+                            newSelected.push(row?.id);
+                          }
+                          context.setSelected(newSelected);
+                        }}
+                      />
+                    </div>
+                  );
                 }
-              >
-                {context?.editableFields &&
-                context.editableFields.includes(key) ? (
-                  <input
-                    defaultValue={item}
+
+                return (
+                  <div
+                    onMouseEnter={(e) => setCurrentIndex(rowIndex)}
+                    key={row.id + i}
+                    style={{
+                      fontSize: context?.fontSize || "12px",
+                      ...(context?.wrapText
+                        ? { minHeight: `${padding}px` }
+                        : { height: `${padding}px` }),
+                    }}
                     className={
-                      "w-full " +
-                      (context.editions.includes(row?.id)
-                        ? "bg-blue-400 text-white"
-                        : "bg-blue-100")
+                      "  p-1" +
+                      (rowIndex == currentIndex
+                        ? " bg-blue-100 "
+                        : " bg-white ") +
+                      (context.wrapText
+                        ? " text-wrap truncate "
+                        : "  truncate ") +
+                      " border-b  " +
+                      (context.searchBy &&
+                      String(item)
+                        .toLowerCase()
+                        .includes(context.searchBy.toLowerCase())
+                        ? rowIndex == currentIndex
+                          ? " bg-yellow-200 "
+                          : " bg-yellow-100 "
+                        : "")
                     }
-                    onBlur={(e) => {
-                      const id = row?.id;
-                      const newData = [...context.data];
-                      const index = newData.findIndex((d) => +d.id == +id);
-                      newData[index][key] = e.target.value;
-                      context.setData(newData);
+                  >
+                    {context?.editableFields &&
+                    context.editableFields.includes(key) ? (
+                      <input
+                        defaultValue={item}
+                        className={
+                          "w-full " +
+                          (context.editions.includes(row?.id)
+                            ? "bg-blue-400 text-white"
+                            : "bg-blue-100")
+                        }
+                        onBlur={(e) => {
+                          const id = row?.id;
+                          const newData = [...context.data];
+                          const index = newData.findIndex((d) => +d.id == +id);
+                          newData[index][key] = e.target.value;
+                          context.setData(newData);
 
-                      const newEditions = [
-                        ...new Set([...context.editions, id]),
-                      ];
-                      context.setEditions(newEditions);
-                    }}
-                  />
-                ) : context.buttons?.[key] ? (
-                  React.cloneElement(context.buttons[key], {
-                    // children: context.buttons[key]?.props?.children
-                    //   ? item
-                    //   : undefined,
-                    value: item,
-                    children: context.buttons[key]?.props?.children
-                      ? item
-                      : null,
-                    onClick: async (e: any) => {
-                      const ret =
-                        (await context.buttons[key].props?.onClick?.({
-                          e,
-                          row,
-                        })) || {};
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == row?.id);
-                      newData[index] = { ...newData[index], ...ret };
-                      context.setData(newData);
-                    },
-                    onChange: async (e: { target: { value: string } }) => {
-                      const value = e.target.value;
-                      const ret =
-                        (await context.buttons[key].props?.onChange?.({
-                          e,
-                          row,
-                        })) || {};
+                          const newEditions = [
+                            ...new Set([...context.editions, id]),
+                          ];
+                          context.setEditions(newEditions);
+                        }}
+                      />
+                    ) : context.buttons?.[key] ? (
+                      React.cloneElement(context.buttons[key], {
+                        // children: context.buttons[key]?.props?.children
+                        //   ? item
+                        //   : undefined,
+                        value: item,
+                        children: context.buttons[key]?.props?.children
+                          ? item
+                          : null,
+                        onClick: async (e: any) => {
+                          const ret =
+                            (await context.buttons[key].props?.onClick?.({
+                              e,
+                              row,
+                            })) || {};
+                          const newData = [...context.data];
+                          const index = newData.findIndex(
+                            (f) => f.id == row?.id,
+                          );
+                          newData[index] = { ...newData[index], ...ret };
+                          context.setData(newData);
+                        },
+                        onChange: async (e: { target: { value: string } }) => {
+                          const value = e.target.value;
+                          const ret =
+                            (await context.buttons[key].props?.onChange?.({
+                              e,
+                              row,
+                            })) || {};
 
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == row?.id);
+                          const newData = [...context.data];
+                          const index = newData.findIndex(
+                            (f) => f.id == row?.id,
+                          );
 
-                      if (index >= 0) {
-                        newData[index][key] = value;
-                      }
+                          if (index >= 0) {
+                            newData[index][key] = value;
+                          }
 
-                      for (let i in ret) {
-                        if (newData[index]?.[i]) {
-                          const v = ret[i];
-                          newData[index][i] = v;
-                        }
-                      }
+                          for (let i in ret) {
+                            if (newData[index]?.[i]) {
+                              const v = ret[i];
+                              newData[index][i] = v;
+                            }
+                          }
 
-                      context.setData(newData);
-                    },
-                  })
-                ) : ["number", "string"].includes(typeof item) ? (
-                  valueFormatter({
-                    value: item,
+                          context.setData(newData);
+                        },
+                      })
+                    ) : ["number", "string"].includes(typeof item) ? (
+                      valueFormatter({
+                        value: item,
+                        currentCoin: context.currentCoin,
+                      })
+                    ) : React.isValidElement(item) ? (
+                      item
+                    ) : (
+                      JSON.stringify(item)
+                    )}
+                  </div>
+                );
+              });
+            })}
+        </div>
+        <div
+          style={{
+            gridTemplateColumns,
+            width: Object.values(widths).reduce((acc, i) => acc + i, 0),
+          }}
+          className={["grid border-b bg-white"].join(" ")}
+        >
+          {Object.keys(context?.footer || {}).length > 0 &&
+            headers.map((header) => {
+              if (context?.hideColumns?.includes?.(header)) return null;
+              if (header.startsWith("_") && !header.startsWith("__"))
+                return null;
+              return (
+                <div
+                  key={header}
+                  style={{
+                    // height: `${padding}px`,
+                    maxHeight: "100px",
+                  }}
+                  title={context.footer?.[header] + " de " + header}
+                  className={
+                    "  cursor-default font-bold " +
+                    " bg-white flex items-center justify-center" +
+                    "  text-xs my-5 " +
+                    (context.footer?.[header] ? " border-r border-l " : "")
+                  }
+                >
+                  {valueFormatter({
                     currentCoin: context.currentCoin,
-                  })
-                ) : React.isValidElement(item) ? (
-                  item
-                ) : (
-                  JSON.stringify(item)
-                )}
-              </div>
-            );
-          });
-        })}
-        {Object.keys(context?.footer || {}).length > 0 &&
-          headers.map((header) => {
-            if (context?.hideColumns?.includes?.(header)) return null;
-            if (header.startsWith("_") && !header.startsWith("__")) return null;
-            return (
-              <div
-                key={header}
-                style={{
-                  height: `${padding}px`,
-                  maxHeight: "100px",
-                }}
-                className={
-                  "border-b  font-bold " +
-                  " bg-white flex items-center justify-center"
-                }
-              >
-                {valueFormatter({
-                  currentCoin: context.currentCoin,
-                  value: context.footer?.[header]
-                    ? context.footer[header] == "sum"
-                      ? context.filteredData
-                          .map((d) => +d[header])
-                          .reduce((acc, h) => h + acc, 0)
-                      : context.footer[header] == "count"
+                    value: context.footer?.[header]
+                      ? context.footer[header] == "sum"
                         ? context.filteredData
-                            .map((d) => (d[header] != "" ? 1 : 0))
-                            .reduce((acc: number, h) => acc + h, 0)
-                        : context.footer[header] == "avg"
+                            .map((d) => +d[header])
+                            .reduce((acc, h) => h + acc, 0)
+                        : context.footer[header] == "count"
                           ? context.filteredData
-                              .map((d) => +d[header])
-                              .reduce((acc, h) => h + acc, 0) /
-                            context.filteredData
                               .map((d) => (d[header] != "" ? 1 : 0))
                               .reduce((acc: number, h) => acc + h, 0)
-                          : ""
-                    : "",
-                })}
-              </div>
-            );
-          })}
+                          : context.footer[header] == "avg"
+                            ? context.filteredData
+                                .map((d) => +d[header])
+                                .reduce((acc, h) => h + acc, 0) /
+                              context.filteredData
+                                .map((d) => (d[header] != "" ? 1 : 0))
+                                .reduce((acc: number, h) => acc + h, 0)
+                            : ""
+                      : "",
+                  })}
+                </div>
+              );
+            })}
+        </div>
+        {searchedData.length > 100 && (
+          <div className="flex justify-end p-2">
+            {pagination.rango} de {pagination.total}
+            <div className="flex items-center gap-5 mx-5">
+              <button
+                onClick={(e) => pagination.hasPrev && pagination.prev()}
+                className={pagination.hasPrev ? "" : "text-gray-300"}
+              >
+                <PrevIcon />
+              </button>
+              <button
+                onClick={(e) => pagination.hasNext && pagination.next()}
+                className={pagination.hasNext ? "" : "text-gray-300"}
+              >
+                <NextIcon />
+              </button>
+            </div>
+          </div>
+        )}
       </div>
 
       {context.modal && (