@ztwoint/z-ui 0.1.91 → 0.1.92
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.
|
@@ -6,10 +6,10 @@ export type FileUploadAreaProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
isError?: boolean;
|
|
9
|
-
Error
|
|
9
|
+
Error?: {
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
title?: string;
|
|
12
|
+
description?: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as v, useState as
|
|
3
|
-
import { DEFAULT_ACCEPT as
|
|
1
|
+
import { jsxs as l, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as v, useState as y } from "react";
|
|
3
|
+
import { DEFAULT_ACCEPT as D } from "./file-upload-area.const.js";
|
|
4
4
|
import { UploadIconComponent as C } from "./upload-icon-component.js";
|
|
5
5
|
import k from "./text-preset.js";
|
|
6
6
|
import { cn as p } from "../../lib/utils.js";
|
|
7
|
-
import
|
|
7
|
+
import w from "../assets/icons/triangle-warning.js";
|
|
8
8
|
const L = ({
|
|
9
|
-
onFilesSelected:
|
|
10
|
-
accept:
|
|
11
|
-
multiple:
|
|
12
|
-
className:
|
|
13
|
-
disabled:
|
|
9
|
+
onFilesSelected: r,
|
|
10
|
+
accept: o = D,
|
|
11
|
+
multiple: d = !0,
|
|
12
|
+
className: c = "",
|
|
13
|
+
disabled: t = !1,
|
|
14
14
|
isError: m = !1,
|
|
15
|
-
Error:
|
|
15
|
+
Error: a
|
|
16
16
|
}) => {
|
|
17
|
-
const s = v(null), [
|
|
18
|
-
|
|
17
|
+
const s = v(null), [A, i] = y(!1), u = (e) => {
|
|
18
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!0));
|
|
19
19
|
}, g = (e) => {
|
|
20
|
-
|
|
20
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!1));
|
|
21
21
|
}, x = (e) => {
|
|
22
|
-
|
|
22
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && r(Array.from(e.dataTransfer.files)));
|
|
23
23
|
}, f = () => {
|
|
24
24
|
var e;
|
|
25
|
-
|
|
25
|
+
t || (e = s.current) == null || e.click();
|
|
26
26
|
}, h = (e) => {
|
|
27
|
-
|
|
27
|
+
t || e.target.files && e.target.files.length > 0 && r(Array.from(e.target.files));
|
|
28
28
|
};
|
|
29
|
-
return /* @__PURE__ */
|
|
29
|
+
return /* @__PURE__ */ l(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
32
|
className: p(
|
|
33
33
|
"max-w-115 w-full bg-neutral-light rounded-3xl",
|
|
34
34
|
"flex flex-col items-center file-upload-12-dash-border",
|
|
35
|
-
|
|
35
|
+
t && "opacity-60 bg-gray-100 cursor-not-allowed disabled"
|
|
36
36
|
),
|
|
37
37
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ l(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
41
|
className: p(
|
|
42
42
|
"flex flex-col items-center justify-center gap-8 p-12",
|
|
43
43
|
"leading-none-medium-sm leading-3",
|
|
44
|
-
|
|
44
|
+
c
|
|
45
45
|
),
|
|
46
46
|
onDragOver: u,
|
|
47
47
|
onDragLeave: g,
|
|
48
48
|
onDrop: x,
|
|
49
49
|
onClick: f,
|
|
50
|
-
tabIndex:
|
|
50
|
+
tabIndex: t ? -1 : 0,
|
|
51
51
|
role: "button",
|
|
52
52
|
"aria-label": "File upload area. Click or drag and drop files.",
|
|
53
|
-
"aria-disabled":
|
|
54
|
-
onKeyDown:
|
|
53
|
+
"aria-disabled": t,
|
|
54
|
+
onKeyDown: t ? void 0 : (e) => {
|
|
55
55
|
(e.key === "Enter" || e.key === " ") && f();
|
|
56
56
|
},
|
|
57
57
|
"data-testid": "file-upload-area",
|
|
58
58
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
/* @__PURE__ */
|
|
59
|
+
/* @__PURE__ */ n(C, {}),
|
|
60
|
+
/* @__PURE__ */ n(k, { accept: o }),
|
|
61
|
+
/* @__PURE__ */ n(
|
|
62
62
|
"input",
|
|
63
63
|
{
|
|
64
64
|
ref: s,
|
|
65
65
|
type: "file",
|
|
66
66
|
className: "hidden",
|
|
67
|
-
accept:
|
|
68
|
-
multiple:
|
|
67
|
+
accept: o.join(","),
|
|
68
|
+
multiple: d,
|
|
69
69
|
tabIndex: -1,
|
|
70
70
|
"data-testid": "file-upload-input",
|
|
71
71
|
onChange: h,
|
|
72
72
|
onClick: (e) => e.stopPropagation(),
|
|
73
|
-
disabled:
|
|
73
|
+
disabled: t
|
|
74
74
|
}
|
|
75
75
|
)
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
),
|
|
79
|
-
m && /* @__PURE__ */
|
|
80
|
-
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
79
|
+
m && /* @__PURE__ */ l("div", { className: "flex flex-row gap-2 p-3 items-center justify-center w-full rounded-b-3xl border-solid border-[1.5px] border-stroke-solid-medium", children: [
|
|
80
|
+
(a == null ? void 0 : a.icon) || /* @__PURE__ */ n(w, { fill: "red" }),
|
|
81
|
+
/* @__PURE__ */ l("div", { className: "flex flex-row gap-1", children: [
|
|
82
|
+
/* @__PURE__ */ n("p", { className: "leading-none-medium-sm text-text-danger-primary", children: a == null ? void 0 : a.title }),
|
|
83
|
+
/* @__PURE__ */ n("p", { className: "leading-none-regular-sm text-text-danger-primary opacity-[.7]", children: a == null ? void 0 : a.description })
|
|
84
84
|
] })
|
|
85
85
|
] })
|
|
86
86
|
]
|
|
@@ -6,10 +6,10 @@ export type FileUploadAreaProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
isError?: boolean;
|
|
9
|
-
Error
|
|
9
|
+
Error?: {
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
title?: string;
|
|
12
|
+
description?: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
/**
|