next-recomponents 1.7.63 → 1.8.2

package/src/table2/icons.tsx

@@ -1,116 +0,0 @@
-export default function FilterIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 576 512"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M3.9 22.9C10.5 8.9 24.5 0 40 0L472 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L396.4 195.6C316.2 212.1 256 283 256 368c0 27.4 6.3 53.4 17.5 76.5c-1.6-.8-3.2-1.8-4.7-2.9l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 65.3C-.7 53.4-2.8 36.8 3.9 22.9zM432 224a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm59.3 107.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L432 345.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L409.4 368l-36.7 36.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L432 390.6l36.7 36.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L454.6 368l36.7-36.7z"></path>
-    </svg>
-  );
-}
-
-export function MdOutlineFirstPage() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path fill="none" d="M24 0v24H0V0h24z" opacity=".87"></path>
-      <path d="M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"></path>
-    </svg>
-  );
-}
-
-export function MdOutlineLastPage() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path fill="none" d="M0 0h24v24H0V0z" opacity=".87"></path>
-      <path d="M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"></path>
-    </svg>
-  );
-}
-export function GrFormNext() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <polyline fill="none" strokeWidth="2" points="9 6 15 12 9 18"></polyline>
-    </svg>
-  );
-}
-export function GrFormPrevious() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <polyline
-        fill="none"
-        strokeWidth="2"
-        points="9 6 15 12 9 18"
-        transform="matrix(-1 0 0 1 24 0)"
-      ></polyline>
-    </svg>
-  );
-}
-
-export function RiFileExcel2Fill() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1rem"
-      width="1rem"
-      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.87732ZM17 2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V2.99997ZM10.2 12L13 7.99997H10.6L9 10.2857L7.39999 7.99997H5L7.8 12L5 16H7.39999L9 13.7143L10.6 16H13L10.2 12Z"></path>
-    </svg>
-  );
-}
-export function IoIosSave() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 512 512"
-      height="1rem"
-      width="1rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M272 64h-16c-4.4 0-8 3.6-8 8v72c0 4.4 7.6 8 12 8h12c4.4 0 8-3.6 8-8V72c0-4.4-3.6-8-8-8z"></path>
-      <path d="M433.9 130.1L382 78.2c-9-9-21.3-14.2-34.1-14.2h-28c-8.8 0-16 7.3-16 16.2v80c0 8.8-7.2 16-16 16H160c-8.8 0-16-7.2-16-16v-80c0-8.8-7.2-16.2-16-16.2H96c-17.6 0-32 14.4-32 32v320c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V164c0-12.7-5.1-24.9-14.1-33.9zM322 400.1c0 8.8-8 16-17.8 16H143.8c-9.8 0-17.8-7.2-17.8-16v-96c0-8.8 8-16 17.8-16h160.4c9.8 0 17.8 7.2 17.8 16v96z"></path>
-    </svg>
-  );
-}

package/src/table2/index.tsx

@@ -1,70 +0,0 @@
-"use client";
-import React, {
-  DetailedHTMLProps,
-  TableHTMLAttributes,
-  useEffect,
-  useState,
-} from "react";
-import useTableContext from "./context";
-import VTable from "./v.table";
-import HTable from "./h.table";
-
-interface TableProps
-  extends DetailedHTMLProps<
-    TableHTMLAttributes<HTMLTableElement>,
-    HTMLTableElement
-  > {
-  data: Record<string, any>[];
-  maxItems?: number;
-  symbols?: Record<string, React.ReactNode>;
-  handlers?: Record<string, React.ReactNode>;
-  onSave?: (data: Record<string, any>[]) => void;
-  exportName?: string;
-  selectItems?: boolean;
-  colSizes?: Record<string, number>;
-}
-
-export default function TableDos({
-  data,
-  maxItems = Infinity,
-  symbols = {},
-  handlers = {},
-  onSave,
-  exportName,
-  selectItems,
-  colSizes,
-  ...props
-}: TableProps) {
-  if (data.length == 0) return null;
-
-  const [myData, setMyData] = useState(data);
-
-  const isArray = Array.isArray(data);
-
-  const context = useTableContext({
-    data: myData,
-    maxItems,
-    symbols,
-    handlers,
-    onSave,
-    exportName,
-    selectItems,
-    colSizes,
-  });
-
-  useEffect(() => {
-    setMyData(data);
-  }, [data]);
-
-  if (!context) return null;
-
-  return (
-    <>
-      {isArray ? (
-        <VTable context={context} {...props} />
-      ) : (
-        <HTable context={context} />
-      )}
-    </>
-  );
-}

package/src/table2/v.table.body.tsx

@@ -1,155 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { TableContextType } from "./context";
-
-interface RowProps {
-  rowKey: string;
-  context: TableContextType;
-  handleCheck: (key: string, checked: boolean) => void;
-}
-
-// Memoizamos cada fila
-const Row = React.memo(
-  ({ rowKey, context, handleCheck }: RowProps) => {
-    const rowData = context.defaultData[rowKey];
-
-    return (
-      <tr className="hover:bg-gray-200">
-        {context.selectItems && (
-          <th className="border-b">
-            <input
-              type="checkbox"
-              className="w-5 h-5 accent-green-500"
-              checked={!!rowData?._checkedItem}
-              onChange={(e) => handleCheck(rowKey, e.target.checked)}
-            />
-          </th>
-        )}
-
-        {context.headers.map((header, index) => {
-          if (header.startsWith("_")) return null;
-
-          const value = rowData[header];
-
-          if (context.handlers?.[header]) {
-            return (
-              <td className="p-1 w-[100px]" key={index}>
-                {React.isValidElement(context.handlers[header]) &&
-                  React.cloneElement(context.handlers[header] as any, {
-                    value,
-                    onChange: (e: any) => {
-                      const result = (
-                        context.handlers[header] as any
-                      )?.props?.onChange?.(e);
-                      const newData = { ...context.defaultData };
-                      for (let item in result) {
-                        newData[rowKey][item] = result[item];
-                      }
-                      newData[rowKey][header] = e.target.value;
-                      context.setDefaultData(newData);
-                    },
-                  })}
-              </td>
-            );
-          } else {
-            const updateRow = (data: any) => {
-              const newData = { ...context.defaultData };
-              for (let item in data) {
-                newData[rowKey][item] = data[item];
-              }
-              context.setDefaultData(newData);
-            };
-
-            return (
-              <td className="p-1 w-[100px] border-b" key={index}>
-                {context.symbols?.[header] ? (
-                  <div className="flex justify-between w-full">
-                    <div>
-                      {React.isValidElement(context.symbols?.[header]) &&
-                        React.cloneElement(context.symbols?.[header] as any, {
-                          row: rowData,
-                          updateRow,
-                          onClick: (e: any) => {
-                            e.row = rowData;
-                            e.updateRow = updateRow;
-                            (
-                              context.symbols?.[header] as any
-                            )?.props?.onClick?.(e);
-                          },
-                        })}
-                    </div>
-                    <div className="w-full px-2 py-[3px] truncate">{value}</div>
-                  </div>
-                ) : (
-                  <div className="w-full px-2 py-[3px]">{value}</div>
-                )}
-              </td>
-            );
-          }
-        })}
-      </tr>
-    );
-  },
-  (prev, next) => {
-    // Solo re-renderiza si cambió la fila específica
-    return (
-      prev.context.defaultData[prev.rowKey] ===
-      next.context.defaultData[next.rowKey]
-    );
-  }
-);
-
-export default function VTableBody({ context }: { context: TableContextType }) {
-  const handleCheck = useCallback((key: string, checked: boolean) => {
-    context.setDefaultData((prev: any) => ({
-      ...prev,
-      [key]: { ...prev[key], _checkedItem: checked },
-    }));
-  }, []);
-
-  return (
-    <tbody className="bg-white">
-      {context.paginatedBody.map((key) => (
-        <Row
-          key={key}
-          rowKey={key}
-          context={context}
-          handleCheck={handleCheck}
-        />
-      ))}
-    </tbody>
-  );
-}
-
-// function Handler({
-//   item,
-//   row,
-//   name,
-//   context,
-//   id,
-// }: {
-//   item: React.ReactNode;
-//   row: any;
-//   name: string;
-//   context: TableContextType;
-//   id: string | number;
-// }) {
-//   return (
-//     context && (
-//       <div>
-//         {React.isValidElement(item) &&
-//           React.cloneElement(item, {
-//             value: row[name],
-//             onChange: (e: any) => {
-//               const newData = [...context?.defaultData];
-//               const index = newData.findIndex((d) =>
-//                 [d._id, d.id].includes(id)
-//               );
-//               console.log(newData, index, name, row);
-//               newData[index][name] = e.target.value;
-//               context?.setDefaultData(newData);
-//             },
-//           })}
-//       </div>
-//     )
-//   );
-// }

package/src/table2/v.table.head.filter.tsx

@@ -1,196 +0,0 @@
-import { useMemo, useState } from "react";
-import { TableContextType } from "./context";
-import FilterIcon from "./icons";
-
-export default function TH({
-  context,
-  h,
-}: {
-  context: TableContextType;
-  h: any;
-}) {
-  if (!context) return null;
-  if (`${h}`.startsWith("_")) return;
-
-  const [search, setSearch] = useState("");
-  const [visible, setVisible] = useState(false);
-  const list = context.list[h];
-  const [prev, setPrev] = useState<any[]>(context.filters[h]);
-
-  const filteredList = useMemo(() => {
-    return list.filter((item: any) => {
-      if (!search) return true;
-
-      return item?.toString().toLowerCase().includes(search.toLowerCase());
-    });
-  }, [list, search]);
-
-  const colSize = context?.colSizes?.[h] || 100;
-  const hasFilter = useMemo(
-    () => !Object.values(context.filters[h]).every((p) => p === true),
-    [context.filters[h]]
-  );
-
-  return (
-    <th className="p-1 relative" style={{ zIndex: 9 }}>
-      <div className={" min-w-[" + colSize + "px] resize-x overflow-auto"}>
-        <div className="flex justify-between gap-2 text-white   p-1 shadow rounded text-center w-full font-bold text-xs">
-          <div
-            onClick={(e) => setVisible(!visible)}
-            className="w-full text-center flex gap-2 justify-center cursor-pointer"
-          >
-            {h}{" "}
-            {hasFilter && (
-              <div className="text-red-500 ">
-                <FilterIcon />
-              </div>
-            )}
-          </div>
-        </div>
-        {visible && (
-          <>
-            <div
-              className="fixed top-0 left-0 w-screen h-screen "
-              style={{ zIndex: 10 }}
-              onClick={(e) => setVisible(!visible)}
-            ></div>
-            <div
-              className="absolute border shadow rounded w-[300px] flex flex-col gap-2 bg-white p-2 text-sm resize-x  overflow-auto"
-              style={{ zIndex: 11 }}
-            >
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  setSearch("");
-                  setVisible(false);
-                  context.setPage(1);
-                  const p = {
-                    ...Object.keys(prev).reduce((acc, i) => {
-                      if (search != "") {
-                        acc[i] = i
-                          .toString()
-                          .toLowerCase()
-                          .includes(search.toLowerCase())
-                          ? prev[i as any]
-                          : false;
-                      } else {
-                        acc[i] = prev[i as any];
-                      }
-                      return acc;
-                    }, {} as any),
-                  };
-                  setPrev(p);
-
-                  context.setFilters((nf: any) => {
-                    return { ...nf, [h]: p };
-                  });
-                }}
-              >
-                {hasFilter && (
-                  <button
-                    type="button"
-                    className="border p-2 flex  justify-center  gap-2 w-full  items-center text-red-500"
-                    onClick={(e) => {
-                      const p = {
-                        ...Object.keys(context.filters[h]).reduce((acc, i) => {
-                          acc[i] = true;
-                          return acc;
-                        }, {} as any),
-                      };
-                      setPrev(p);
-                      context.setFilters((nf: any) => {
-                        return { ...nf, [h]: p };
-                      });
-                      setVisible(false);
-                    }}
-                  >
-                    <FilterIcon /> Quitar Filtro
-                  </button>
-                )}
-                <input
-                  className="border p-1 w-full p-2"
-                  placeholder="Buscar..."
-                  type="search"
-                  onChange={(e) => setSearch(e.target.value)}
-                  value={search}
-                />
-                <div
-                  className="w-full h-[300px] p-2 "
-                  style={{ overflowY: "auto" }}
-                >
-                  <label className="flex gap-2  truncate">
-                    <input
-                      type="checkbox"
-                      checked={Object.keys(prev)
-                        .filter((v) => {
-                          return v
-                            .toString()
-                            .toLowerCase()
-                            .includes(search.toLowerCase());
-                        })
-                        .every((v: any) => prev[v] === true)}
-                      onChange={(e) => {
-                        setPrev((preveN: any) => {
-                          return {
-                            ...Object.keys(preveN).reduce((acc, i) => {
-                              if (search != "") {
-                                acc[i] = i
-                                  .toString()
-                                  .toLowerCase()
-                                  .includes(search.toLowerCase())
-                                  ? !preveN[i]
-                                  : false;
-                              } else {
-                                acc[i] = e.target.checked;
-                              }
-                              return acc;
-                            }, {} as any),
-                          };
-                        });
-                      }}
-                    />
-                    (Seleccionar Todo)
-                  </label>
-                  {filteredList.map((item: any, i: number) => {
-                    const checked = prev[item];
-                    const visibles = Array.from(context.filters[h]);
-
-                    return (
-                      <label className="flex gap-2 truncate" key={item + i}>
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          onChange={(e) => {
-                            setPrev((preveN: any) => {
-                              return { ...preveN, [item]: !checked };
-                            });
-                          }}
-                        />
-                        {item != null ? item : "(Vacio)"}
-                      </label>
-                    );
-                  })}
-                </div>
-                <div className="flex justify-between py-2">
-                  <button
-                    type="button"
-                    className="p-1 bg-red-500 text-white border shadow rounded"
-                    onClick={(e) => setVisible(!visible)}
-                  >
-                    Cancelar
-                  </button>
-                  <button
-                    type="submit"
-                    className="p-1 bg-blue-500 text-white border shadow rounded"
-                  >
-                    Aceptar
-                  </button>
-                </div>
-              </form>
-            </div>
-          </>
-        )}
-      </div>
-    </th>
-  );
-}

package/src/table2/v.table.head.tsx

@@ -1,43 +0,0 @@
-import { TableContextType } from "./context";
-import TH from "./v.table.head.filter";
-
-export default function THead({ context }: { context: TableContextType }) {
-  return (
-    context && (
-      <thead className="bg-blue-400">
-        <tr className="">
-          {context.selectItems && (
-            <th className="border-b">
-              <div className={""}>
-                <div className="flex justify-between gap-2 text-white  p-1 shadow rounded text-center w-full font-bold text-xs">
-                  <label className="w-full text-center flex items-center justify-center gap-1">
-                    <input
-                      type="checkbox"
-                      className="w-5 h-5 accent-green-500"
-                      defaultChecked={false}
-                      onChange={(e) => {
-                        const newData = Object.keys(context.defaultData).map(
-                          (key: any) => {
-                            const row = context.defaultData[key];
-                            return {
-                              ...row,
-                              _checkedItem: e.target.checked,
-                            };
-                          }
-                        );
-                        context.setDefaultData(newData);
-                      }}
-                    />
-                  </label>
-                </div>
-              </div>
-            </th>
-          )}
-          {context.headers.map((h) => {
-            return <TH key={h} h={h} context={context} />;
-          })}
-        </tr>
-      </thead>
-    )
-  );
-}

package/src/table2/v.table.pagination.tsx

@@ -1,73 +0,0 @@
-import { TableContextType } from "./context";
-import {
-  GrFormNext,
-  GrFormPrevious,
-  MdOutlineFirstPage,
-  MdOutlineLastPage,
-} from "./icons";
-
-export default function VtablePagination({
-  context,
-}: {
-  context: TableContextType;
-}) {
-  return (
-    context && (
-      <div className="flex justify-center p-2 bg-gray-100 ">
-        <div className="flex gap-2">
-          {context.maxItems != Infinity && (
-            <>
-              <button
-                onClick={() => context.setPage(1)}
-                className="border shadow rounded p-1 bg-gray-200 hover:bg-gray-300"
-                // disabled={!context.canPreviousPage}
-              >
-                <MdOutlineFirstPage />
-              </button>
-              <button
-                className="border shadow rounded p-1 bg-gray-200 hover:bg-gray-300"
-                onClick={() =>
-                  context.setPage((page) => (page > 1 ? page - 1 : page))
-                }
-                // disabled={!context.canPreviousPage}
-              >
-                <GrFormPrevious />
-              </button>
-            </>
-          )}
-          <div className="flex flex-col gap-1 items-center justify-center text-xs font-bold bg-white border rounded py-1 px-10">
-            <span>
-              Página {context.page} de {context.totalPages}
-            </span>
-            <span>
-              Mostrando {context.filteredBody.length} de{" "}
-              {Object.values(context.defaultData).length} Elementos
-            </span>
-          </div>
-          {context.maxItems != Infinity && (
-            <>
-              <button
-                className="border shadow rounded p-1 bg-gray-200 hover:bg-gray-300"
-                onClick={() =>
-                  context.setPage((page) =>
-                    page < context.totalPages ? page + 1 : page
-                  )
-                }
-                //   disabled={!context.canNextPage}
-              >
-                <GrFormNext />
-              </button>
-              <button
-                className="border shadow rounded p-1 bg-gray-200 hover:bg-gray-300"
-                onClick={() => context.setPage(context.totalPages)}
-                // disabled={!context.canPreviousPage}
-              >
-                <MdOutlineLastPage />
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-    )
-  );
-}