next-recomponents 2.0.69 → 2.0.71

package/dist/index.d.mts

@@ -211,8 +211,9 @@ type Props = {
     width?: string;
     height?: string;
     onDelete?: (item: Item) => void;
+    groupId?: number;
 };
-declare function DocumentViewer({ item, width, height, onDelete, }: Props): react_jsx_runtime.JSX.Element;
+declare function DocumentViewer({ item, width, height, onDelete, groupId, }: Props): react_jsx_runtime.JSX.Element;
 
 interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     data: T[];

package/dist/index.d.ts

@@ -211,8 +211,9 @@ type Props = {
     width?: string;
     height?: string;
     onDelete?: (item: Item) => void;
+    groupId?: number;
 };
-declare function DocumentViewer({ item, width, height, onDelete, }: Props): react_jsx_runtime.JSX.Element;
+declare function DocumentViewer({ item, width, height, onDelete, groupId, }: Props): react_jsx_runtime.JSX.Element;
 
 interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     data: T[];

package/dist/index.js

@@ -37594,9 +37594,12 @@ function DocumentViewer({
   item,
   width = "100%",
   height = "100%",
-  onDelete
+  onDelete,
+  groupId = 1
 }) {
   const { url, name, contentType } = item;
+  const [index, setIndex] = (0, import_react12.useState)(-1);
+  const [items, setItems] = (0, import_react12.useState)([]);
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
   const isGoogleDocCompatible = contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
@@ -37604,10 +37607,30 @@ function DocumentViewer({
     url
   )}&embedded=true` : url;
   const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  function handleChangeIndex(nuevoIndex) {
+    var _a, _b, _c, _d;
+    const currentIndex = items.findIndex((a) => a.id == item.name);
+    const openButton = (_b = (_a = items[nuevoIndex]).querySelector) == null ? void 0 : _b.call(_a, ".open-button");
+    const closeButton = (_d = (_c = items[currentIndex]).querySelector) == null ? void 0 : _d.call(
+      _c,
+      ".close-button"
+    );
+    setIndex(nuevoIndex);
+    closeButton.click();
+    openButton.click();
+  }
+  (0, import_react12.useEffect)(() => {
+    if (typeof window != "undefined") {
+      const i = document.querySelectorAll(`.documentviewer-${groupId}`);
+      const arr = Array.from(i);
+      setItems(arr);
+    }
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
-      className: "group relative rounded-lg bg-white shadow-md overflow-hidden",
+      id: item.name,
+      className: `group relative rounded-lg bg-white shadow-md overflow-hidden  documentviewer-${groupId} `,
       style: {
         width,
         height
@@ -37632,7 +37655,7 @@ function DocumentViewer({
         isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
-            className: "\r\n      fixed inset-0 z-[9999]\r\n      bg-black/50\r\n      flex items-center justify-center\r\n      p-6\r\n    ",
+            className: "\r\n      fixed inset-0 z-[9999]\r\n      bg-black/50\r\n      flex items-center justify-center\r\n      py-5 px-[200px]\r\n    ",
             onClick: () => setIsOpen(false),
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "div",
@@ -37645,16 +37668,34 @@ function DocumentViewer({
                     {
                       type: "button",
                       onClick: () => setIsOpen(false),
-                      className: "\r\n          absolute top-4 right-4 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      className: "\r\n          absolute top-4 right-4 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl close-button\r\n        ",
                       children: "\u2715"
                     }
                   ),
+                  index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleChangeIndex(index + 1),
+                      className: "\r\n          absolute top-[50%] -right-20 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      children: ">"
+                    }
+                  ),
+                  index > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleChangeIndex(index - 1),
+                      className: "\r\n          absolute top-[50%] -left-20 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      children: "<"
+                    }
+                  ),
                   isImage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "img",
                     {
                       src: url,
                       alt: name,
-                      className: "w-full h-full rounded object-cover"
+                      className: "w-full h-full rounded object-contain"
                     }
                   ) : isPdf ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "iframe",
@@ -37697,8 +37738,10 @@ function DocumentViewer({
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "div",
                   {
-                    className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer",
+                    className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer open-button",
                     onClick: (e) => {
+                      const currentIndex = items.findIndex((a) => a.id == item.name);
+                      setIndex(currentIndex);
                       setIsOpen(true);
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { title: "Open", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(OpenIcon, {}) })

package/dist/index.mjs

@@ -37493,7 +37493,7 @@ function MyCalendar({
 }
 
 // src/doc-viewer/index.tsx
-import { useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 
 // src/doc-viewer/icon.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -37577,9 +37577,12 @@ function DocumentViewer({
   item,
   width = "100%",
   height = "100%",
-  onDelete
+  onDelete,
+  groupId = 1
 }) {
   const { url, name, contentType } = item;
+  const [index, setIndex] = useState10(-1);
+  const [items, setItems] = useState10([]);
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
   const isGoogleDocCompatible = contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
@@ -37587,10 +37590,30 @@ function DocumentViewer({
     url
   )}&embedded=true` : url;
   const [isOpen, setIsOpen] = useState10(false);
+  function handleChangeIndex(nuevoIndex) {
+    var _a, _b, _c, _d;
+    const currentIndex = items.findIndex((a) => a.id == item.name);
+    const openButton = (_b = (_a = items[nuevoIndex]).querySelector) == null ? void 0 : _b.call(_a, ".open-button");
+    const closeButton = (_d = (_c = items[currentIndex]).querySelector) == null ? void 0 : _d.call(
+      _c,
+      ".close-button"
+    );
+    setIndex(nuevoIndex);
+    closeButton.click();
+    openButton.click();
+  }
+  useEffect8(() => {
+    if (typeof window != "undefined") {
+      const i = document.querySelectorAll(`.documentviewer-${groupId}`);
+      const arr = Array.from(i);
+      setItems(arr);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: "group relative rounded-lg bg-white shadow-md overflow-hidden",
+      id: item.name,
+      className: `group relative rounded-lg bg-white shadow-md overflow-hidden  documentviewer-${groupId} `,
       style: {
         width,
         height
@@ -37615,7 +37638,7 @@ function DocumentViewer({
         isOpen && /* @__PURE__ */ jsx20(
           "div",
           {
-            className: "\r\n      fixed inset-0 z-[9999]\r\n      bg-black/50\r\n      flex items-center justify-center\r\n      p-6\r\n    ",
+            className: "\r\n      fixed inset-0 z-[9999]\r\n      bg-black/50\r\n      flex items-center justify-center\r\n      py-5 px-[200px]\r\n    ",
             onClick: () => setIsOpen(false),
             children: /* @__PURE__ */ jsxs13(
               "div",
@@ -37628,16 +37651,34 @@ function DocumentViewer({
                     {
                       type: "button",
                       onClick: () => setIsOpen(false),
-                      className: "\r\n          absolute top-4 right-4 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      className: "\r\n          absolute top-4 right-4 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl close-button\r\n        ",
                       children: "\u2715"
                     }
                   ),
+                  index < items.length - 1 && /* @__PURE__ */ jsx20(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleChangeIndex(index + 1),
+                      className: "\r\n          absolute top-[50%] -right-20 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      children: ">"
+                    }
+                  ),
+                  index > 0 && /* @__PURE__ */ jsx20(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleChangeIndex(index - 1),
+                      className: "\r\n          absolute top-[50%] -left-20 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      children: "<"
+                    }
+                  ),
                   isImage ? /* @__PURE__ */ jsx20(
                     "img",
                     {
                       src: url,
                       alt: name,
-                      className: "w-full h-full rounded object-cover"
+                      className: "w-full h-full rounded object-contain"
                     }
                   ) : isPdf ? /* @__PURE__ */ jsx20(
                     "iframe",
@@ -37680,8 +37721,10 @@ function DocumentViewer({
                 /* @__PURE__ */ jsx20(
                   "div",
                   {
-                    className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer",
+                    className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer open-button",
                     onClick: (e) => {
+                      const currentIndex = items.findIndex((a) => a.id == item.name);
+                      setIndex(currentIndex);
                       setIsOpen(true);
                     },
                     children: /* @__PURE__ */ jsx20("a", { title: "Open", children: /* @__PURE__ */ jsx20(OpenIcon, {}) })
@@ -37705,7 +37748,7 @@ function DocumentViewer({
 
 // src/table3/index.tsx
 import React9, {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo7,
   useReducer as useReducer2,
   useRef as useRef5,
@@ -37713,7 +37756,7 @@ import React9, {
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -37867,7 +37910,7 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (data.length != Object.values(objectData).map((o) => (o == null ? void 0 : o._id) || (o == null ? void 0 : o.id)).length) {
       const news = [...new Set(data.map((o) => o[h]))];
       setSelected(news);
@@ -38555,7 +38598,7 @@ function Table3({
     }
   }
   const [objectData, setObjectData] = useReducer2(dataReducer, null);
-  useEffect9(() => {
+  useEffect10(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
@@ -38600,7 +38643,7 @@ function Table3({
     setSort,
     ...props
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {
       const newDialogRow = objectData[dialogRow == null ? void 0 : dialogRow.id] || objectData[dialogRow == null ? void 0 : dialogRow._id];
       setDialogRow(newDialogRow);
@@ -38630,19 +38673,19 @@ function Table3({
 }
 
 // src/table-advanced/index.tsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/table-advanced/h.table.tsx
 import React10, {
   useCallback as useCallback3,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useMemo as useMemo10,
   useRef as useRef7,
   useState as useState16
 } from "react";
 
 // src/table-advanced/header.tsx
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
 
 // src/table-advanced/icons.tsx
@@ -38912,16 +38955,16 @@ function Header({
   }, [context.data, header, text]);
   const [selected, setSelected] = useState14([]);
   const hasFilter = context.filters.find((b) => b.field == header);
-  useEffect10(() => {
+  useEffect11(() => {
     setSelected(filteredValues);
   }, [filteredValues]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (visible) {
       context.setCurrentHeader(header);
     }
     setText("");
   }, [visible]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!visible || !cellRef.current) {
       setCoords(null);
       return;
@@ -39260,7 +39303,7 @@ function valueFormatter({
 }
 
 // src/table-advanced/use.pagination.tsx
-import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
+import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect12 } from "react";
 function usePaginacion({
   total,
   tamanioPagina = 100,
@@ -39292,7 +39335,7 @@ function usePaginacion({
     },
     [totalPaginas]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
     setPagina(1);
   }, [total]);
@@ -39370,7 +39413,7 @@ function HTable({
     return { widths: widths2, gridTemplateColumns: gridTemplateColumns2, startDrag: startDrag2, setWidths: setWidths2 };
   }
   const { gridTemplateColumns, startDrag, widths, setWidths } = useResizableColumns(headers);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!tableRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       const ocultos = headers.filter(
@@ -39808,7 +39851,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState17 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo11, useReducer as useReducer3, useState as useState17 } from "react";
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39878,7 +39921,7 @@ function useContext({ onSelect }) {
     }
     return true;
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (filters.length == 0) {
       setEditions([]);
     }
@@ -39911,7 +39954,7 @@ import { jsx as jsx34 } from "react/jsx-runtime";
 function TableAdvanced(tableProps) {
   const { data, ...props } = tableProps;
   const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
-  useEffect14(() => {
+  useEffect15(() => {
     context.setData(
       Array.isArray(data) ? data.map((d) => {
         return {
@@ -39922,7 +39965,7 @@ function TableAdvanced(tableProps) {
       }) : data
     );
   }, [data]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (tableProps == null ? void 0 : tableProps.sortBy) {
       const [k, v] = Object.entries(tableProps.sortBy)[0];
       context.setSort({ [k]: v });
@@ -39941,7 +39984,7 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-import React11, { useEffect as useEffect15, useState as useState19 } from "react";
+import React11, { useEffect as useEffect16, useState as useState19 } from "react";
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function TabContainer({
   children,
@@ -39958,7 +40001,7 @@ function TabContainer({
     if (e.key === "ArrowLeft")
       setIndex((k - 1 + labels.length) % labels.length);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
   return /* @__PURE__ */ jsxs27("div", { className: "w-full bg-white border shadow rounded-lg ", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.69",
+  "version": "2.0.71",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/doc-viewer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Icon, { DeleteIcon, DownloadIcon, OpenIcon } from "./icon";
 
 type Item = {
@@ -12,6 +12,7 @@ type Props = {
   width?: string;
   height?: string;
   onDelete?: (item: Item) => void;
+  groupId?: number;
 };
 
 export default function DocumentViewer({
@@ -19,9 +20,11 @@ export default function DocumentViewer({
   width = "100%",
   height = "100%",
   onDelete,
+  groupId = 1,
 }: Props) {
   const { url, name, contentType } = item;
-
+  const [index, setIndex] = useState<number>(-1);
+  const [items, setItems] = useState<Element[]>([]);
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
   const isGoogleDocCompatible =
@@ -35,9 +38,33 @@ export default function DocumentViewer({
       )}&embedded=true`
     : url;
   const [isOpen, setIsOpen] = useState(false);
+
+  function handleChangeIndex(nuevoIndex: number) {
+    const currentIndex = items.findIndex((a) => a.id == item.name);
+    const openButton = items[nuevoIndex].querySelector?.(".open-button") as any;
+    const closeButton = items[currentIndex].querySelector?.(
+      ".close-button",
+    ) as any;
+    setIndex(nuevoIndex);
+    closeButton.click();
+    openButton.click();
+  }
+
+  useEffect(() => {
+    if (typeof window != "undefined") {
+      const i = document.querySelectorAll(`.documentviewer-${groupId}`);
+      const arr = Array.from(i);
+      setItems(arr);
+    }
+  }, []);
+
   return (
     <div
-      className="group relative rounded-lg bg-white shadow-md overflow-hidden"
+      id={item.name}
+      className={
+        "group relative rounded-lg bg-white shadow-md overflow-hidden " +
+        ` documentviewer-${groupId} `
+      }
       style={{
         width,
         height,
@@ -70,7 +97,7 @@ export default function DocumentViewer({
       fixed inset-0 z-[9999]
       bg-black/50
       flex items-center justify-center
-      p-6
+      py-5 px-[200px]
     "
           onClick={() => setIsOpen(false)}
         >
@@ -94,17 +121,53 @@ export default function DocumentViewer({
           bg-black/70 text-white
           hover:bg-black
           flex items-center justify-center
-          text-xl
+          text-xl close-button
         "
             >
               ✕
             </button>
 
+            {index < items.length - 1 && (
+              <button
+                type="button"
+                onClick={() => handleChangeIndex(index + 1)}
+                className="
+          absolute top-[50%] -right-20 z-10
+          w-10 h-10
+          rounded-full
+          bg-black/70 text-white
+          hover:bg-black
+          flex items-center justify-center
+          text-xl
+        "
+              >
+                {">"}
+              </button>
+            )}
+
+            {index > 0 && (
+              <button
+                type="button"
+                onClick={() => handleChangeIndex(index - 1)}
+                className="
+          absolute top-[50%] -left-20 z-10
+          w-10 h-10
+          rounded-full
+          bg-black/70 text-white
+          hover:bg-black
+          flex items-center justify-center
+          text-xl
+        "
+              >
+                {"<"}
+              </button>
+            )}
+
             {isImage ? (
               <img
                 src={url}
                 alt={name}
-                className="w-full h-full rounded object-cover"
+                className="w-full h-full rounded object-contain"
               />
             ) : isPdf ? (
               <iframe
@@ -157,8 +220,10 @@ export default function DocumentViewer({
               </a>
             </div>
             <div
-              className="border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer"
+              className="border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer open-button"
               onClick={(e) => {
+                const currentIndex = items.findIndex((a) => a.id == item.name);
+                setIndex(currentIndex);
                 setIsOpen(true);
               }}
             >