next-recomponents 2.0.40 → 2.0.42

package/src/table-advanced/header.tsx

@@ -0,0 +1,335 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import DropIcon, {
+  ArrowDownIcon,
+  ArrowUPIcon,
+  FilterIcon,
+  OrderAscIcon,
+  OrderDesIcon,
+} from "./icons";
+import { MenuItem } from "./menu.item";
+import Form from "../form";
+import { ContextType } from "./context";
+import { TableProps } from "./types";
+
+export function Header({
+  header,
+  context,
+  drag,
+  padding,
+}: {
+  header: string;
+  context: ContextType & Omit<TableProps, "data">;
+  drag: {
+    widths: Record<string, number>;
+    gridTemplateColumns: string;
+    startDrag: (e: React.MouseEvent, headerKey: string) => void;
+  };
+  padding: string;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  const sortIndex = context.sort.findIndex((b) => b.field == header);
+  const [text, setText] = useState("");
+  const cellRef = useRef<HTMLDivElement>(null);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(
+    null,
+  );
+
+  const filteredValues = [
+    ...new Set(context.data.map((d) => d[header])),
+  ].filter((d) => {
+    if (text == "") return true;
+    return `${d}`.toLowerCase().includes(text.toLowerCase());
+  });
+
+  const [selected, setSelected] = useState([...filteredValues]);
+
+  const hasFilter = context.filters.find((b) => b.field == header);
+
+  useEffect(() => {
+    if (visible) {
+      context.setCurrentHeader(header);
+    }
+    setText("");
+  }, [visible]);
+
+  // Calcula la posición del popup relativa al viewport cada vez que se abre,
+  // y la vuelve a calcular en scroll/resize mientras está abierto.
+  useEffect(() => {
+    if (!visible || !cellRef.current) {
+      setCoords(null);
+      return;
+    }
+
+    const updateCoords = () => {
+      if (!cellRef.current) return;
+      const rect = cellRef.current.getBoundingClientRect();
+      const POPUP_WIDTH = 300;
+      setCoords({
+        top: rect.bottom,
+        left: Math.max(8, rect.right - POPUP_WIDTH),
+      });
+    };
+
+    updateCoords();
+    window.addEventListener("scroll", updateCoords, true);
+    window.addEventListener("resize", updateCoords);
+    return () => {
+      window.removeEventListener("scroll", updateCoords, true);
+      window.removeEventListener("resize", updateCoords);
+    };
+  }, [visible]);
+
+  if (header == "__modal__") {
+    return (
+      <div className="">
+        <div
+          className={"break-words border  text-center relative  "}
+          style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
+        ></div>
+      </div>
+    );
+  } else if (header == "__select__") {
+    return (
+      <div className="">
+        <div
+          className={
+            "border flex items-center justify-center  text-center relative  "
+          }
+          style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
+        >
+          <input
+            type="checkbox"
+            className="w-5 h-5 accent-blue-600 transition-all  duration-300 checked:scale-110"
+            checked={Boolean(
+              context.selected.length == context.filteredData.length,
+            )}
+            onChange={(e) => {
+              if (context.selected.length < context.filteredData.length) {
+                context.setSelected(context.filteredData.map((d) => d.id));
+              } else {
+                context.setSelected([]);
+              }
+            }}
+          />
+        </div>
+      </div>
+    );
+  } else
+    return (
+      <div className="">
+        <div
+          ref={cellRef}
+          className={"break-words border  text-center relative "}
+          style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
+        >
+          <div className="flex gap-5 items-center justify-between h-full cursor-pointer">
+            <div className="flex gap-2">
+              {hasFilter ? (
+                <div
+                  className="cursor-pointer"
+                  onClick={(e) => {
+                    context.setFilters(null);
+                    setSelected(filteredValues);
+                  }}
+                >
+                  <FilterIcon />
+                </div>
+              ) : (
+                <div></div>
+              )}
+              <div
+                onClick={(e) => {
+                  context.setSort({
+                    [header]: "TOGGLE",
+                  });
+                }}
+              >
+                {sortIndex >= 0 ? (
+                  context.sort[sortIndex].type === "ASC" ? (
+                    <ArrowUPIcon />
+                  ) : (
+                    <ArrowDownIcon />
+                  )
+                ) : (
+                  <div></div>
+                )}
+              </div>
+            </div>
+            <div
+              className="w-full"
+              onClick={(e) => {
+                context.setSort({
+                  [header]: "TOGGLE",
+                });
+              }}
+            >
+              {header}
+            </div>
+            <div
+              style={{ zIndex: 10 }}
+              className="icon font-bold  p-1 cursor-pointer pr-3 "
+              onClick={(e) => setVisible(true)}
+            >
+              <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"
+              style={{ right: -2, width: 6, zIndex: 20 }}
+            />
+          )}
+
+          {visible &&
+            context.currentHeader == header &&
+            createPortal(
+              <>
+                {/* Overlay a pantalla completa para cerrar al hacer click fuera */}
+                <div
+                  className="w-screen h-screen fixed top-0 left-0"
+                  onClick={(e) => {
+                    setVisible(false);
+                  }}
+                  style={{ zIndex: 9998 }}
+                />
+
+                {/* Popup posicionado con fixed + coordenadas calculadas del header real */}
+                {coords && (
+                  <div
+                    className="fixed"
+                    style={{ top: coords.top, left: coords.left, zIndex: 9999 }}
+                  >
+                    <div className="bg-gray-100  w-[300px] flex flex-col border shadow rounded ">
+                      {hasFilter && (
+                        <MenuItem
+                          label="Quitar filtro"
+                          icon={<FilterIcon />}
+                          onClick={(e) => {
+                            setVisible(false);
+                            context.setFilters(null);
+                            setSelected(filteredValues);
+                          }}
+                        />
+                      )}
+                      <MenuItem
+                        label="Orenar de A a Z"
+                        icon={<OrderAscIcon />}
+                        onClick={(e) => {
+                          setVisible(false);
+                          context.setSort({ [header]: "ASC" });
+                          context.setCurrentHeader(null);
+                        }}
+                      />
+                      <MenuItem
+                        label="Orenar de Z a A"
+                        icon={<OrderDesIcon />}
+                        onClick={(e) => {
+                          setVisible(false);
+                          context.setSort({ [header]: "DESC" });
+                          context.setCurrentHeader(null);
+                        }}
+                      />
+                      <Form
+                        onSubmit={(e) => {
+                          if (text != "") {
+                            setSelected(filteredValues);
+                          }
+                          context.setFilters({
+                            field: header,
+                            values: text != "" ? filteredValues : selected,
+                          });
+                          setVisible(false);
+                          context.setCurrentHeader(null);
+                        }}
+                      >
+                        <div className="m-2 bg-white gap-2 flex flex-col">
+                          <input
+                            placeholder="Buscar..."
+                            className="border shadow rounded p-2 w-full"
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                          />
+                          <div
+                            className="flex items-start flex-col p-2 border shadow rounded max-w-[600px] h-[300px] bg-white "
+                            style={{ overflow: "auto" }}
+                          >
+                            <div
+                              className={
+                                "flex gap-2 " +
+                                (text != "" ? "text-gray-400" : "")
+                              }
+                            >
+                              <input
+                                type="checkbox"
+                                checked={
+                                  text != "" ||
+                                  selected.length == filteredValues.length
+                                }
+                                onClick={(e) => {
+                                  if (
+                                    selected.length == filteredValues.length
+                                  ) {
+                                    setSelected([]);
+                                  } else {
+                                    setSelected(filteredValues);
+                                  }
+                                }}
+                                disabled={text != ""}
+                              />
+                              <div className="truncate">Seleccionar todo</div>
+                            </div>
+
+                            {filteredValues.map((d) => {
+                              return (
+                                <div key={d} className="flex gap-2 ">
+                                  <input
+                                    disabled={text != ""}
+                                    type="checkbox"
+                                    onChange={(e) => {
+                                      const ns = [...selected];
+                                      const index = ns.findIndex((n) => n == d);
+                                      if (index >= 0) {
+                                        ns.splice(index, 1);
+                                      } else {
+                                        ns.push(d);
+                                      }
+                                      setSelected(ns);
+                                    }}
+                                    checked={text != "" || selected.includes(d)}
+                                  />
+                                  <div className="truncate">{d}</div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                        <div className="flex justify-between p-2">
+                          <button
+                            onClick={(e) => {
+                              setVisible(false);
+                              context.setCurrentHeader(null);
+                            }}
+                            className="p-2 border shadow rounded bg-gray-300 text-black"
+                            type="button"
+                          >
+                            Cancelar
+                          </button>
+                          <button className="p-2 border shadow rounded bg-blue-500 text-white">
+                            Aceptar
+                          </button>
+                        </div>
+                      </Form>
+                    </div>
+                  </div>
+                )}
+              </>,
+              document.body,
+            )}
+        </div>
+      </div>
+    );
+}

package/src/table-advanced/icons.tsx

@@ -0,0 +1,167 @@
+export default function DropIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="1em"
+      className="text-blue-500"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="256" cy="256" r="48"></circle>
+      <circle cx="256" cy="416" r="48"></circle>
+      <circle cx="256" cy="96" r="48"></circle>
+    </svg>
+  );
+}
+export function EditIcon() {
+  return (
+    <svg
+      className="text-white"
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M16.7574 2.99678L14.7574 4.99678H5V18.9968H19V9.23943L21 7.23943V19.9968C21 20.5491 20.5523 20.9968 20 20.9968H4C3.44772 20.9968 3 20.5491 3 19.9968V3.99678C3 3.4445 3.44772 2.99678 4 2.99678H16.7574ZM20.4853 2.09729L21.8995 3.5115L12.7071 12.7039L11.2954 12.7064L11.2929 11.2897L20.4853 2.09729Z"></path>
+    </svg>
+  );
+}
+export function ExcelIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2.85858 2.87732L15.4293 1.0815C15.7027 1.04245 15.9559 1.2324 15.995 1.50577C15.9983 1.52919 16 1.55282 16 1.57648V22.4235C16 22.6996 15.7761 22.9235 15.5 22.9235C15.4763 22.9235 15.4527 22.9218 15.4293 22.9184L2.85858 21.1226C2.36593 21.0522 2 20.6303 2 20.1327V3.86727C2 3.36962 2.36593 2.9477 2.85858 2.87732ZM4 4.73457V19.2654L14 20.694V3.30599L4 4.73457ZM17 19H20V4.99997H17V2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V19ZM10.2 12L13 16H10.6L9 13.7143L7.39999 16H5L7.8 12L5 7.99997H7.39999L9 10.2857L10.6 7.99997H13L10.2 12Z"></path>
+    </svg>
+  );
+}
+export function OrderAscIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      version="1"
+      viewBox="0 0 48 48"
+      enableBackground="new 0 0 48 48"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polygon
+        fill="#546E7A"
+        points="38,33 38,5 34,5 34,33 28,33 36,43 44,33"
+      ></polygon>
+      <g fill="#2196F3">
+        <path d="M16.8,17.2h-5.3l-1.1,3H6.9L12.6,5h2.9l5.7,15.2h-3.2L16.8,17.2z M12.2,14.5H16l-1.9-5.7L12.2,14.5z"></path>
+        <path d="M12.4,40.5H20V43H8.4v-1.9L16,30.3H8.4v-2.5h11.4v1.7L12.4,40.5z"></path>
+      </g>
+    </svg>
+  );
+}
+
+export function OrderDesIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      version="1"
+      viewBox="0 0 48 48"
+      enableBackground="new 0 0 48 48"
+      height="1em"
+      width="1em"
+      className="text-blue-500"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="#2196F3">
+        <path d="M16.8,40h-5.3l-1.1,3H6.9l5.7-15.2h2.9L21.1,43h-3.2L16.8,40z M12.2,37.3H16l-1.9-5.7L12.2,37.3z"></path>
+        <path d="M12.4,17.7H20v2.5H8.4v-1.9L16,7.5H8.4V5h11.4v1.7L12.4,17.7z"></path>
+      </g>
+      <polygon
+        fill="#546E7A"
+        points="38,33 38,5 34,5 34,33 28,33 36,43 44,33"
+      ></polygon>
+    </svg>
+  );
+}
+
+export function ArrowDownIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      className="text-blue-500"
+      viewBox="0 0 512 512"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M348.3 295.6c-5-5.1-13.3-5.1-18.4-.1L269 356.2V124.9c0-7.1-5.8-12.9-13-12.9s-13 5.8-13 12.9v231.3l-60.9-60.8c-5.1-5-13.3-4.9-18.4.1-5 5.1-5 13.2.1 18.3l83 82.4c1.2 1.1 2.5 2 4.1 2.7 1.6.7 3.3 1 5 1 3.4 0 6.6-1.3 9.1-3.7l83-82.4c5.2-4.9 5.3-13.1.3-18.2z"></path>
+    </svg>
+  );
+}
+
+export function ArrowUPIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      className="text-blue-500"
+      viewBox="0 0 512 512"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M348.3 216.4c-5 5.1-13.3 5.1-18.4.1L269 155.8v231.3c0 7.1-5.8 12.9-13 12.9s-13-5.8-13-12.9V155.8l-60.9 60.8c-5.1 5-13.3 4.9-18.4-.1-5-5.1-5-13.2.1-18.3l83-82.4c1.2-1.1 2.5-2 4.1-2.7 1.6-.7 3.3-1 5-1 3.4 0 6.6 1.3 9.1 3.7l83 82.4c5.2 4.9 5.3 13.1.3 18.2z"></path>
+    </svg>
+  );
+}
+export function SearchIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      className="text-blue-500"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M7 9H2V7h5zm0 3H2v2h5zm13.59 7-3.83-3.83c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L22 17.59zM17 11c0-1.65-1.35-3-3-3s-3 1.35-3 3 1.35 3 3 3 3-1.35 3-3M2 19h10v-2H2z"></path>
+    </svg>
+  );
+}
+export function FilterIcon() {
+  return (
+    <svg
+      className="text-red-300"
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0zM0 0h24m0 24H0"></path>
+      <path d="M4.25 5.66c.1.13 5.74 7.33 5.74 7.33V19c0 .55.45 1 1.01 1h2.01c.55 0 1.01-.45 1.01-1v-6.02s5.49-7.02 5.75-7.34S20 5 20 5c0-.55-.45-1-1.01-1H5.01C4.4 4 4 4.48 4 5c0 .2.06.44.25.66"></path>
+    </svg>
+  );
+}

package/src/table-advanced/index.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useEffect, useMemo, useReducer, useState } from "react";
+import regularExpresions, { FiltersType, SortType, TableProps } from "./types";
+import HTable from "./h.table";
+import useContext from "./context";
+
+export default function TableAdvanced(tableProps: TableProps) {
+  const { data, ...props } = tableProps;
+
+  const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
+
+  useEffect(() => {
+    context.setData(
+      Array.isArray(data)
+        ? data.map((d) => {
+            return {
+              ...(tableProps?.modal ? { __modal__: "" } : {}),
+              ...(tableProps?.onSelect ? { __select__: "" } : {}),
+              ...d,
+            };
+          })
+        : data,
+    );
+  }, [data]);
+
+  useEffect(() => {
+    if (tableProps?.sortBy) {
+      const [k, v] = Object.entries(tableProps.sortBy)[0];
+
+      context.setSort({ [k]: v });
+    }
+  }, [tableProps?.sortBy]);
+
+  if (Array.isArray(data) && data.length > 0) {
+    if (data.every((d) => !d?.id)) {
+      throw new Error("All data rows must have an 'id' property.");
+    }
+    if (props?.onSave && props.onSelect) {
+      throw new Error("Must have only one of onSave or onSelect");
+    }
+    return <HTable context={{ ...context, ...props }} />;
+  }
+  return null;
+}

package/src/table-advanced/menu.item.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+export function MenuItem({
+  label,
+  icon,
+  onClick,
+}: {
+  label: string;
+  icon: ReactNode;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+}) {
+  return (
+    <div
+      className="cursor-pointer border p-2 hover:bg-gray-100 flex items-center bg-white gap-2"
+      onClick={onClick}
+    >
+      {icon}
+      {label}
+    </div>
+  );
+}

package/src/table-advanced/searchable.tsx

@@ -0,0 +1,24 @@
+import { TableProps } from "@mui/material";
+import { ContextType } from "./context";
+import { SearchIcon } from "./icons";
+
+export default function Searchable({
+  context,
+}: {
+  context: ContextType & Omit<TableProps, "data">;
+}) {
+  return (
+    <div className="flex justify-start p-2 relative w-96">
+      <input
+        type="search"
+        placeholder="Buscar por ...."
+        className="border shadow rounded p-2 w-full pr-10"
+        value={context.searchBy}
+        onChange={(e) => context.setSearchBy(e.target.value)}
+      />
+      <div className="absolute top-0 right-0 p-5">
+        <SearchIcon />
+      </div>
+    </div>
+  );
+}

package/src/table-advanced/sort.reducer.ts

@@ -0,0 +1,29 @@
+import { SortType } from "./types";
+
+export const sortReducer = (
+  acc: SortType[],
+  b: Record<string, "ASC" | "DESC" | "TOGGLE">,
+) => {
+  const oldAcc = [...acc];
+  const newAcc = [];
+  const keys = Object.keys(b);
+  const k = keys[0];
+
+  let newType = b[k];
+  if (b[k] == "TOGGLE") {
+    newType = oldAcc?.[0]?.type == "ASC" ? "DESC" : "ASC";
+  }
+  newAcc.push({ field: k, type: newType });
+
+  // const newAcc = [...acc];
+  // const keys = Object.keys(b);
+  // for (let k of keys) {
+  //   const index = newAcc.findIndex((aa) => aa.field == k);
+  //   if (index >= 0) {
+  //     newAcc.splice(index, 1);
+  //   }
+
+  //   newAcc.push({ field: k, type: b[k] });
+  // }
+  return newAcc;
+};