@yamada-ui/dropzone 1.0.28 → 1.0.29
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/accept-types.d.mts +30 -0
- package/dist/accept-types.d.ts +30 -0
- package/dist/accept-types.js +77 -0
- package/dist/accept-types.js.map +1 -0
- package/dist/accept-types.mjs +20 -0
- package/dist/accept-types.mjs.map +1 -0
- package/dist/chunk-CIOUYT32.mjs +48 -0
- package/dist/chunk-CIOUYT32.mjs.map +1 -0
- package/dist/chunk-NSRSYGWG.mjs +184 -0
- package/dist/chunk-NSRSYGWG.mjs.map +1 -0
- package/dist/dropzone.d.mts +52 -0
- package/dist/dropzone.d.ts +52 -0
- package/dist/dropzone.js +195 -0
- package/dist/dropzone.js.map +1 -0
- package/dist/dropzone.mjs +14 -0
- package/dist/dropzone.mjs.map +1 -0
- package/dist/index.d.mts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +247 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +30 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
declare const ACCEPT_TYPES: {
|
|
2
|
+
readonly txt: "text/plain";
|
|
3
|
+
readonly html: "text/html";
|
|
4
|
+
readonly csv: "text/csv";
|
|
5
|
+
readonly png: "image/png";
|
|
6
|
+
readonly gif: "image/gif";
|
|
7
|
+
readonly jpeg: "image/jpeg";
|
|
8
|
+
readonly svg: "image/svg+xml";
|
|
9
|
+
readonly webp: "image/webp";
|
|
10
|
+
readonly mp3: "audio/mpeg";
|
|
11
|
+
readonly mpeg: "video/mpeg";
|
|
12
|
+
readonly mp4: "video/mp4";
|
|
13
|
+
readonly zip: "application/zip";
|
|
14
|
+
readonly pdf: "application/pdf";
|
|
15
|
+
readonly doc: "application/msword";
|
|
16
|
+
readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
|
17
|
+
readonly xls: "application/vnd.ms-excel";
|
|
18
|
+
readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
19
|
+
readonly ppt: "application/vnd.ms-powerpoint";
|
|
20
|
+
readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
|
|
21
|
+
readonly exe: "application/vnd.microsoft.portable-executable";
|
|
22
|
+
};
|
|
23
|
+
declare const IMAGE_ACCEPT_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/svg+xml" | "image/webp")[];
|
|
24
|
+
declare const PDF_ACCEPT_TYPE: "application/pdf"[];
|
|
25
|
+
declare const MS_WORD_ACCEPT_TYPE: ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document")[];
|
|
26
|
+
declare const MS_EXCEL_ACCEPT_TYPE: ("application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")[];
|
|
27
|
+
declare const MS_POWER_POINT_ACCEPT_TYPE: ("application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation")[];
|
|
28
|
+
declare const EXE_ACCEPT_TYPE: "application/vnd.microsoft.portable-executable"[];
|
|
29
|
+
|
|
30
|
+
export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWER_POINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
declare const ACCEPT_TYPES: {
|
|
2
|
+
readonly txt: "text/plain";
|
|
3
|
+
readonly html: "text/html";
|
|
4
|
+
readonly csv: "text/csv";
|
|
5
|
+
readonly png: "image/png";
|
|
6
|
+
readonly gif: "image/gif";
|
|
7
|
+
readonly jpeg: "image/jpeg";
|
|
8
|
+
readonly svg: "image/svg+xml";
|
|
9
|
+
readonly webp: "image/webp";
|
|
10
|
+
readonly mp3: "audio/mpeg";
|
|
11
|
+
readonly mpeg: "video/mpeg";
|
|
12
|
+
readonly mp4: "video/mp4";
|
|
13
|
+
readonly zip: "application/zip";
|
|
14
|
+
readonly pdf: "application/pdf";
|
|
15
|
+
readonly doc: "application/msword";
|
|
16
|
+
readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
|
17
|
+
readonly xls: "application/vnd.ms-excel";
|
|
18
|
+
readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
19
|
+
readonly ppt: "application/vnd.ms-powerpoint";
|
|
20
|
+
readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
|
|
21
|
+
readonly exe: "application/vnd.microsoft.portable-executable";
|
|
22
|
+
};
|
|
23
|
+
declare const IMAGE_ACCEPT_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/svg+xml" | "image/webp")[];
|
|
24
|
+
declare const PDF_ACCEPT_TYPE: "application/pdf"[];
|
|
25
|
+
declare const MS_WORD_ACCEPT_TYPE: ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document")[];
|
|
26
|
+
declare const MS_EXCEL_ACCEPT_TYPE: ("application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")[];
|
|
27
|
+
declare const MS_POWER_POINT_ACCEPT_TYPE: ("application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation")[];
|
|
28
|
+
declare const EXE_ACCEPT_TYPE: "application/vnd.microsoft.portable-executable"[];
|
|
29
|
+
|
|
30
|
+
export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWER_POINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/accept-types.ts
|
|
22
|
+
var accept_types_exports = {};
|
|
23
|
+
__export(accept_types_exports, {
|
|
24
|
+
ACCEPT_TYPES: () => ACCEPT_TYPES,
|
|
25
|
+
EXE_ACCEPT_TYPE: () => EXE_ACCEPT_TYPE,
|
|
26
|
+
IMAGE_ACCEPT_TYPE: () => IMAGE_ACCEPT_TYPE,
|
|
27
|
+
MS_EXCEL_ACCEPT_TYPE: () => MS_EXCEL_ACCEPT_TYPE,
|
|
28
|
+
MS_POWER_POINT_ACCEPT_TYPE: () => MS_POWER_POINT_ACCEPT_TYPE,
|
|
29
|
+
MS_WORD_ACCEPT_TYPE: () => MS_WORD_ACCEPT_TYPE,
|
|
30
|
+
PDF_ACCEPT_TYPE: () => PDF_ACCEPT_TYPE
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(accept_types_exports);
|
|
33
|
+
var ACCEPT_TYPES = {
|
|
34
|
+
txt: "text/plain",
|
|
35
|
+
html: "text/html",
|
|
36
|
+
csv: "text/csv",
|
|
37
|
+
png: "image/png",
|
|
38
|
+
gif: "image/gif",
|
|
39
|
+
jpeg: "image/jpeg",
|
|
40
|
+
svg: "image/svg+xml",
|
|
41
|
+
webp: "image/webp",
|
|
42
|
+
mp3: "audio/mpeg",
|
|
43
|
+
mpeg: "video/mpeg",
|
|
44
|
+
mp4: "video/mp4",
|
|
45
|
+
zip: "application/zip",
|
|
46
|
+
pdf: "application/pdf",
|
|
47
|
+
doc: "application/msword",
|
|
48
|
+
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
49
|
+
xls: "application/vnd.ms-excel",
|
|
50
|
+
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
51
|
+
ppt: "application/vnd.ms-powerpoint",
|
|
52
|
+
pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
|
53
|
+
exe: "application/vnd.microsoft.portable-executable"
|
|
54
|
+
};
|
|
55
|
+
var IMAGE_ACCEPT_TYPE = [
|
|
56
|
+
ACCEPT_TYPES.png,
|
|
57
|
+
ACCEPT_TYPES.gif,
|
|
58
|
+
ACCEPT_TYPES.jpeg,
|
|
59
|
+
ACCEPT_TYPES.svg,
|
|
60
|
+
ACCEPT_TYPES.webp
|
|
61
|
+
];
|
|
62
|
+
var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
|
|
63
|
+
var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
|
|
64
|
+
var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
|
|
65
|
+
var MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
|
|
66
|
+
var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
|
|
67
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
68
|
+
0 && (module.exports = {
|
|
69
|
+
ACCEPT_TYPES,
|
|
70
|
+
EXE_ACCEPT_TYPE,
|
|
71
|
+
IMAGE_ACCEPT_TYPE,
|
|
72
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
73
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
74
|
+
MS_WORD_ACCEPT_TYPE,
|
|
75
|
+
PDF_ACCEPT_TYPE
|
|
76
|
+
});
|
|
77
|
+
//# sourceMappingURL=accept-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/accept-types.ts"],"sourcesContent":["export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,eAAe;AAAA,EAC1B,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;AAEO,IAAM,oBAAoB;AAAA,EAC/B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AACf;AACO,IAAM,kBAAkB,CAAC,aAAa,GAAG;AACzC,IAAM,sBAAsB,CAAC,aAAa,KAAK,aAAa,IAAI;AAChE,IAAM,uBAAuB,CAAC,aAAa,KAAK,aAAa,IAAI;AACjE,IAAM,6BAA6B,CAAC,aAAa,KAAK,aAAa,IAAI;AACvE,IAAM,kBAAkB,CAAC,aAAa,GAAG;","names":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import {
|
|
3
|
+
ACCEPT_TYPES,
|
|
4
|
+
EXE_ACCEPT_TYPE,
|
|
5
|
+
IMAGE_ACCEPT_TYPE,
|
|
6
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
7
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
8
|
+
MS_WORD_ACCEPT_TYPE,
|
|
9
|
+
PDF_ACCEPT_TYPE
|
|
10
|
+
} from "./chunk-CIOUYT32.mjs";
|
|
11
|
+
export {
|
|
12
|
+
ACCEPT_TYPES,
|
|
13
|
+
EXE_ACCEPT_TYPE,
|
|
14
|
+
IMAGE_ACCEPT_TYPE,
|
|
15
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
16
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
17
|
+
MS_WORD_ACCEPT_TYPE,
|
|
18
|
+
PDF_ACCEPT_TYPE
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=accept-types.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
// src/accept-types.ts
|
|
4
|
+
var ACCEPT_TYPES = {
|
|
5
|
+
txt: "text/plain",
|
|
6
|
+
html: "text/html",
|
|
7
|
+
csv: "text/csv",
|
|
8
|
+
png: "image/png",
|
|
9
|
+
gif: "image/gif",
|
|
10
|
+
jpeg: "image/jpeg",
|
|
11
|
+
svg: "image/svg+xml",
|
|
12
|
+
webp: "image/webp",
|
|
13
|
+
mp3: "audio/mpeg",
|
|
14
|
+
mpeg: "video/mpeg",
|
|
15
|
+
mp4: "video/mp4",
|
|
16
|
+
zip: "application/zip",
|
|
17
|
+
pdf: "application/pdf",
|
|
18
|
+
doc: "application/msword",
|
|
19
|
+
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
20
|
+
xls: "application/vnd.ms-excel",
|
|
21
|
+
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
22
|
+
ppt: "application/vnd.ms-powerpoint",
|
|
23
|
+
pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
|
24
|
+
exe: "application/vnd.microsoft.portable-executable"
|
|
25
|
+
};
|
|
26
|
+
var IMAGE_ACCEPT_TYPE = [
|
|
27
|
+
ACCEPT_TYPES.png,
|
|
28
|
+
ACCEPT_TYPES.gif,
|
|
29
|
+
ACCEPT_TYPES.jpeg,
|
|
30
|
+
ACCEPT_TYPES.svg,
|
|
31
|
+
ACCEPT_TYPES.webp
|
|
32
|
+
];
|
|
33
|
+
var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
|
|
34
|
+
var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
|
|
35
|
+
var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
|
|
36
|
+
var MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
|
|
37
|
+
var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
|
|
38
|
+
|
|
39
|
+
export {
|
|
40
|
+
ACCEPT_TYPES,
|
|
41
|
+
IMAGE_ACCEPT_TYPE,
|
|
42
|
+
PDF_ACCEPT_TYPE,
|
|
43
|
+
MS_WORD_ACCEPT_TYPE,
|
|
44
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
45
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
46
|
+
EXE_ACCEPT_TYPE
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=chunk-CIOUYT32.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/accept-types.ts"],"sourcesContent":["export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":";;;AAAO,IAAM,eAAe;AAAA,EAC1B,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;AAEO,IAAM,oBAAoB;AAAA,EAC/B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AACf;AACO,IAAM,kBAAkB,CAAC,aAAa,GAAG;AACzC,IAAM,sBAAsB,CAAC,aAAa,KAAK,aAAa,IAAI;AAChE,IAAM,uBAAuB,CAAC,aAAa,KAAK,aAAa,IAAI;AACjE,IAAM,6BAA6B,CAAC,aAAa,KAAK,aAAa,IAAI;AACvE,IAAM,kBAAkB,CAAC,aAAa,GAAG;","names":[]}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
// src/dropzone.tsx
|
|
4
|
+
import {
|
|
5
|
+
ui,
|
|
6
|
+
forwardRef,
|
|
7
|
+
omitThemeProps,
|
|
8
|
+
useMultiComponentStyle
|
|
9
|
+
} from "@yamada-ui/core";
|
|
10
|
+
import {
|
|
11
|
+
formControlProperties,
|
|
12
|
+
useFormControlProps
|
|
13
|
+
} from "@yamada-ui/form-control";
|
|
14
|
+
import { Loading } from "@yamada-ui/loading";
|
|
15
|
+
import { Fade } from "@yamada-ui/transitions";
|
|
16
|
+
import {
|
|
17
|
+
assignRef,
|
|
18
|
+
createContext,
|
|
19
|
+
cx,
|
|
20
|
+
dataAttr,
|
|
21
|
+
isArray,
|
|
22
|
+
splitObject
|
|
23
|
+
} from "@yamada-ui/utils";
|
|
24
|
+
import { Fragment } from "react";
|
|
25
|
+
import { useDropzone } from "react-dropzone-esm";
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
var [DropzoneProvider, useDropzoneContext] = createContext({
|
|
28
|
+
name: "DropzoneContext",
|
|
29
|
+
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
30
|
+
});
|
|
31
|
+
var Dropzone = forwardRef((props, ref) => {
|
|
32
|
+
const [styles, mergedProps] = useMultiComponentStyle("Dropzone", props);
|
|
33
|
+
const {
|
|
34
|
+
id,
|
|
35
|
+
name,
|
|
36
|
+
className,
|
|
37
|
+
isLoading,
|
|
38
|
+
overlayProps,
|
|
39
|
+
loadingProps,
|
|
40
|
+
openRef,
|
|
41
|
+
accept,
|
|
42
|
+
onDrop,
|
|
43
|
+
onDropAccepted,
|
|
44
|
+
onDropRejected,
|
|
45
|
+
multiple,
|
|
46
|
+
maxSize,
|
|
47
|
+
maxFiles,
|
|
48
|
+
autoFocus,
|
|
49
|
+
noClick,
|
|
50
|
+
noDrag,
|
|
51
|
+
noDragEventsBubbling,
|
|
52
|
+
noKeyboard,
|
|
53
|
+
onDragEnter,
|
|
54
|
+
onDragLeave,
|
|
55
|
+
onDragOver,
|
|
56
|
+
onFileDialogCancel,
|
|
57
|
+
onFileDialogOpen,
|
|
58
|
+
preventDropOnDocument,
|
|
59
|
+
useFsAccessApi,
|
|
60
|
+
children,
|
|
61
|
+
...rest
|
|
62
|
+
} = useFormControlProps(omitThemeProps(mergedProps));
|
|
63
|
+
const disabled = isLoading || rest.disabled || rest.readOnly;
|
|
64
|
+
const [formControlProps, containerProps] = splitObject(
|
|
65
|
+
rest,
|
|
66
|
+
formControlProperties
|
|
67
|
+
);
|
|
68
|
+
const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = useDropzone({
|
|
69
|
+
disabled,
|
|
70
|
+
accept: isArray(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
|
|
71
|
+
onDrop,
|
|
72
|
+
onDropAccepted,
|
|
73
|
+
onDropRejected,
|
|
74
|
+
multiple,
|
|
75
|
+
maxSize,
|
|
76
|
+
maxFiles,
|
|
77
|
+
autoFocus,
|
|
78
|
+
noClick,
|
|
79
|
+
noDrag,
|
|
80
|
+
noDragEventsBubbling,
|
|
81
|
+
noKeyboard,
|
|
82
|
+
onDragEnter,
|
|
83
|
+
onDragLeave,
|
|
84
|
+
onDragOver,
|
|
85
|
+
onFileDialogCancel,
|
|
86
|
+
onFileDialogOpen,
|
|
87
|
+
preventDropOnDocument,
|
|
88
|
+
useFsAccessApi
|
|
89
|
+
});
|
|
90
|
+
assignRef(openRef, open);
|
|
91
|
+
const isDragIdle = !isDragAccept && !isDragReject;
|
|
92
|
+
const css = {
|
|
93
|
+
position: "relative",
|
|
94
|
+
display: "flex",
|
|
95
|
+
justifyContent: "center",
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
...styles.container
|
|
98
|
+
};
|
|
99
|
+
return /* @__PURE__ */ jsx(
|
|
100
|
+
DropzoneProvider,
|
|
101
|
+
{
|
|
102
|
+
value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles },
|
|
103
|
+
children: /* @__PURE__ */ jsxs(
|
|
104
|
+
ui.div,
|
|
105
|
+
{
|
|
106
|
+
className: cx("ui-dropzone", className),
|
|
107
|
+
__css: css,
|
|
108
|
+
...containerProps,
|
|
109
|
+
...getRootProps(),
|
|
110
|
+
"data-accept": dataAttr(isDragAccept),
|
|
111
|
+
"data-reject": dataAttr(isDragReject),
|
|
112
|
+
"data-idle": dataAttr(isDragIdle),
|
|
113
|
+
"data-loading": dataAttr(isLoading),
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(LoadingOverlay, { loadingProps, ...overlayProps }),
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
ui.input,
|
|
118
|
+
{
|
|
119
|
+
ref,
|
|
120
|
+
id,
|
|
121
|
+
name,
|
|
122
|
+
...formControlProps,
|
|
123
|
+
...getInputProps()
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
children
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
});
|
|
133
|
+
var LoadingOverlay = ({ loadingProps, ...rest }) => {
|
|
134
|
+
const { isLoading, styles } = useDropzoneContext();
|
|
135
|
+
const css = {
|
|
136
|
+
position: "absolute",
|
|
137
|
+
top: 0,
|
|
138
|
+
left: 0,
|
|
139
|
+
w: "100%",
|
|
140
|
+
h: "100%",
|
|
141
|
+
display: "flex",
|
|
142
|
+
justifyContent: "center",
|
|
143
|
+
alignItems: "center",
|
|
144
|
+
...styles.overlay
|
|
145
|
+
};
|
|
146
|
+
return /* @__PURE__ */ jsx(
|
|
147
|
+
Fade,
|
|
148
|
+
{
|
|
149
|
+
isOpen: isLoading,
|
|
150
|
+
unmountOnExit: true,
|
|
151
|
+
className: "ui-dropzone__overlay",
|
|
152
|
+
__css: css,
|
|
153
|
+
...rest,
|
|
154
|
+
children: /* @__PURE__ */ jsx(
|
|
155
|
+
Loading,
|
|
156
|
+
{
|
|
157
|
+
className: "ui-dropzone__overlay__loading",
|
|
158
|
+
size: "4xl",
|
|
159
|
+
...loadingProps
|
|
160
|
+
}
|
|
161
|
+
)
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
var DropzoneAccept = ({ children }) => {
|
|
166
|
+
const { isDragAccept } = useDropzoneContext();
|
|
167
|
+
return isDragAccept ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
|
|
168
|
+
};
|
|
169
|
+
var DropzoneReject = ({ children }) => {
|
|
170
|
+
const { isDragReject } = useDropzoneContext();
|
|
171
|
+
return isDragReject ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
|
|
172
|
+
};
|
|
173
|
+
var DropzoneIdle = ({ children }) => {
|
|
174
|
+
const { isDragIdle } = useDropzoneContext();
|
|
175
|
+
return isDragIdle ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
export {
|
|
179
|
+
Dropzone,
|
|
180
|
+
DropzoneAccept,
|
|
181
|
+
DropzoneReject,
|
|
182
|
+
DropzoneIdle
|
|
183
|
+
};
|
|
184
|
+
//# sourceMappingURL=chunk-NSRSYGWG.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
|
+
import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
|
|
3
|
+
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
|
+
import { LoadingProps } from '@yamada-ui/loading';
|
|
5
|
+
import { FadeProps } from '@yamada-ui/transitions';
|
|
6
|
+
import { FC, PropsWithChildren, ForwardedRef } from 'react';
|
|
7
|
+
import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
|
|
8
|
+
|
|
9
|
+
type DropzoneOptions = {
|
|
10
|
+
/**
|
|
11
|
+
* The border color when the input is focused.
|
|
12
|
+
*/
|
|
13
|
+
focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
|
|
14
|
+
/**
|
|
15
|
+
* The border color when the input is invalid.
|
|
16
|
+
*/
|
|
17
|
+
errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
|
|
18
|
+
/**
|
|
19
|
+
* If `true`, display the dropzone loading icon.
|
|
20
|
+
*
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
isLoading?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Props for dropzone overlay element.
|
|
26
|
+
*/
|
|
27
|
+
overlayProps?: FadeProps;
|
|
28
|
+
/**
|
|
29
|
+
* Props for dropzone loading icon element.
|
|
30
|
+
*/
|
|
31
|
+
loadingProps?: LoadingProps;
|
|
32
|
+
/**
|
|
33
|
+
* File types to accept.
|
|
34
|
+
*/
|
|
35
|
+
accept?: Accept | string[];
|
|
36
|
+
/**
|
|
37
|
+
* Ref to a open function.
|
|
38
|
+
*/
|
|
39
|
+
openRef?: ForwardedRef<() => void | undefined>;
|
|
40
|
+
};
|
|
41
|
+
type DropzoneProps = Omit<HTMLUIProps<"div">, "onDrop"> & ThemeProps<"Dropzone"> & DropzoneOptions & FormControlOptions & Omit<DropzoneOptions$1, "accept">;
|
|
42
|
+
/**
|
|
43
|
+
* `Dropzone` is a component used for uploading files via drag and drop.
|
|
44
|
+
*
|
|
45
|
+
* @see Docs https://yamada-ui.com/components/forms/dropzone
|
|
46
|
+
*/
|
|
47
|
+
declare const Dropzone: _yamada_ui_core.Component<"input", DropzoneProps>;
|
|
48
|
+
declare const DropzoneAccept: FC<PropsWithChildren>;
|
|
49
|
+
declare const DropzoneReject: FC<PropsWithChildren>;
|
|
50
|
+
declare const DropzoneIdle: FC<PropsWithChildren>;
|
|
51
|
+
|
|
52
|
+
export { Dropzone, DropzoneAccept, DropzoneIdle, type DropzoneProps, DropzoneReject };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
|
+
import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
|
|
3
|
+
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
|
+
import { LoadingProps } from '@yamada-ui/loading';
|
|
5
|
+
import { FadeProps } from '@yamada-ui/transitions';
|
|
6
|
+
import { FC, PropsWithChildren, ForwardedRef } from 'react';
|
|
7
|
+
import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
|
|
8
|
+
|
|
9
|
+
type DropzoneOptions = {
|
|
10
|
+
/**
|
|
11
|
+
* The border color when the input is focused.
|
|
12
|
+
*/
|
|
13
|
+
focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
|
|
14
|
+
/**
|
|
15
|
+
* The border color when the input is invalid.
|
|
16
|
+
*/
|
|
17
|
+
errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
|
|
18
|
+
/**
|
|
19
|
+
* If `true`, display the dropzone loading icon.
|
|
20
|
+
*
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
isLoading?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Props for dropzone overlay element.
|
|
26
|
+
*/
|
|
27
|
+
overlayProps?: FadeProps;
|
|
28
|
+
/**
|
|
29
|
+
* Props for dropzone loading icon element.
|
|
30
|
+
*/
|
|
31
|
+
loadingProps?: LoadingProps;
|
|
32
|
+
/**
|
|
33
|
+
* File types to accept.
|
|
34
|
+
*/
|
|
35
|
+
accept?: Accept | string[];
|
|
36
|
+
/**
|
|
37
|
+
* Ref to a open function.
|
|
38
|
+
*/
|
|
39
|
+
openRef?: ForwardedRef<() => void | undefined>;
|
|
40
|
+
};
|
|
41
|
+
type DropzoneProps = Omit<HTMLUIProps<"div">, "onDrop"> & ThemeProps<"Dropzone"> & DropzoneOptions & FormControlOptions & Omit<DropzoneOptions$1, "accept">;
|
|
42
|
+
/**
|
|
43
|
+
* `Dropzone` is a component used for uploading files via drag and drop.
|
|
44
|
+
*
|
|
45
|
+
* @see Docs https://yamada-ui.com/components/forms/dropzone
|
|
46
|
+
*/
|
|
47
|
+
declare const Dropzone: _yamada_ui_core.Component<"input", DropzoneProps>;
|
|
48
|
+
declare const DropzoneAccept: FC<PropsWithChildren>;
|
|
49
|
+
declare const DropzoneReject: FC<PropsWithChildren>;
|
|
50
|
+
declare const DropzoneIdle: FC<PropsWithChildren>;
|
|
51
|
+
|
|
52
|
+
export { Dropzone, DropzoneAccept, DropzoneIdle, type DropzoneProps, DropzoneReject };
|
package/dist/dropzone.js
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/dropzone.tsx
|
|
22
|
+
var dropzone_exports = {};
|
|
23
|
+
__export(dropzone_exports, {
|
|
24
|
+
Dropzone: () => Dropzone,
|
|
25
|
+
DropzoneAccept: () => DropzoneAccept,
|
|
26
|
+
DropzoneIdle: () => DropzoneIdle,
|
|
27
|
+
DropzoneReject: () => DropzoneReject
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(dropzone_exports);
|
|
30
|
+
var import_core = require("@yamada-ui/core");
|
|
31
|
+
var import_form_control = require("@yamada-ui/form-control");
|
|
32
|
+
var import_loading = require("@yamada-ui/loading");
|
|
33
|
+
var import_transitions = require("@yamada-ui/transitions");
|
|
34
|
+
var import_utils = require("@yamada-ui/utils");
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
var import_react_dropzone_esm = require("react-dropzone-esm");
|
|
37
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
+
var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
|
|
39
|
+
name: "DropzoneContext",
|
|
40
|
+
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
41
|
+
});
|
|
42
|
+
var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
43
|
+
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Dropzone", props);
|
|
44
|
+
const {
|
|
45
|
+
id,
|
|
46
|
+
name,
|
|
47
|
+
className,
|
|
48
|
+
isLoading,
|
|
49
|
+
overlayProps,
|
|
50
|
+
loadingProps,
|
|
51
|
+
openRef,
|
|
52
|
+
accept,
|
|
53
|
+
onDrop,
|
|
54
|
+
onDropAccepted,
|
|
55
|
+
onDropRejected,
|
|
56
|
+
multiple,
|
|
57
|
+
maxSize,
|
|
58
|
+
maxFiles,
|
|
59
|
+
autoFocus,
|
|
60
|
+
noClick,
|
|
61
|
+
noDrag,
|
|
62
|
+
noDragEventsBubbling,
|
|
63
|
+
noKeyboard,
|
|
64
|
+
onDragEnter,
|
|
65
|
+
onDragLeave,
|
|
66
|
+
onDragOver,
|
|
67
|
+
onFileDialogCancel,
|
|
68
|
+
onFileDialogOpen,
|
|
69
|
+
preventDropOnDocument,
|
|
70
|
+
useFsAccessApi,
|
|
71
|
+
children,
|
|
72
|
+
...rest
|
|
73
|
+
} = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
|
|
74
|
+
const disabled = isLoading || rest.disabled || rest.readOnly;
|
|
75
|
+
const [formControlProps, containerProps] = (0, import_utils.splitObject)(
|
|
76
|
+
rest,
|
|
77
|
+
import_form_control.formControlProperties
|
|
78
|
+
);
|
|
79
|
+
const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = (0, import_react_dropzone_esm.useDropzone)({
|
|
80
|
+
disabled,
|
|
81
|
+
accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
|
|
82
|
+
onDrop,
|
|
83
|
+
onDropAccepted,
|
|
84
|
+
onDropRejected,
|
|
85
|
+
multiple,
|
|
86
|
+
maxSize,
|
|
87
|
+
maxFiles,
|
|
88
|
+
autoFocus,
|
|
89
|
+
noClick,
|
|
90
|
+
noDrag,
|
|
91
|
+
noDragEventsBubbling,
|
|
92
|
+
noKeyboard,
|
|
93
|
+
onDragEnter,
|
|
94
|
+
onDragLeave,
|
|
95
|
+
onDragOver,
|
|
96
|
+
onFileDialogCancel,
|
|
97
|
+
onFileDialogOpen,
|
|
98
|
+
preventDropOnDocument,
|
|
99
|
+
useFsAccessApi
|
|
100
|
+
});
|
|
101
|
+
(0, import_utils.assignRef)(openRef, open);
|
|
102
|
+
const isDragIdle = !isDragAccept && !isDragReject;
|
|
103
|
+
const css = {
|
|
104
|
+
position: "relative",
|
|
105
|
+
display: "flex",
|
|
106
|
+
justifyContent: "center",
|
|
107
|
+
alignItems: "center",
|
|
108
|
+
...styles.container
|
|
109
|
+
};
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
|
+
DropzoneProvider,
|
|
112
|
+
{
|
|
113
|
+
value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles },
|
|
114
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
115
|
+
import_core.ui.div,
|
|
116
|
+
{
|
|
117
|
+
className: (0, import_utils.cx)("ui-dropzone", className),
|
|
118
|
+
__css: css,
|
|
119
|
+
...containerProps,
|
|
120
|
+
...getRootProps(),
|
|
121
|
+
"data-accept": (0, import_utils.dataAttr)(isDragAccept),
|
|
122
|
+
"data-reject": (0, import_utils.dataAttr)(isDragReject),
|
|
123
|
+
"data-idle": (0, import_utils.dataAttr)(isDragIdle),
|
|
124
|
+
"data-loading": (0, import_utils.dataAttr)(isLoading),
|
|
125
|
+
children: [
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingOverlay, { loadingProps, ...overlayProps }),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
import_core.ui.input,
|
|
129
|
+
{
|
|
130
|
+
ref,
|
|
131
|
+
id,
|
|
132
|
+
name,
|
|
133
|
+
...formControlProps,
|
|
134
|
+
...getInputProps()
|
|
135
|
+
}
|
|
136
|
+
),
|
|
137
|
+
children
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
)
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
});
|
|
144
|
+
var LoadingOverlay = ({ loadingProps, ...rest }) => {
|
|
145
|
+
const { isLoading, styles } = useDropzoneContext();
|
|
146
|
+
const css = {
|
|
147
|
+
position: "absolute",
|
|
148
|
+
top: 0,
|
|
149
|
+
left: 0,
|
|
150
|
+
w: "100%",
|
|
151
|
+
h: "100%",
|
|
152
|
+
display: "flex",
|
|
153
|
+
justifyContent: "center",
|
|
154
|
+
alignItems: "center",
|
|
155
|
+
...styles.overlay
|
|
156
|
+
};
|
|
157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
import_transitions.Fade,
|
|
159
|
+
{
|
|
160
|
+
isOpen: isLoading,
|
|
161
|
+
unmountOnExit: true,
|
|
162
|
+
className: "ui-dropzone__overlay",
|
|
163
|
+
__css: css,
|
|
164
|
+
...rest,
|
|
165
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
166
|
+
import_loading.Loading,
|
|
167
|
+
{
|
|
168
|
+
className: "ui-dropzone__overlay__loading",
|
|
169
|
+
size: "4xl",
|
|
170
|
+
...loadingProps
|
|
171
|
+
}
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
);
|
|
175
|
+
};
|
|
176
|
+
var DropzoneAccept = ({ children }) => {
|
|
177
|
+
const { isDragAccept } = useDropzoneContext();
|
|
178
|
+
return isDragAccept ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
179
|
+
};
|
|
180
|
+
var DropzoneReject = ({ children }) => {
|
|
181
|
+
const { isDragReject } = useDropzoneContext();
|
|
182
|
+
return isDragReject ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
183
|
+
};
|
|
184
|
+
var DropzoneIdle = ({ children }) => {
|
|
185
|
+
const { isDragIdle } = useDropzoneContext();
|
|
186
|
+
return isDragIdle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
187
|
+
};
|
|
188
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
189
|
+
0 && (module.exports = {
|
|
190
|
+
Dropzone,
|
|
191
|
+
DropzoneAccept,
|
|
192
|
+
DropzoneIdle,
|
|
193
|
+
DropzoneReject
|
|
194
|
+
});
|
|
195
|
+
//# sourceMappingURL=dropzone.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Dropzone, DropzoneAccept, DropzoneIdle, DropzoneProps, DropzoneReject } from './dropzone.mjs';
|
|
2
|
+
export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWER_POINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE } from './accept-types.mjs';
|
|
3
|
+
export { DropEvent, ErrorCode, FileError, FileRejection } from 'react-dropzone-esm';
|
|
4
|
+
import '@yamada-ui/core';
|
|
5
|
+
import '@yamada-ui/form-control';
|
|
6
|
+
import '@yamada-ui/loading';
|
|
7
|
+
import '@yamada-ui/transitions';
|
|
8
|
+
import 'react';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Dropzone, DropzoneAccept, DropzoneIdle, DropzoneProps, DropzoneReject } from './dropzone.js';
|
|
2
|
+
export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWER_POINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE } from './accept-types.js';
|
|
3
|
+
export { DropEvent, ErrorCode, FileError, FileRejection } from 'react-dropzone-esm';
|
|
4
|
+
import '@yamada-ui/core';
|
|
5
|
+
import '@yamada-ui/form-control';
|
|
6
|
+
import '@yamada-ui/loading';
|
|
7
|
+
import '@yamada-ui/transitions';
|
|
8
|
+
import 'react';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/index.ts
|
|
22
|
+
var src_exports = {};
|
|
23
|
+
__export(src_exports, {
|
|
24
|
+
ACCEPT_TYPES: () => ACCEPT_TYPES,
|
|
25
|
+
Dropzone: () => Dropzone,
|
|
26
|
+
DropzoneAccept: () => DropzoneAccept,
|
|
27
|
+
DropzoneIdle: () => DropzoneIdle,
|
|
28
|
+
DropzoneReject: () => DropzoneReject,
|
|
29
|
+
EXE_ACCEPT_TYPE: () => EXE_ACCEPT_TYPE,
|
|
30
|
+
IMAGE_ACCEPT_TYPE: () => IMAGE_ACCEPT_TYPE,
|
|
31
|
+
MS_EXCEL_ACCEPT_TYPE: () => MS_EXCEL_ACCEPT_TYPE,
|
|
32
|
+
MS_POWER_POINT_ACCEPT_TYPE: () => MS_POWER_POINT_ACCEPT_TYPE,
|
|
33
|
+
MS_WORD_ACCEPT_TYPE: () => MS_WORD_ACCEPT_TYPE,
|
|
34
|
+
PDF_ACCEPT_TYPE: () => PDF_ACCEPT_TYPE
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(src_exports);
|
|
37
|
+
|
|
38
|
+
// src/dropzone.tsx
|
|
39
|
+
var import_core = require("@yamada-ui/core");
|
|
40
|
+
var import_form_control = require("@yamada-ui/form-control");
|
|
41
|
+
var import_loading = require("@yamada-ui/loading");
|
|
42
|
+
var import_transitions = require("@yamada-ui/transitions");
|
|
43
|
+
var import_utils = require("@yamada-ui/utils");
|
|
44
|
+
var import_react = require("react");
|
|
45
|
+
var import_react_dropzone_esm = require("react-dropzone-esm");
|
|
46
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
|
+
var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
|
|
48
|
+
name: "DropzoneContext",
|
|
49
|
+
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
50
|
+
});
|
|
51
|
+
var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
52
|
+
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Dropzone", props);
|
|
53
|
+
const {
|
|
54
|
+
id,
|
|
55
|
+
name,
|
|
56
|
+
className,
|
|
57
|
+
isLoading,
|
|
58
|
+
overlayProps,
|
|
59
|
+
loadingProps,
|
|
60
|
+
openRef,
|
|
61
|
+
accept,
|
|
62
|
+
onDrop,
|
|
63
|
+
onDropAccepted,
|
|
64
|
+
onDropRejected,
|
|
65
|
+
multiple,
|
|
66
|
+
maxSize,
|
|
67
|
+
maxFiles,
|
|
68
|
+
autoFocus,
|
|
69
|
+
noClick,
|
|
70
|
+
noDrag,
|
|
71
|
+
noDragEventsBubbling,
|
|
72
|
+
noKeyboard,
|
|
73
|
+
onDragEnter,
|
|
74
|
+
onDragLeave,
|
|
75
|
+
onDragOver,
|
|
76
|
+
onFileDialogCancel,
|
|
77
|
+
onFileDialogOpen,
|
|
78
|
+
preventDropOnDocument,
|
|
79
|
+
useFsAccessApi,
|
|
80
|
+
children,
|
|
81
|
+
...rest
|
|
82
|
+
} = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
|
|
83
|
+
const disabled = isLoading || rest.disabled || rest.readOnly;
|
|
84
|
+
const [formControlProps, containerProps] = (0, import_utils.splitObject)(
|
|
85
|
+
rest,
|
|
86
|
+
import_form_control.formControlProperties
|
|
87
|
+
);
|
|
88
|
+
const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = (0, import_react_dropzone_esm.useDropzone)({
|
|
89
|
+
disabled,
|
|
90
|
+
accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
|
|
91
|
+
onDrop,
|
|
92
|
+
onDropAccepted,
|
|
93
|
+
onDropRejected,
|
|
94
|
+
multiple,
|
|
95
|
+
maxSize,
|
|
96
|
+
maxFiles,
|
|
97
|
+
autoFocus,
|
|
98
|
+
noClick,
|
|
99
|
+
noDrag,
|
|
100
|
+
noDragEventsBubbling,
|
|
101
|
+
noKeyboard,
|
|
102
|
+
onDragEnter,
|
|
103
|
+
onDragLeave,
|
|
104
|
+
onDragOver,
|
|
105
|
+
onFileDialogCancel,
|
|
106
|
+
onFileDialogOpen,
|
|
107
|
+
preventDropOnDocument,
|
|
108
|
+
useFsAccessApi
|
|
109
|
+
});
|
|
110
|
+
(0, import_utils.assignRef)(openRef, open);
|
|
111
|
+
const isDragIdle = !isDragAccept && !isDragReject;
|
|
112
|
+
const css = {
|
|
113
|
+
position: "relative",
|
|
114
|
+
display: "flex",
|
|
115
|
+
justifyContent: "center",
|
|
116
|
+
alignItems: "center",
|
|
117
|
+
...styles.container
|
|
118
|
+
};
|
|
119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
|
+
DropzoneProvider,
|
|
121
|
+
{
|
|
122
|
+
value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles },
|
|
123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
124
|
+
import_core.ui.div,
|
|
125
|
+
{
|
|
126
|
+
className: (0, import_utils.cx)("ui-dropzone", className),
|
|
127
|
+
__css: css,
|
|
128
|
+
...containerProps,
|
|
129
|
+
...getRootProps(),
|
|
130
|
+
"data-accept": (0, import_utils.dataAttr)(isDragAccept),
|
|
131
|
+
"data-reject": (0, import_utils.dataAttr)(isDragReject),
|
|
132
|
+
"data-idle": (0, import_utils.dataAttr)(isDragIdle),
|
|
133
|
+
"data-loading": (0, import_utils.dataAttr)(isLoading),
|
|
134
|
+
children: [
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingOverlay, { loadingProps, ...overlayProps }),
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
137
|
+
import_core.ui.input,
|
|
138
|
+
{
|
|
139
|
+
ref,
|
|
140
|
+
id,
|
|
141
|
+
name,
|
|
142
|
+
...formControlProps,
|
|
143
|
+
...getInputProps()
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
children
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
});
|
|
153
|
+
var LoadingOverlay = ({ loadingProps, ...rest }) => {
|
|
154
|
+
const { isLoading, styles } = useDropzoneContext();
|
|
155
|
+
const css = {
|
|
156
|
+
position: "absolute",
|
|
157
|
+
top: 0,
|
|
158
|
+
left: 0,
|
|
159
|
+
w: "100%",
|
|
160
|
+
h: "100%",
|
|
161
|
+
display: "flex",
|
|
162
|
+
justifyContent: "center",
|
|
163
|
+
alignItems: "center",
|
|
164
|
+
...styles.overlay
|
|
165
|
+
};
|
|
166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
167
|
+
import_transitions.Fade,
|
|
168
|
+
{
|
|
169
|
+
isOpen: isLoading,
|
|
170
|
+
unmountOnExit: true,
|
|
171
|
+
className: "ui-dropzone__overlay",
|
|
172
|
+
__css: css,
|
|
173
|
+
...rest,
|
|
174
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
|
+
import_loading.Loading,
|
|
176
|
+
{
|
|
177
|
+
className: "ui-dropzone__overlay__loading",
|
|
178
|
+
size: "4xl",
|
|
179
|
+
...loadingProps
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
);
|
|
184
|
+
};
|
|
185
|
+
var DropzoneAccept = ({ children }) => {
|
|
186
|
+
const { isDragAccept } = useDropzoneContext();
|
|
187
|
+
return isDragAccept ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
188
|
+
};
|
|
189
|
+
var DropzoneReject = ({ children }) => {
|
|
190
|
+
const { isDragReject } = useDropzoneContext();
|
|
191
|
+
return isDragReject ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
192
|
+
};
|
|
193
|
+
var DropzoneIdle = ({ children }) => {
|
|
194
|
+
const { isDragIdle } = useDropzoneContext();
|
|
195
|
+
return isDragIdle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
// src/accept-types.ts
|
|
199
|
+
var ACCEPT_TYPES = {
|
|
200
|
+
txt: "text/plain",
|
|
201
|
+
html: "text/html",
|
|
202
|
+
csv: "text/csv",
|
|
203
|
+
png: "image/png",
|
|
204
|
+
gif: "image/gif",
|
|
205
|
+
jpeg: "image/jpeg",
|
|
206
|
+
svg: "image/svg+xml",
|
|
207
|
+
webp: "image/webp",
|
|
208
|
+
mp3: "audio/mpeg",
|
|
209
|
+
mpeg: "video/mpeg",
|
|
210
|
+
mp4: "video/mp4",
|
|
211
|
+
zip: "application/zip",
|
|
212
|
+
pdf: "application/pdf",
|
|
213
|
+
doc: "application/msword",
|
|
214
|
+
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
215
|
+
xls: "application/vnd.ms-excel",
|
|
216
|
+
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
217
|
+
ppt: "application/vnd.ms-powerpoint",
|
|
218
|
+
pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
|
219
|
+
exe: "application/vnd.microsoft.portable-executable"
|
|
220
|
+
};
|
|
221
|
+
var IMAGE_ACCEPT_TYPE = [
|
|
222
|
+
ACCEPT_TYPES.png,
|
|
223
|
+
ACCEPT_TYPES.gif,
|
|
224
|
+
ACCEPT_TYPES.jpeg,
|
|
225
|
+
ACCEPT_TYPES.svg,
|
|
226
|
+
ACCEPT_TYPES.webp
|
|
227
|
+
];
|
|
228
|
+
var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
|
|
229
|
+
var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
|
|
230
|
+
var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
|
|
231
|
+
var MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
|
|
232
|
+
var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
|
|
233
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
234
|
+
0 && (module.exports = {
|
|
235
|
+
ACCEPT_TYPES,
|
|
236
|
+
Dropzone,
|
|
237
|
+
DropzoneAccept,
|
|
238
|
+
DropzoneIdle,
|
|
239
|
+
DropzoneReject,
|
|
240
|
+
EXE_ACCEPT_TYPE,
|
|
241
|
+
IMAGE_ACCEPT_TYPE,
|
|
242
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
243
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
244
|
+
MS_WORD_ACCEPT_TYPE,
|
|
245
|
+
PDF_ACCEPT_TYPE
|
|
246
|
+
});
|
|
247
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/dropzone.tsx","../src/accept-types.ts"],"sourcesContent":["export {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport * from \"./accept-types\"\nexport type {\n FileRejection,\n FileError,\n ErrorCode,\n DropEvent,\n} from \"react-dropzone-esm\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n","export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import {
|
|
3
|
+
ACCEPT_TYPES,
|
|
4
|
+
EXE_ACCEPT_TYPE,
|
|
5
|
+
IMAGE_ACCEPT_TYPE,
|
|
6
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
7
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
8
|
+
MS_WORD_ACCEPT_TYPE,
|
|
9
|
+
PDF_ACCEPT_TYPE
|
|
10
|
+
} from "./chunk-CIOUYT32.mjs";
|
|
11
|
+
import {
|
|
12
|
+
Dropzone,
|
|
13
|
+
DropzoneAccept,
|
|
14
|
+
DropzoneIdle,
|
|
15
|
+
DropzoneReject
|
|
16
|
+
} from "./chunk-NSRSYGWG.mjs";
|
|
17
|
+
export {
|
|
18
|
+
ACCEPT_TYPES,
|
|
19
|
+
Dropzone,
|
|
20
|
+
DropzoneAccept,
|
|
21
|
+
DropzoneIdle,
|
|
22
|
+
DropzoneReject,
|
|
23
|
+
EXE_ACCEPT_TYPE,
|
|
24
|
+
IMAGE_ACCEPT_TYPE,
|
|
25
|
+
MS_EXCEL_ACCEPT_TYPE,
|
|
26
|
+
MS_POWER_POINT_ACCEPT_TYPE,
|
|
27
|
+
MS_WORD_ACCEPT_TYPE,
|
|
28
|
+
PDF_ACCEPT_TYPE
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/dropzone",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.29",
|
|
4
4
|
"description": "Yamada UI dropzone component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"react-dropzone-esm": "^15.0.1",
|
|
40
40
|
"@yamada-ui/core": "1.6.7",
|
|
41
41
|
"@yamada-ui/form-control": "1.0.28",
|
|
42
|
-
"@yamada-ui/loading": "1.1.2",
|
|
43
42
|
"@yamada-ui/transitions": "1.0.26",
|
|
44
|
-
"@yamada-ui/utils": "1.2.0"
|
|
43
|
+
"@yamada-ui/utils": "1.2.0",
|
|
44
|
+
"@yamada-ui/loading": "1.1.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"clean-package": "2.2.0",
|