@mage-ui/components 1.0.130 → 1.0.131
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/components/controls/dropzone/Dropzone.d.mts +24 -93
- package/dist/components/controls/dropzone/Dropzone.d.mts.map +1 -1
- package/dist/components/controls/dropzone/Dropzone.mjs +1 -1
- package/dist/components/controls/dropzone/Dropzone.mjs.map +1 -1
- package/dist/components/controls/dropzone/DropzoneBase.d.mts +87 -0
- package/dist/components/controls/dropzone/DropzoneBase.d.mts.map +1 -0
- package/dist/components/controls/dropzone/DropzoneBase.mjs +2 -0
- package/dist/components/controls/dropzone/DropzoneBase.mjs.map +1 -0
- package/dist/components/controls/{dropzone-s3 → dropzone}/DropzoneS3.d.mts +3 -10
- package/dist/components/controls/dropzone/DropzoneS3.d.mts.map +1 -0
- package/dist/components/controls/dropzone/DropzoneS3.mjs +2 -0
- package/dist/components/controls/dropzone/DropzoneS3.mjs.map +1 -0
- package/dist/components/controls/dropzone/use-dropzone-state.mjs.map +1 -1
- package/dist/components/controls/index.d.mts +3 -4
- package/dist/components/data-display/index.d.mts +1 -0
- package/dist/components/data-display/uploaded-file/UploadedFile.mjs.map +1 -1
- package/dist/components/data-display/uploaded-files/UploadedFiles.d.mts +42 -0
- package/dist/components/data-display/uploaded-files/UploadedFiles.d.mts.map +1 -0
- package/dist/components/data-display/uploaded-files/UploadedFiles.mjs +2 -0
- package/dist/components/data-display/uploaded-files/UploadedFiles.mjs.map +1 -0
- package/dist/components/forms/Form.d.mts +5 -4
- package/dist/components/forms/Form.d.mts.map +1 -1
- package/dist/components/forms/Form.mjs +1 -1
- package/dist/components/forms/Form.mjs.map +1 -1
- package/dist/components/forms/controls/FormDropzoneS3.d.mts +11 -0
- package/dist/components/forms/controls/FormDropzoneS3.d.mts.map +1 -0
- package/dist/components/forms/controls/FormDropzoneS3.mjs +2 -0
- package/dist/components/forms/controls/FormDropzoneS3.mjs.map +1 -0
- package/dist/components/forms/controls/index.mjs +1 -1
- package/dist/components/forms/controls/index.mjs.map +1 -1
- package/dist/components/forms/controls/register-components.mjs +1 -1
- package/dist/components/forms/controls/register-components.mjs.map +1 -1
- package/dist/components/forms/rules/extract-form-rules.mjs +1 -1
- package/dist/components/forms/rules/extract-form-rules.mjs.map +1 -1
- package/dist/components/index.d.mts +4 -4
- package/dist/index.d.mts +5 -5
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
- package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts +0 -62
- package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts.map +0 -1
- package/dist/components/controls/dropzone-files/DropzoneFiles.mjs +0 -2
- package/dist/components/controls/dropzone-files/DropzoneFiles.mjs.map +0 -1
- package/dist/components/controls/dropzone-s3/DropzoneS3.d.mts.map +0 -1
- package/dist/components/controls/dropzone-s3/DropzoneS3.mjs +0 -2
- package/dist/components/controls/dropzone-s3/DropzoneS3.mjs.map +0 -1
- package/dist/components/forms/controls/FormDropzoneFiles.d.mts +0 -12
- package/dist/components/forms/controls/FormDropzoneFiles.d.mts.map +0 -1
- package/dist/components/forms/controls/FormDropzoneFiles.mjs +0 -2
- package/dist/components/forms/controls/FormDropzoneFiles.mjs.map +0 -1
|
@@ -1,109 +1,40 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { UploadProgress, UploadResponse, Uploader } from "./upload-service.mjs";
|
|
1
|
+
import { UploadedFileProps } from "../../data-display/uploaded-file/UploadedFile.mjs";
|
|
2
|
+
import { DropzoneBaseProps, FileData } from "./DropzoneBase.mjs";
|
|
4
3
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
4
|
import { ReactNode } from "react";
|
|
6
5
|
|
|
7
6
|
//#region src/components/controls/dropzone/Dropzone.d.ts
|
|
8
|
-
type
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
loading: boolean;
|
|
15
|
-
url: string;
|
|
16
|
-
error?: string;
|
|
17
|
-
progress?: number;
|
|
18
|
-
};
|
|
19
|
-
type DropzoneProps = {
|
|
20
|
-
children: ({
|
|
21
|
-
files,
|
|
22
|
-
isUploading,
|
|
23
|
-
removeFile
|
|
24
|
-
}: {
|
|
25
|
-
files: Record<string, FileData>;
|
|
26
|
-
isUploading: boolean;
|
|
27
|
-
removeFile: (fileName: string) => void;
|
|
28
|
-
}) => ReactNode;
|
|
29
|
-
initialFiles?: Record<string, FileData>;
|
|
30
|
-
maxFiles?: number;
|
|
31
|
-
/**
|
|
32
|
-
* Endpoint used by the built-in FormData uploader. Required when
|
|
33
|
-
* `autoSend=true` (default) AND no custom `uploader` is provided.
|
|
34
|
-
* Ignored if `uploader` is provided.
|
|
35
|
-
*/
|
|
36
|
-
url?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Custom upload function that replaces the built-in FormData POST.
|
|
39
|
-
* Use it for multi-step flows (e.g. presigned S3) or any non-standard
|
|
40
|
-
* transport. When set, the `url` prop is ignored.
|
|
41
|
-
*/
|
|
42
|
-
uploader?: Uploader; /** When false, files are added to state but not uploaded automatically. Default: true. */
|
|
43
|
-
autoSend?: boolean; /** Maximum file size in bytes. Files exceeding this will be rejected. */
|
|
44
|
-
maxSize?: number; /** Called when the file list changes (added or removed). Useful when autoSend=false. */
|
|
45
|
-
onChange?: (files: File[]) => void;
|
|
46
|
-
data?: Record<string, unknown>;
|
|
47
|
-
headers?: Record<string, string>;
|
|
48
|
-
/**
|
|
49
|
-
* Files the dropzone accepts. Forwarded directly to Mantine's
|
|
50
|
-
* `<Dropzone accept>`.
|
|
51
|
-
*
|
|
52
|
-
* Two formats are supported:
|
|
53
|
-
* - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches
|
|
54
|
-
* the native `react-dropzone` shape and produces a correct
|
|
55
|
-
* `<input accept>` with MIME + extension pairs. Required when any
|
|
56
|
-
* key would otherwise be a bare extension string.
|
|
57
|
-
* - **Array**: `string[]` of MIME types (no `.ext` entries) — kept
|
|
58
|
-
* for backward compatibility. Mixing `.ext` strings into the
|
|
59
|
-
* array triggers a `Skipped "..." because it is not a valid MIME
|
|
60
|
-
* type` warning from `react-dropzone` v15+.
|
|
61
|
-
*/
|
|
62
|
-
accept?: string[] | Record<string, string[]>;
|
|
63
|
-
title?: ReactNode;
|
|
64
|
-
subtitle?: ReactNode;
|
|
65
|
-
hint?: ReactNode;
|
|
66
|
-
inputId?: string;
|
|
67
|
-
onFileUploaded?: (file: FileData) => void;
|
|
68
|
-
hideWhenFull?: boolean;
|
|
7
|
+
type DropzoneProps = Omit<DropzoneBaseProps, 'children' | 'classNames'> & {
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
label?: ReactNode;
|
|
10
|
+
description?: ReactNode;
|
|
11
|
+
error?: ReactNode;
|
|
12
|
+
fileListHeight?: number | string;
|
|
69
13
|
classNames?: {
|
|
70
14
|
dropzone?: string;
|
|
71
15
|
root?: string;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
subtitle?: string;
|
|
82
|
-
hint?: string;
|
|
16
|
+
labelWrapper?: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
description?: string;
|
|
19
|
+
error?: string;
|
|
20
|
+
uploadedFiles?: string;
|
|
21
|
+
uploadedFilesRoot?: string;
|
|
22
|
+
uploadedFilesListItem?: string;
|
|
23
|
+
uploadedFile?: UploadedFileProps['classNames'];
|
|
24
|
+
dropzoneDropzone?: DropzoneBaseProps['classNames'];
|
|
83
25
|
};
|
|
84
|
-
direction?: 'default' | 'reverse';
|
|
85
26
|
};
|
|
86
27
|
declare const Dropzone: ({
|
|
87
|
-
data,
|
|
88
|
-
headers,
|
|
89
28
|
children,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
autoSend,
|
|
95
|
-
maxSize,
|
|
96
|
-
onChange,
|
|
97
|
-
accept,
|
|
98
|
-
title,
|
|
99
|
-
subtitle,
|
|
100
|
-
hint,
|
|
101
|
-
inputId,
|
|
102
|
-
onFileUploaded,
|
|
29
|
+
label,
|
|
30
|
+
description,
|
|
31
|
+
error,
|
|
32
|
+
fileListHeight: _fileListHeight,
|
|
103
33
|
classNames,
|
|
34
|
+
inputId,
|
|
104
35
|
direction,
|
|
105
|
-
|
|
36
|
+
...baseProps
|
|
106
37
|
}: DropzoneProps) => react_jsx_runtime0.JSX.Element;
|
|
107
38
|
//#endregion
|
|
108
|
-
export { Dropzone, DropzoneProps
|
|
39
|
+
export { Dropzone, DropzoneProps };
|
|
109
40
|
//# sourceMappingURL=Dropzone.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA0BY,aAAA,GAAgB,IAAA,CAC1B,iBAAA;EAGA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,cAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,aAAA;IACA,iBAAA;IACA,qBAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,iBAAA;EAAA;AAAA;AAAA,cAMV,QAAA;EAAY,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,cAAA,EAAA,eAAA;EAAA,UAAA;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAUtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{UploadedFiles as e}from"../../data-display/uploaded-files/UploadedFiles.mjs";import{DropzoneBase as t}from"./DropzoneBase.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dropzone as r,dropzoneDescription as i,dropzoneDropzone as a,dropzoneError as o,dropzoneLabel as s,dropzoneLabelWrapper as c,dropzoneRoot as l,dropzoneUploadedFile as u,dropzoneUploadedFiles as d,dropzoneUploadedFilesListItem as f}from"@mage-ui/styled-system/recipes";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useId as h}from"react";const g=({children:g,label:_,description:v,error:y,fileListHeight:b,classNames:x,inputId:S,direction:C=`default`,...w})=>{let T=h(),E=S??T;return m(`div`,{className:n(x?.dropzone??r(),x?.root??l()),children:[(_||v)&&m(`div`,{className:x?.labelWrapper??c(),children:[_&&p(`label`,{htmlFor:E,className:x?.label??s(),children:_}),v&&p(`p`,{className:x?.description??i(),children:v})]}),p(t,{...w,inputId:E,direction:C,classNames:{...x?.dropzoneDropzone??{},dropzoneBase:x?.dropzoneDropzone?.dropzoneBase??a()},children:({files:t,removeFile:n})=>g===void 0?Object.keys(t).length>0?p(e,{classNames:{uploadedFiles:x?.uploadedFiles??d(),root:x?.uploadedFilesRoot},children:Object.values(t).map(t=>p(e.Item,{fileName:t.name,fileType:t.type,fileSize:`${(t.size/1024).toFixed(1)} KB`,fileDate:t.date,url:t.url,onRemove:()=>n(t.name),classNames:{listItem:x?.uploadedFilesListItem??f(),uploadedFile:{...x?.uploadedFile,uploadedFile:x?.uploadedFile?.uploadedFile??u()}}},t.name))}):null:g}),y&&p(`p`,{className:x?.error??o(),children:y})]})};export{g as Dropzone};
|
|
2
2
|
//# sourceMappingURL=Dropzone.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDropzoneInner,\n dropzoneDropzoneRoot,\n dropzoneHint,\n dropzoneIcon,\n dropzoneIconSlot,\n dropzoneLoader,\n dropzoneLoaderRoot,\n dropzoneRoot,\n dropzoneSubtitle,\n dropzoneTextSlot,\n dropzoneTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n Icon,\n type IconProps,\n LoaderOval,\n type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n Uploader,\n UploadProgress,\n UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n name: string;\n size: number;\n type: string;\n date: string;\n uploaded: boolean;\n loading: boolean;\n url: string;\n error?: string;\n progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n children: ({\n files,\n isUploading,\n removeFile,\n }: {\n files: Record<string, FileData>;\n isUploading: boolean;\n removeFile: (fileName: string) => void;\n }) => ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n /**\n * Endpoint used by the built-in FormData uploader. Required when\n * `autoSend=true` (default) AND no custom `uploader` is provided.\n * Ignored if `uploader` is provided.\n */\n url?: string;\n /**\n * Custom upload function that replaces the built-in FormData POST.\n * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n * transport. When set, the `url` prop is ignored.\n */\n uploader?: Uploader;\n /** When false, files are added to state but not uploaded automatically. Default: true. */\n autoSend?: boolean;\n /** Maximum file size in bytes. Files exceeding this will be rejected. */\n maxSize?: number;\n /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n onChange?: (files: File[]) => void;\n data?: Record<string, unknown>;\n headers?: Record<string, string>;\n /**\n * Files the dropzone accepts. Forwarded directly to Mantine's\n * `<Dropzone accept>`.\n *\n * Two formats are supported:\n * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n * the native `react-dropzone` shape and produces a correct\n * `<input accept>` with MIME + extension pairs. Required when any\n * key would otherwise be a bare extension string.\n * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n * for backward compatibility. Mixing `.ext` strings into the\n * array triggers a `Skipped \"...\" because it is not a valid MIME\n * type` warning from `react-dropzone` v15+.\n */\n accept?: string[] | Record<string, string[]>;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\n onFileUploaded?: (file: FileData) => void;\n hideWhenFull?: boolean;\n classNames?: {\n dropzone?: string;\n root?: string;\n dropzoneDropzone?: {\n root?: string;\n inner?: string;\n };\n iconSlot?: string;\n dropzoneIcon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n textSlot?: string;\n title?: string;\n subtitle?: string;\n hint?: string;\n };\n direction?: 'default' | 'reverse';\n};\n\nexport const Dropzone = ({\n data,\n headers,\n children,\n initialFiles = {},\n maxFiles,\n url,\n uploader,\n autoSend = true,\n maxSize,\n onChange,\n accept,\n title,\n subtitle,\n hint,\n inputId,\n onFileUploaded,\n classNames,\n direction = 'default',\n hideWhenFull = false,\n}: DropzoneProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const rawFilesRef = useRef<Map<string, File>>(new Map());\n const {\n files,\n isUploading,\n uploadMultipleFiles,\n addFile,\n removeFile: hookRemoveFile,\n } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n const removeFile = useCallback(\n (fileName: string) => {\n hookRemoveFile(fileName);\n rawFilesRef.current.delete(fileName);\n if (!autoSend && onChange) {\n onChange(Array.from(rawFilesRef.current.values()));\n }\n },\n [hookRemoveFile, autoSend, onChange],\n );\n\n const handleDrop = useCallback(\n async (acceptedFiles: File[]) => {\n const currentCount = Object.keys(files).length;\n const max = maxFiles ?? Number.POSITIVE_INFINITY;\n const remainingSlots = max - currentCount;\n if (remainingSlots <= 0) {\n return;\n }\n const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n if (autoSend) {\n await uploadMultipleFiles(filesToProcess, data);\n } else {\n for (const file of filesToProcess) {\n addFile(file);\n rawFilesRef.current.set(file.name, file);\n }\n onChange?.(Array.from(rawFilesRef.current.values()));\n }\n },\n [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n );\n\n const isFull =\n maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n data-direction={direction}\n >\n {(!hideWhenFull || !isFull) && (\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={isFull}\n loading={isUploading}\n accept={accept}\n maxSize={maxSize}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root:\n classNames?.dropzoneDropzone?.root ??\n cx(dropzoneDropzoneRoot(), 'group'),\n inner:\n classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n }}\n >\n <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n {isUploading ? (\n <LoaderOval\n classNames={{\n loader: classNames?.loader?.loader ?? dropzoneLoader(),\n root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n }}\n />\n ) : (\n <>\n <MantineDropzone.Idle>\n <Icon\n name='mage-dropzone-upload-01'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n }}\n />\n </MantineDropzone.Idle>\n <MantineDropzone.Accept>\n <Icon\n name='mage-dropzone-thumbs-up'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n }}\n />\n </MantineDropzone.Accept>\n <MantineDropzone.Reject>\n <Icon\n name='mage-dropzone-thumbs-down'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n }}\n />\n </MantineDropzone.Reject>\n </>\n )}\n </div>\n <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n <span className={classNames?.title ?? dropzoneTitle()}>\n {title || 'Upload files'}\n </span>\n <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n {subtitle || 'Drag images here or click to select files'}\n </span>\n <span className={classNames?.hint ?? dropzoneHint()}>\n {hint ||\n 'Attach as many files as you like, each file should not exceed 5mb'}\n </span>\n </div>\n </MantineDropzone>\n )}\n {children({ files, isUploading, removeFile })}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropzone.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDescription,\n dropzoneDropzone,\n dropzoneError,\n dropzoneLabel,\n dropzoneLabelWrapper,\n dropzoneRoot,\n dropzoneUploadedFile,\n dropzoneUploadedFiles,\n dropzoneUploadedFilesListItem,\n} from '@mage-ui/styled-system/recipes';\nimport {\n type UploadedFileProps,\n UploadedFiles,\n} from '@/components/data-display';\n\nimport {\n DropzoneBase,\n type DropzoneBaseProps,\n type FileData,\n} from './DropzoneBase';\n\nexport type DropzoneProps = Omit<\n DropzoneBaseProps,\n 'children' | 'classNames'\n> & {\n children?: ReactNode;\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n fileListHeight?: number | string;\n classNames?: {\n dropzone?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n uploadedFiles?: string;\n uploadedFilesRoot?: string;\n uploadedFilesListItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzoneDropzone?: DropzoneBaseProps['classNames'];\n };\n};\n\nexport type { FileData };\n\nexport const Dropzone = ({\n children,\n label,\n description,\n error,\n fileListHeight: _fileListHeight,\n classNames,\n inputId,\n direction = 'default',\n ...baseProps\n}: DropzoneProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n {(label || description) && (\n <div className={classNames?.labelWrapper ?? dropzoneLabelWrapper()}>\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneDescription()}>\n {description}\n </p>\n )}\n </div>\n )}\n <DropzoneBase\n {...baseProps}\n inputId={groupId}\n direction={direction}\n classNames={{\n ...(classNames?.dropzoneDropzone ?? {}),\n dropzoneBase:\n classNames?.dropzoneDropzone?.dropzoneBase ?? dropzoneDropzone(),\n }}\n >\n {({ files, removeFile }) => {\n if (children !== undefined) {\n return children;\n }\n return Object.keys(files).length > 0 ? (\n <UploadedFiles\n classNames={{\n uploadedFiles:\n classNames?.uploadedFiles ?? dropzoneUploadedFiles(),\n root: classNames?.uploadedFilesRoot,\n }}\n >\n {Object.values(files).map((file) => (\n <UploadedFiles.Item\n key={file.name}\n fileName={file.name}\n fileType={file.type}\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n url={file.url}\n onRemove={() => removeFile(file.name)}\n classNames={{\n listItem:\n classNames?.uploadedFilesListItem ??\n dropzoneUploadedFilesListItem(),\n uploadedFile: {\n ...classNames?.uploadedFile,\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneUploadedFile(),\n },\n }}\n />\n ))}\n </UploadedFiles>\n ) : null;\n }}\n </DropzoneBase>\n {error && <p className={classNames?.error ?? dropzoneError()}>{error}</p>}\n </div>\n );\n};\n"],"mappings":"yhBAoDA,MAAa,GAAY,CACvB,WACA,QACA,cACA,QACA,eAAgB,EAChB,aACA,UACA,YAAY,UACZ,GAAG,KACgB,CACnB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAE3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,UAJH,EAMI,GAAS,IACT,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAAsB,UAAlE,CACG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAe,UAE9C,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAAqB,UAC3D,EACC,CAAA,CAEF,GAER,EAAC,EAAD,CACE,GAAI,EACJ,QAAS,EACE,YACX,WAAY,CACV,GAAI,GAAY,kBAAoB,EAAE,CACtC,aACE,GAAY,kBAAkB,cAAgB,GAAkB,CACnE,WAEC,CAAE,QAAO,gBACL,IAAa,IAAA,GAGV,OAAO,KAAK,EAAM,CAAC,OAAS,EACjC,EAAC,EAAD,CACE,WAAY,CACV,cACE,GAAY,eAAiB,GAAuB,CACtD,KAAM,GAAY,kBACnB,UAEA,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,EAAc,KAAf,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,WAAY,CACV,SACE,GAAY,uBACZ,GAA+B,CACjC,aAAc,CACZ,GAAG,GAAY,aACf,aACE,GAAY,cAAc,cAC1B,GAAsB,CACzB,CACF,CACD,CAlBK,EAAK,KAkBV,CACF,CACY,CAAA,CACd,KAjCK,EAmCE,CAAA,CACd,GAAS,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAe,UAAG,EAAU,CAAA,CACrE"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { IconProps } from "../../data-display/icons/icon/Icon.mjs";
|
|
2
|
+
import { LoaderOvalProps } from "../../data-display/loader-oval/LoaderOval.mjs";
|
|
3
|
+
import { UploadProgress, UploadResponse, Uploader } from "./upload-service.mjs";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/controls/dropzone/DropzoneBase.d.ts
|
|
7
|
+
type FileData = {
|
|
8
|
+
name: string;
|
|
9
|
+
size: number;
|
|
10
|
+
type: string;
|
|
11
|
+
date: string;
|
|
12
|
+
uploaded: boolean;
|
|
13
|
+
loading: boolean;
|
|
14
|
+
url: string;
|
|
15
|
+
error?: string;
|
|
16
|
+
progress?: number;
|
|
17
|
+
};
|
|
18
|
+
type DropzoneBaseProps = {
|
|
19
|
+
children: ({
|
|
20
|
+
files,
|
|
21
|
+
isUploading,
|
|
22
|
+
removeFile
|
|
23
|
+
}: {
|
|
24
|
+
files: Record<string, FileData>;
|
|
25
|
+
isUploading: boolean;
|
|
26
|
+
removeFile: (fileName: string) => void;
|
|
27
|
+
}) => ReactNode;
|
|
28
|
+
initialFiles?: Record<string, FileData>;
|
|
29
|
+
maxFiles?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Endpoint used by the built-in FormData uploader. Required when
|
|
32
|
+
* `autoSend=true` (default) AND no custom `uploader` is provided.
|
|
33
|
+
* Ignored if `uploader` is provided.
|
|
34
|
+
*/
|
|
35
|
+
url?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Custom upload function that replaces the built-in FormData POST.
|
|
38
|
+
* Use it for multi-step flows (e.g. presigned S3) or any non-standard
|
|
39
|
+
* transport. When set, the `url` prop is ignored.
|
|
40
|
+
*/
|
|
41
|
+
uploader?: Uploader; /** When false, files are added to state but not uploaded automatically. Default: true. */
|
|
42
|
+
autoSend?: boolean; /** Maximum file size in bytes. Files exceeding this will be rejected. */
|
|
43
|
+
maxSize?: number; /** Called when the file list changes (added or removed). Useful when autoSend=false. */
|
|
44
|
+
onChange?: (files: File[]) => void;
|
|
45
|
+
data?: Record<string, unknown>;
|
|
46
|
+
headers?: Record<string, string>;
|
|
47
|
+
/**
|
|
48
|
+
* Files the dropzone accepts. Forwarded directly to Mantine's
|
|
49
|
+
* `<Dropzone accept>`.
|
|
50
|
+
*
|
|
51
|
+
* Two formats are supported:
|
|
52
|
+
* - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches
|
|
53
|
+
* the native `react-dropzone` shape and produces a correct
|
|
54
|
+
* `<input accept>` with MIME + extension pairs. Required when any
|
|
55
|
+
* key would otherwise be a bare extension string.
|
|
56
|
+
* - **Array**: `string[]` of MIME types (no `.ext` entries) — kept
|
|
57
|
+
* for backward compatibility. Mixing `.ext` strings into the
|
|
58
|
+
* array triggers a `Skipped "..." because it is not a valid MIME
|
|
59
|
+
* type` warning from `react-dropzone` v15+.
|
|
60
|
+
*/
|
|
61
|
+
accept?: string[] | Record<string, string[]>;
|
|
62
|
+
title?: ReactNode;
|
|
63
|
+
subtitle?: ReactNode;
|
|
64
|
+
hint?: ReactNode;
|
|
65
|
+
inputId?: string;
|
|
66
|
+
onFileUploaded?: (file: FileData) => void;
|
|
67
|
+
hideWhenFull?: boolean;
|
|
68
|
+
classNames?: {
|
|
69
|
+
dropzoneBase?: string;
|
|
70
|
+
root?: string;
|
|
71
|
+
input?: {
|
|
72
|
+
root?: string;
|
|
73
|
+
inner?: string;
|
|
74
|
+
};
|
|
75
|
+
iconSlot?: string;
|
|
76
|
+
dropzoneIcon?: IconProps['classNames'];
|
|
77
|
+
loader?: LoaderOvalProps['classNames'];
|
|
78
|
+
textSlot?: string;
|
|
79
|
+
title?: string;
|
|
80
|
+
subtitle?: string;
|
|
81
|
+
hint?: string;
|
|
82
|
+
};
|
|
83
|
+
direction?: 'default' | 'reverse';
|
|
84
|
+
};
|
|
85
|
+
//#endregion
|
|
86
|
+
export { DropzoneBaseProps, FileData };
|
|
87
|
+
//# sourceMappingURL=DropzoneBase.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,iBAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EAXU;;;;;EAiBV,GAAA;EAXwB;;;;;EAiBxB,QAAA,GAAW,QAAA,EAMQ;EAJnB,QAAA,YAMU;EAJV,OAAA,WAoBQ;EAlBR,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EA8BO;;;;;;;;;;;;;;EAfjB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA;EACxB,YAAA;EACA,UAAA;IACE,YAAA;IACA,IAAA;IACA,KAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneBase as i,dropzoneBaseHint as a,dropzoneBaseIcon as o,dropzoneBaseIconSlot as s,dropzoneBaseInput as c,dropzoneBaseInputInner as l,dropzoneBaseLoader as u,dropzoneBaseLoaderRoot as d,dropzoneBaseRoot as f,dropzoneBaseSubtitle as p,dropzoneBaseTextSlot as m,dropzoneBaseTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,uploader:O,autoSend:k=!0,maxSize:A,onChange:j,accept:M,title:N,subtitle:P,hint:F,inputId:I,onFileUploaded:L,classNames:R,direction:z=`default`,hideWhenFull:B=!1})=>{let V=b(null),H=b(new Map),{files:U,isUploading:W,uploadMultipleFiles:G,addFile:K,removeFile:q}=n(D,T,L,C,O),J=y(e=>{q(e),H.current.delete(e),!k&&j&&j(Array.from(H.current.values()))},[q,k,j]),Y=y(async e=>{let t=Object.keys(U).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await G(r,S);else{for(let e of r)K(e),H.current.set(e.name,e);j?.(Array.from(H.current.values()))}},[k,G,K,S,U,E,j]),X=E!==void 0&&Object.keys(U).length>=E;return v(`div`,{className:r(R?.dropzoneBase??i(),R?.root??f()),"data-direction":z,children:[(!B||!X)&&v(x,{ref:V,onDrop:Y,disabled:X,loading:W,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:R?.input?.root??r(c(),`group`),inner:R?.input?.inner??l()},children:[_(`div`,{className:R?.iconSlot??s(),children:W?_(t,{classNames:{loader:R?.loader?.loader??u(),root:R?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:R?.textSlot??m(),children:[_(`span`,{className:R?.title??h(),children:N||`Upload files`}),_(`span`,{className:R?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:R?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:U,isUploading:W,removeFile:J})]})};export{S as DropzoneBase};
|
|
2
|
+
//# sourceMappingURL=DropzoneBase.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzoneBase,\n dropzoneBaseHint,\n dropzoneBaseIcon,\n dropzoneBaseIconSlot,\n dropzoneBaseInput,\n dropzoneBaseInputInner,\n dropzoneBaseLoader,\n dropzoneBaseLoaderRoot,\n dropzoneBaseRoot,\n dropzoneBaseSubtitle,\n dropzoneBaseTextSlot,\n dropzoneBaseTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n Icon,\n type IconProps,\n LoaderOval,\n type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n Uploader,\n UploadProgress,\n UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n name: string;\n size: number;\n type: string;\n date: string;\n uploaded: boolean;\n loading: boolean;\n url: string;\n error?: string;\n progress?: number; // (0-100)\n};\n\nexport type DropzoneBaseProps = {\n children: ({\n files,\n isUploading,\n removeFile,\n }: {\n files: Record<string, FileData>;\n isUploading: boolean;\n removeFile: (fileName: string) => void;\n }) => ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n /**\n * Endpoint used by the built-in FormData uploader. Required when\n * `autoSend=true` (default) AND no custom `uploader` is provided.\n * Ignored if `uploader` is provided.\n */\n url?: string;\n /**\n * Custom upload function that replaces the built-in FormData POST.\n * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n * transport. When set, the `url` prop is ignored.\n */\n uploader?: Uploader;\n /** When false, files are added to state but not uploaded automatically. Default: true. */\n autoSend?: boolean;\n /** Maximum file size in bytes. Files exceeding this will be rejected. */\n maxSize?: number;\n /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n onChange?: (files: File[]) => void;\n data?: Record<string, unknown>;\n headers?: Record<string, string>;\n /**\n * Files the dropzone accepts. Forwarded directly to Mantine's\n * `<Dropzone accept>`.\n *\n * Two formats are supported:\n * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n * the native `react-dropzone` shape and produces a correct\n * `<input accept>` with MIME + extension pairs. Required when any\n * key would otherwise be a bare extension string.\n * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n * for backward compatibility. Mixing `.ext` strings into the\n * array triggers a `Skipped \"...\" because it is not a valid MIME\n * type` warning from `react-dropzone` v15+.\n */\n accept?: string[] | Record<string, string[]>;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\n onFileUploaded?: (file: FileData) => void;\n hideWhenFull?: boolean;\n classNames?: {\n dropzoneBase?: string;\n root?: string;\n input?: {\n root?: string;\n inner?: string;\n };\n iconSlot?: string;\n dropzoneIcon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n textSlot?: string;\n title?: string;\n subtitle?: string;\n hint?: string;\n };\n direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneBase = ({\n data,\n headers,\n children,\n initialFiles = {},\n maxFiles,\n url,\n uploader,\n autoSend = true,\n maxSize,\n onChange,\n accept,\n title,\n subtitle,\n hint,\n inputId,\n onFileUploaded,\n classNames,\n direction = 'default',\n hideWhenFull = false,\n}: DropzoneBaseProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const rawFilesRef = useRef<Map<string, File>>(new Map());\n const {\n files,\n isUploading,\n uploadMultipleFiles,\n addFile,\n removeFile: hookRemoveFile,\n } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n const removeFile = useCallback(\n (fileName: string) => {\n hookRemoveFile(fileName);\n rawFilesRef.current.delete(fileName);\n if (!autoSend && onChange) {\n onChange(Array.from(rawFilesRef.current.values()));\n }\n },\n [hookRemoveFile, autoSend, onChange],\n );\n\n const handleDrop = useCallback(\n async (acceptedFiles: File[]) => {\n const currentCount = Object.keys(files).length;\n const max = maxFiles ?? Number.POSITIVE_INFINITY;\n const remainingSlots = max - currentCount;\n if (remainingSlots <= 0) {\n return;\n }\n const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n if (autoSend) {\n await uploadMultipleFiles(filesToProcess, data);\n } else {\n for (const file of filesToProcess) {\n addFile(file);\n rawFilesRef.current.set(file.name, file);\n }\n onChange?.(Array.from(rawFilesRef.current.values()));\n }\n },\n [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n );\n\n const isFull =\n maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n return (\n <div\n className={cx(\n classNames?.dropzoneBase ?? dropzoneBase(),\n classNames?.root ?? dropzoneBaseRoot(),\n )}\n data-direction={direction}\n >\n {(!hideWhenFull || !isFull) && (\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={isFull}\n loading={isUploading}\n accept={accept}\n maxSize={maxSize}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root: classNames?.input?.root ?? cx(dropzoneBaseInput(), 'group'),\n inner: classNames?.input?.inner ?? dropzoneBaseInputInner(),\n }}\n >\n <div className={classNames?.iconSlot ?? dropzoneBaseIconSlot()}>\n {isUploading ? (\n <LoaderOval\n classNames={{\n loader: classNames?.loader?.loader ?? dropzoneBaseLoader(),\n root: classNames?.loader?.root ?? dropzoneBaseLoaderRoot(),\n }}\n />\n ) : (\n <>\n <MantineDropzone.Idle>\n <Icon\n name='mage-dropzone-upload-01'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Idle>\n <MantineDropzone.Accept>\n <Icon\n name='mage-dropzone-thumbs-up'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Accept>\n <MantineDropzone.Reject>\n <Icon\n name='mage-dropzone-thumbs-down'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Reject>\n </>\n )}\n </div>\n <div className={classNames?.textSlot ?? dropzoneBaseTextSlot()}>\n <span className={classNames?.title ?? dropzoneBaseTitle()}>\n {title || 'Upload files'}\n </span>\n <span className={classNames?.subtitle ?? dropzoneBaseSubtitle()}>\n {subtitle || 'Drag images here or click to select files'}\n </span>\n <span className={classNames?.hint ?? dropzoneBaseHint()}>\n {hint ||\n 'Attach as many files as you like, each file should not exceed 5mb'}\n </span>\n </div>\n </MantineDropzone>\n )}\n {children({ files, isUploading, removeFile })}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { DropzoneProps } from "
|
|
1
|
+
import { DropzoneProps } from "./Dropzone.mjs";
|
|
2
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
import { ReactNode } from "react";
|
|
4
4
|
|
|
5
|
-
//#region src/components/controls/dropzone
|
|
5
|
+
//#region src/components/controls/dropzone/DropzoneS3.d.ts
|
|
6
6
|
/**
|
|
7
7
|
* Body of the response returned by the init endpoint. Must at least
|
|
8
8
|
* expose a `url` to PUT the file to; may carry any number of extra
|
|
@@ -38,7 +38,7 @@ type DropzoneS3Texts = {
|
|
|
38
38
|
uploadAborted?: string; /** Error when the PUT times out. */
|
|
39
39
|
uploadTimedOut?: string;
|
|
40
40
|
};
|
|
41
|
-
type DropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> = Omit<DropzoneProps, 'uploader' | 'url' | '
|
|
41
|
+
type DropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> = Omit<DropzoneProps, 'uploader' | 'url' | 'accept' | 'title' | 'subtitle' | 'hint'> & {
|
|
42
42
|
/** All replaceable UI and error strings. Any field left unset falls back
|
|
43
43
|
* to the English default. */
|
|
44
44
|
texts?: DropzoneS3Texts;
|
|
@@ -87,12 +87,6 @@ type DropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> = Omit<DropzoneP
|
|
|
87
87
|
* stripped of its query string.
|
|
88
88
|
*/
|
|
89
89
|
resolveUploadedUrl?: (init: TInitBody, file: File) => string;
|
|
90
|
-
/**
|
|
91
|
-
* Override the default children (a list of in-flight / errored files).
|
|
92
|
-
* Use it when you need to render the progress list elsewhere in the
|
|
93
|
-
* layout or when you want a completely custom UI.
|
|
94
|
-
*/
|
|
95
|
-
children?: DropzoneProps['children'];
|
|
96
90
|
};
|
|
97
91
|
/** Lowercase extension without leading dot, or empty string. */
|
|
98
92
|
declare const getFileExtension: (filename: string) => string;
|
|
@@ -106,7 +100,6 @@ declare const DropzoneS3: <TInitBody extends S3InitBody = S3InitBody>({
|
|
|
106
100
|
getHeaders,
|
|
107
101
|
getErrorMessage,
|
|
108
102
|
resolveUploadedUrl,
|
|
109
|
-
children,
|
|
110
103
|
...dropzoneProps
|
|
111
104
|
}: DropzoneS3Props<TInitBody>) => react_jsx_runtime0.JSX.Element;
|
|
112
105
|
//#endregion
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropzoneS3.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneS3.tsx"],"mappings":";;;;;;;;AAWA;;;KAAY,UAAA;EACV,GAAA;EACA,OAAA,GAAU,MAAA;AAAA,IACR,MAAA;AAAA,KAEQ,cAAA,eAA6B,UAAA,GAAa,UAAA;EACpD,IAAA,EAAM,KAAA;AAAA;AADR;AAAA,KAKY,UAAA;EALc;;;;;EAWxB,QAAA,UAXyB;EAazB,SAAA;AAAA;;KAIU,eAAA;EAhBC,6BAkBX,KAAA,GAAQ,SAAA,EAdE;EAgBV,QAAA,GAAW,SAAA;EAEX,IAAA,GAAO,SAAA,EAVE;EAYT,UAAA,IAAc,MAAA,qBARW;EAUzB,cAAA,IAAkB,MAAA,qBARV;EAUR,YAAA,IAAgB,MAAA,UAAgB,UAAA,qBANzB;EAQP,YAAA,WARgB;EAUhB,aAAA,WAdQ;EAgBR,cAAA;AAAA;AAAA,KAeU,eAAA,mBAAkC,UAAA,GAAa,UAAA,IAAc,IAAA,CACvE,aAAA;EA5BO;;EAiCP,KAAA,GAAQ,eAAA;EA7BR;;;;;;;;;EAuCA,aAAA,GAAgB,MAAA;EAhBN;;;;;;;EAwBV,MAAA,cAAoB,MAAA,oBARJ;EAUhB,OAAA,UAEsB;EAAtB,aAAA,GAAgB,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,UAAA,KAAe,MAAA;EAAA;;;;EAKjD,QAAA;IACE,GAAA;IACA,SAAA,GACE,IAAA,EAAM,IAAA,EACN,IAAA,EAAM,SAAA,EACN,IAAA,EAAM,UAAA,KACH,MAAA;EAAA;EAkBqB;;;;EAZ5B,UAAA,SAAmB,MAAA;EA7CyB;;;;;EAmD5C,eAAA,IAAmB,GAAA,EAAK,QAAA,EAAU,QAAA,aAAqB,OAAA;EAnCvD;;;;;EAyCA,kBAAA,IAAsB,IAAA,EAAM,SAAA,EAAW,IAAA,EAAM,IAAA;AAAA;;cA+ElC,gBAAA,GAAoB,QAAA;AAAA,cAiDpB,UAAA,qBAAgC,UAAA,GAAa,UAAA;EAAY,KAAA;EAAA,aAAA;EAAA,MAAA;EAAA,OAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,eAAA;EAAA,kBAAA;EAAA,GAAA;AAAA,GAWnE,eAAA,CAAgB,SAAA,MAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Dropzone as e}from"./Dropzone.mjs";import{jsx as t}from"react/jsx-runtime";const n={initFailed:e=>`Failed to request upload URL (${e})`,registerFailed:e=>`Failed to register file (${e})`,uploadFailed:(e,t)=>`Upload failed (${e} ${t})`,networkError:`Network error during direct upload`,uploadAborted:`Upload aborted`,uploadTimedOut:`Upload timed out`},r=async(e,t)=>{try{let n=await e.clone().json();if(n.errors){let e=Object.values(n.errors)[0];if(e&&e.length>0)return e[0]}return n.body?.message??n.body?.text??n.message??t}catch{return t}},i=(e,t,n,r,i)=>new Promise((a,o)=>{let s=new XMLHttpRequest;s.upload.addEventListener(`progress`,e=>{e.lengthComputable&&r(Math.round(e.loaded/e.total*100))}),s.addEventListener(`load`,()=>{s.status>=200&&s.status<300?a():o(Error(i.uploadFailed(s.status,s.statusText)))}),s.addEventListener(`error`,()=>o(Error(i.networkError))),s.addEventListener(`abort`,()=>o(Error(i.uploadAborted))),s.addEventListener(`timeout`,()=>o(Error(i.uploadTimedOut))),s.open(`PUT`,e);for(let[e,n]of Object.entries(t)){let t=e.toLowerCase();if(!(t===`host`||t===`content-length`))try{s.setRequestHeader(e,n)}catch{}}s.send(n)}),a=e=>{let t={};if(!e)return t;for(let[n,r]of Object.entries(e))t[n]=Array.isArray(r)?r.join(`,`):String(r);return t},o=e=>{let t=e.lastIndexOf(`.`);return t>=0?e.slice(t+1).toLowerCase():``},s=e=>{if(!e)return;let t={};for(let[n,r]of Object.entries(e)){let e=`.${n}`,i=t[r];i?i.includes(e)||i.push(e):t[r]=[e]}return t},c=(e,t)=>{let n=o(e.name);if(!t)return{mimeType:e.type,extension:n};let r=Object.values(t);return e.type&&r.includes(e.type)?{mimeType:e.type,extension:n}:{mimeType:t[n]??e.type,extension:n}},l=({texts:o,acceptedTypes:l,accept:u,initUrl:d,buildInitBody:f,register:p,getHeaders:m,getErrorMessage:h=r,resolveUploadedUrl:g,..._})=>{let v=u??s(l),y={...n,...o},b=async(e,{onProgress:t})=>{let n=()=>({"Content-Type":`application/json`,Accept:`application/json`,...m?.()??{}}),r=c(e,l),o=await fetch(d,{method:`POST`,headers:n(),body:JSON.stringify(f(e,r))});if(!o.ok)throw Error(await h(o,y.initFailed(o.status)));let s=await o.json(),{url:u,headers:_}=s.body;if(await i(u,a(_),e,n=>t?.({loaded:0,total:e.size,percentage:n}),y),p){let t=await fetch(p.url,{method:`POST`,headers:n(),body:JSON.stringify(p.buildBody(e,s.body,r))});if(!t.ok)throw Error(await h(t,y.registerFailed(t.status)))}return{body:{url:g?.(s.body,e)??(typeof s.body.key==`string`?s.body.key:u.split(`?`)[0])}}};return t(e,{..._,title:o?.title,subtitle:o?.subtitle,hint:o?.hint,accept:v,uploader:b})};export{l as DropzoneS3,o as getFileExtension};
|
|
2
|
+
//# sourceMappingURL=DropzoneS3.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropzoneS3.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneS3.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Dropzone, type DropzoneProps } from './Dropzone';\nimport type { Uploader } from './upload-service';\n\n/**\n * Body of the response returned by the init endpoint. Must at least\n * expose a `url` to PUT the file to; may carry any number of extra\n * fields that the consumer forwards to the register step (e.g.\n * `document_id`, `key`).\n */\nexport type S3InitBody = {\n url: string;\n headers?: Record<string, string | string[]>;\n} & Record<string, unknown>;\n\nexport type S3InitResponse<TBody extends S3InitBody = S3InitBody> = {\n body: TBody;\n};\n\n/** Metadata derived from the file that body builders frequently need. */\nexport type S3FileMeta = {\n /**\n * Best-effort MIME type. When `acceptedTypes` is provided and the\n * browser-reported `file.type` is empty or unknown, this falls back to\n * the MIME mapped from the file extension.\n */\n mimeType: string;\n /** Lowercase file extension without the leading dot. */\n extension: string;\n};\n\n/** All replaceable UI and error strings surfaced by DropzoneS3. */\nexport type DropzoneS3Texts = {\n /** Main dropzone heading. */\n title?: ReactNode;\n /** Secondary dropzone text. */\n subtitle?: ReactNode;\n /** Small helper text below the subtitle. */\n hint?: ReactNode;\n /** Fallback shown when the init request fails without a parseable body. */\n initFailed?: (status: number) => string;\n /** Fallback shown when the register request fails without a parseable body. */\n registerFailed?: (status: number) => string;\n /** Error when the S3 PUT returns a non-2xx status. */\n uploadFailed?: (status: number, statusText: string) => string;\n /** Error when the network fails during the PUT. */\n networkError?: string;\n /** Error when the PUT is aborted. */\n uploadAborted?: string;\n /** Error when the PUT times out. */\n uploadTimedOut?: string;\n};\n\nconst DEFAULT_TEXTS = {\n initFailed: (status: number): string =>\n `Failed to request upload URL (${status})`,\n registerFailed: (status: number): string =>\n `Failed to register file (${status})`,\n uploadFailed: (status: number, statusText: string): string =>\n `Upload failed (${status} ${statusText})`,\n networkError: 'Network error during direct upload',\n uploadAborted: 'Upload aborted',\n uploadTimedOut: 'Upload timed out',\n} as const;\n\nexport type DropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> = Omit<\n DropzoneProps,\n 'uploader' | 'url' | 'accept' | 'title' | 'subtitle' | 'hint'\n> & {\n /** All replaceable UI and error strings. Any field left unset falls back\n * to the English default. */\n texts?: DropzoneS3Texts;\n /**\n * Map of file extension → MIME type. When provided, DropzoneS3\n * automatically computes the `accept` map (MIME → ['.ext']) used by\n * the underlying Mantine / react-dropzone, and uses it to resolve\n * `meta.mimeType` per file (covering browsers that report an empty\n * `file.type` for some Office formats).\n *\n * Ignored when `accept` is passed explicitly.\n */\n acceptedTypes?: Record<string, string>;\n /**\n * Explicit accept list forwarded to the underlying Mantine dropzone.\n * Takes precedence over `acceptedTypes`. Prefer the map shape\n * `{ [mimeType]: ['.ext', ...] }` — passing a `.ext` entry inside a\n * plain `string[]` triggers a \"Skipped … not a valid MIME type\"\n * warning in react-dropzone v15+.\n */\n accept?: string[] | Record<string, string[]>;\n /** POST endpoint that returns `{ body: { url, headers?, ...extras } }`. */\n initUrl: string;\n /** Build the init request JSON body from the file and resolved meta. */\n buildInitBody: (file: File, meta: S3FileMeta) => Record<string, unknown>;\n /**\n * Optional post-upload registration step. When set, a POST is sent to\n * `register.url` with the body produced by `register.buildBody`.\n */\n register?: {\n url: string;\n buildBody: (\n file: File,\n init: TInitBody,\n meta: S3FileMeta,\n ) => Record<string, unknown>;\n };\n /**\n * Called on every outbound request (init, register). Use it to supply\n * auth/CSRF headers that may rotate during the session.\n */\n getHeaders?: () => Record<string, string>;\n /**\n * Customize how an error response is turned into a human-readable\n * message. Defaults to common Laravel-style error shapes\n * (`errors`, `body.message`, `message`).\n */\n getErrorMessage?: (res: Response, fallback: string) => Promise<string>;\n /**\n * URL stored in `FileData.url` after a successful upload. Defaults to\n * `init.body.key` when present, falling back to the presigned URL\n * stripped of its query string.\n */\n resolveUploadedUrl?: (init: TInitBody, file: File) => string;\n};\n\nconst defaultGetErrorMessage = async (\n res: Response,\n fallback: string,\n): Promise<string> => {\n try {\n const data = (await res.clone().json()) as {\n message?: string;\n body?: { message?: string; text?: string };\n errors?: Record<string, string[]>;\n };\n if (data.errors) {\n const first = Object.values(data.errors)[0];\n if (first && first.length > 0) return first[0];\n }\n return data.body?.message ?? data.body?.text ?? data.message ?? fallback;\n } catch {\n return fallback;\n }\n};\n\ntype PutTexts = {\n uploadFailed: (status: number, statusText: string) => string;\n networkError: string;\n uploadAborted: string;\n uploadTimedOut: string;\n};\n\nconst putWithProgress = (\n url: string,\n headers: Record<string, string>,\n file: File,\n onProgress: (percentage: number) => void,\n texts: PutTexts,\n): Promise<void> => {\n return new Promise((resolve, reject) => {\n const xhr = new XMLHttpRequest();\n xhr.upload.addEventListener('progress', (e) => {\n if (e.lengthComputable) {\n onProgress(Math.round((e.loaded / e.total) * 100));\n }\n });\n xhr.addEventListener('load', () => {\n if (xhr.status >= 200 && xhr.status < 300) resolve();\n else reject(new Error(texts.uploadFailed(xhr.status, xhr.statusText)));\n });\n xhr.addEventListener('error', () => reject(new Error(texts.networkError)));\n xhr.addEventListener('abort', () => reject(new Error(texts.uploadAborted)));\n xhr.addEventListener('timeout', () =>\n reject(new Error(texts.uploadTimedOut)),\n );\n xhr.open('PUT', url);\n for (const [k, v] of Object.entries(headers)) {\n const lk = k.toLowerCase();\n if (lk === 'host' || lk === 'content-length') continue;\n try {\n xhr.setRequestHeader(k, v);\n } catch {\n // Some headers are blocked by the browser — skip silently.\n }\n }\n xhr.send(file);\n });\n};\n\nconst flattenHeaders = (\n headers: Record<string, string | string[]> | undefined,\n): Record<string, string> => {\n const out: Record<string, string> = {};\n if (!headers) return out;\n for (const [k, v] of Object.entries(headers)) {\n out[k] = Array.isArray(v) ? v.join(',') : String(v);\n }\n return out;\n};\n\n/** Lowercase extension without leading dot, or empty string. */\nexport const getFileExtension = (filename: string): string => {\n const dot = filename.lastIndexOf('.');\n return dot >= 0 ? filename.slice(dot + 1).toLowerCase() : '';\n};\n\n/**\n * Build the `accept` map in the shape react-dropzone v15+ expects:\n * `{ [mimeType]: ['.ext', ...] }`. Multiple extensions that share a\n * MIME type (e.g. xls + xlsx in some legacy mappings) are grouped\n * under the same key.\n *\n * The previous flat-array shape (`[...mimes, ...'.exts']`) caused\n * react-dropzone to log `Skipped \".xlsx\" because it is not a valid\n * MIME type` and dropped the extension from the `<input accept>`\n * attribute, breaking selection on browsers that report an empty\n * `file.type` for Office formats.\n */\nconst buildAcceptMap = (\n acceptedTypes: Record<string, string> | undefined,\n): Record<string, string[]> | undefined => {\n if (!acceptedTypes) return undefined;\n const map: Record<string, string[]> = {};\n for (const [ext, mime] of Object.entries(acceptedTypes)) {\n const dotted = `.${ext}`;\n const list = map[mime];\n if (list) {\n if (!list.includes(dotted)) list.push(dotted);\n } else {\n map[mime] = [dotted];\n }\n }\n return map;\n};\n\nconst resolveMeta = (\n file: File,\n acceptedTypes: Record<string, string> | undefined,\n): S3FileMeta => {\n const extension = getFileExtension(file.name);\n if (!acceptedTypes) {\n return { mimeType: file.type, extension };\n }\n const mimeList = Object.values(acceptedTypes);\n if (file.type && mimeList.includes(file.type)) {\n return { mimeType: file.type, extension };\n }\n return { mimeType: acceptedTypes[extension] ?? file.type, extension };\n};\n\nexport const DropzoneS3 = <TInitBody extends S3InitBody = S3InitBody>({\n texts,\n acceptedTypes,\n accept,\n initUrl,\n buildInitBody,\n register,\n getHeaders,\n getErrorMessage = defaultGetErrorMessage,\n resolveUploadedUrl,\n ...dropzoneProps\n}: DropzoneS3Props<TInitBody>) => {\n const acceptList = accept ?? buildAcceptMap(acceptedTypes);\n const t = { ...DEFAULT_TEXTS, ...texts };\n\n const uploader: Uploader = async (file, { onProgress }) => {\n const jsonHeaders = (): Record<string, string> => ({\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n ...(getHeaders?.() ?? {}),\n });\n const meta = resolveMeta(file, acceptedTypes);\n\n // 1. init — request a presigned URL.\n const initRes = await fetch(initUrl, {\n method: 'POST',\n headers: jsonHeaders(),\n body: JSON.stringify(buildInitBody(file, meta)),\n });\n if (!initRes.ok) {\n throw new Error(\n await getErrorMessage(initRes, t.initFailed(initRes.status)),\n );\n }\n const init = (await initRes.json()) as S3InitResponse<TInitBody>;\n const { url, headers: s3Headers } = init.body;\n\n // 2. direct upload to S3.\n await putWithProgress(\n url,\n flattenHeaders(s3Headers),\n file,\n (p) => onProgress?.({ loaded: 0, total: file.size, percentage: p }),\n t,\n );\n\n // 3. register (optional) — persist metadata on the app backend.\n if (register) {\n const regRes = await fetch(register.url, {\n method: 'POST',\n headers: jsonHeaders(),\n body: JSON.stringify(register.buildBody(file, init.body, meta)),\n });\n if (!regRes.ok) {\n throw new Error(\n await getErrorMessage(regRes, t.registerFailed(regRes.status)),\n );\n }\n }\n\n const storedUrl =\n resolveUploadedUrl?.(init.body, file) ??\n (typeof init.body.key === 'string' ? init.body.key : url.split('?')[0]);\n return { body: { url: storedUrl } };\n };\n\n return (\n <Dropzone\n {...dropzoneProps}\n title={texts?.title}\n subtitle={texts?.subtitle}\n hint={texts?.hint}\n accept={acceptList}\n uploader={uploader}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-dropzone-state.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/use-dropzone-state.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport type { FileData } from './
|
|
1
|
+
{"version":3,"file":"use-dropzone-state.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/use-dropzone-state.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport type { FileData } from './DropzoneBase';\nimport {\n type Uploader,\n type UploadProgress,\n uploadFile,\n} from './upload-service';\n\nexport const useDropzoneState = (\n url: string | undefined,\n initialFiles: Record<string, FileData> | FileData | null | undefined = {},\n onFileUploaded?: (file: FileData) => void,\n headers?: Record<string, string>,\n uploader?: Uploader,\n) => {\n const normalizeInitialFiles = (): Record<string, FileData> => {\n if (!initialFiles) return {};\n\n if (typeof initialFiles === 'object' && !('name' in initialFiles)) {\n return initialFiles;\n }\n\n if (typeof initialFiles === 'object' && 'name' in initialFiles) {\n const fileData = initialFiles as FileData;\n return {\n [fileData.name]: {\n name: fileData.name,\n size: fileData.size,\n type: fileData.type,\n date: fileData.date,\n uploaded: fileData.uploaded ?? true,\n loading: fileData.loading ?? false,\n url: fileData.url,\n error: fileData.error,\n progress: fileData.progress,\n },\n };\n }\n\n return {};\n };\n\n const [files, setFiles] = useState<Record<string, FileData>>(\n normalizeInitialFiles(),\n );\n const [isUploading, setIsUploading] = useState(false);\n const uploadQueue = useRef<Set<string>>(new Set());\n\n const addFile = useCallback((file: File, date?: string) => {\n const fileData: FileData = {\n name: file.name,\n size: file.size,\n type: file.type,\n url: '',\n uploaded: false,\n loading: false,\n progress: 0,\n date:\n date ??\n new Date().toLocaleString('es-ES', {\n timeZone: 'Europe/Madrid',\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n }),\n };\n\n setFiles((prev) => ({\n ...prev,\n [file.name]: fileData,\n }));\n\n return file.name;\n }, []);\n\n const updateFileProgress = useCallback(\n (fileName: string, progress: number) => {\n setFiles((prev) => ({\n ...prev,\n [fileName]: {\n ...prev[fileName],\n progress,\n loading: progress < 100,\n },\n }));\n },\n [],\n );\n\n const markFileAsUploaded = useCallback((fileName: string, url: string) => {\n setFiles((prev) => ({\n ...prev,\n [fileName]: {\n ...prev[fileName],\n uploaded: true,\n loading: false,\n progress: 100,\n url,\n },\n }));\n }, []);\n\n const markFileAsError = useCallback((fileName: string, error: string) => {\n setFiles((prev) => ({\n ...prev,\n [fileName]: {\n ...prev[fileName],\n uploaded: false,\n loading: false,\n progress: 0,\n error,\n },\n }));\n }, []);\n\n const removeFile = useCallback((fileName: string) => {\n setFiles((prev) => {\n const newFiles = { ...prev };\n delete newFiles[fileName];\n return newFiles;\n });\n uploadQueue.current.delete(fileName);\n }, []);\n\n const clearFiles = useCallback(() => {\n setFiles({});\n uploadQueue.current.clear();\n }, []);\n\n const isFileUploading = useCallback((fileName: string) => {\n return uploadQueue.current.has(fileName);\n }, []);\n\n const addToUploadQueue = useCallback((fileName: string) => {\n uploadQueue.current.add(fileName);\n }, []);\n\n const removeFromUploadQueue = useCallback((fileName: string) => {\n uploadQueue.current.delete(fileName);\n }, []);\n\n const uploadFileToServer = useCallback(\n async (file: File, data?: Record<string, unknown>) => {\n const date = new Date().toLocaleString('es-ES', {\n timeZone: 'Europe/Madrid',\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n });\n const fileName = addFile(file, date);\n addToUploadQueue(fileName);\n\n try {\n const onProgress = (progress: UploadProgress) => {\n updateFileProgress(fileName, progress.percentage);\n };\n const { body } = uploader\n ? await uploader(file, { data, onProgress, headers })\n : await uploadFile(url ?? '', file, data, onProgress, headers);\n\n markFileAsUploaded(fileName, body.url);\n onFileUploaded?.({\n name: file.name,\n size: file.size,\n type: file.type,\n date,\n uploaded: true,\n loading: false,\n progress: 100,\n url: body.url,\n });\n } catch (error) {\n console.error('Error al subir archivo:', error);\n markFileAsError(\n fileName,\n error instanceof Error ? error.message : 'Error desconocido',\n );\n } finally {\n removeFromUploadQueue(fileName);\n }\n },\n [\n addFile,\n addToUploadQueue,\n updateFileProgress,\n markFileAsUploaded,\n markFileAsError,\n removeFromUploadQueue,\n onFileUploaded,\n url,\n headers,\n uploader,\n ],\n );\n\n const uploadMultipleFiles = useCallback(\n async (acceptedFiles: File[], data?: Record<string, unknown>) => {\n if (isUploading) {\n console.warn('Ya hay una subida en progreso');\n return;\n }\n\n setIsUploading(true);\n\n try {\n for (const file of acceptedFiles) {\n await uploadFileToServer(file, data);\n }\n } finally {\n setIsUploading(false);\n }\n },\n [isUploading, setIsUploading, uploadFileToServer],\n );\n\n return {\n files,\n isUploading,\n setIsUploading,\n addFile,\n updateFileProgress,\n markFileAsUploaded,\n markFileAsError,\n removeFile,\n clearFiles,\n isFileUploading,\n addToUploadQueue,\n removeFromUploadQueue,\n uploadFileToServer,\n uploadMultipleFiles,\n };\n};\n"],"mappings":"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"}
|
|
@@ -6,10 +6,9 @@ import { TextInput, TextInputProps } from "./text-input/TextInput.mjs";
|
|
|
6
6
|
import { Combobox, ComboboxProps } from "./dropdown/combobox/Combobox.mjs";
|
|
7
7
|
import { Autocomplete, AutocompleteProps } from "./dropdown/autocomplete/Autocomplete.mjs";
|
|
8
8
|
import { Select, SelectProps } from "./dropdown/select/Select.mjs";
|
|
9
|
-
import {
|
|
10
|
-
import { Dropzone, DropzoneProps
|
|
11
|
-
import { DropzoneS3, DropzoneS3Props, DropzoneS3Texts, S3FileMeta, S3InitBody, S3InitResponse, getFileExtension } from "./dropzone
|
|
12
|
-
import { DropzoneFiles, DropzoneFilesProps } from "./dropzone-files/DropzoneFiles.mjs";
|
|
9
|
+
import { FileData } from "./dropzone/DropzoneBase.mjs";
|
|
10
|
+
import { Dropzone, DropzoneProps } from "./dropzone/Dropzone.mjs";
|
|
11
|
+
import { DropzoneS3, DropzoneS3Props, DropzoneS3Texts, S3FileMeta, S3InitBody, S3InitResponse, getFileExtension } from "./dropzone/DropzoneS3.mjs";
|
|
13
12
|
import { FileInput, FileInputProps } from "./file-input/FileInput.mjs";
|
|
14
13
|
import { FileInputMultiple, FileInputMultipleProps } from "./file-input/FileInputMultiple.mjs";
|
|
15
14
|
import { PasswordInput, PasswordInputProps } from "./password-input/PasswordInput.mjs";
|
|
@@ -38,4 +38,5 @@ import { Tag, TagProps } from "./tag/Tag.mjs";
|
|
|
38
38
|
import { TagGroup, TagGroupProps } from "./tag-group/TagGroup.mjs";
|
|
39
39
|
import { UploadedFile, UploadedFileProps } from "./uploaded-file/UploadedFile.mjs";
|
|
40
40
|
import { UploadedFileDetails, UploadedFileDetailsProps } from "./uploaded-file/UploadedFileDetails.mjs";
|
|
41
|
+
import { UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps } from "./uploaded-files/UploadedFiles.mjs";
|
|
41
42
|
import { UploadingFiles, UploadingFilesClassNames, UploadingFilesItemClassNames, UploadingFilesItemErrorClassNames, UploadingFilesItemErrorProps, UploadingFilesItemProps, UploadingFilesProps } from "./uploading-files/UploadingFiles.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.mjs","names":[],"sources":["../../../../src/components/data-display/uploaded-file/UploadedFile.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n uploadedFile,\n uploadedFileButtonIcon,\n uploadedFileButtonIconIcon,\n uploadedFileButtonIconIconRaw,\n uploadedFileButtonIconIconRawRoot,\n uploadedFileButtonIconRoot,\n uploadedFileContent,\n uploadedFileDetails,\n uploadedFileFileIcon,\n uploadedFileFileIconIcon,\n uploadedFileFileIconIconIconRaw,\n uploadedFileFileIconIconIconRawRoot,\n uploadedFileFileIconIconRoot,\n uploadedFileFileIconIconWrapped,\n uploadedFileFileIconIconWrappedRoot,\n uploadedFileLink,\n uploadedFileName,\n uploadedFileRoot,\n uploadedFileSection,\n} from '@mage-ui/styled-system/recipes';\nimport {\n RemovableItem,\n type RemovableItemProps,\n} from '@/components/data-display';\n\nimport { FileIcon, type FileIconProps } from '../file-icon/FileIcon';\n\nexport type UploadedFileProps = {\n clearButtonLabel?: string;\n fileName?: ReactNode;\n fileType?: string;\n url?: string;\n children: ReactNode;\n onRemove: () => void;\n classNames?: {\n uploadedFile?: string;\n root?: string;\n section?: string;\n content?: string;\n details?: string;\n fileLink?: string;\n fileName?: string;\n fileIcon?: FileIconProps['classNames'];\n removableItem?: RemovableItemProps['classNames'];\n buttonIcon?: NonNullable<RemovableItemProps['classNames']>['buttonIcon'];\n };\n};\n\nexport const UploadedFile = ({\n clearButtonLabel = 'Remove file',\n fileName,\n fileType,\n url,\n children,\n onRemove,\n classNames,\n}: UploadedFileProps) => {\n return (\n <RemovableItem\n startSlot={\n <FileIcon\n fileType={fileType}\n fileName={typeof fileName === 'string' ? fileName : undefined}\n classNames={{\n fileIcon: classNames?.fileIcon?.fileIcon ?? uploadedFileFileIcon(),\n iconWrapped: {\n iconWrapped:\n classNames?.fileIcon?.iconWrapped?.iconWrapped ??\n uploadedFileFileIconIconWrapped(),\n root:\n classNames?.fileIcon?.iconWrapped?.root ??\n uploadedFileFileIconIconWrappedRoot(),\n },\n icon: {\n icon:\n classNames?.fileIcon?.icon?.icon ?? uploadedFileFileIconIcon(),\n root:\n classNames?.fileIcon?.icon?.root ??\n uploadedFileFileIconIconRoot(),\n iconRaw: {\n iconRaw:\n classNames?.fileIcon?.icon?.iconRaw?.iconRaw ??\n uploadedFileFileIconIconIconRaw(),\n root:\n classNames?.fileIcon?.icon?.iconRaw?.root ??\n uploadedFileFileIconIconIconRawRoot(),\n },\n },\n }}\n />\n }\n onRemove={onRemove}\n removeButtonLabel={clearButtonLabel}\n classNames={{\n removableItem: classNames?.uploadedFile ?? uploadedFile(),\n root: classNames?.root ?? uploadedFileRoot(),\n section: classNames?.section ?? uploadedFileSection(),\n content: classNames?.content ?? uploadedFileContent(),\n buttonIcon: {\n buttonIcon:\n classNames?.buttonIcon?.buttonIcon ?? uploadedFileButtonIcon(),\n root: classNames?.buttonIcon?.root ?? uploadedFileButtonIconRoot(),\n icon: classNames?.buttonIcon?.icon ?? uploadedFileButtonIconIcon(),\n iconRaw: {\n iconRaw:\n classNames?.buttonIcon?.iconRaw?.iconRaw ??\n uploadedFileButtonIconIconRaw(),\n root:\n classNames?.buttonIcon?.iconRaw?.root ??\n uploadedFileButtonIconIconRawRoot(),\n },\n },\n }}\n >\n {
|
|
1
|
+
{"version":3,"file":"UploadedFile.mjs","names":[],"sources":["../../../../src/components/data-display/uploaded-file/UploadedFile.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n uploadedFile,\n uploadedFileButtonIcon,\n uploadedFileButtonIconIcon,\n uploadedFileButtonIconIconRaw,\n uploadedFileButtonIconIconRawRoot,\n uploadedFileButtonIconRoot,\n uploadedFileContent,\n uploadedFileDetails,\n uploadedFileFileIcon,\n uploadedFileFileIconIcon,\n uploadedFileFileIconIconIconRaw,\n uploadedFileFileIconIconIconRawRoot,\n uploadedFileFileIconIconRoot,\n uploadedFileFileIconIconWrapped,\n uploadedFileFileIconIconWrappedRoot,\n uploadedFileLink,\n uploadedFileName,\n uploadedFileRoot,\n uploadedFileSection,\n} from '@mage-ui/styled-system/recipes';\nimport {\n RemovableItem,\n type RemovableItemProps,\n} from '@/components/data-display';\n\nimport { FileIcon, type FileIconProps } from '../file-icon/FileIcon';\n\nexport type UploadedFileProps = {\n clearButtonLabel?: string;\n fileName?: ReactNode;\n fileType?: string;\n url?: string;\n children: ReactNode;\n onRemove: () => void;\n classNames?: {\n uploadedFile?: string;\n root?: string;\n section?: string;\n content?: string;\n details?: string;\n fileLink?: string;\n fileName?: string;\n fileIcon?: FileIconProps['classNames'];\n removableItem?: RemovableItemProps['classNames'];\n buttonIcon?: NonNullable<RemovableItemProps['classNames']>['buttonIcon'];\n };\n};\n\nexport const UploadedFile = ({\n clearButtonLabel = 'Remove file',\n fileName,\n fileType,\n url,\n children,\n onRemove,\n classNames,\n}: UploadedFileProps) => {\n return (\n <RemovableItem\n startSlot={\n <FileIcon\n fileType={fileType}\n fileName={typeof fileName === 'string' ? fileName : undefined}\n classNames={{\n fileIcon: classNames?.fileIcon?.fileIcon ?? uploadedFileFileIcon(),\n iconWrapped: {\n iconWrapped:\n classNames?.fileIcon?.iconWrapped?.iconWrapped ??\n uploadedFileFileIconIconWrapped(),\n root:\n classNames?.fileIcon?.iconWrapped?.root ??\n uploadedFileFileIconIconWrappedRoot(),\n },\n icon: {\n icon:\n classNames?.fileIcon?.icon?.icon ?? uploadedFileFileIconIcon(),\n root:\n classNames?.fileIcon?.icon?.root ??\n uploadedFileFileIconIconRoot(),\n iconRaw: {\n iconRaw:\n classNames?.fileIcon?.icon?.iconRaw?.iconRaw ??\n uploadedFileFileIconIconIconRaw(),\n root:\n classNames?.fileIcon?.icon?.iconRaw?.root ??\n uploadedFileFileIconIconIconRawRoot(),\n },\n },\n }}\n />\n }\n onRemove={onRemove}\n removeButtonLabel={clearButtonLabel}\n classNames={{\n removableItem: classNames?.uploadedFile ?? uploadedFile(),\n root: classNames?.root ?? uploadedFileRoot(),\n section: classNames?.section ?? uploadedFileSection(),\n content: classNames?.content ?? uploadedFileContent(),\n buttonIcon: {\n buttonIcon:\n classNames?.buttonIcon?.buttonIcon ?? uploadedFileButtonIcon(),\n root: classNames?.buttonIcon?.root ?? uploadedFileButtonIconRoot(),\n icon: classNames?.buttonIcon?.icon ?? uploadedFileButtonIconIcon(),\n iconRaw: {\n iconRaw:\n classNames?.buttonIcon?.iconRaw?.iconRaw ??\n uploadedFileButtonIconIconRaw(),\n root:\n classNames?.buttonIcon?.iconRaw?.root ??\n uploadedFileButtonIconIconRawRoot(),\n },\n },\n }}\n >\n {url ? (\n <a\n href={url}\n target='_blank'\n rel='noopener noreferrer'\n download\n className={classNames?.fileLink ?? uploadedFileLink()}\n >\n {fileName}\n </a>\n ) : (\n <span className={classNames?.fileName ?? uploadedFileName()}>\n {fileName}\n </span>\n )}\n\n <div className={classNames?.details ?? uploadedFileDetails()}>\n {children}\n </div>\n </RemovableItem>\n );\n};\n"],"mappings":"kxBAmDA,MAAa,GAAgB,CAC3B,mBAAmB,cACnB,WACA,WACA,MACA,WACA,WACA,gBAGE,EAAC,EAAD,CACE,UACE,EAAC,EAAD,CACY,WACV,SAAU,OAAO,GAAa,SAAW,EAAW,IAAA,GACpD,WAAY,CACV,SAAU,GAAY,UAAU,UAAY,GAAsB,CAClE,YAAa,CACX,YACE,GAAY,UAAU,aAAa,aACnC,GAAiC,CACnC,KACE,GAAY,UAAU,aAAa,MACnC,GAAqC,CACxC,CACD,KAAM,CACJ,KACE,GAAY,UAAU,MAAM,MAAQ,GAA0B,CAChE,KACE,GAAY,UAAU,MAAM,MAC5B,GAA8B,CAChC,QAAS,CACP,QACE,GAAY,UAAU,MAAM,SAAS,SACrC,GAAiC,CACnC,KACE,GAAY,UAAU,MAAM,SAAS,MACrC,GAAqC,CACxC,CACF,CACF,CACD,CAAA,CAEM,WACV,kBAAmB,EACnB,WAAY,CACV,cAAe,GAAY,cAAgB,GAAc,CACzD,KAAM,GAAY,MAAQ,GAAkB,CAC5C,QAAS,GAAY,SAAW,GAAqB,CACrD,QAAS,GAAY,SAAW,GAAqB,CACrD,WAAY,CACV,WACE,GAAY,YAAY,YAAc,GAAwB,CAChE,KAAM,GAAY,YAAY,MAAQ,GAA4B,CAClE,KAAM,GAAY,YAAY,MAAQ,GAA4B,CAClE,QAAS,CACP,QACE,GAAY,YAAY,SAAS,SACjC,GAA+B,CACjC,KACE,GAAY,YAAY,SAAS,MACjC,GAAmC,CACtC,CACF,CACF,UAtDH,CAwDG,EACC,EAAC,IAAD,CACE,KAAM,EACN,OAAO,SACP,IAAI,sBACJ,SAAA,GACA,UAAW,GAAY,UAAY,GAAkB,UAEpD,EACC,CAAA,CAEJ,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAkB,UACxD,EACI,CAAA,CAGT,EAAC,MAAD,CAAK,UAAW,GAAY,SAAW,GAAqB,CACzD,WACG,CAAA,CACQ"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { UploadedFileProps } from "../uploaded-file/UploadedFile.mjs";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/data-display/uploaded-files/UploadedFiles.d.ts
|
|
5
|
+
type UploadedFilesClassNames = {
|
|
6
|
+
uploadedFiles?: string;
|
|
7
|
+
root?: string;
|
|
8
|
+
};
|
|
9
|
+
type UploadedFilesProps = {
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
classNames?: UploadedFilesClassNames;
|
|
12
|
+
};
|
|
13
|
+
type UploadedFilesItemClassNames = {
|
|
14
|
+
listItem?: string;
|
|
15
|
+
uploadedFile?: UploadedFileProps['classNames'];
|
|
16
|
+
};
|
|
17
|
+
type UploadedFilesItemProps = {
|
|
18
|
+
fileName: string;
|
|
19
|
+
fileType: string;
|
|
20
|
+
fileSize: string;
|
|
21
|
+
fileDate: string;
|
|
22
|
+
url: string;
|
|
23
|
+
onRemove: () => void;
|
|
24
|
+
classNames?: UploadedFilesItemClassNames;
|
|
25
|
+
};
|
|
26
|
+
declare const UploadedFiles: (({
|
|
27
|
+
children,
|
|
28
|
+
classNames
|
|
29
|
+
}: UploadedFilesProps) => ReactNode) & {
|
|
30
|
+
Item: ({
|
|
31
|
+
fileName,
|
|
32
|
+
fileType,
|
|
33
|
+
fileSize,
|
|
34
|
+
fileDate,
|
|
35
|
+
url,
|
|
36
|
+
onRemove,
|
|
37
|
+
classNames
|
|
38
|
+
}: UploadedFilesItemProps) => ReactNode;
|
|
39
|
+
};
|
|
40
|
+
//#endregion
|
|
41
|
+
export { UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps };
|
|
42
|
+
//# sourceMappingURL=UploadedFiles.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadedFiles.d.mts","names":[],"sources":["../../../../src/components/data-display/uploaded-files/UploadedFiles.tsx"],"mappings":";;;;KAgBY,uBAAA;EACV,aAAA;EACA,IAAA;AAAA;AAAA,KAGU,kBAAA;EACV,QAAA,EAAU,SAAA;EACV,UAAA,GAAa,uBAAA;AAAA;AAAA,KAGH,2BAAA;EACV,QAAA;EACA,YAAA,GAAe,iBAAA;AAAA;AAAA,KAGL,sBAAA;EACV,QAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA;EACA,GAAA;EACA,QAAA;EACA,UAAA,GAAa,2BAAA;AAAA;AAAA,cA8CF,aAAA;EAAa,QAAA;EAAA;AAAA,GAxCvB,kBAAA,KAAqB,SAAA;;;;;;;;;KAmBrB,sBAAA,KAAyB,SAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{UploadedFile as e}from"../uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as t}from"../uploaded-file/UploadedFileDetails.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{uploadedFiles as r,uploadedFilesListItem as i,uploadedFilesRoot as a,uploadedFilesUploadedFile as o}from"@mage-ui/styled-system/recipes";import{jsx as s}from"react/jsx-runtime";const c=Object.assign(({children:e,classNames:t})=>s(`ul`,{className:n(t?.uploadedFiles??r(),t?.root??a()),children:e}),{Item:({fileName:n,fileType:r,fileSize:a,fileDate:c,url:l,onRemove:u,classNames:d})=>s(`li`,{className:d?.listItem??i(),children:s(e,{fileName:n,fileType:r,url:l,onRemove:u,classNames:{uploadedFile:d?.uploadedFile?.uploadedFile??o()},children:s(t,{fileSize:a,fileDate:c,fileType:r})})})});export{c as UploadedFiles};
|
|
2
|
+
//# sourceMappingURL=UploadedFiles.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadedFiles.mjs","names":[],"sources":["../../../../src/components/data-display/uploaded-files/UploadedFiles.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n uploadedFiles,\n uploadedFilesListItem,\n uploadedFilesRoot,\n uploadedFilesUploadedFile,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n UploadedFile,\n type UploadedFileProps,\n} from '../uploaded-file/UploadedFile';\nimport { UploadedFileDetails } from '../uploaded-file/UploadedFileDetails';\n\nexport type UploadedFilesClassNames = {\n uploadedFiles?: string;\n root?: string;\n};\n\nexport type UploadedFilesProps = {\n children: ReactNode;\n classNames?: UploadedFilesClassNames;\n};\n\nexport type UploadedFilesItemClassNames = {\n listItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n};\n\nexport type UploadedFilesItemProps = {\n fileName: string;\n fileType: string;\n fileSize: string;\n fileDate: string;\n url: string;\n onRemove: () => void;\n classNames?: UploadedFilesItemClassNames;\n};\n\nconst UploadedFilesRoot = ({\n children,\n classNames,\n}: UploadedFilesProps): ReactNode => (\n <ul\n className={cx(\n classNames?.uploadedFiles ?? uploadedFiles(),\n classNames?.root ?? uploadedFilesRoot(),\n )}\n >\n {children}\n </ul>\n);\n\nconst Item = ({\n fileName,\n fileType,\n fileSize,\n fileDate,\n url,\n onRemove,\n classNames,\n}: UploadedFilesItemProps): ReactNode => (\n <li className={classNames?.listItem ?? uploadedFilesListItem()}>\n <UploadedFile\n fileName={fileName}\n fileType={fileType}\n url={url}\n onRemove={onRemove}\n classNames={{\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ?? uploadedFilesUploadedFile(),\n }}\n >\n <UploadedFileDetails\n fileSize={fileSize}\n fileDate={fileDate}\n fileType={fileType}\n />\n </UploadedFile>\n </li>\n);\n\nexport const UploadedFiles = Object.assign(UploadedFilesRoot, {\n Item,\n});\n"],"mappings":"wXAoFA,MAAa,EAAgB,OAAO,QA3CT,CACzB,WACA,gBAEA,EAAC,KAAD,CACE,UAAW,EACT,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,CAEA,WACE,CAAA,CAgCuD,CAC5D,MA9BY,CACZ,WACA,WACA,WACA,WACA,MACA,WACA,gBAEA,EAAC,KAAD,CAAI,UAAW,GAAY,UAAY,GAAuB,UAC5D,EAAC,EAAD,CACY,WACA,WACL,MACK,WACV,WAAY,CACV,aACE,GAAY,cAAc,cAAgB,GAA2B,CACxE,UAED,EAAC,EAAD,CACY,WACA,WACA,WACV,CAAA,CACW,CAAA,CACZ,CAAA,CAKN,CAAC"}
|