siam-ui-utils 3.2.2 → 3.2.4
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.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
2
|
import { Radio } from "siam-ui";
|
|
4
3
|
const CustomInputRadio = ({
|
|
5
4
|
className,
|
|
@@ -18,22 +17,14 @@ const CustomInputRadio = ({
|
|
|
18
17
|
// aceptado por compatibilidad, sin efecto visual
|
|
19
18
|
...rest
|
|
20
19
|
}) => {
|
|
21
|
-
const
|
|
22
|
-
defaultChecked ?? false
|
|
23
|
-
);
|
|
24
|
-
const isControlled = checked !== void 0;
|
|
25
|
-
const isChecked = isControlled ? checked : internalChecked;
|
|
26
|
-
const handleChange = (e) => {
|
|
27
|
-
if (!isControlled) setInternalChecked(e.target.checked);
|
|
28
|
-
onChange?.(e);
|
|
29
|
-
};
|
|
20
|
+
const isChecked = checked !== void 0 ? checked : defaultChecked ?? false;
|
|
30
21
|
return /* @__PURE__ */ jsx(
|
|
31
22
|
Radio,
|
|
32
23
|
{
|
|
33
24
|
id,
|
|
34
25
|
name,
|
|
35
26
|
checked: isChecked,
|
|
36
|
-
onChange
|
|
27
|
+
onChange,
|
|
37
28
|
disabled,
|
|
38
29
|
className: className ?? customClassName,
|
|
39
30
|
label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomInputRadio.js","sources":["../../src/custom-input/CustomInputRadio.jsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CustomInputRadio.js","sources":["../../src/custom-input/CustomInputRadio.jsx"],"sourcesContent":["import { Radio } from 'siam-ui';\n\nexport const CustomInputRadio = ({\n className,\n customClassName,\n checked,\n defaultChecked,\n disabled,\n id,\n label,\n name,\n onChange,\n direction = 'row',\n style,\n slotProps,\n inline: _inline, // aceptado por compatibilidad, sin efecto visual\n ...rest\n}) => {\n const isChecked = checked !== undefined ? checked : (defaultChecked ?? false);\n\n return (\n <Radio\n id={id}\n name={name}\n checked={isChecked}\n onChange={onChange}\n disabled={disabled}\n className={className ?? customClassName}\n label={label}\n direction={direction === 'column' ? 'col' : 'row'}\n style={{\n '--siam-radio-size': '19px',\n '--siam-radio-inner-size': '11px',\n marginLeft: '10px',\n marginRight: '10px',\n ...style,\n }}\n slotProps={{\n ...slotProps,\n root: {\n ...slotProps?.root,\n style: {\n flexDirection: direction === 'column' ? 'column' : 'row',\n ...slotProps?.root?.style,\n },\n },\n label: {\n ...slotProps?.label,\n style: { fontSize: '12px', ...slotProps?.label?.style },\n },\n }}\n {...rest}\n />\n );\n};\n\nexport default CustomInputRadio;\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,QAAQ;AAAA;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,YAAY,SAAY,UAAW,kBAAkB;AAEvE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,WAAW,aAAa;AAAA,MACxB;AAAA,MACA,WAAW,cAAc,WAAW,QAAQ;AAAA,MAC5C,OAAO;AAAA,QACL,qBAAqB;AAAA,QACrB,2BAA2B;AAAA,QAC3B,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAEL,WAAW;AAAA,QACT,GAAG;AAAA,QACH,MAAM;AAAA,UACJ,GAAG,WAAW;AAAA,UACd,OAAO;AAAA,YACL,eAAe,cAAc,WAAW,WAAW;AAAA,YACnD,GAAG,WAAW,MAAM;AAAA,UAAA;AAAA,QACtB;AAAA,QAEF,OAAO;AAAA,UACL,GAAG,WAAW;AAAA,UACd,OAAO,EAAE,UAAU,QAAQ,GAAG,WAAW,OAAO,MAAA;AAAA,QAAM;AAAA,MACxD;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
1
3
|
/* ── Drop zone container ─────────────────────────────────────────── */
|
|
2
4
|
.filepicker.dropzone {
|
|
3
5
|
display: flex;
|
|
4
6
|
flex-direction: column;
|
|
5
7
|
align-items: stretch;
|
|
6
|
-
min-height:
|
|
8
|
+
min-height: 160px;
|
|
7
9
|
padding: 12px;
|
|
8
|
-
border:
|
|
10
|
+
border: 2px dashed var(--dz-border, #d6d6d6);
|
|
9
11
|
border-radius: 12px;
|
|
10
12
|
background-color: #fff;
|
|
11
13
|
cursor: pointer;
|
|
12
|
-
transition: border-color 0.2s ease, background-color 0.2s ease
|
|
13
|
-
box-shadow 0.2s ease;
|
|
14
|
+
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
14
15
|
box-sizing: border-box;
|
|
15
|
-
position: relative;
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
.filepicker.dropzone.dz-started {
|
|
20
|
+
border-style: solid;
|
|
21
|
+
min-height: 0;
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
}
|
|
24
|
+
|
|
19
25
|
.filepicker.dropzone.dz-clickable:hover {
|
|
20
|
-
border-color: var(--dz-primary, #
|
|
26
|
+
border-color: var(--dz-primary, #016e6c);
|
|
27
|
+
background-color: var(--dz-active-bg, #e6f1f1);
|
|
21
28
|
}
|
|
22
29
|
|
|
23
30
|
.filepicker.dropzone.dz-drag-hover {
|
|
24
|
-
border-color: var(--dz-primary, #
|
|
31
|
+
border-color: var(--dz-primary, #016e6c);
|
|
25
32
|
border-style: dashed;
|
|
26
|
-
background-color: var(--dz-active-bg, #
|
|
33
|
+
background-color: var(--dz-active-bg, #e6f1f1);
|
|
27
34
|
}
|
|
28
35
|
|
|
29
36
|
.filepicker.dropzone.dz-disabled-zone {
|
|
@@ -38,36 +45,37 @@
|
|
|
38
45
|
display: flex;
|
|
39
46
|
flex-direction: column;
|
|
40
47
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
color: var(--dz-primary, #016E6C);
|
|
48
|
+
gap: 10px;
|
|
49
|
+
text-align: center;
|
|
50
|
+
color: var(--dz-primary, #016e6c);
|
|
45
51
|
pointer-events: none;
|
|
52
|
+
user-select: none;
|
|
46
53
|
}
|
|
47
54
|
|
|
48
|
-
/* Upload icon — circle
|
|
55
|
+
/* Upload icon — primary-colored circle with white arrow */
|
|
49
56
|
.filepicker.dropzone .dz-message::before {
|
|
50
57
|
content: '';
|
|
51
58
|
display: block;
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
59
|
+
width: 48px;
|
|
60
|
+
height: 48px;
|
|
54
61
|
flex-shrink: 0;
|
|
55
62
|
border-radius: 50%;
|
|
56
|
-
background-color: var(--dz-
|
|
57
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%
|
|
63
|
+
background-color: var(--dz-primary, #016e6c);
|
|
64
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
|
|
58
65
|
background-repeat: no-repeat;
|
|
59
66
|
background-position: center;
|
|
60
|
-
background-size:
|
|
67
|
+
background-size: 22px 22px;
|
|
61
68
|
}
|
|
62
69
|
|
|
63
70
|
.filepicker.dropzone .dz-message .dz-button {
|
|
64
71
|
background: none;
|
|
65
72
|
border: none;
|
|
66
73
|
padding: 0;
|
|
67
|
-
font-size:
|
|
74
|
+
font-size: 13px;
|
|
68
75
|
font-weight: 600;
|
|
69
|
-
color: var(--dz-primary, #
|
|
76
|
+
color: var(--dz-primary, #016e6c);
|
|
70
77
|
cursor: pointer;
|
|
78
|
+
pointer-events: none;
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
.filepicker.dropzone .dz-message .dz-button::after {
|
|
@@ -89,8 +97,14 @@
|
|
|
89
97
|
}
|
|
90
98
|
|
|
91
99
|
@keyframes dz-slide-in {
|
|
92
|
-
from {
|
|
93
|
-
|
|
100
|
+
from {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
transform: translateY(4px);
|
|
103
|
+
}
|
|
104
|
+
to {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
transform: translateY(0);
|
|
107
|
+
}
|
|
94
108
|
}
|
|
95
109
|
|
|
96
110
|
/* ── Preview row ─────────────────────────────────────────────────── */
|
|
@@ -99,7 +113,7 @@
|
|
|
99
113
|
align-items: center;
|
|
100
114
|
gap: 10px;
|
|
101
115
|
padding: 8px 10px;
|
|
102
|
-
border: 1px solid var(--dz-border, #
|
|
116
|
+
border: 1px solid var(--dz-border, #d6d6d6);
|
|
103
117
|
border-radius: 8px;
|
|
104
118
|
background: #fff;
|
|
105
119
|
position: relative;
|
|
@@ -107,7 +121,7 @@
|
|
|
107
121
|
}
|
|
108
122
|
|
|
109
123
|
.dz-preview.dz-error .dz-preview-inner {
|
|
110
|
-
border-color: var(--dz-error, #
|
|
124
|
+
border-color: var(--dz-error, #fe4727);
|
|
111
125
|
}
|
|
112
126
|
|
|
113
127
|
/* ── Thumbnail ───────────────────────────────────────────────────── */
|
|
@@ -117,7 +131,7 @@
|
|
|
117
131
|
height: 44px;
|
|
118
132
|
border-radius: 8px;
|
|
119
133
|
overflow: hidden;
|
|
120
|
-
background-color: var(--dz-active-bg, #
|
|
134
|
+
background-color: var(--dz-active-bg, #e6f1f1);
|
|
121
135
|
display: flex;
|
|
122
136
|
align-items: center;
|
|
123
137
|
justify-content: center;
|
|
@@ -144,7 +158,7 @@
|
|
|
144
158
|
.dz-file-icon {
|
|
145
159
|
width: 44px;
|
|
146
160
|
height: 44px;
|
|
147
|
-
background-color: var(--dz-primary, #
|
|
161
|
+
background-color: var(--dz-primary, #016e6c);
|
|
148
162
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
|
|
149
163
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
|
|
150
164
|
-webkit-mask-size: 18px 18px;
|
|
@@ -168,8 +182,12 @@
|
|
|
168
182
|
pointer-events: none;
|
|
169
183
|
}
|
|
170
184
|
|
|
171
|
-
.dz-success-mark {
|
|
172
|
-
|
|
185
|
+
.dz-success-mark {
|
|
186
|
+
background: rgba(1, 110, 108, 0.8);
|
|
187
|
+
}
|
|
188
|
+
.dz-error-mark {
|
|
189
|
+
background: rgba(254, 71, 39, 0.8);
|
|
190
|
+
}
|
|
173
191
|
|
|
174
192
|
.dz-success-mark svg,
|
|
175
193
|
.dz-error-mark svg {
|
|
@@ -187,7 +205,9 @@
|
|
|
187
205
|
}
|
|
188
206
|
|
|
189
207
|
@keyframes dz-fade-out {
|
|
190
|
-
to {
|
|
208
|
+
to {
|
|
209
|
+
opacity: 0;
|
|
210
|
+
}
|
|
191
211
|
}
|
|
192
212
|
|
|
193
213
|
/* ── File info ───────────────────────────────────────────────────── */
|
|
@@ -210,25 +230,27 @@
|
|
|
210
230
|
|
|
211
231
|
.dz-filesize {
|
|
212
232
|
font-size: 11px;
|
|
213
|
-
color: #
|
|
233
|
+
color: #a9a9a9;
|
|
214
234
|
}
|
|
215
235
|
|
|
216
236
|
/* ── Progress bar ────────────────────────────────────────────────── */
|
|
217
237
|
.dz-progress {
|
|
218
238
|
height: 3px;
|
|
219
239
|
border-radius: 2px;
|
|
220
|
-
background: var(--dz-border, #
|
|
240
|
+
background: var(--dz-border, #d6d6d6);
|
|
221
241
|
overflow: hidden;
|
|
222
242
|
margin-top: 4px;
|
|
223
243
|
display: none;
|
|
224
244
|
}
|
|
225
245
|
|
|
226
|
-
.dz-preview.dz-processing .dz-progress {
|
|
246
|
+
.dz-preview.dz-processing .dz-progress {
|
|
247
|
+
display: block;
|
|
248
|
+
}
|
|
227
249
|
|
|
228
250
|
.dz-upload {
|
|
229
251
|
display: block;
|
|
230
252
|
height: 100%;
|
|
231
|
-
background: var(--dz-primary, #
|
|
253
|
+
background: var(--dz-primary, #016e6c);
|
|
232
254
|
border-radius: 2px;
|
|
233
255
|
width: 0;
|
|
234
256
|
transition: width 300ms ease;
|
|
@@ -238,11 +260,13 @@
|
|
|
238
260
|
.dz-error-message {
|
|
239
261
|
display: none;
|
|
240
262
|
font-size: 11px;
|
|
241
|
-
color: var(--dz-error, #
|
|
263
|
+
color: var(--dz-error, #fe4727);
|
|
242
264
|
margin-top: 2px;
|
|
243
265
|
}
|
|
244
266
|
|
|
245
|
-
.dz-preview.dz-error .dz-error-message {
|
|
267
|
+
.dz-preview.dz-error .dz-error-message {
|
|
268
|
+
display: block;
|
|
269
|
+
}
|
|
246
270
|
|
|
247
271
|
/* ── Remove button ───────────────────────────────────────────────── */
|
|
248
272
|
.dz-remove-btn {
|
|
@@ -255,7 +279,7 @@
|
|
|
255
279
|
border: none;
|
|
256
280
|
border-radius: 8px;
|
|
257
281
|
background: transparent;
|
|
258
|
-
color: var(--dz-error, #
|
|
282
|
+
color: var(--dz-error, #fe4727);
|
|
259
283
|
cursor: pointer;
|
|
260
284
|
transition: background-color 0.15s ease;
|
|
261
285
|
padding: 0;
|
|
@@ -15,8 +15,8 @@ const DropzoneUploaderStyled = ({
|
|
|
15
15
|
label = "Cargar Dni",
|
|
16
16
|
maxFiles = 2,
|
|
17
17
|
maxSize = 2,
|
|
18
|
-
onMaxFileSizeError = () => {
|
|
19
|
-
alert(
|
|
18
|
+
onMaxFileSizeError = (fileName) => {
|
|
19
|
+
alert(`El archivo "${fileName}" supera el tamaño máximo de ${maxSize} MB`);
|
|
20
20
|
}
|
|
21
21
|
}) => {
|
|
22
22
|
const theme = useTheme();
|
|
@@ -24,15 +24,24 @@ const DropzoneUploaderStyled = ({
|
|
|
24
24
|
const borderColor = theme?.colors?.neutral?.borderLight ?? "#D6D6D6";
|
|
25
25
|
const surfaceHover = theme?.colors?.primary?.surfaceHover ?? "#E6F1F1";
|
|
26
26
|
const [files, setFiles] = useState([]);
|
|
27
|
-
const handleChangeStatus = ({ file }, status) => {
|
|
27
|
+
const handleChangeStatus = ({ file, remove }, status) => {
|
|
28
28
|
if (status === "done") {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
if (file.size / (1024 * 1024) > maxSize) {
|
|
30
|
+
onMaxFileSizeError(file.name);
|
|
31
|
+
remove();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
setFiles((prev) => {
|
|
35
|
+
const next = [...prev, file];
|
|
36
|
+
onChangeFiles(next);
|
|
37
|
+
return next;
|
|
38
|
+
});
|
|
32
39
|
} else if (status === "removed") {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
setFiles((prev) => {
|
|
41
|
+
const next = prev.filter((f) => f !== file);
|
|
42
|
+
onChangeFiles(next);
|
|
43
|
+
return next;
|
|
44
|
+
});
|
|
36
45
|
}
|
|
37
46
|
};
|
|
38
47
|
const getFilesFromEvent = (e) => {
|
|
@@ -44,10 +53,6 @@ const DropzoneUploaderStyled = ({
|
|
|
44
53
|
};
|
|
45
54
|
const CustomPreview = ({ fileWithMeta }) => {
|
|
46
55
|
const { meta, remove } = fileWithMeta;
|
|
47
|
-
if (meta.size / (1024 * 1024) > maxSize) {
|
|
48
|
-
onMaxFileSizeError();
|
|
49
|
-
remove();
|
|
50
|
-
}
|
|
51
56
|
return /* @__PURE__ */ jsxs(
|
|
52
57
|
"div",
|
|
53
58
|
{
|
|
@@ -95,7 +100,8 @@ const DropzoneUploaderStyled = ({
|
|
|
95
100
|
};
|
|
96
101
|
const fileInputRef = useRef(null);
|
|
97
102
|
const InputComponent = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
|
|
98
|
-
const
|
|
103
|
+
const currentCount = totalFiles + files.length;
|
|
104
|
+
const text = currentCount > 0 ? `${maxFiles - currentCount} archivos más` : label;
|
|
99
105
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
100
106
|
/* @__PURE__ */ jsx(
|
|
101
107
|
Button,
|
|
@@ -134,7 +140,7 @@ const DropzoneUploaderStyled = ({
|
|
|
134
140
|
Dropzone,
|
|
135
141
|
{
|
|
136
142
|
disableUpload: false,
|
|
137
|
-
maxFiles: totalFiles < maxFiles ? maxFiles : 0,
|
|
143
|
+
maxFiles: totalFiles + files.length < maxFiles ? maxFiles : 0,
|
|
138
144
|
maxSize,
|
|
139
145
|
InputComponent,
|
|
140
146
|
PreviewComponent: CustomPreview,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Button } from 'siam-ui';\nimport Dropzone from '../../dropzone';\nimport { IconButtonSvg, pdfImage } from '../../iconos';\nimport './index.css';\n\nexport const DropzoneUploaderStyled = ({\n accept = 'image/*, application/pdf',\n classNames = '',\n onChangeFiles,\n totalFiles,\n label = 'Cargar Dni',\n maxFiles = 2,\n maxSize = 2,\n onMaxFileSizeError = () => {\n alert(
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Button } from 'siam-ui';\nimport Dropzone from '../../dropzone';\nimport { IconButtonSvg, pdfImage } from '../../iconos';\nimport './index.css';\n\nexport const DropzoneUploaderStyled = ({\n accept = 'image/*, application/pdf',\n classNames = '',\n onChangeFiles,\n totalFiles,\n label = 'Cargar Dni',\n maxFiles = 2,\n maxSize = 2,\n onMaxFileSizeError = (fileName) => {\n alert(`El archivo \"${fileName}\" supera el tamaño máximo de ${maxSize} MB`);\n },\n}) => {\n const theme = useTheme();\n const primaryColor = theme?.colors?.primary?.base ?? '#016E6C';\n const borderColor = theme?.colors?.neutral?.borderLight ?? '#D6D6D6';\n const surfaceHover = theme?.colors?.primary?.surfaceHover ?? '#E6F1F1';\n\n const [files, setFiles] = useState([]);\n\n const handleChangeStatus = ({ file, remove }, status) => {\n if (status === 'done') {\n if (file.size / (1024 * 1024) > maxSize) {\n onMaxFileSizeError(file.name);\n remove();\n return;\n }\n setFiles((prev) => {\n const next = [...prev, file];\n onChangeFiles(next);\n return next;\n });\n } else if (status === 'removed') {\n setFiles((prev) => {\n const next = prev.filter((f) => f !== file);\n onChangeFiles(next);\n return next;\n });\n }\n };\n\n const getFilesFromEvent = (e) => {\n return new Promise((resolve) => {\n getDroppedOrSelectedFiles(e).then((chosenFiles) => {\n resolve(chosenFiles.map((f) => f.fileObject));\n });\n });\n };\n\n const CustomPreview = ({ fileWithMeta }) => {\n const { meta, remove } = fileWithMeta;\n return (\n <div\n className=\"dropzone-upload-previewContainer\"\n style={{ width: '100%', display: 'flex', alignItems: 'center' }}\n >\n {meta.type === 'application/pdf' ? (\n <>\n <IconButtonSvg\n className=\"form-control flex\"\n svg={pdfImage}\n svgOver={pdfImage}\n height=\"1.6rem\"\n width=\"1.6rem\"\n title={meta.name}\n />\n <p style={{ paddingRight: '1rem' }}>\n {meta.name.length > 17 ? meta.name.substring(0, 17) + '...' : meta.name}\n </p>\n </>\n ) : (\n <>\n <img\n className=\"dropzone-upload-previewImage mt-1\"\n src={meta.previewUrl}\n alt={meta.name}\n style={{ width: '110px', height: '110px', objectFit: 'cover', marginRight: '0.5rem' }}\n />\n <div className=\"dropzone-upload-file-name-container\">\n <p className=\"dropzone-upload-file-name\" title={meta.name}>\n {meta.name}\n </p>\n </div>\n </>\n )}\n <Button\n $variant=\"transparent\"\n $size=\"small\"\n onClick={remove}\n style={{ color: theme?.colors?.error?.base ?? '#FE4727', padding: '0 4px' }}\n >\n <TrashIcon color={theme?.colors?.error?.base ?? '#FE4727'} />\n </Button>\n </div>\n );\n };\n\n const fileInputRef = useRef(null);\n\n const InputComponent = ({ accept, onFiles, getFilesFromEvent }) => {\n const currentCount = totalFiles + files.length;\n const text = currentCount > 0 ? `${maxFiles - currentCount} archivos más` : label;\n return (\n <>\n <Button\n $variant=\"outline\"\n style={{ width: '100%' }}\n onClick={() => fileInputRef.current?.click()}\n >\n {text}\n </Button>\n <input\n ref={fileInputRef}\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple\n onChange={(e) => {\n getFilesFromEvent(e).then((chosenFiles) => onFiles(chosenFiles));\n }}\n />\n </>\n );\n };\n\n return (\n <div\n className={classNames}\n style={{\n '--dropzone-primary': primaryColor,\n '--dropzone-border': borderColor,\n '--dropzone-active-bg': surfaceHover,\n }}\n >\n <Dropzone\n disableUpload={false}\n maxFiles={(totalFiles + files.length) < maxFiles ? maxFiles : 0}\n maxSize={maxSize}\n InputComponent={InputComponent}\n PreviewComponent={CustomPreview}\n classNames={{ dropzone: 'dropzone-upload-frame' }}\n onChangeStatus={handleChangeStatus}\n getFilesFromEvent={getFilesFromEvent}\n accept={accept}\n />\n </div>\n );\n};\n\nconst TrashIcon = ({ color }) => (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\" />\n <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" />\n <path d=\"M10 11v6M14 11v6\" />\n <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" />\n </svg>\n);\n\nexport default DropzoneUploaderStyled;\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}
|