next-recomponents 2.0.41 → 2.0.42

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

@@ -0,0 +1,579 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Pre from "../pre";
+import { ContextType } from "./context";
+import { Header } from "./header";
+import { ExcelIcon, SearchIcon } from "./icons";
+import Searchable from "./searchable";
+import Modal from "../modal";
+import { EditIcon } from "./icons";
+import regularExpresions, { TableProps } from "./types";
+type Widths = Record<string, number>;
+export default function HTable({
+  context,
+}: {
+  context: ContextType & Omit<TableProps, "data">;
+}) {
+  const [isLoading, setIsloading] = useState(false);
+  const { cols, headers } = context;
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  const tableRef = useRef<HTMLDivElement>(null);
+  const modalRef = useRef<HTMLButtonElement>(null);
+  const catDensities: any = { confortable: 80, compact: 30, standard: 53 };
+  const padding =
+    context?.rowHeight || context?.density
+      ? catDensities[context?.density]
+      : 53;
+
+  function useResizableColumns(
+    headers: string[],
+    defaultWidth = 160,
+    minWidth = 60,
+  ) {
+    function getWidth(h: string) {
+      return [
+        "__select__",
+        "__modal__",
+        ...(context?.hideColumns || []),
+      ].includes(h)
+        ? minWidth
+        : defaultWidth;
+    }
+
+    function resize(headers: string[]) {
+      return Object.fromEntries(headers.map((h) => [h, getWidth(h)]));
+    }
+    const [widths, setWidths] = useState<Widths>({});
+
+    // si headers cambia dinámicamente, hay que rellenar los que falten
+    // useEffect(() => {
+    //   setWidths((prev) => {
+    //     const missing = headers.filter((h) => !(h in prev));
+    //     if (missing.length === 0) return prev;
+    //     return {
+    //       ...prev,
+    //       ...Object.fromEntries(missing.map((h) => [h, getWidth(h)])),
+    //     };
+    //   });
+    // }, [headers, defaultWidth]);
+
+    const startDrag = useCallback(
+      (e: React.MouseEvent, headerKey: string) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = widths[headerKey] ?? defaultWidth;
+
+        const onMove = (ev: MouseEvent) => {
+          const newWidth = Math.max(
+            minWidth,
+            startWidth + (ev.clientX - startX),
+          );
+          setWidths((prev) => ({ ...prev, [headerKey]: newWidth }));
+        };
+        const onUp = () => {
+          window.removeEventListener("mousemove", onMove);
+          window.removeEventListener("mouseup", onUp);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+      },
+      [widths, defaultWidth, minWidth],
+    );
+
+    const gridTemplateColumns = headers
+      .filter((h) => !context?.hideColumns?.includes?.(h))
+      .map((h) => `${widths[h] ?? defaultWidth}px`)
+      .join(" ");
+
+    return { widths, gridTemplateColumns, startDrag, setWidths };
+  }
+  const { gridTemplateColumns, startDrag, widths, setWidths } =
+    useResizableColumns(headers);
+
+  useEffect(() => {
+    if (!tableRef.current) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const sizeados = headers.filter((h) =>
+        [
+          "__select__",
+          "__modal__",
+          // ...(context?.hideColumns || []),
+          // ...(context?.colSize ? Object.keys(context.colSize) : []),
+        ].includes(h),
+      );
+
+      const personalizados = context?.colSize
+        ? (Object.values(context.colSize) as number[])
+        : [];
+
+      const personalizadosSum =
+        personalizados.length > 0
+          ? personalizados.reduce((acc, i) => acc + i, 0)
+          : 0;
+      const ancho = +entry.contentRect.width;
+      const sizeadosLength = sizeados.length;
+      const sizeadosWidth = sizeadosLength * 60;
+
+      const w =
+        (ancho - sizeadosWidth - personalizadosSum) /
+        (headers.length - sizeadosLength - personalizados.length);
+      console.log({
+        w,
+        ancho,
+        sizeadosWidth,
+        sizeadosLength,
+        personalizadosSum,
+        headers: headers.length,
+        personalizados: personalizados.length,
+      });
+      setWidths(
+        Object.fromEntries(
+          headers.map((h) => [
+            h,
+            context?.colSize?.[h]
+              ? context?.colSize?.[h]
+              : ["__select__", "__modal__"].includes(h)
+                ? 60
+                : w,
+          ]),
+        ),
+      );
+    });
+    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()),
+    );
+  });
+  return (
+    <div
+      className={[context.className, "bg-white relative"].join(" ")}
+      ref={tableRef}
+    >
+      <div className="bg-white px-1 font-bold">{context.header}</div>
+      <div className="bg-white flex gap-2 items-center">
+        {context.searchable && <Searchable context={context} />}
+        {context.exportName && (
+          <button
+            onClick={(e) => {
+              context.excel.export(
+                context.data.map((d) => {
+                  const { __select__, __modal__, ...datums } = d;
+                  return datums;
+                }),
+              );
+            }}
+            className={
+              "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 px-2"
+            }
+          >
+            <ExcelIcon />
+            Exportar
+          </button>
+        )}
+        {context.onSelect && (
+          <button
+            className={
+              "border shadow rounded p-1 text-white px-2 " +
+              (context.selected.length > 0 ? "bg-blue-500" : "bg-gray-500")
+            }
+            disabled={context.selected.length == 0}
+            onClick={async (e) => {
+              setIsloading(true);
+
+              const ex = context.filteredData
+                .filter((d) => context.selected.includes(d.id))
+                .map((d) => {
+                  const { __select__, __modal__, ...datums } = d;
+                  return datums;
+                });
+              await context.onSelect(ex);
+              setIsloading(false);
+            }}
+          >
+            {context?.onSelectLabel || "Guardar selección"}
+          </button>
+        )}
+        {context.onSave && (
+          <button
+            className={
+              "border shadow rounded p-1 text-white px-2 " +
+              (context.editions.length > 0 ? "bg-blue-500" : "bg-gray-500")
+            }
+            disabled={context.editions.length == 0}
+            onClick={async (e) => {
+              setIsloading(true);
+              const ex = context.filteredData.map((d) => {
+                const { __select__, __modal__, ...datums } = d;
+                return datums;
+              });
+              await context.onSave(ex);
+              setIsloading(false);
+            }}
+          >
+            {context.onSaveLabel || "Guardar cambios"}
+          </button>
+        )}
+      </div>
+      <div className="grid " style={{ gridTemplateColumns }}>
+        {headers.map((header, i) => {
+          if (context?.hideColumns?.includes?.(header)) return null;
+          return (
+            <div
+              key={header}
+              className="bg-white"
+              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>
+          );
+        })}
+        {searchedData.map((row, rowIndex) => {
+          const items: any[] = Object.entries(row);
+
+          return items.map(([key, item], i) => {
+            if (context?.hideColumns?.includes?.(key)) 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();
+                      }}
+                    >
+                      <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);
+                      }
+                      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 "
+                    : "")
+                }
+              >
+                {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)) || {};
+                      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)) || {};
+
+                      const newData = [...context.data];
+                      const index = newData.findIndex((f) => f.id == row?.id);
+
+                      if (index >= 0) {
+                        newData[index][key] = value;
+                      }
+
+                      for (let i in ret) {
+                        if (newData[index]?.[i]) {
+                          const v = ret[i];
+                          newData[index][i] = v;
+                        }
+                      }
+
+                      context.setData(newData);
+                    },
+                    className: `${context.buttons[key]?.props?.className} text-xs w-full`,
+                  })
+                ) : ["number", "string"].includes(typeof item) ? (
+                  valueFormatter({
+                    value: item,
+                    currentCoin: context.currentCoin,
+                  })
+                ) : (
+                  JSON.stringify(item)
+                )}
+              </div>
+            );
+          });
+        })}
+        {Object.keys(context?.footer || {}).length > 0 &&
+          headers.map((header) => {
+            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"
+                        ? context.filteredData
+                            .map((d) => (d[header] != "" ? 1 : 0))
+                            .reduce((acc: number, h) => acc + h, 0)
+                        : 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>
+
+      {context.modal && (
+        <Modal
+          button={<button ref={modalRef}></button>}
+          color={"white"}
+          onClose={async () => {
+            const c = await context?.onCloseModal?.(searchedData[currentIndex]);
+
+            return c;
+          }}
+        >
+          <div className="relative">
+            <div className="fixed top-0 left-0 p-10 ">
+              <button
+                className={
+                  "p-2 border shadow rounded " +
+                  (currentIndex > 0 ? "bg-white " : "bg-gray-100")
+                }
+                onClick={(e) => {
+                  currentIndex > 0 && setCurrentIndex(currentIndex - 1);
+                }}
+              >
+                Anterior
+              </button>
+              <button
+                className={
+                  "p-2 border shadow rounded " +
+                  (currentIndex < searchedData.length - 1
+                    ? "bg-white "
+                    : "bg-gray-100")
+                }
+                onClick={(e) => {
+                  currentIndex < searchedData.length - 1 &&
+                    setCurrentIndex(currentIndex + 1);
+                }}
+              >
+                Siguiente
+              </button>
+            </div>
+            {React.cloneElement(context.modal, {
+              row: searchedData[currentIndex],
+            })}
+          </div>
+        </Modal>
+      )}
+      {isLoading && (
+        <div
+          className="bg-white/40  absolute inset-0 text-black flex items-center justify-center"
+          style={{ zIndex: 9999999 }}
+        >
+          Loading...
+        </div>
+      )}
+    </div>
+  );
+}
+
+function valueFormatter({
+  value,
+  currentCoin = "",
+}: {
+  value: any;
+  currentCoin?: ReactNode;
+}) {
+  if (value == null || value === "") return "";
+
+  const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
+
+  if (`${value}`.match(isDate)) {
+    return value.toString().split("T")[0].split("-").reverse().join("/");
+  }
+
+  const splited = `${value}`.split(".");
+
+  const hasDecimals =
+    splited.length == 2 &&
+    splited.every((v: any) => `${v}`.match(regularExpresions.number));
+
+  if (hasDecimals) {
+    return [
+      currentCoin,
+      (+`${value}`).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }),
+    ].join(" ");
+  }
+
+  return value;
+}