@hai-dev/ui-kit 1.1.4 → 1.1.5
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,61 +1,62 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as yo, Fragment as Io, jsx as _ } from "react/jsx-runtime";
|
|
2
2
|
import { useState as i, useRef as w } from "react";
|
|
3
|
-
import { D as
|
|
4
|
-
import { c as
|
|
3
|
+
import { D as Fo } from "../../index-BiffjjQq.js";
|
|
4
|
+
import { c as No } from "../../index-B2JRaoNz.js";
|
|
5
5
|
import { localizedText as Mo } from "./locale.js";
|
|
6
|
-
import { EN_LOCALE as
|
|
7
|
-
import { DEFAULT_MIN_DIMENSION as
|
|
8
|
-
import { UploadDialog as
|
|
9
|
-
import { UploadButton as
|
|
10
|
-
import { ErrorUploadDialog as
|
|
11
|
-
import { isVideo as
|
|
12
|
-
import { validatePhotoFile as
|
|
13
|
-
import { readPhoto as
|
|
14
|
-
import { getPhotoCrop as
|
|
15
|
-
import { getCroppedSource as
|
|
16
|
-
import { getDefaultCroppedPhoto as
|
|
17
|
-
import '../../assets/photo-crop-uploader.css';const
|
|
18
|
-
photoCropCanvas:
|
|
6
|
+
import { EN_LOCALE as bo } from "../../constants.js";
|
|
7
|
+
import { DEFAULT_MIN_DIMENSION as Ho, DEFAULT_ASPECT_RATIO as Vo, DEFAULT_TIMEOUT as ko, DEFAULT_FILE_MAX_SIZE as jo, FULL_PROGRESS_VALUE as K, PHOTO_LOADING_DELAY as zo, RESET_DATA_DELAY as m } from "./constants.js";
|
|
8
|
+
import { UploadDialog as Wo } from "./components/upload-dialog/upload-dialog.js";
|
|
9
|
+
import { UploadButton as Bo } from "./components/upload-button/upload-button.js";
|
|
10
|
+
import { ErrorUploadDialog as Go } from "./components/error-upload-dialog/error-upload-dialog.js";
|
|
11
|
+
import { isVideo as Q } from "./utils/is-video.js";
|
|
12
|
+
import { validatePhotoFile as $ } from "./utils/validate-photo-file.js";
|
|
13
|
+
import { readPhoto as oo } from "./utils/read-photo.js";
|
|
14
|
+
import { getPhotoCrop as Yo } from "./utils/get-photo-crop.js";
|
|
15
|
+
import { getCroppedSource as Xo } from "./utils/get-cropped-source.js";
|
|
16
|
+
import { getDefaultCroppedPhoto as eo } from "./utils/get-default-cropped-photo.js";
|
|
17
|
+
import '../../assets/photo-crop-uploader.css';const Zo = "_photoCropCanvas_1i4lr_1", qo = {
|
|
18
|
+
photoCropCanvas: Zo
|
|
19
19
|
};
|
|
20
|
-
function
|
|
20
|
+
function me(a) {
|
|
21
21
|
const {
|
|
22
|
-
buttonClassname:
|
|
23
|
-
onStartUpload:
|
|
22
|
+
buttonClassname: ro = "",
|
|
23
|
+
onStartUpload: to = () => {
|
|
24
24
|
},
|
|
25
|
-
onEndUpload:
|
|
25
|
+
onEndUpload: so = () => {
|
|
26
26
|
},
|
|
27
27
|
onError: no = () => {
|
|
28
28
|
},
|
|
29
|
-
onStartCrop:
|
|
29
|
+
onStartCrop: ao = () => {
|
|
30
30
|
},
|
|
31
|
-
onDragOver:
|
|
31
|
+
onDragOver: io = () => {
|
|
32
32
|
},
|
|
33
|
-
onDragLeave:
|
|
33
|
+
onDragLeave: co = () => {
|
|
34
34
|
},
|
|
35
|
-
onDragDrop:
|
|
35
|
+
onDragDrop: lo = () => {
|
|
36
36
|
},
|
|
37
|
-
showErrorPopup:
|
|
38
|
-
minDimension: c =
|
|
39
|
-
aspectRatio: C =
|
|
40
|
-
locale:
|
|
41
|
-
timeout:
|
|
42
|
-
fileMaxSize:
|
|
37
|
+
showErrorPopup: po = !1,
|
|
38
|
+
minDimension: c = Ho,
|
|
39
|
+
aspectRatio: C = Vo,
|
|
40
|
+
locale: s = bo,
|
|
41
|
+
timeout: N = ko,
|
|
42
|
+
fileMaxSize: M = jo,
|
|
43
43
|
allowedExtensions: U,
|
|
44
44
|
allowedMimeTypes: b,
|
|
45
|
-
circular:
|
|
46
|
-
width:
|
|
47
|
-
keepSelection:
|
|
48
|
-
uploadButton:
|
|
45
|
+
circular: uo,
|
|
46
|
+
width: fo,
|
|
47
|
+
keepSelection: ho,
|
|
48
|
+
uploadButton: mo,
|
|
49
49
|
multiple: g = !1,
|
|
50
50
|
fromSources: H,
|
|
51
51
|
withVideoUploaded: A = !1,
|
|
52
|
-
returnCropParams:
|
|
53
|
-
|
|
54
|
-
} = a, {
|
|
55
|
-
onEndCrop: qo,
|
|
56
|
-
onClose: Jo,
|
|
52
|
+
returnCropParams: Co = !1,
|
|
53
|
+
dialogClassname: V,
|
|
57
54
|
...go
|
|
58
|
-
} =
|
|
55
|
+
} = a, {
|
|
56
|
+
onEndCrop: Jo,
|
|
57
|
+
onClose: Ko,
|
|
58
|
+
...Eo
|
|
59
|
+
} = go, [Po, E] = i(!1), [P, D] = i([]), [x, v] = i([]), f = w([]), h = w([]), [p, k] = i(0), j = w(null), z = w(null), [l, O] = i(!1), [Do, W] = i(0), [B, G] = i(""), [So, S] = i([]), [Lo, Y] = i(!1), To = Po || l && g, _o = () => {
|
|
59
60
|
S([]);
|
|
60
61
|
}, R = (o = []) => {
|
|
61
62
|
l || (a.returnCropParams === !0 && a.onClose?.(
|
|
@@ -73,70 +74,70 @@ function he(a) {
|
|
|
73
74
|
), E(!1), setTimeout(() => S([]), m), setTimeout(() => D([]), m), setTimeout(() => {
|
|
74
75
|
f.current = [], h.current = [];
|
|
75
76
|
}, m));
|
|
76
|
-
},
|
|
77
|
+
}, X = () => {
|
|
77
78
|
l || (a.returnCropParams === !0 ? R([]) : y([]));
|
|
78
|
-
},
|
|
79
|
-
|
|
79
|
+
}, wo = () => {
|
|
80
|
+
Y(!1);
|
|
80
81
|
}, L = (o, r = o, e = []) => {
|
|
81
|
-
|
|
82
|
+
so(o), G(""), D(o), v(Array(o.length)), k(0), E(!0), f.current = r, h.current = e, o.length || X();
|
|
82
83
|
}, I = (o) => {
|
|
83
|
-
o instanceof Error && (console.warn(o.message), no(o),
|
|
84
|
-
},
|
|
84
|
+
o instanceof Error && (console.warn(o.message), no(o), G(o.message), Y(!0), D([]), E(!1), f.current = [], h.current = []);
|
|
85
|
+
}, Uo = async (o) => {
|
|
85
86
|
const { files: r } = o.target;
|
|
86
87
|
if (r?.length && !l)
|
|
87
88
|
try {
|
|
88
|
-
if (O(!0),
|
|
89
|
-
const e = Array.from(r), t =
|
|
89
|
+
if (O(!0), to(), g) {
|
|
90
|
+
const e = Array.from(r), t = K / e.length, T = [], u = [], q = [], F = [];
|
|
90
91
|
for (const d of e) {
|
|
91
|
-
const
|
|
92
|
+
const Ro = Q(d);
|
|
92
93
|
try {
|
|
93
|
-
if (A &&
|
|
94
|
-
const
|
|
95
|
-
|
|
94
|
+
if (A && Ro) {
|
|
95
|
+
const n = URL.createObjectURL(d);
|
|
96
|
+
q.push(u.length), u.push(n);
|
|
96
97
|
} else {
|
|
97
|
-
|
|
98
|
+
$(
|
|
98
99
|
d,
|
|
99
100
|
{
|
|
100
|
-
maxSize:
|
|
101
|
+
maxSize: M,
|
|
101
102
|
allowedExtensions: U,
|
|
102
103
|
allowedMimeTypes: b
|
|
103
104
|
},
|
|
104
|
-
|
|
105
|
+
s
|
|
105
106
|
);
|
|
106
|
-
const
|
|
107
|
+
const n = await oo(
|
|
107
108
|
d,
|
|
108
109
|
c,
|
|
109
|
-
|
|
110
|
-
|
|
110
|
+
s,
|
|
111
|
+
N
|
|
111
112
|
);
|
|
112
|
-
T.push(
|
|
113
|
+
T.push(n), u.push(n);
|
|
113
114
|
}
|
|
114
|
-
} catch (
|
|
115
|
-
let
|
|
116
|
-
|
|
115
|
+
} catch (n) {
|
|
116
|
+
let J = "";
|
|
117
|
+
n instanceof Error && (J = n.message), F.push({
|
|
117
118
|
photoName: d.name,
|
|
118
|
-
errorMessage:
|
|
119
|
+
errorMessage: J
|
|
119
120
|
});
|
|
120
121
|
}
|
|
121
|
-
|
|
122
|
-
(
|
|
123
|
-
), await new Promise((
|
|
122
|
+
W(
|
|
123
|
+
(n) => Math.min(K, n + t)
|
|
124
|
+
), await new Promise((n) => setTimeout(n, 0));
|
|
124
125
|
}
|
|
125
126
|
if (H?.length)
|
|
126
127
|
throw new Error(F[0]?.errorMessage);
|
|
127
|
-
S(F), L(T, u,
|
|
128
|
+
S(F), L(T, u, q);
|
|
128
129
|
} else {
|
|
129
130
|
const e = r[0];
|
|
130
|
-
if (A &&
|
|
131
|
+
if (A && Q(e)) {
|
|
131
132
|
const t = URL.createObjectURL(e);
|
|
132
133
|
L([], [t], [0]);
|
|
133
134
|
} else {
|
|
134
|
-
|
|
135
|
+
$(
|
|
135
136
|
e,
|
|
136
|
-
{ maxSize:
|
|
137
|
-
|
|
137
|
+
{ maxSize: M, allowedExtensions: U, allowedMimeTypes: b },
|
|
138
|
+
s
|
|
138
139
|
);
|
|
139
|
-
const t = await
|
|
140
|
+
const t = await oo(e, c, s, N);
|
|
140
141
|
L([t]);
|
|
141
142
|
}
|
|
142
143
|
}
|
|
@@ -144,35 +145,35 @@ function he(a) {
|
|
|
144
145
|
I(e);
|
|
145
146
|
} finally {
|
|
146
147
|
g ? setTimeout(() => {
|
|
147
|
-
o.target.value = "",
|
|
148
|
-
},
|
|
148
|
+
o.target.value = "", W(0), O(!1);
|
|
149
|
+
}, zo) : (o.target.value = "", O(!1));
|
|
149
150
|
}
|
|
150
|
-
},
|
|
151
|
-
const { width: r, height: e } = o.currentTarget, t =
|
|
151
|
+
}, Ao = (o) => {
|
|
152
|
+
const { width: r, height: e } = o.currentTarget, t = Yo(r, e, c, C);
|
|
152
153
|
v((T) => {
|
|
153
154
|
const u = [...T];
|
|
154
155
|
return u[p] = t, u;
|
|
155
156
|
});
|
|
156
|
-
},
|
|
157
|
+
}, xo = (o, r) => {
|
|
157
158
|
v((e) => {
|
|
158
159
|
const t = [...e];
|
|
159
160
|
return t[p] = r, t;
|
|
160
161
|
});
|
|
161
|
-
},
|
|
162
|
-
const o =
|
|
162
|
+
}, Z = () => {
|
|
163
|
+
const o = z.current, r = j.current;
|
|
163
164
|
if (o && r && x)
|
|
164
165
|
try {
|
|
165
166
|
const e = x[p];
|
|
166
167
|
if (!e) return !1;
|
|
167
|
-
if (
|
|
168
|
-
const t =
|
|
168
|
+
if (ao(), a.returnCropParams === !0) {
|
|
169
|
+
const t = Fo(e, r.naturalWidth, r.naturalHeight);
|
|
169
170
|
a.onEndCrop?.(t), p >= P.length - 1 && R();
|
|
170
171
|
} else {
|
|
171
|
-
const t =
|
|
172
|
+
const t = Xo(
|
|
172
173
|
r,
|
|
173
174
|
o,
|
|
174
175
|
e,
|
|
175
|
-
|
|
176
|
+
s
|
|
176
177
|
);
|
|
177
178
|
a.onEndCrop?.(t), p >= P.length - 1 && y();
|
|
178
179
|
}
|
|
@@ -182,19 +183,19 @@ function he(a) {
|
|
|
182
183
|
}
|
|
183
184
|
else
|
|
184
185
|
return !1;
|
|
185
|
-
},
|
|
186
|
-
|
|
187
|
-
},
|
|
186
|
+
}, vo = () => {
|
|
187
|
+
Z() && k((r) => r + 1);
|
|
188
|
+
}, Oo = async () => {
|
|
188
189
|
const o = P.slice(p);
|
|
189
190
|
try {
|
|
190
|
-
if (
|
|
191
|
+
if (Co) {
|
|
191
192
|
const r = await Promise.all(
|
|
192
193
|
o.map(
|
|
193
|
-
(e) =>
|
|
194
|
+
(e) => eo(
|
|
194
195
|
e,
|
|
195
196
|
c,
|
|
196
197
|
C,
|
|
197
|
-
|
|
198
|
+
s,
|
|
198
199
|
!0
|
|
199
200
|
)
|
|
200
201
|
)
|
|
@@ -203,11 +204,11 @@ function he(a) {
|
|
|
203
204
|
} else {
|
|
204
205
|
const r = await Promise.all(
|
|
205
206
|
o.map(
|
|
206
|
-
(e) =>
|
|
207
|
+
(e) => eo(
|
|
207
208
|
e,
|
|
208
209
|
c,
|
|
209
210
|
C,
|
|
210
|
-
|
|
211
|
+
s,
|
|
211
212
|
!1
|
|
212
213
|
)
|
|
213
214
|
)
|
|
@@ -218,75 +219,77 @@ function he(a) {
|
|
|
218
219
|
I(r);
|
|
219
220
|
}
|
|
220
221
|
};
|
|
221
|
-
return /* @__PURE__ */
|
|
222
|
+
return /* @__PURE__ */ yo(Io, { children: [
|
|
222
223
|
/* @__PURE__ */ _(
|
|
223
|
-
|
|
224
|
+
Bo,
|
|
224
225
|
{
|
|
225
|
-
onChange:
|
|
226
|
+
onChange: Uo,
|
|
226
227
|
onPhotoDataLoaded: L,
|
|
227
|
-
buttonClassname:
|
|
228
|
+
buttonClassname: ro,
|
|
228
229
|
disabled: l,
|
|
229
230
|
buttonDisabled: l,
|
|
230
|
-
locale:
|
|
231
|
-
width:
|
|
231
|
+
locale: s,
|
|
232
|
+
width: fo,
|
|
232
233
|
allowedExtensions: U,
|
|
233
|
-
onDragDrop:
|
|
234
|
-
onDragLeave:
|
|
235
|
-
onDragOver:
|
|
236
|
-
button:
|
|
234
|
+
onDragDrop: lo,
|
|
235
|
+
onDragLeave: co,
|
|
236
|
+
onDragOver: io,
|
|
237
|
+
button: mo,
|
|
237
238
|
multiple: g,
|
|
238
239
|
fromSources: H,
|
|
239
240
|
withVideoUploaded: A,
|
|
240
|
-
...
|
|
241
|
-
children: Mo[
|
|
241
|
+
...Eo,
|
|
242
|
+
children: Mo[s].upload
|
|
242
243
|
}
|
|
243
244
|
),
|
|
244
245
|
/* @__PURE__ */ _(
|
|
245
|
-
|
|
246
|
+
Wo,
|
|
246
247
|
{
|
|
247
|
-
open:
|
|
248
|
+
open: To,
|
|
249
|
+
className: V,
|
|
248
250
|
photoSourceLoading: l,
|
|
249
|
-
loadingValue:
|
|
250
|
-
errors:
|
|
251
|
+
loadingValue: Do,
|
|
252
|
+
errors: So,
|
|
251
253
|
photoCrops: x,
|
|
252
254
|
photoSources: P,
|
|
253
|
-
onNextPhoto:
|
|
254
|
-
onSkipCrop:
|
|
255
|
-
onClearErrors:
|
|
256
|
-
photoError:
|
|
257
|
-
onCloseDialogHandler:
|
|
258
|
-
onCropChange:
|
|
259
|
-
onPhotoCrop:
|
|
260
|
-
onPhotoLoad:
|
|
261
|
-
imageRef:
|
|
255
|
+
onNextPhoto: vo,
|
|
256
|
+
onSkipCrop: Oo,
|
|
257
|
+
onClearErrors: _o,
|
|
258
|
+
photoError: B,
|
|
259
|
+
onCloseDialogHandler: X,
|
|
260
|
+
onCropChange: xo,
|
|
261
|
+
onPhotoCrop: Z,
|
|
262
|
+
onPhotoLoad: Ao,
|
|
263
|
+
imageRef: j,
|
|
262
264
|
minDimension: c,
|
|
263
265
|
aspectRatio: C,
|
|
264
|
-
locale:
|
|
265
|
-
circular:
|
|
266
|
-
keepSelection:
|
|
266
|
+
locale: s,
|
|
267
|
+
circular: uo,
|
|
268
|
+
keepSelection: ho,
|
|
267
269
|
photoIndex: p
|
|
268
270
|
}
|
|
269
271
|
),
|
|
270
272
|
/* @__PURE__ */ _(
|
|
271
|
-
|
|
273
|
+
Go,
|
|
272
274
|
{
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
275
|
+
className: V,
|
|
276
|
+
open: po && Lo,
|
|
277
|
+
photoError: B,
|
|
278
|
+
onCloseErrorDialog: wo,
|
|
279
|
+
locale: s
|
|
277
280
|
}
|
|
278
281
|
),
|
|
279
282
|
/* @__PURE__ */ _(
|
|
280
283
|
"canvas",
|
|
281
284
|
{
|
|
282
|
-
className:
|
|
285
|
+
className: No(qo.photoCropCanvas),
|
|
283
286
|
width: c,
|
|
284
287
|
height: c,
|
|
285
|
-
ref:
|
|
288
|
+
ref: z
|
|
286
289
|
}
|
|
287
290
|
)
|
|
288
291
|
] });
|
|
289
292
|
}
|
|
290
293
|
export {
|
|
291
|
-
|
|
294
|
+
me as PhotoCropUploader
|
|
292
295
|
};
|
|
@@ -49,6 +49,7 @@ export type PhotoCropUploaderCustomProps = {
|
|
|
49
49
|
uploadButton?: ReactNode;
|
|
50
50
|
fromSources?: PhotoDataUrl[];
|
|
51
51
|
withVideoUploaded?: boolean;
|
|
52
|
+
dialogClassname?: string;
|
|
52
53
|
};
|
|
53
54
|
export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & CropProps & InputHTMLAttributes<HTMLInputElement>;
|
|
54
55
|
export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;
|