@payloadcms/ui 3.0.0-beta.90 → 3.0.0-beta.91
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/elements/AddNewRelation/index.d.ts.map +1 -1
- package/dist/elements/AddNewRelation/index.js +1 -1
- package/dist/elements/AddNewRelation/index.js.map +1 -1
- package/dist/elements/AddNewRelation/index.scss +14 -4
- package/dist/elements/AppHeader/index.js +41 -80
- package/dist/elements/AppHeader/index.js.map +1 -1
- package/dist/elements/Autosave/index.js +148 -231
- package/dist/elements/Autosave/index.js.map +1 -1
- package/dist/elements/Button/index.js +86 -218
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Collapsible/index.js +44 -62
- package/dist/elements/Collapsible/index.js.map +1 -1
- package/dist/elements/Collapsible/index.scss +15 -28
- package/dist/elements/CopyToClipboard/index.js +20 -54
- package/dist/elements/CopyToClipboard/index.js.map +1 -1
- package/dist/elements/Dropzone/index.js +59 -119
- package/dist/elements/Dropzone/index.js.map +1 -1
- package/dist/elements/EditMany/index.js +124 -230
- package/dist/elements/EditMany/index.js.map +1 -1
- package/dist/elements/EditUpload/index.js +133 -206
- package/dist/elements/EditUpload/index.js.map +1 -1
- package/dist/elements/ListControls/index.js +82 -188
- package/dist/elements/ListControls/index.js.map +1 -1
- package/dist/elements/Nav/context.js +47 -83
- package/dist/elements/Nav/context.js.map +1 -1
- package/dist/elements/SaveButton/index.js +30 -81
- package/dist/elements/SaveButton/index.js.map +1 -1
- package/dist/elements/SaveDraftButton/index.js +54 -116
- package/dist/elements/SaveDraftButton/index.js.map +1 -1
- package/dist/elements/SearchFilter/index.js +21 -77
- package/dist/elements/SearchFilter/index.js.map +1 -1
- package/dist/elements/Upload/index.js +130 -280
- package/dist/elements/Upload/index.js.map +1 -1
- package/dist/exports/client/{CodeEditor-C4FLUUO7.js → CodeEditor-MTP455NO.js} +2 -2
- package/dist/exports/client/chunk-NJHSEGFB.js +14 -0
- package/dist/exports/client/{chunk-UGBVRIVY.js.map → chunk-NJHSEGFB.js.map} +2 -2
- package/dist/exports/client/index.d.ts +1 -1
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +19 -19
- package/dist/exports/client/index.js.map +3 -3
- package/dist/fields/Relationship/index.js +318 -504
- package/dist/fields/Relationship/index.js.map +1 -1
- package/dist/fields/Upload/HasMany/index.d.ts.map +1 -1
- package/dist/fields/Upload/HasMany/index.js +192 -422
- package/dist/fields/Upload/HasMany/index.js.map +1 -1
- package/dist/fields/Upload/HasMany/index.scss +19 -1
- package/dist/forms/Submit/index.js +12 -28
- package/dist/forms/Submit/index.js.map +1 -1
- package/dist/hooks/useDelay.js +15 -48
- package/dist/hooks/useDelay.js.map +1 -1
- package/dist/hooks/useDelayedRender.js +32 -71
- package/dist/hooks/useDelayedRender.js.map +1 -1
- package/dist/hooks/useIntersect.js +14 -20
- package/dist/hooks/useIntersect.js.map +1 -1
- package/dist/providers/Preferences/index.js +1 -3
- package/dist/providers/Preferences/index.js.map +1 -1
- package/dist/providers/Selection/index.js +102 -190
- package/dist/providers/Selection/index.js.map +1 -1
- package/dist/scss/app.scss +6 -6
- package/dist/scss/type.scss +4 -4
- package/dist/styles.css +1 -1
- package/package.json +8 -8
- package/dist/exports/client/chunk-UGBVRIVY.js +0 -14
- /package/dist/exports/client/{CodeEditor-C4FLUUO7.js.map → CodeEditor-MTP455NO.js.map} +0 -0
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
border-top-left-radius: $style-radius-m;
|
|
20
20
|
width: 100%;
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
&:hover {
|
|
23
|
+
background: var(--theme-elevation-100);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
&:has(.collapsible__drag) {
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
&__drag {
|
|
32
32
|
display: flex;
|
|
33
33
|
opacity: 0.5;
|
|
34
|
-
z-index: 2;
|
|
35
34
|
top: var(--toggle-pad-v);
|
|
36
35
|
width: base(1.2);
|
|
37
36
|
height: base(1.2);
|
|
@@ -56,7 +55,6 @@
|
|
|
56
55
|
position: absolute;
|
|
57
56
|
top: 0;
|
|
58
57
|
left: 0;
|
|
59
|
-
z-index: 1;
|
|
60
58
|
|
|
61
59
|
span {
|
|
62
60
|
user-select: none;
|
|
@@ -74,9 +72,19 @@
|
|
|
74
72
|
color: var(--theme-text);
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&--style-error {
|
|
78
|
+
border: 1px solid var(--theme-error-400);
|
|
79
|
+
> .collapsible__toggle-wrap {
|
|
80
|
+
background-color: var(--theme-error-100);
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
background: var(--theme-error-150);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.row-label {
|
|
87
|
+
color: var(--theme-error-950);
|
|
80
88
|
}
|
|
81
89
|
}
|
|
82
90
|
}
|
|
@@ -147,25 +155,4 @@
|
|
|
147
155
|
padding: var(--gutter-h);
|
|
148
156
|
}
|
|
149
157
|
}
|
|
150
|
-
|
|
151
|
-
&--style-error {
|
|
152
|
-
border: 1px solid var(--theme-error-400);
|
|
153
|
-
&:hover {
|
|
154
|
-
border: 1px solid var(--theme-error-500);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
> .collapsible__toggle-wrap {
|
|
158
|
-
.row-label {
|
|
159
|
-
color: var(--theme-error-950);
|
|
160
|
-
}
|
|
161
|
-
.collapsible__toggle {
|
|
162
|
-
background: var(--theme-error-100);
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
&.collapsible--hovered {
|
|
166
|
-
> .collapsible__toggle-wrap .collapsible__toggle {
|
|
167
|
-
background: var(--theme-error-150);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
158
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
4
|
import React, { useRef, useState } from 'react';
|
|
6
5
|
import { CopyIcon } from '../../icons/Copy/index.js';
|
|
@@ -8,13 +7,11 @@ import { useTranslation } from '../../providers/Translation/index.js';
|
|
|
8
7
|
import { Tooltip } from '../Tooltip/index.js';
|
|
9
8
|
import './index.scss';
|
|
10
9
|
const baseClass = 'copy-to-clipboard';
|
|
11
|
-
export const CopyToClipboard =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
value
|
|
17
|
-
} = t0;
|
|
10
|
+
export const CopyToClipboard = ({
|
|
11
|
+
defaultMessage,
|
|
12
|
+
successMessage,
|
|
13
|
+
value
|
|
14
|
+
}) => {
|
|
18
15
|
const ref = useRef(null);
|
|
19
16
|
const [copied, setCopied] = useState(false);
|
|
20
17
|
const [hovered, setHovered] = useState(false);
|
|
@@ -22,65 +19,34 @@ export const CopyToClipboard = t0 => {
|
|
|
22
19
|
t
|
|
23
20
|
} = useTranslation();
|
|
24
21
|
if (value) {
|
|
25
|
-
|
|
26
|
-
let t2;
|
|
27
|
-
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
28
|
-
t1 = () => {
|
|
29
|
-
setHovered(true);
|
|
30
|
-
setCopied(false);
|
|
31
|
-
};
|
|
32
|
-
t2 = () => {
|
|
33
|
-
setHovered(false);
|
|
34
|
-
setCopied(false);
|
|
35
|
-
};
|
|
36
|
-
$[0] = t1;
|
|
37
|
-
$[1] = t2;
|
|
38
|
-
} else {
|
|
39
|
-
t1 = $[0];
|
|
40
|
-
t2 = $[1];
|
|
41
|
-
}
|
|
42
|
-
let t3;
|
|
43
|
-
if ($[2] !== copied || $[3] !== successMessage || $[4] !== t) {
|
|
44
|
-
t3 = copied && (successMessage ?? t("general:copied"));
|
|
45
|
-
$[2] = copied;
|
|
46
|
-
$[3] = successMessage;
|
|
47
|
-
$[4] = t;
|
|
48
|
-
$[5] = t3;
|
|
49
|
-
} else {
|
|
50
|
-
t3 = $[5];
|
|
51
|
-
}
|
|
52
|
-
let t4;
|
|
53
|
-
if ($[6] !== copied || $[7] !== defaultMessage || $[8] !== t) {
|
|
54
|
-
t4 = !copied && (defaultMessage ?? t("general:copy"));
|
|
55
|
-
$[6] = copied;
|
|
56
|
-
$[7] = defaultMessage;
|
|
57
|
-
$[8] = t;
|
|
58
|
-
$[9] = t4;
|
|
59
|
-
} else {
|
|
60
|
-
t4 = $[9];
|
|
61
|
-
}
|
|
62
|
-
return _jsxs("button", {
|
|
22
|
+
return /*#__PURE__*/_jsxs("button", {
|
|
63
23
|
className: baseClass,
|
|
64
24
|
onClick: () => {
|
|
65
25
|
if (ref && ref.current) {
|
|
66
26
|
ref.current.select();
|
|
67
27
|
ref.current.setSelectionRange(0, value.length + 1);
|
|
68
|
-
document.execCommand(
|
|
28
|
+
document.execCommand('copy');
|
|
69
29
|
setCopied(true);
|
|
70
30
|
}
|
|
71
31
|
},
|
|
72
|
-
onMouseEnter:
|
|
73
|
-
|
|
32
|
+
onMouseEnter: () => {
|
|
33
|
+
setHovered(true);
|
|
34
|
+
setCopied(false);
|
|
35
|
+
},
|
|
36
|
+
onMouseLeave: () => {
|
|
37
|
+
setHovered(false);
|
|
38
|
+
setCopied(false);
|
|
39
|
+
},
|
|
74
40
|
type: "button",
|
|
75
|
-
children: [_jsx(CopyIcon, {}), _jsxs(Tooltip, {
|
|
41
|
+
children: [/*#__PURE__*/_jsx(CopyIcon, {}), /*#__PURE__*/_jsxs(Tooltip, {
|
|
76
42
|
delay: copied ? 0 : undefined,
|
|
77
43
|
show: hovered || copied,
|
|
78
|
-
children: [
|
|
79
|
-
}), _jsx("textarea", {
|
|
44
|
+
children: [copied && (successMessage ?? t('general:copied')), !copied && (defaultMessage ?? t('general:copy'))]
|
|
45
|
+
}), /*#__PURE__*/_jsx("textarea", {
|
|
80
46
|
readOnly: true,
|
|
81
|
-
ref,
|
|
47
|
+
ref: ref,
|
|
82
48
|
tabIndex: -1,
|
|
83
|
-
value
|
|
49
|
+
value: value
|
|
84
50
|
})]
|
|
85
51
|
});
|
|
86
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useRef","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","defaultMessage","successMessage","value","ref","copied","setCopied","hovered","setHovered","t","_jsxs","className","onClick","current","select","setSelectionRange","length","document","execCommand","onMouseEnter","onMouseLeave","type","_jsx","delay","undefined","show","readOnly","tabIndex"],"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef, useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n defaultMessage?: string\n successMessage?: string\n value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n const ref = useRef(null)\n const [copied, setCopied] = useState(false)\n const [hovered, setHovered] = useState(false)\n const { t } = useTranslation()\n\n if (value) {\n return (\n <button\n className={baseClass}\n onClick={() => {\n if (ref && ref.current) {\n ref.current.select()\n ref.current.setSelectionRange(0, value.length + 1)\n document.execCommand('copy')\n setCopied(true)\n }\n }}\n onMouseEnter={() => {\n setHovered(true)\n setCopied(false)\n }}\n onMouseLeave={() => {\n setHovered(false)\n setCopied(false)\n }}\n type=\"button\"\n >\n <CopyIcon />\n <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n {copied && (successMessage ?? t('general:copied'))}\n {!copied && (defaultMessage ?? t('general:copy'))}\n </Tooltip>\n <textarea readOnly ref={ref} tabIndex={-1} value={value} />\n </button>\n )\n }\n\n return null\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,MAAM,EAAEC,QAAQ,QAAQ;AAExC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,eAAA,GAAmCA,CAAC;EAAEC,cAAc;EAAEC,cAAc;EAAEC;AAAK,CAAE;EACxF,MAAMC,GAAA,GAAMV,MAAA,CAAO;EACnB,MAAM,CAACW,MAAA,EAAQC,SAAA,CAAU,GAAGX,QAAA,CAAS;EACrC,MAAM,CAACY,OAAA,EAASC,UAAA,CAAW,GAAGb,QAAA,CAAS;EACvC,MAAM;IAAEc;EAAC,CAAE,GAAGZ,cAAA;EAEd,IAAIM,KAAA,EAAO;IACT,oBACEO,KAAA,CAAC;MACCC,SAAA,EAAWZ,SAAA;MACXa,OAAA,EAASA,CAAA;QACP,IAAIR,GAAA,IAAOA,GAAA,CAAIS,OAAO,EAAE;UACtBT,GAAA,CAAIS,OAAO,CAACC,MAAM;UAClBV,GAAA,CAAIS,OAAO,CAACE,iBAAiB,CAAC,GAAGZ,KAAA,CAAMa,MAAM,GAAG;UAChDC,QAAA,CAASC,WAAW,CAAC;UACrBZ,SAAA,CAAU;QACZ;MACF;MACAa,YAAA,EAAcA,CAAA;QACZX,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAc,YAAA,EAAcA,CAAA;QACZZ,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAe,IAAA,EAAK;8BAELC,IAAA,CAAC1B,QAAA,O,aACDc,KAAA,CAACZ,OAAA;QAAQyB,KAAA,EAAOlB,MAAA,GAAS,IAAImB,SAAA;QAAWC,IAAA,EAAMlB,OAAA,IAAWF,MAAA;mBACtDA,MAAA,KAAWH,cAAA,IAAkBO,CAAA,CAAE,iBAAgB,GAC/C,CAACJ,MAAA,KAAWJ,cAAA,IAAkBQ,CAAA,CAAE,eAAc;uBAEjDa,IAAA,CAAC;QAASI,QAAQ;QAACtB,GAAA,EAAKA,GAAA;QAAKuB,QAAA,EAAU,CAAC;QAAGxB,KAAA,EAAOA;;;EAGxD;EAEA,OAAO;AACT","ignoreList":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
4
|
import React from 'react';
|
|
6
5
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
@@ -11,157 +10,98 @@ const handleDragOver = e => {
|
|
|
11
10
|
e.stopPropagation();
|
|
12
11
|
};
|
|
13
12
|
const baseClass = 'dropzone';
|
|
14
|
-
export const Dropzone =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
onPasteUrlClick
|
|
22
|
-
} = t0;
|
|
13
|
+
export const Dropzone = ({
|
|
14
|
+
className,
|
|
15
|
+
mimeTypes,
|
|
16
|
+
multipleFiles,
|
|
17
|
+
onChange,
|
|
18
|
+
onPasteUrlClick
|
|
19
|
+
}) => {
|
|
23
20
|
const dropRef = React.useRef(null);
|
|
24
21
|
const [dragging, setDragging] = React.useState(false);
|
|
25
22
|
const inputRef = React.useRef(null);
|
|
26
23
|
const {
|
|
27
24
|
t
|
|
28
25
|
} = useTranslation();
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
e.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
} else {
|
|
53
|
-
t2 = $[2];
|
|
54
|
-
}
|
|
55
|
-
const handleDragEnter = t2;
|
|
56
|
-
let t3;
|
|
57
|
-
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
|
|
58
|
-
t3 = e_1 => {
|
|
59
|
-
e_1.preventDefault();
|
|
60
|
-
e_1.stopPropagation();
|
|
61
|
-
setDragging(false);
|
|
62
|
-
};
|
|
63
|
-
$[3] = t3;
|
|
64
|
-
} else {
|
|
65
|
-
t3 = $[3];
|
|
66
|
-
}
|
|
67
|
-
const handleDragLeave = t3;
|
|
68
|
-
let t4;
|
|
69
|
-
if ($[4] !== onChange) {
|
|
70
|
-
t4 = e_2 => {
|
|
71
|
-
e_2.preventDefault();
|
|
72
|
-
e_2.stopPropagation();
|
|
26
|
+
const handlePaste = React.useCallback(e => {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
e.stopPropagation();
|
|
29
|
+
if (e.clipboardData.files && e.clipboardData.files.length > 0) {
|
|
30
|
+
onChange(e.clipboardData.files);
|
|
31
|
+
}
|
|
32
|
+
}, [onChange]);
|
|
33
|
+
const handleDragEnter = React.useCallback(e_0 => {
|
|
34
|
+
e_0.preventDefault();
|
|
35
|
+
e_0.stopPropagation();
|
|
36
|
+
setDragging(true);
|
|
37
|
+
}, []);
|
|
38
|
+
const handleDragLeave = React.useCallback(e_1 => {
|
|
39
|
+
e_1.preventDefault();
|
|
40
|
+
e_1.stopPropagation();
|
|
41
|
+
setDragging(false);
|
|
42
|
+
}, []);
|
|
43
|
+
const handleDrop = React.useCallback(e_2 => {
|
|
44
|
+
e_2.preventDefault();
|
|
45
|
+
e_2.stopPropagation();
|
|
46
|
+
setDragging(false);
|
|
47
|
+
if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
|
|
48
|
+
onChange(e_2.dataTransfer.files);
|
|
73
49
|
setDragging(false);
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
} else {
|
|
83
|
-
t4 = $[5];
|
|
84
|
-
}
|
|
85
|
-
const handleDrop = t4;
|
|
86
|
-
let t5;
|
|
87
|
-
if ($[6] !== onChange) {
|
|
88
|
-
t5 = e_3 => {
|
|
89
|
-
if (e_3.target.files && e_3.target.files.length > 0) {
|
|
90
|
-
onChange(e_3.target.files);
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
$[6] = onChange;
|
|
94
|
-
$[7] = t5;
|
|
95
|
-
} else {
|
|
96
|
-
t5 = $[7];
|
|
97
|
-
}
|
|
98
|
-
const handleFileSelection = t5;
|
|
99
|
-
let t6;
|
|
100
|
-
if ($[8] !== handleDrop || $[9] !== handlePaste) {
|
|
101
|
-
t6 = [handleDragEnter, handleDragLeave, handleDrop, handlePaste];
|
|
102
|
-
$[8] = handleDrop;
|
|
103
|
-
$[9] = handlePaste;
|
|
104
|
-
$[10] = t6;
|
|
105
|
-
} else {
|
|
106
|
-
t6 = $[10];
|
|
107
|
-
}
|
|
50
|
+
e_2.dataTransfer.clearData();
|
|
51
|
+
}
|
|
52
|
+
}, [onChange]);
|
|
53
|
+
const handleFileSelection = React.useCallback(e_3 => {
|
|
54
|
+
if (e_3.target.files && e_3.target.files.length > 0) {
|
|
55
|
+
onChange(e_3.target.files);
|
|
56
|
+
}
|
|
57
|
+
}, [onChange]);
|
|
108
58
|
React.useEffect(() => {
|
|
109
59
|
const div = dropRef.current;
|
|
110
60
|
if (div) {
|
|
111
|
-
div.addEventListener(
|
|
112
|
-
div.addEventListener(
|
|
113
|
-
div.addEventListener(
|
|
114
|
-
div.addEventListener(
|
|
115
|
-
div.addEventListener(
|
|
61
|
+
div.addEventListener('dragenter', handleDragEnter);
|
|
62
|
+
div.addEventListener('dragleave', handleDragLeave);
|
|
63
|
+
div.addEventListener('dragover', handleDragOver);
|
|
64
|
+
div.addEventListener('drop', handleDrop);
|
|
65
|
+
div.addEventListener('paste', handlePaste);
|
|
116
66
|
return () => {
|
|
117
|
-
div.removeEventListener(
|
|
118
|
-
div.removeEventListener(
|
|
119
|
-
div.removeEventListener(
|
|
120
|
-
div.removeEventListener(
|
|
121
|
-
div.removeEventListener(
|
|
67
|
+
div.removeEventListener('dragenter', handleDragEnter);
|
|
68
|
+
div.removeEventListener('dragleave', handleDragLeave);
|
|
69
|
+
div.removeEventListener('dragover', handleDragOver);
|
|
70
|
+
div.removeEventListener('drop', handleDrop);
|
|
71
|
+
div.removeEventListener('paste', handlePaste);
|
|
122
72
|
};
|
|
123
73
|
}
|
|
124
74
|
return () => null;
|
|
125
|
-
},
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
if ($[11] !== className || $[12] !== t7) {
|
|
129
|
-
t8 = [baseClass, className, t7].filter(Boolean);
|
|
130
|
-
$[11] = className;
|
|
131
|
-
$[12] = t7;
|
|
132
|
-
$[13] = t8;
|
|
133
|
-
} else {
|
|
134
|
-
t8 = $[13];
|
|
135
|
-
}
|
|
136
|
-
const classes = t8.join(" ");
|
|
137
|
-
return _jsxs("div", {
|
|
75
|
+
}, [handleDragEnter, handleDragLeave, handleDrop, handlePaste]);
|
|
76
|
+
const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ');
|
|
77
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
138
78
|
className: classes,
|
|
139
79
|
ref: dropRef,
|
|
140
|
-
children: [_jsx(Button, {
|
|
80
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
141
81
|
buttonStyle: "secondary",
|
|
142
82
|
className: `${baseClass}__file-button`,
|
|
143
83
|
onClick: () => {
|
|
144
84
|
inputRef.current.click();
|
|
145
85
|
},
|
|
146
86
|
size: "medium",
|
|
147
|
-
children: t(
|
|
148
|
-
}), typeof onPasteUrlClick ===
|
|
87
|
+
children: t('upload:selectFile')
|
|
88
|
+
}), typeof onPasteUrlClick === 'function' && /*#__PURE__*/_jsx(Button, {
|
|
149
89
|
buttonStyle: "secondary",
|
|
150
90
|
className: `${baseClass}__file-button`,
|
|
151
91
|
onClick: onPasteUrlClick,
|
|
152
92
|
size: "medium",
|
|
153
|
-
children: t(
|
|
154
|
-
}), _jsx("input", {
|
|
155
|
-
accept: mimeTypes?.join(
|
|
93
|
+
children: t('upload:pasteURL')
|
|
94
|
+
}), /*#__PURE__*/_jsx("input", {
|
|
95
|
+
accept: mimeTypes?.join(','),
|
|
156
96
|
"aria-hidden": "true",
|
|
157
97
|
className: `${baseClass}__hidden-input`,
|
|
158
98
|
multiple: multipleFiles,
|
|
159
99
|
onChange: handleFileSelection,
|
|
160
100
|
ref: inputRef,
|
|
161
101
|
type: "file"
|
|
162
|
-
}), _jsxs("p", {
|
|
102
|
+
}), /*#__PURE__*/_jsxs("p", {
|
|
163
103
|
className: `${baseClass}__label`,
|
|
164
|
-
children: [t(
|
|
104
|
+
children: [t('general:or'), " ", t('upload:dragAndDrop')]
|
|
165
105
|
})]
|
|
166
106
|
});
|
|
167
107
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useTranslation","Button","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","className","mimeTypes","multipleFiles","onChange","onPasteUrlClick","dropRef","useRef","dragging","setDragging","useState","inputRef","t","handlePaste","useCallback","clipboardData","files","length","handleDragEnter","handleDragLeave","handleDrop","dataTransfer","clearData","handleFileSelection","target","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","ref","_jsx","buttonStyle","onClick","click","size","accept","multiple","type"],"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n readonly className?: string\n readonly mimeTypes?: string[]\n readonly multipleFiles?: boolean\n readonly onChange: (e: FileList) => void\n readonly onPasteUrlClick?: () => void\n}\n\nexport const Dropzone: React.FC<Props> = ({\n className,\n mimeTypes,\n multipleFiles,\n onChange,\n onPasteUrlClick,\n}) => {\n const dropRef = React.useRef<HTMLDivElement>(null)\n const [dragging, setDragging] = React.useState(false)\n const inputRef = React.useRef(null)\n\n const { t } = useTranslation()\n\n const handlePaste = React.useCallback(\n (e: ClipboardEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n onChange(e.clipboardData.files)\n }\n },\n [onChange],\n )\n\n const handleDragEnter = React.useCallback((e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(true)\n }, [])\n\n const handleDragLeave = React.useCallback((e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(false)\n }, [])\n\n const handleDrop = React.useCallback(\n (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(false)\n\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n onChange(e.dataTransfer.files)\n setDragging(false)\n\n e.dataTransfer.clearData()\n }\n },\n [onChange],\n )\n\n const handleFileSelection = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n onChange(e.target.files)\n }\n },\n [onChange],\n )\n\n React.useEffect(() => {\n const div = dropRef.current\n\n if (div) {\n div.addEventListener('dragenter', handleDragEnter)\n div.addEventListener('dragleave', handleDragLeave)\n div.addEventListener('dragover', handleDragOver)\n div.addEventListener('drop', handleDrop)\n div.addEventListener('paste', handlePaste)\n\n return () => {\n div.removeEventListener('dragenter', handleDragEnter)\n div.removeEventListener('dragleave', handleDragLeave)\n div.removeEventListener('dragover', handleDragOver)\n div.removeEventListener('drop', handleDrop)\n div.removeEventListener('paste', handlePaste)\n }\n }\n\n return () => null\n }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')\n\n return (\n <div className={classes} ref={dropRef}>\n <Button\n buttonStyle=\"secondary\"\n className={`${baseClass}__file-button`}\n onClick={() => {\n inputRef.current.click()\n }}\n size=\"medium\"\n >\n {t('upload:selectFile')}\n </Button>\n {typeof onPasteUrlClick === 'function' && (\n <Button\n buttonStyle=\"secondary\"\n className={`${baseClass}__file-button`}\n onClick={onPasteUrlClick}\n size=\"medium\"\n >\n {t('upload:pasteURL')}\n </Button>\n )}\n <input\n accept={mimeTypes?.join(',')}\n aria-hidden=\"true\"\n className={`${baseClass}__hidden-input`}\n multiple={multipleFiles}\n onChange={handleFileSelection}\n ref={inputRef}\n type=\"file\"\n />\n\n <p className={`${baseClass}__label`}>\n {t('general:or')} {t('upload:dragAndDrop')}\n </p>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|