next-recomponents 2.0.67 → 2.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +238 -143
- package/dist/index.mjs +207 -112
- package/package.json +1 -1
- package/src/doc-viewer/icon.tsx +37 -0
- package/src/doc-viewer/index.tsx +143 -47
- package/src/table-advanced/h.table.tsx +1 -1
- package/src/table-advanced/icons.tsx +1 -1
package/src/doc-viewer/index.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Icon, { DownloadIcon } from "./icon";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import Icon, { DeleteIcon, DownloadIcon, OpenIcon } from "./icon";
|
|
3
3
|
|
|
4
4
|
type Item = {
|
|
5
5
|
url: string;
|
|
@@ -11,19 +11,20 @@ type Props = {
|
|
|
11
11
|
item: Item;
|
|
12
12
|
width?: string;
|
|
13
13
|
height?: string;
|
|
14
|
+
onDelete?: (item: Item) => void;
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
export default function DocumentViewer({
|
|
17
18
|
item,
|
|
18
19
|
width = "100%",
|
|
19
20
|
height = "100%",
|
|
21
|
+
onDelete,
|
|
20
22
|
}: Props) {
|
|
21
23
|
const { url, name, contentType } = item;
|
|
22
24
|
|
|
23
25
|
const isImage = contentType.startsWith("image/");
|
|
24
26
|
const isPdf = contentType === "application/pdf";
|
|
25
27
|
const isGoogleDocCompatible =
|
|
26
|
-
isPdf ||
|
|
27
28
|
contentType.includes("msword") ||
|
|
28
29
|
contentType.includes("officedocument") ||
|
|
29
30
|
contentType.includes("presentation");
|
|
@@ -33,66 +34,161 @@ export default function DocumentViewer({
|
|
|
33
34
|
url,
|
|
34
35
|
)}&embedded=true`
|
|
35
36
|
: url;
|
|
36
|
-
|
|
37
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
37
38
|
return (
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</h3>
|
|
46
|
-
<a
|
|
47
|
-
href={url}
|
|
48
|
-
download={name}
|
|
49
|
-
target="_blank"
|
|
50
|
-
rel="noopener noreferrer"
|
|
51
|
-
className="border shadow hover:bg-blue-100 hover:text-black rounded bg-blue-900 text-white text-xs items-center truncate px-1 flex gap-1 justify-center"
|
|
52
|
-
>
|
|
53
|
-
<DownloadIcon />
|
|
54
|
-
</a>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
39
|
+
<div
|
|
40
|
+
className="group relative rounded-lg bg-white shadow-md overflow-hidden"
|
|
41
|
+
style={{
|
|
42
|
+
width,
|
|
43
|
+
height,
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
57
46
|
{isImage ? (
|
|
58
47
|
<img
|
|
59
48
|
src={url}
|
|
60
49
|
alt={name}
|
|
61
|
-
className="rounded"
|
|
62
|
-
style={{
|
|
63
|
-
width: width,
|
|
64
|
-
height: height,
|
|
65
|
-
maxWidth: "100%",
|
|
66
|
-
objectFit: "cover",
|
|
67
|
-
display: "block",
|
|
68
|
-
}}
|
|
50
|
+
className="w-full h-full rounded object-cover"
|
|
69
51
|
/>
|
|
52
|
+
) : isPdf ? (
|
|
53
|
+
<iframe src={url} title={name} className="w-full h-full rounded" />
|
|
70
54
|
) : isGoogleDocCompatible ? (
|
|
71
55
|
<iframe
|
|
72
|
-
className="rounded"
|
|
73
|
-
style={{
|
|
74
|
-
width: width,
|
|
75
|
-
height: height,
|
|
76
|
-
maxWidth: "100%",
|
|
77
|
-
}}
|
|
78
|
-
title={name}
|
|
79
56
|
src={viewerUrl}
|
|
57
|
+
title={name}
|
|
58
|
+
className="w-full h-full rounded"
|
|
80
59
|
allowFullScreen
|
|
81
60
|
/>
|
|
82
61
|
) : (
|
|
62
|
+
<div className="w-full h-full rounded flex items-center justify-center">
|
|
63
|
+
<Icon />
|
|
64
|
+
</div>
|
|
65
|
+
)}
|
|
66
|
+
{/* VISOR EN PANTALLA COMPLETA */}
|
|
67
|
+
{isOpen && (
|
|
83
68
|
<div
|
|
84
|
-
className="
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}}
|
|
69
|
+
className="
|
|
70
|
+
fixed inset-0 z-[9999]
|
|
71
|
+
bg-black/50
|
|
72
|
+
flex items-center justify-center
|
|
73
|
+
p-6
|
|
74
|
+
"
|
|
75
|
+
onClick={() => setIsOpen(false)}
|
|
92
76
|
>
|
|
93
|
-
|
|
77
|
+
{/* Contenedor del documento */}
|
|
78
|
+
<div
|
|
79
|
+
className="
|
|
80
|
+
relative
|
|
81
|
+
w-full h-full
|
|
82
|
+
flex items-center justify-center
|
|
83
|
+
"
|
|
84
|
+
onClick={(e) => e.stopPropagation()}
|
|
85
|
+
>
|
|
86
|
+
{/* Botón cerrar */}
|
|
87
|
+
<button
|
|
88
|
+
type="button"
|
|
89
|
+
onClick={() => setIsOpen(false)}
|
|
90
|
+
className="
|
|
91
|
+
absolute top-4 right-4 z-10
|
|
92
|
+
w-10 h-10
|
|
93
|
+
rounded-full
|
|
94
|
+
bg-black/70 text-white
|
|
95
|
+
hover:bg-black
|
|
96
|
+
flex items-center justify-center
|
|
97
|
+
text-xl
|
|
98
|
+
"
|
|
99
|
+
>
|
|
100
|
+
✕
|
|
101
|
+
</button>
|
|
102
|
+
|
|
103
|
+
{isImage ? (
|
|
104
|
+
<img
|
|
105
|
+
src={url}
|
|
106
|
+
alt={name}
|
|
107
|
+
className="w-full h-full rounded object-cover"
|
|
108
|
+
/>
|
|
109
|
+
) : isPdf ? (
|
|
110
|
+
<iframe
|
|
111
|
+
src={url}
|
|
112
|
+
title={name}
|
|
113
|
+
className="w-full h-full rounded"
|
|
114
|
+
/>
|
|
115
|
+
) : isGoogleDocCompatible ? (
|
|
116
|
+
<iframe
|
|
117
|
+
src={viewerUrl}
|
|
118
|
+
title={name}
|
|
119
|
+
className="w-full h-full rounded"
|
|
120
|
+
allowFullScreen
|
|
121
|
+
/>
|
|
122
|
+
) : (
|
|
123
|
+
<div className="w-full h-full rounded flex items-center justify-center">
|
|
124
|
+
<Icon />
|
|
125
|
+
</div>
|
|
126
|
+
)}
|
|
127
|
+
</div>
|
|
94
128
|
</div>
|
|
95
129
|
)}
|
|
130
|
+
|
|
131
|
+
{/* CONTENIDO QUE APARECE AL HOVER */}
|
|
132
|
+
<div
|
|
133
|
+
className="
|
|
134
|
+
absolute inset-0
|
|
135
|
+
bg-white/70
|
|
136
|
+
opacity-0
|
|
137
|
+
invisible
|
|
138
|
+
group-hover:opacity-100
|
|
139
|
+
group-hover:visible
|
|
140
|
+
transition-all duration-200
|
|
141
|
+
flex items-center justify-center
|
|
142
|
+
"
|
|
143
|
+
>
|
|
144
|
+
<div className="flex flex-col justify-between h-full p-2 w-full">
|
|
145
|
+
<div className="w-full bg-transparent h-full flex items-center justify-center">
|
|
146
|
+
{item.name}
|
|
147
|
+
</div>
|
|
148
|
+
<div className="flex justify-end gap-2 mr-10">
|
|
149
|
+
<div className="border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white">
|
|
150
|
+
<a
|
|
151
|
+
href={item.url}
|
|
152
|
+
download={item.name}
|
|
153
|
+
target="_blank"
|
|
154
|
+
title="Download"
|
|
155
|
+
>
|
|
156
|
+
<DownloadIcon />
|
|
157
|
+
</a>
|
|
158
|
+
</div>
|
|
159
|
+
<div
|
|
160
|
+
className="border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer"
|
|
161
|
+
onClick={(e) => {
|
|
162
|
+
setIsOpen(true);
|
|
163
|
+
}}
|
|
164
|
+
>
|
|
165
|
+
<a title="Open">
|
|
166
|
+
<OpenIcon />
|
|
167
|
+
</a>
|
|
168
|
+
</div>
|
|
169
|
+
{onDelete && (
|
|
170
|
+
<div className="border bg-red-500/50 shadow rounded p-2 hover:bg-red-500/70 transition-all duration-200 text-white cursor-pointer">
|
|
171
|
+
<a title="Delete" onClick={() => onDelete?.(item)}>
|
|
172
|
+
<DeleteIcon />
|
|
173
|
+
</a>
|
|
174
|
+
</div>
|
|
175
|
+
)}
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
{/* ESQUINA DOBLADA */}
|
|
181
|
+
<div
|
|
182
|
+
className="
|
|
183
|
+
absolute bottom-0 right-0
|
|
184
|
+
w-10 h-10
|
|
185
|
+
bg-gray-200
|
|
186
|
+
transition-all duration-200
|
|
187
|
+
group-hover:w-14
|
|
188
|
+
group-hover:h-14
|
|
189
|
+
[clip-path:polygon(0_100%,100%_0,100%_100%)]
|
|
190
|
+
"
|
|
191
|
+
/>
|
|
96
192
|
</div>
|
|
97
193
|
);
|
|
98
194
|
}
|
|
@@ -49,7 +49,7 @@ export function NextIcon() {
|
|
|
49
49
|
width="1em"
|
|
50
50
|
xmlns="http://www.w3.org/2000/svg"
|
|
51
51
|
>
|
|
52
|
-
<polyline fill="none"
|
|
52
|
+
<polyline fill="none" strokeWidth="2" points="7 2 17 12 7 22"></polyline>
|
|
53
53
|
</svg>
|
|
54
54
|
);
|
|
55
55
|
}
|