@oneplatformdev/ui 0.1.99-beta.262 → 0.1.99-beta.265
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/Accordion/Accordion.js.map +1 -1
- package/Alert/Alert.js.map +1 -1
- package/Alert/alertVariants.js.map +1 -1
- package/AlertDialog/AlertDialog.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +2 -4
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +18 -20
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/AreaChart/AreaChart.js.map +1 -1
- package/Aside/Aside.js.map +1 -1
- package/Aside/AsideSidebar.js.map +1 -1
- package/AspectRatio/AspectRatio.js.map +1 -1
- package/Avatar/Avatar.js.map +1 -1
- package/Badge/Badge.js.map +1 -1
- package/Badge/badgeVariants.js.map +1 -1
- package/Breadcrumb/Breadcrumb.js.map +1 -1
- package/Button/Button.js +10 -11
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +1 -1
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.js.map +1 -1
- package/Button/ButtonCounterBadge.js.map +1 -1
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.js +19 -22
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +1 -1
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +3401 -3385
- package/Calendar/Calendar.js +4 -6
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.js.map +1 -1
- package/Carousel/Carousel.js +6 -7
- package/Carousel/Carousel.js.map +1 -1
- package/Chart/Chart.js.map +1 -1
- package/Checkbox/Checkbox.js +0 -1
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/Combobox/Combobox.js +10 -10
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.js +18 -19
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.js +26 -27
- package/Combobox/ComboboxRenderContent.js.map +1 -1
- package/Combobox/ComboboxRenderOptions.js +5 -5
- package/Combobox/ComboboxRenderOptions.js.map +1 -1
- package/Combobox/ComboboxRenderTrigger.js +28 -30
- package/Combobox/ComboboxRenderTrigger.js.map +1 -1
- package/Command/Command.js +21 -22
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.js.map +1 -1
- package/ContextPopover/ContextPopover.js.map +1 -1
- package/ContextPopover/useContextPopoverHandler.js.map +1 -1
- package/DataTable/DataTable.js +24 -26
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +6 -7
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.js.map +1 -1
- package/DatePicker/DatePicker.js +12 -13
- package/DatePicker/DatePicker.js.map +1 -1
- package/Dialog/Dialog.js +20 -21
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +14 -15
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Dialog/useDialogClosePosition.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +321 -159
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js +257 -63
- package/Dropzone/Dropzone.stories.js.map +1 -1
- package/Dropzone/Dropzone.types.d.ts +17 -1
- package/Dropzone/Dropzone.types.d.ts.map +1 -1
- package/Dropzone/Dropzone.types.js +18 -7
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Dropzone/DropzoneFilePreview.d.ts.map +1 -1
- package/Dropzone/DropzoneFilePreview.js +45 -24
- package/Dropzone/DropzoneFilePreview.js.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.d.ts +5 -2
- package/Dropzone/DropzoneSinglePickPreview.d.ts.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.js +120 -22
- package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
- package/Dropzone/DropzoneUtils.js.map +1 -1
- package/Dropzone/index.js +7 -5
- package/Form/Form.js +14 -15
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.js +6 -7
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/Form_old.js +4 -5
- package/Form/Form_old.js.map +1 -1
- package/FormCheckbox/FormCheckbox.js +4 -4
- package/FormCheckbox/FormCheckbox.js.map +1 -1
- package/FormCombobox/FormCombobox.js +4 -4
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormDatePicker/FormDatePicker.js +4 -4
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.js +3 -3
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.js +6 -6
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +6 -9
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.js +4 -4
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/Header/Header.js.map +1 -1
- package/HoverCard/HoverCard.js.map +1 -1
- package/InfoBlock/InfoBlock.js.map +1 -1
- package/InfoBlock/InfoBlock.stories.js.map +1 -1
- package/InfoBlock/infoBlockVariants.js.map +1 -1
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +95 -58
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +112 -41
- package/Input/Input.stories.js.map +1 -1
- package/Input/Input.types.d.ts +4 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/Input/inputVariants.js.map +1 -1
- package/InputOTP/InputOTP.d.ts.map +1 -1
- package/InputOTP/InputOTP.js.map +1 -1
- package/LICENSE +21 -21
- package/Label/Label.js.map +1 -1
- package/Label/labelVariants.js.map +1 -1
- package/LazyLoader/LazyLoader.js +4 -5
- package/LazyLoader/LazyLoader.js.map +1 -1
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/RenderLoadingMask.js.map +1 -1
- package/LoadingProgress/LoadingProgress.js.map +1 -1
- package/LoadingProgress/loadingProgressVariants.js.map +1 -1
- package/Menubar/Menubar.js.map +1 -1
- package/NavigationMenu/NavigationMenu.js.map +1 -1
- package/NavigationMenu/navigationMenuVariants.js.map +1 -1
- package/Pagination/Pagination.js +0 -1
- package/Pagination/Pagination.js.map +1 -1
- package/Popover/Popover.js.map +1 -1
- package/Progress/Progress.js.map +1 -1
- package/README.md +7 -7
- package/Radio/Radio.js.map +1 -1
- package/RadioGroup/RadioGroup.js.map +1 -1
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js.map +1 -1
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.js +9 -9
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js.map +1 -1
- package/Select/Select.js +6 -7
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js.map +1 -1
- package/Select/SelectRoot.js.map +1 -1
- package/Separator/Separator.js.map +1 -1
- package/Sheet/Sheet.js.map +1 -1
- package/Sidebar/Sidebar.js +20 -21
- package/Sidebar/Sidebar.js.map +1 -1
- package/Skeleton/Skeleton.js.map +1 -1
- package/Slider/Slider.js.map +1 -1
- package/Sonner/Sonner.js.map +1 -1
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js.map +1 -1
- package/Table/Table.js.map +1 -1
- package/TablePagination/TablePagination.js +21 -26
- package/TablePagination/TablePagination.js.map +1 -1
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/TabsRoot.js.map +1 -1
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/Textarea/useAutosizeTextArea.js.map +1 -1
- package/Theme/ThemeModeToggle.js +3 -4
- package/Theme/ThemeModeToggle.js.map +1 -1
- package/Theme/ThemeProvider.js.map +1 -1
- package/Toast/Toast.js.map +1 -1
- package/Toast/toast.constants.js.map +1 -1
- package/Toast/toastVariants.js.map +1 -1
- package/Toast/useToast.js.map +1 -1
- package/Toaster/Toaster.js.map +1 -1
- package/Toggle/Toggle.js.map +1 -1
- package/ToggleGroup/ToggleGroup.js.map +1 -1
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/TooltipRoot.js.map +1 -1
- package/Tooltip/tooltipVariants.js.map +1 -1
- package/index.js +298 -296
- package/package.json +7 -5
- package/packages/ui/.storybook/Wrappers.js.map +1 -0
- package/styles.css +1 -0
- package/vite-env.d.ts +7 -7
- package/.storybook/Wrappers.js.map +0 -1
- /package/{.storybook → packages/ui/.storybook}/Wrappers.js +0 -0
|
@@ -1,100 +1,294 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Dropzone as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* @__PURE__ */
|
|
1
|
+
import { jsx as o, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { useState as s, useRef as S, useEffect as M } from "react";
|
|
3
|
+
import { Dropzone as x } from "./Dropzone.js";
|
|
4
|
+
import { DEFAULT_IMAGES_TYPES as c, DEFAULT_DOCUMENT_TYPES as y, DEFAULT_VIDEO_TYPES as u } from "./Dropzone.types.js";
|
|
5
|
+
function a({ initialValue: e = [], ...g }) {
|
|
6
|
+
const [l, p] = s(e);
|
|
7
|
+
return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
|
|
8
|
+
/* @__PURE__ */ o(
|
|
9
|
+
x,
|
|
10
|
+
{
|
|
11
|
+
...g,
|
|
12
|
+
value: l,
|
|
13
|
+
onChangeValue: (t) => p(t)
|
|
14
|
+
}
|
|
15
|
+
),
|
|
16
|
+
/* @__PURE__ */ v("div", { className: "text-xs text-muted-foreground", children: [
|
|
9
17
|
"value:",
|
|
10
|
-
/* @__PURE__ */
|
|
18
|
+
/* @__PURE__ */ o("pre", { className: "mt-1 text-[11px] bg-muted p-2 rounded", children: JSON.stringify(l, null, 2) })
|
|
11
19
|
] })
|
|
12
20
|
] });
|
|
13
21
|
}
|
|
14
|
-
const
|
|
22
|
+
const I = {
|
|
15
23
|
title: "Dropzone",
|
|
16
|
-
component:
|
|
24
|
+
component: x,
|
|
17
25
|
parameters: {
|
|
18
26
|
layout: "centered"
|
|
19
27
|
},
|
|
20
28
|
args: {
|
|
21
|
-
labelDropzonePrompt: "Завантажте або перетягніть",
|
|
22
29
|
labelSelectedFiles: "Selected files",
|
|
23
30
|
labelFileTooLarge: "File is too large",
|
|
24
|
-
labelDropzoneSubPrompt: "Підтримуються файли до 5МБ у форматі .jpg .jpeg .png .webp .heic ",
|
|
25
31
|
maxFiles: 1,
|
|
26
|
-
maxSizeMB:
|
|
27
|
-
acceptTypes: ["image/jpeg", "image/png", "image/webp"],
|
|
32
|
+
maxSizeMB: 100,
|
|
28
33
|
singlePick: !0,
|
|
29
|
-
className: "w-full
|
|
34
|
+
className: "w-full"
|
|
30
35
|
},
|
|
31
36
|
argTypes: {
|
|
32
37
|
onChangeValue: { control: !1 },
|
|
33
38
|
value: { control: !1 }
|
|
34
39
|
},
|
|
35
40
|
decorators: [
|
|
36
|
-
(e) => /* @__PURE__ */
|
|
41
|
+
(e) => /* @__PURE__ */ o("div", { className: "p-6 w-[680px]", children: /* @__PURE__ */ o(e, {}) })
|
|
37
42
|
]
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
43
|
+
}, N = {
|
|
44
|
+
args: {
|
|
45
|
+
acceptTypes: c,
|
|
46
|
+
labelDropzonePrompt: "Upload image",
|
|
47
|
+
labelDropzoneSubPrompt: "Formats: .jpg .jpeg .png .webp",
|
|
48
|
+
maxSizeMB: 5
|
|
49
|
+
},
|
|
50
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
51
|
+
}, k = {
|
|
52
|
+
args: {
|
|
53
|
+
acceptTypes: y,
|
|
54
|
+
labelDropzonePrompt: "Upload file",
|
|
55
|
+
labelDropzoneSubPrompt: "Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv",
|
|
56
|
+
maxSizeMB: 100,
|
|
57
|
+
maxFiles: 1,
|
|
58
|
+
singlePick: !0
|
|
59
|
+
},
|
|
60
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
61
|
+
}, V = {
|
|
51
62
|
args: {
|
|
52
|
-
|
|
53
|
-
|
|
63
|
+
acceptTypes: u,
|
|
64
|
+
labelDropzonePrompt: "Upload video",
|
|
65
|
+
labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm",
|
|
66
|
+
maxSizeMB: 100,
|
|
67
|
+
maxFiles: 1,
|
|
68
|
+
singlePick: !0
|
|
54
69
|
},
|
|
55
|
-
render: (e) => /* @__PURE__ */ a
|
|
56
|
-
},
|
|
70
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
71
|
+
}, L = {
|
|
57
72
|
args: {
|
|
58
|
-
|
|
73
|
+
acceptTypes: u,
|
|
74
|
+
labelDropzonePrompt: "Upload video",
|
|
75
|
+
labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm or YouTube URL as value",
|
|
76
|
+
maxSizeMB: 100,
|
|
77
|
+
maxFiles: 1,
|
|
78
|
+
singlePick: !0
|
|
59
79
|
},
|
|
60
|
-
render: (e) => /* @__PURE__ */
|
|
61
|
-
l,
|
|
80
|
+
render: (e) => /* @__PURE__ */ o(() => {
|
|
81
|
+
const [l, p] = s("https://www.youtube.com/watch?v=dQw4w9WgXcQ"), t = l.trim() ? [l.trim()] : [];
|
|
82
|
+
return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
|
|
83
|
+
/* @__PURE__ */ o(
|
|
84
|
+
"input",
|
|
85
|
+
{
|
|
86
|
+
type: "text",
|
|
87
|
+
value: l,
|
|
88
|
+
onChange: (d) => p(d.target.value),
|
|
89
|
+
placeholder: "Paste YouTube URL",
|
|
90
|
+
className: "w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm"
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
/* @__PURE__ */ o(
|
|
94
|
+
x,
|
|
95
|
+
{
|
|
96
|
+
...e,
|
|
97
|
+
value: t,
|
|
98
|
+
onChangeValue: (d) => {
|
|
99
|
+
const i = d[0];
|
|
100
|
+
typeof i == "string" && p(i);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
)
|
|
104
|
+
] });
|
|
105
|
+
}, {})
|
|
106
|
+
};
|
|
107
|
+
function w(e) {
|
|
108
|
+
const [g, l] = s([]), [p, t] = s(!1), [d, i] = s(0), [T, b] = s(0), [D, z] = s(0), r = S(null);
|
|
109
|
+
return M(() => () => {
|
|
110
|
+
r.current && clearInterval(r.current);
|
|
111
|
+
}, []), /* @__PURE__ */ o("div", { className: "w-full space-y-3", children: /* @__PURE__ */ o(
|
|
112
|
+
x,
|
|
62
113
|
{
|
|
63
114
|
...e,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
115
|
+
value: g,
|
|
116
|
+
isUploading: p,
|
|
117
|
+
uploadProgress: d,
|
|
118
|
+
uploadLoadedBytes: T,
|
|
119
|
+
uploadTotalBytes: D,
|
|
120
|
+
onCancelUpload: () => {
|
|
121
|
+
r.current && clearInterval(r.current), r.current = null, t(!1), i(0), b(0), z(0);
|
|
122
|
+
},
|
|
123
|
+
onChangeValue: (P) => {
|
|
124
|
+
if (l(P), !P.length) return;
|
|
125
|
+
r.current && clearInterval(r.current), r.current = null;
|
|
126
|
+
const f = P[0], n = f instanceof File ? f.size : 50 * 1024 * 1024;
|
|
127
|
+
let m = 0;
|
|
128
|
+
z(n), b(0), i(0), t(!0), r.current = setInterval(() => {
|
|
129
|
+
m = Math.min(n, m + n * 0.08);
|
|
130
|
+
const F = n ? Math.round(m / n * 100) : 0;
|
|
131
|
+
b(m), i(F), m >= n && (r.current && clearInterval(r.current), r.current = null, setTimeout(() => t(!1), 350));
|
|
132
|
+
}, 250);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
) });
|
|
136
|
+
}
|
|
137
|
+
const C = {
|
|
138
|
+
args: {
|
|
139
|
+
acceptTypes: u,
|
|
140
|
+
labelDropzonePrompt: "Upload video",
|
|
141
|
+
labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm",
|
|
142
|
+
labelUploadingTitle: "Завантаження відео...",
|
|
143
|
+
labelUploadingHint: "Будь ласка, не закривайте сторінку",
|
|
144
|
+
labelUploadingActionCancel: "Скасувати",
|
|
145
|
+
maxSizeMB: 100,
|
|
146
|
+
maxFiles: 1,
|
|
147
|
+
singlePick: !0
|
|
148
|
+
},
|
|
149
|
+
render: (e) => /* @__PURE__ */ o(w, { ...e })
|
|
150
|
+
}, O = {
|
|
151
|
+
args: {
|
|
152
|
+
acceptTypes: c,
|
|
153
|
+
labelDropzonePrompt: "Перетягніть фото або оберіть файли",
|
|
154
|
+
labelDropzoneSubPrompt: "JPG, PNG, WEBP, HEIC · до 5 МБ кожне",
|
|
155
|
+
labelOrClickToSelect: "Завантажити файл",
|
|
156
|
+
maxSizeMB: 5,
|
|
157
|
+
maxFiles: 20,
|
|
158
|
+
singlePick: !1,
|
|
159
|
+
persistentDropzone: !0,
|
|
160
|
+
previewVariant: "image-grid",
|
|
161
|
+
className: "w-[598px]",
|
|
162
|
+
classNames: {
|
|
163
|
+
previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
|
|
164
|
+
previewImage: "rounded-[8px] object-cover"
|
|
67
165
|
}
|
|
68
|
-
|
|
69
|
-
|
|
166
|
+
},
|
|
167
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
168
|
+
}, W = {
|
|
70
169
|
args: {
|
|
170
|
+
acceptTypes: y,
|
|
171
|
+
labelDropzonePrompt: "Upload file...",
|
|
172
|
+
labelDropzoneSubPrompt: "PDF only, max 1 MB",
|
|
173
|
+
labelFileTooLarge: "File is too large. Max size is 1 MB.",
|
|
71
174
|
maxSizeMB: 1,
|
|
72
|
-
|
|
175
|
+
maxFiles: 1,
|
|
176
|
+
singlePick: !0,
|
|
177
|
+
className: "w-[598px]"
|
|
73
178
|
},
|
|
74
|
-
render: (e) => /* @__PURE__ */ a
|
|
75
|
-
},
|
|
179
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
180
|
+
}, Y = {
|
|
76
181
|
args: {
|
|
77
|
-
|
|
78
|
-
|
|
182
|
+
acceptTypes: ["application/pdf"],
|
|
183
|
+
labelDropzonePrompt: "Upload file...",
|
|
184
|
+
labelDropzoneSubPrompt: "Only PDF is supported",
|
|
185
|
+
labelInvalidFileType: "Invalid file type. Please upload a PDF file.",
|
|
186
|
+
maxSizeMB: 5,
|
|
187
|
+
maxFiles: 1,
|
|
188
|
+
singlePick: !0,
|
|
189
|
+
className: "w-[598px]"
|
|
79
190
|
},
|
|
80
|
-
render: (e) => /* @__PURE__ */ a
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
191
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
192
|
+
}, j = {
|
|
193
|
+
args: {
|
|
194
|
+
acceptTypes: c,
|
|
195
|
+
labelDropzonePrompt: "Upload photo...",
|
|
196
|
+
labelDropzoneSubPrompt: "JPG/PNG/WEBP, max 1 MB",
|
|
197
|
+
labelFileTooLarge: "Photo is too large. Max size is 1 MB.",
|
|
198
|
+
maxSizeMB: 1,
|
|
199
|
+
maxFiles: 1,
|
|
200
|
+
singlePick: !0,
|
|
201
|
+
className: "w-[598px]"
|
|
202
|
+
},
|
|
203
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
204
|
+
}, G = {
|
|
205
|
+
args: {
|
|
206
|
+
acceptTypes: c,
|
|
207
|
+
labelDropzonePrompt: "Upload photo...",
|
|
208
|
+
labelDropzoneSubPrompt: "Only image files are supported",
|
|
209
|
+
labelInvalidFileType: "Invalid file type. Please upload an image file.",
|
|
210
|
+
maxSizeMB: 5,
|
|
211
|
+
maxFiles: 1,
|
|
212
|
+
singlePick: !0,
|
|
213
|
+
className: "w-[598px]"
|
|
214
|
+
},
|
|
215
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
216
|
+
}, A = {
|
|
217
|
+
args: {
|
|
218
|
+
acceptTypes: c,
|
|
219
|
+
labelDropzonePrompt: "Drag photos or choose files",
|
|
220
|
+
labelDropzoneSubPrompt: "JPG, PNG, WEBP · max 1 MB each",
|
|
221
|
+
labelFileTooLarge: "One or more photos are too large. Max size is 1 MB each.",
|
|
222
|
+
maxSizeMB: 1,
|
|
223
|
+
maxFiles: 20,
|
|
224
|
+
singlePick: !1,
|
|
225
|
+
persistentDropzone: !0,
|
|
226
|
+
previewVariant: "image-grid",
|
|
227
|
+
className: "w-[598px]",
|
|
228
|
+
classNames: {
|
|
229
|
+
previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
|
|
230
|
+
previewImage: "rounded-[8px] object-cover"
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
234
|
+
}, _ = {
|
|
235
|
+
args: {
|
|
236
|
+
acceptTypes: c,
|
|
237
|
+
labelDropzonePrompt: "Drag photos or choose files",
|
|
238
|
+
labelDropzoneSubPrompt: "Only image files are supported",
|
|
239
|
+
labelInvalidFileType: "One or more files have invalid type.",
|
|
240
|
+
maxSizeMB: 5,
|
|
241
|
+
maxFiles: 20,
|
|
242
|
+
singlePick: !1,
|
|
243
|
+
persistentDropzone: !0,
|
|
244
|
+
previewVariant: "image-grid",
|
|
245
|
+
className: "w-[598px]",
|
|
246
|
+
classNames: {
|
|
247
|
+
previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
|
|
248
|
+
previewImage: "rounded-[8px] object-cover"
|
|
88
249
|
}
|
|
89
|
-
|
|
250
|
+
},
|
|
251
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
252
|
+
}, J = {
|
|
253
|
+
args: {
|
|
254
|
+
acceptTypes: u,
|
|
255
|
+
labelDropzonePrompt: "Upload video...",
|
|
256
|
+
labelDropzoneSubPrompt: "MP4/MOV/AVI/WEBM, max 1 MB",
|
|
257
|
+
labelFileTooLarge: "Video is too large. Max size is 1 MB.",
|
|
258
|
+
maxSizeMB: 1,
|
|
259
|
+
maxFiles: 1,
|
|
260
|
+
singlePick: !0,
|
|
261
|
+
className: "w-[598px]"
|
|
262
|
+
},
|
|
263
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
264
|
+
}, R = {
|
|
265
|
+
args: {
|
|
266
|
+
acceptTypes: u,
|
|
267
|
+
labelDropzonePrompt: "Upload video...",
|
|
268
|
+
labelDropzoneSubPrompt: "Only video files are supported",
|
|
269
|
+
labelInvalidFileType: "Invalid file type. Please upload a video file.",
|
|
270
|
+
maxSizeMB: 100,
|
|
271
|
+
maxFiles: 1,
|
|
272
|
+
singlePick: !0,
|
|
273
|
+
className: "w-[598px]"
|
|
274
|
+
},
|
|
275
|
+
render: (e) => /* @__PURE__ */ o(a, { ...e })
|
|
90
276
|
};
|
|
91
277
|
export {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
278
|
+
Y as FileErrorInvalidType,
|
|
279
|
+
W as FileErrorTooLarge,
|
|
280
|
+
k as Files,
|
|
281
|
+
N as Images,
|
|
282
|
+
O as MultiImagesPersistent,
|
|
283
|
+
G as PhotoErrorInvalidType,
|
|
284
|
+
j as PhotoErrorTooLarge,
|
|
285
|
+
_ as PhotosMultiErrorInvalidType,
|
|
286
|
+
A as PhotosMultiErrorTooLarge,
|
|
287
|
+
R as VideoErrorInvalidType,
|
|
288
|
+
J as VideoErrorTooLarge,
|
|
289
|
+
C as VideoUploadingMock,
|
|
290
|
+
L as VideoYoutubeLink,
|
|
291
|
+
V as Videos,
|
|
292
|
+
I as default
|
|
99
293
|
};
|
|
100
294
|
//# sourceMappingURL=Dropzone.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Dropzone } from './Dropzone';\n\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\n initialValue?: string[];\n};\n\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\n const [value, setValue] = useState<string[]>(initialValue);\n\n return (\n <div className=\"max-w-md space-y-3 h-58\">\n <Dropzone {...args} value={value} />\n\n <div className=\"text-xs text-muted-foreground\">\n value:\n <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\n {JSON.stringify(value, null, 2)}\n </pre>\n </div>\n </div>\n );\n}\n\nconst meta = {\n title: 'Dropzone',\n component: Dropzone,\n parameters: {\n layout: 'centered',\n },\n args: {\n labelDropzonePrompt: 'Завантажте або перетягніть',\n labelSelectedFiles: 'Selected files',\n labelFileTooLarge: 'File is too large',\n labelDropzoneSubPrompt: \"Підтримуються файли до 5МБ у форматі .jpg .jpeg .png .webp .heic \",\n maxFiles: 1,\n maxSizeMB: 10,\n acceptTypes: [\"image/jpeg\", \"image/png\", \"image/webp\"],\n singlePick: true,\n className: 'w-full p-0 rounded-[8px] bg-[#F5F5F5] h-[180px] max-h-[180px]'\n },\n argTypes: {\n onChangeValue: { control: false },\n value: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof Dropzone>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n//\n// 1️⃣ Default single image\n//\nexport const Default: Story = {\n render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 2️⃣ With initial image\n//\nexport const WithInitialValue: Story = {\n render: (args) => (\n <ControlledDropzone\n {...args}\n initialValue={[\n 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400',\n ]}\n />\n ),\n};\n\n//\n// 3️⃣ Multiple files\n//\nexport const MultipleFiles: Story = {\n args: {\n maxFiles: 5,\n singlePick: false,\n },\n render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 4️⃣ Disabled\n//\nexport const Disabled: Story = {\n args: {\n disabled: true,\n },\n render: (args) => (\n <ControlledDropzone\n {...args}\n initialValue={[\n 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400',\n ]}\n />\n ),\n};\n\n//\n// 5️⃣ Big size limit example\n//\nexport const SmallFileLimit: Story = {\n args: {\n maxSizeMB: 1,\n labelFileTooLarge: 'Max 1MB allowed',\n },\n render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 6️⃣ Without singlePick (gallery mode)\n//\n//\nexport const GalleryMode: Story = {\n args: {\n maxFiles: 10,\n singlePick: false,\n },\n render: (args) => (\n <ControlledDropzone\n {...args}\n initialValue={[\n 'https://images.unsplash.com/photo-1492724441997-5dc865305da7?w=400',\n 'https://images.unsplash.com/photo-1495567720989-cebdbdd97913?w=400',\n ]}\n />\n ),\n};"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","meta","Story","Default","WithInitialValue","MultipleFiles","Disabled","SmallFileLimit","GalleryMode"],"mappings":";;;AASA,SAASA,EAAmB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC3E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmBJ,CAAY;AAEzD,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAU,GAAGN,GAAM,OAAAC,EAAA,CAAe;AAAA,IAEnC,gBAAAG,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAC,EAAC,SAAI,WAAU,yCACZ,eAAK,UAAUJ,GAAO,MAAM,CAAC,EAAA,CAChC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMM,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,wBAAyB;AAAA,IACzB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa,CAAC,cAAc,aAAa,YAAY;AAAA,IACrD,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,eAAe,EAAE,SAAS,GAAA;AAAA,IAC1B,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GASaC,IAAiB;AAAA,EAC5B,QAAQ,CAACT,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAKaU,IAA0B;AAAA,EACrC,QAAQ,CAACV,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GAKaW,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAKaY,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,CAACZ,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GAKaa,IAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,QAAQ,CAACb,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAMac,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACd,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n DEFAULT_DOCUMENT_TYPES,\r\n DEFAULT_IMAGES_TYPES,\r\n DropzoneValueItem,\r\n DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => setValue(items)}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value:\r\n <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n {JSON.stringify(value, null, 2)}\r\n </pre>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Dropzone',\r\n component: Dropzone,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n labelSelectedFiles: 'Selected files',\r\n labelFileTooLarge: 'File is too large',\r\n maxFiles: 1,\r\n maxSizeMB: 100,\r\n singlePick: true,\r\n className: 'w-full',\r\n },\r\n argTypes: {\r\n onChangeValue: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[680px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload image',\r\n labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n maxSizeMB: 5,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file',\r\n labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => {\r\n const YoutubeStory = () => {\r\n const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n const value = url.trim() ? [url.trim()] : [];\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <input\r\n type=\"text\"\r\n value={url}\r\n onChange={(event) => setUrl(event.target.value)}\r\n placeholder=\"Paste YouTube URL\"\r\n className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n />\r\n\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => {\r\n const next = items[0];\r\n if (typeof next === 'string') {\r\n setUrl(next);\r\n }\r\n }}\r\n />\r\n </div>\r\n );\r\n };\r\n\r\n return <YoutubeStory />;\r\n },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n const [isUploading, setIsUploading] = useState(false);\r\n const [uploadProgress, setUploadProgress] = useState(0);\r\n const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n isUploading={isUploading}\r\n uploadProgress={uploadProgress}\r\n uploadLoadedBytes={uploadLoadedBytes}\r\n uploadTotalBytes={uploadTotalBytes}\r\n onCancelUpload={() => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setIsUploading(false);\r\n setUploadProgress(0);\r\n setUploadLoadedBytes(0);\r\n setUploadTotalBytes(0);\r\n }}\r\n onChangeValue={(items) => {\r\n setValue(items);\r\n if (!items.length) return;\r\n\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n\r\n const selected = items[0];\r\n const totalBytes =\r\n selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n let loadedBytes = 0;\r\n\r\n setUploadTotalBytes(totalBytes);\r\n setUploadLoadedBytes(0);\r\n setUploadProgress(0);\r\n setIsUploading(true);\r\n\r\n timerRef.current = setInterval(() => {\r\n loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n setUploadLoadedBytes(loadedBytes);\r\n setUploadProgress(progress);\r\n\r\n if (loadedBytes >= totalBytes) {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setTimeout(() => setIsUploading(false), 350);\r\n }\r\n }, 250);\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport const VideoUploadingMock: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n labelUploadingTitle: 'Завантаження відео...',\r\n labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n labelUploadingActionCancel: 'Скасувати',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n labelOrClickToSelect: 'Завантажити файл',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: ['application/pdf'],\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'Only PDF is supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n maxSizeMB: 1,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'One or more files have invalid type.',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'Only video files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoUploadingMock","MultiImagesPersistent","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":"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"}
|
|
@@ -13,6 +13,8 @@ export interface DropzoneTranslations {
|
|
|
13
13
|
labelUploadErrors?: string;
|
|
14
14
|
labelFileTooLarge?: string;
|
|
15
15
|
labelInvalidFileType?: string;
|
|
16
|
+
labelVideoUploaded?: string;
|
|
17
|
+
labelVideoReplace?: string;
|
|
16
18
|
}
|
|
17
19
|
export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttributes<HTMLDivElement> {
|
|
18
20
|
acceptTypes?: string[];
|
|
@@ -27,6 +29,18 @@ export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttribute
|
|
|
27
29
|
singlePick?: boolean;
|
|
28
30
|
labelDropzoneClassname?: string;
|
|
29
31
|
labelDropzoneSubClassname?: string;
|
|
32
|
+
isUploading?: boolean;
|
|
33
|
+
uploadProgress?: number;
|
|
34
|
+
uploadLoadedBytes?: number;
|
|
35
|
+
uploadTotalBytes?: number;
|
|
36
|
+
onCancelUpload?: () => void;
|
|
37
|
+
labelUploadingTitle?: string;
|
|
38
|
+
labelUploadingHint?: string;
|
|
39
|
+
labelUploadingActionCancel?: string;
|
|
40
|
+
persistentDropzone?: boolean;
|
|
41
|
+
previewVariant?: 'default' | 'image-grid';
|
|
42
|
+
designVariant?: 'legacy' | 'modern';
|
|
43
|
+
documentUploadCard?: boolean;
|
|
30
44
|
}
|
|
31
45
|
export interface DropzoneStyles {
|
|
32
46
|
idleWrapper?: string;
|
|
@@ -36,8 +50,10 @@ export interface DropzoneStyles {
|
|
|
36
50
|
previewImage?: string;
|
|
37
51
|
previewFile?: string;
|
|
38
52
|
}
|
|
39
|
-
export declare const
|
|
53
|
+
export declare const DEFAULT_DOCUMENT_TYPES: string[];
|
|
40
54
|
export declare const DEFAULT_IMAGES_TYPES: string[];
|
|
55
|
+
export declare const DEFAULT_VIDEO_TYPES: string[];
|
|
56
|
+
export declare const DEFAULT_FILE_TYPES: string[];
|
|
41
57
|
export interface DropzoneControl {
|
|
42
58
|
setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;
|
|
43
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,CACX,cAAc,EACd,eAAe,GAAG,cAAc,GAAG,aAAa,CACjD,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,CACX,cAAc,EACd,eAAe,GAAG,cAAc,GAAG,aAAa,CACjD,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAC1C,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,UAUlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAMhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAK/B,CAAC;AAGF,eAAO,MAAM,kBAAkB,UAAyB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;CACzD"}
|
|
@@ -1,18 +1,29 @@
|
|
|
1
|
-
const
|
|
1
|
+
const e = [
|
|
2
|
+
"application/pdf",
|
|
2
3
|
"application/msword",
|
|
3
4
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
5
|
+
"application/vnd.ms-excel",
|
|
6
|
+
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
7
|
+
"application/vnd.ms-powerpoint",
|
|
8
|
+
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
|
4
9
|
"text/csv",
|
|
5
|
-
"text/plain"
|
|
6
|
-
|
|
7
|
-
], e = [
|
|
10
|
+
"text/plain"
|
|
11
|
+
], o = [
|
|
8
12
|
"image/png",
|
|
9
13
|
"image/jpeg",
|
|
10
14
|
"image/jpg",
|
|
11
15
|
"image/webp"
|
|
12
16
|
// 'image/gif', // TODO: normalize this type
|
|
13
|
-
]
|
|
17
|
+
], i = [
|
|
18
|
+
"video/mp4",
|
|
19
|
+
"video/quicktime",
|
|
20
|
+
"video/x-msvideo",
|
|
21
|
+
"video/webm"
|
|
22
|
+
], n = e;
|
|
14
23
|
export {
|
|
15
|
-
|
|
16
|
-
|
|
24
|
+
e as DEFAULT_DOCUMENT_TYPES,
|
|
25
|
+
n as DEFAULT_FILE_TYPES,
|
|
26
|
+
o as DEFAULT_IMAGES_TYPES,
|
|
27
|
+
i as DEFAULT_VIDEO_TYPES
|
|
17
28
|
};
|
|
18
29
|
//# sourceMappingURL=Dropzone.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\nimport { Dispatch, SetStateAction } from 'react';\n\nexport type DropzoneValueItem = File | string;\n\nexport interface FilePreviewProps {\n item: DropzoneValueItem;\n styles?: Pick<\n DropzoneStyles,\n 'previewWraper' | 'previewImage' | 'previewFile'\n >;\n}\n\nexport interface DropzoneTranslations {\n labelDropzonePrompt?: string;\n labelDropzoneSubPrompt?: string;\n labelOrClickToSelect?: string;\n labelSelectedFiles?: string;\n labelUploadErrors?: string;\n labelFileTooLarge?: string;\n labelInvalidFileType?: string;\n}\n\nexport interface DropzoneProps\n extends DropzoneTranslations,\n React.HTMLAttributes<HTMLDivElement> {\n acceptTypes?: string[];\n maxSizeMB: number;\n maxFiles?: number;\n onErrors?: (errors: FileRejection[]) => void;\n hideErrors?: boolean;\n disabled?: boolean;\n classNames?: DropzoneStyles;\n value?: DropzoneValueItem[];\n onChangeValue?: (items: DropzoneValueItem[]) => void;\n singlePick?: boolean;\n labelDropzoneClassname?: string;\n labelDropzoneSubClassname?: string;\n}\n\nexport interface DropzoneStyles {\n idleWrapper?: string;\n previewWrapper?: string;\n errorWrapper?: string;\n previewWraper?: string;\n previewImage?: string;\n previewFile?: string;\n}\n\nexport const
|
|
1
|
+
{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\r\nimport { Dispatch, SetStateAction } from 'react';\r\n\r\nexport type DropzoneValueItem = File | string;\r\n\r\nexport interface FilePreviewProps {\r\n item: DropzoneValueItem;\r\n styles?: Pick<\r\n DropzoneStyles,\r\n 'previewWraper' | 'previewImage' | 'previewFile'\r\n >;\r\n}\r\n\r\nexport interface DropzoneTranslations {\r\n labelDropzonePrompt?: string;\r\n labelDropzoneSubPrompt?: string;\r\n labelOrClickToSelect?: string;\r\n labelSelectedFiles?: string;\r\n labelUploadErrors?: string;\r\n labelFileTooLarge?: string;\r\n labelInvalidFileType?: string;\r\n labelVideoUploaded?: string;\r\n labelVideoReplace?: string;\r\n}\r\n\r\nexport interface DropzoneProps\r\n extends DropzoneTranslations,\r\n React.HTMLAttributes<HTMLDivElement> {\r\n acceptTypes?: string[];\r\n maxSizeMB: number;\r\n maxFiles?: number;\r\n onErrors?: (errors: FileRejection[]) => void;\r\n hideErrors?: boolean;\r\n disabled?: boolean;\r\n classNames?: DropzoneStyles;\r\n value?: DropzoneValueItem[];\r\n onChangeValue?: (items: DropzoneValueItem[]) => void;\r\n singlePick?: boolean;\r\n labelDropzoneClassname?: string;\r\n labelDropzoneSubClassname?: string;\r\n isUploading?: boolean;\r\n uploadProgress?: number;\r\n uploadLoadedBytes?: number;\r\n uploadTotalBytes?: number;\r\n onCancelUpload?: () => void;\r\n labelUploadingTitle?: string;\r\n labelUploadingHint?: string;\r\n labelUploadingActionCancel?: string;\r\n persistentDropzone?: boolean;\r\n previewVariant?: 'default' | 'image-grid';\r\n designVariant?: 'legacy' | 'modern';\r\n documentUploadCard?: boolean;\r\n}\r\n\r\nexport interface DropzoneStyles {\r\n idleWrapper?: string;\r\n previewWrapper?: string;\r\n errorWrapper?: string;\r\n previewWraper?: string;\r\n previewImage?: string;\r\n previewFile?: string;\r\n}\r\n\r\nexport const DEFAULT_DOCUMENT_TYPES = [\r\n 'application/pdf',\r\n 'application/msword',\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\r\n 'application/vnd.ms-excel',\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n 'application/vnd.ms-powerpoint',\r\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\r\n 'text/csv',\r\n 'text/plain',\r\n];\r\n\r\nexport const DEFAULT_IMAGES_TYPES = [\r\n 'image/png',\r\n 'image/jpeg',\r\n 'image/jpg',\r\n 'image/webp',\r\n // 'image/gif', // TODO: normalize this type\r\n];\r\n\r\nexport const DEFAULT_VIDEO_TYPES = [\r\n 'video/mp4',\r\n 'video/quicktime',\r\n 'video/x-msvideo',\r\n 'video/webm',\r\n];\r\n\r\n// Backward-compatible alias.\r\nexport const DEFAULT_FILE_TYPES = DEFAULT_DOCUMENT_TYPES;\r\n\r\n\r\nexport interface DropzoneControl {\r\n setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;\r\n}\r\n"],"names":["DEFAULT_DOCUMENT_TYPES","DEFAULT_IMAGES_TYPES","DEFAULT_VIDEO_TYPES","DEFAULT_FILE_TYPES"],"mappings":"AA+DO,MAAMA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEF,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAqBH;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropzoneFilePreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneFilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAwB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"DropzoneFilePreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneFilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAwB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAM1E,OAAO,wCAAwC,CAAC;AAChD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8E5C,CAAC"}
|
|
@@ -1,48 +1,69 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useState as p, useEffect as f } from "react";
|
|
3
3
|
import { File as m } from "lucide-react";
|
|
4
|
-
import { DEFAULT_IMAGES_TYPES as
|
|
4
|
+
import { DEFAULT_IMAGES_TYPES as w } from "./Dropzone.types.js";
|
|
5
5
|
import { isFile as a } from "./DropzoneUtils.js";
|
|
6
|
-
import { cn as
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import { cn as i } from "@oneplatformdev/utils";
|
|
7
|
+
import { MediaPlayer as x, MediaProvider as v } from "../node_modules/.pnpm/@vidstack_react@1.12.13_@types_react@19.1.13_react@19.1.1/node_modules/@vidstack/react/prod/vidstack.js";
|
|
8
|
+
/* empty css */
|
|
9
|
+
/* empty css */
|
|
10
|
+
/* empty css */
|
|
11
|
+
import { DefaultVideoLayout as h } from "../node_modules/.pnpm/@vidstack_react@1.12.13_@types_react@19.1.13_react@19.1.1/node_modules/@vidstack/react/prod/chunks/vidstack-D27o2o-g.js";
|
|
12
|
+
import { defaultLayoutIcons as y } from "../node_modules/.pnpm/@vidstack_react@1.12.13_@types_react@19.1.13_react@19.1.1/node_modules/@vidstack/react/prod/player/vidstack-default-icons.js";
|
|
13
|
+
const T = ({ item: e, styles: s }) => {
|
|
14
|
+
const [t, o] = p(null), d = a(e) && w.includes(e.type), c = a(e) && e.type.includes("video");
|
|
9
15
|
return f(() => {
|
|
10
|
-
let
|
|
11
|
-
if (a(e) &&
|
|
12
|
-
const
|
|
13
|
-
return
|
|
16
|
+
let r = null;
|
|
17
|
+
if (a(e) && d) {
|
|
18
|
+
const n = new FileReader();
|
|
19
|
+
return n.onloadend = () => o(n.result), n.readAsDataURL(e), () => o(null);
|
|
14
20
|
} else {
|
|
15
21
|
if (typeof e == "string")
|
|
16
|
-
return
|
|
17
|
-
|
|
22
|
+
return r = new Image(), r.src = e, r.onload = () => o(e), r.onerror = () => o(null), () => {
|
|
23
|
+
r.onload = null, r.onerror = null;
|
|
18
24
|
};
|
|
19
|
-
|
|
25
|
+
if (a(e) && c) {
|
|
26
|
+
const n = URL.createObjectURL(e);
|
|
27
|
+
return o(n), () => URL.revokeObjectURL(n);
|
|
28
|
+
} else
|
|
29
|
+
o(null);
|
|
20
30
|
}
|
|
21
|
-
return () =>
|
|
22
|
-
}, [e,
|
|
31
|
+
return () => o(null);
|
|
32
|
+
}, [e, d, c]), /* @__PURE__ */ l(
|
|
23
33
|
"div",
|
|
24
34
|
{
|
|
25
|
-
className:
|
|
35
|
+
className: i(
|
|
26
36
|
"w-32 h-32 border border-gray-300 rounded-md overflow-hidden flex items-center justify-center",
|
|
27
37
|
s?.previewWraper
|
|
28
38
|
),
|
|
29
|
-
children: c ? /* @__PURE__ */
|
|
39
|
+
children: t && c ? /* @__PURE__ */ l("div", { className: "w-full h-full bg-black", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ u(
|
|
40
|
+
x,
|
|
41
|
+
{
|
|
42
|
+
src: a(e) ? { src: t, type: e.type } : t,
|
|
43
|
+
className: "h-full w-full bg-black text-white",
|
|
44
|
+
playsInline: !0,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ l(v, {}),
|
|
47
|
+
/* @__PURE__ */ l(h, { icons: y })
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
) }) : t ? /* @__PURE__ */ l(
|
|
30
51
|
"img",
|
|
31
52
|
{
|
|
32
|
-
src:
|
|
53
|
+
src: t,
|
|
33
54
|
alt: a(e) ? e.name : "external-image",
|
|
34
|
-
className:
|
|
55
|
+
className: i("w-full h-full object-cover", s?.previewImage)
|
|
35
56
|
}
|
|
36
|
-
) : /* @__PURE__ */
|
|
57
|
+
) : /* @__PURE__ */ u(
|
|
37
58
|
"div",
|
|
38
59
|
{
|
|
39
|
-
className:
|
|
60
|
+
className: i(
|
|
40
61
|
"flex flex-col items-center justify-center text-gray-500 text-sm p-2 text-center",
|
|
41
62
|
s?.previewFile
|
|
42
63
|
),
|
|
43
64
|
children: [
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
a(e) ? /* @__PURE__ */
|
|
65
|
+
/* @__PURE__ */ l(m, { className: "w-6 h-6" }),
|
|
66
|
+
a(e) ? /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e })
|
|
46
67
|
]
|
|
47
68
|
}
|
|
48
69
|
)
|
|
@@ -50,6 +71,6 @@ const N = ({ item: e, styles: s }) => {
|
|
|
50
71
|
);
|
|
51
72
|
};
|
|
52
73
|
export {
|
|
53
|
-
|
|
74
|
+
T as FilePreview
|
|
54
75
|
};
|
|
55
76
|
//# sourceMappingURL=DropzoneFilePreview.js.map
|