@mage-ui/components 1.0.140 → 1.0.141
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.mjs +1 -1
- package/dist/components/controls/dropzone/Dropzone.mjs.map +1 -1
- package/dist/components/controls/dropzone/DropzoneBase.d.mts +2 -1
- package/dist/components/controls/dropzone/DropzoneBase.d.mts.map +1 -1
- package/dist/components/controls/dropzone/DropzoneBase.mjs +1 -1
- package/dist/components/controls/dropzone/DropzoneBase.mjs.map +1 -1
- package/dist/components/controls/dropzone/use-dropzone-state.mjs +1 -1
- package/dist/components/controls/dropzone/use-dropzone-state.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
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,isUploading:n,removeFile:r})=>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:()=>r(t.
|
|
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,isUploading:n,removeFile:r})=>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:()=>r(t.id),classNames:{listItem:x?.uploadedFilesListItem??f(),uploadedFile:{...x?.uploadedFile,uploadedFile:x?.uploadedFile?.uploadedFile??u()}}},t.id))}):null:typeof g==`function`?g({files:t,isUploading:n,removeFile:r}):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":[],"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 | DropzoneBaseProps['children'];\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, isUploading, removeFile }) => {\n if (children !== undefined) {\n return typeof children === 'function'\n ? children({ files, isUploading, removeFile })\n : 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.
|
|
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 | DropzoneBaseProps['children'];\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, isUploading, removeFile }) => {\n if (children !== undefined) {\n return typeof children === 'function'\n ? children({ files, isUploading, removeFile })\n : 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.id}\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.id)}\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,cAAa,gBAClB,IAAa,IAAA,GAKV,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,GAAG,CACnC,WAAY,CACV,SACE,GAAY,uBACZ,GAA+B,CACjC,aAAc,CACZ,GAAG,GAAY,aACf,aACE,GAAY,cAAc,cAC1B,GAAsB,CACzB,CACF,CACD,CAlBK,EAAK,GAkBV,CACF,CACY,CAAA,CACd,KAnCK,OAAO,GAAa,WACvB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAC5C,EAmCK,CAAA,CACd,GAAS,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAe,UAAG,EAAU,CAAA,CACrE"}
|
|
@@ -5,6 +5,7 @@ import { ReactNode } from "react";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/controls/dropzone/DropzoneBase.d.ts
|
|
7
7
|
type FileData = {
|
|
8
|
+
id: string;
|
|
8
9
|
name: string;
|
|
9
10
|
size: number;
|
|
10
11
|
type: string;
|
|
@@ -24,7 +25,7 @@ type DropzoneBaseProps = {
|
|
|
24
25
|
}: {
|
|
25
26
|
files: Record<string, FileData>;
|
|
26
27
|
isUploading: boolean;
|
|
27
|
-
removeFile: (
|
|
28
|
+
removeFile: (id: string) => void;
|
|
28
29
|
}) => ReactNode;
|
|
29
30
|
initialFiles?: Record<string, FileData>;
|
|
30
31
|
maxFiles?: number;
|
|
@@ -1 +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,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,
|
|
1
|
+
{"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,EAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;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,EAAA;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;EAsBY;;;;;;;;;;;;;;EAPtB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA,WAzCxB;EA2CA,YAAA,IAAgB,IAAA,EAAM,QAAA,YAAoB,OAAA;EAC1C,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"}
|
|
@@ -1,2 +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,onRemoveFile:R,classNames:z,direction:B=`default`,hideWhenFull:V=!1})=>{let H=b(null),U=b(new Map),{files:W,isUploading:G,uploadMultipleFiles:K,addFile:q,removeFile:J}=n(D,T,L,C,O),Y=b(W);Y.current=W;let X=y(e=>{if(R){let t=Y.current[e];t&&Promise.resolve(R(t)).catch(console.error)}J(e),U.current.delete(e),!k&&j&&j(Array.from(U.current.values()))},[J,k,j,R]),Z=y(async e=>{let t=Object.keys(W).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await K(r,S);else{for(let e of r)q(e)
|
|
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,onRemoveFile:R,classNames:z,direction:B=`default`,hideWhenFull:V=!1})=>{let H=b(null),U=b(new Map),{files:W,isUploading:G,uploadMultipleFiles:K,addFile:q,removeFile:J}=n(D,T,L,C,O),Y=b(W);Y.current=W;let X=y(e=>{if(R){let t=Y.current[e];t&&Promise.resolve(R(t)).catch(console.error)}J(e),U.current.delete(e),!k&&j&&j(Array.from(U.current.values()))},[J,k,j,R]),Z=y(async e=>{let t=Object.keys(W).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await K(r,S);else{for(let e of r){let t=q(e);U.current.set(t,e)}j?.(Array.from(U.current.values()))}},[k,K,q,S,W,E,j]),Q=E!==void 0&&Object.keys(W).length>=E;return v(`div`,{className:r(z?.dropzoneBase??i(),z?.root??f()),"data-direction":B,children:[(!V||!Q)&&v(x,{ref:H,onDrop:Z,disabled:Q,loading:G,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:z?.input?.root??r(c(),`group`),inner:z?.input?.inner??l()},children:[_(`div`,{className:z?.iconSlot??s(),children:G?_(t,{classNames:{loader:z?.loader?.loader??u(),root:z?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:z?.textSlot??m(),children:[_(`span`,{className:z?.title??h(),children:N||`Upload files`}),_(`span`,{className:z?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:z?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:W,isUploading:G,removeFile:X})]})};export{S as DropzoneBase};
|
|
2
2
|
//# sourceMappingURL=DropzoneBase.mjs.map
|
|
@@ -1 +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 token?: 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 /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */\n onRemoveFile?: (file: FileData) => void | Promise<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 onRemoveFile,\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 filesRef = useRef<Record<string, FileData>>(files);\n filesRef.current = files;\n\n const removeFile = useCallback(\n (fileName: string) => {\n if (onRemoveFile) {\n const fileData = filesRef.current[fileName];\n if (fileData) {\n Promise.resolve(onRemoveFile(fileData)).catch(console.error);\n }\n }\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, onRemoveFile],\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
|
+
{"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 id: string;\n name: string;\n size: number;\n type: string;\n date: string;\n uploaded: boolean;\n loading: boolean;\n url: string;\n token?: 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: (id: 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 /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */\n onRemoveFile?: (file: FileData) => void | Promise<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 onRemoveFile,\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 filesRef = useRef<Record<string, FileData>>(files);\n filesRef.current = files;\n\n const removeFile = useCallback(\n (id: string) => {\n if (onRemoveFile) {\n const fileData = filesRef.current[id];\n if (fileData) {\n Promise.resolve(onRemoveFile(fileData)).catch(console.error);\n }\n }\n hookRemoveFile(id);\n rawFilesRef.current.delete(id);\n if (!autoSend && onChange) {\n onChange(Array.from(rawFilesRef.current.values()));\n }\n },\n [hookRemoveFile, autoSend, onChange, onRemoveFile],\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 const id = addFile(file);\n rawFilesRef.current.set(id, 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,2 +1,2 @@
|
|
|
1
|
-
import{uploadFile as e}from"./upload-service.mjs";import{useCallback as t,useRef as n,useState as r}from"react";const i=(i,a={},o,s,c)=>{let[l,u]=r((()=>{if(!a)return{};if(typeof a==`object`&&!(`name`in a))
|
|
1
|
+
import{uploadFile as e}from"./upload-service.mjs";import{useCallback as t,useRef as n,useState as r}from"react";const i=(i,a={},o,s,c)=>{let[l,u]=r((()=>{if(!a)return{};if(typeof a==`object`&&!(`name`in a)){let e={};for(let[t,n]of Object.entries(a)){let r=n.id||t;e[r]={...n,id:r}}return e}if(typeof a==`object`&&`name`in a){let e=a,t=e.id||e.name||crypto.randomUUID();return{[t]:{name:e.name,size:e.size,type:e.type,date:e.date,uploaded:e.uploaded??!0,loading:e.loading??!1,url:e.url,error:e.error,progress:e.progress,id:t}}}return{}})()),[d,f]=r(!1),p=n(new Set),m=t((e,t)=>{let n=crypto.randomUUID(),r={id:n,name:e.name,size:e.size,type:e.type,url:``,uploaded:!1,loading:!1,progress:0,date:t??new Date().toLocaleString(`es-ES`,{timeZone:`Europe/Madrid`,year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`})};return u(e=>({...e,[n]:r})),n},[]),h=t((e,t)=>{u(n=>({...n,[e]:{...n[e],progress:t,loading:t<100}}))},[]),g=t((e,t,n)=>{u(r=>({...r,[e]:{...r[e],uploaded:!0,loading:!1,progress:100,url:t,...n===void 0?{}:{token:n}}}))},[]),_=t((e,t)=>{u(n=>({...n,[e]:{...n[e],uploaded:!1,loading:!1,progress:0,error:t}}))},[]),v=t(e=>{u(t=>{let n={...t};return delete n[e],n}),p.current.delete(e)},[]),y=t(()=>{u({}),p.current.clear()},[]),b=t(e=>p.current.has(e),[]),x=t(e=>{p.current.add(e)},[]),S=t(e=>{p.current.delete(e)},[]),C=t(async(t,n)=>{let r=new Date().toLocaleString(`es-ES`,{timeZone:`Europe/Madrid`,year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`}),a=m(t,r);x(a);try{let l=e=>{h(a,e.percentage)},{body:u}=c?await c(t,{data:n,onProgress:l,headers:s}):await e(i??``,t,n,l,s);g(a,u.url,u.token),o?.({id:a,name:t.name,size:t.size,type:t.type,date:r,uploaded:!0,loading:!1,progress:100,url:u.url,token:u.token})}catch(e){console.error(`Error al subir archivo:`,e),_(a,e instanceof Error?e.message:`Error desconocido`)}finally{S(a)}},[m,x,h,g,_,S,o,i,s,c]);return{files:l,isUploading:d,setIsUploading:f,addFile:m,updateFileProgress:h,markFileAsUploaded:g,markFileAsError:_,removeFile:v,clearFiles:y,isFileUploading:b,addToUploadQueue:x,removeFromUploadQueue:S,uploadFileToServer:C,uploadMultipleFiles:t(async(e,t)=>{if(d){console.warn(`Ya hay una subida en progreso`);return}f(!0);try{for(let n of e)await C(n,t)}finally{f(!1)}},[d,f,C])}};export{i as useDropzoneState};
|
|
2
2
|
//# sourceMappingURL=use-dropzone-state.mjs.map
|
|
@@ -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 './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
|
|
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 const result: Record<string, FileData> = {};\n for (const [key, value] of Object.entries(initialFiles)) {\n const id = value.id || key;\n result[id] = { ...value, id };\n }\n return result;\n }\n\n if (typeof initialFiles === 'object' && 'name' in initialFiles) {\n const fileData = initialFiles as FileData;\n const id = fileData.id || fileData.name || crypto.randomUUID();\n return {\n [id]: {\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 id,\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 id = crypto.randomUUID();\n const fileData: FileData = {\n id,\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 [id]: fileData,\n }));\n\n return id;\n }, []);\n\n const updateFileProgress = useCallback((id: string, progress: number) => {\n setFiles((prev) => ({\n ...prev,\n [id]: {\n ...prev[id],\n progress,\n loading: progress < 100,\n },\n }));\n }, []);\n\n const markFileAsUploaded = useCallback(\n (id: string, url: string, token?: string) => {\n setFiles((prev) => ({\n ...prev,\n [id]: {\n ...prev[id],\n uploaded: true,\n loading: false,\n progress: 100,\n url,\n ...(token !== undefined ? { token } : {}),\n },\n }));\n },\n [],\n );\n\n const markFileAsError = useCallback((id: string, error: string) => {\n setFiles((prev) => ({\n ...prev,\n [id]: {\n ...prev[id],\n uploaded: false,\n loading: false,\n progress: 0,\n error,\n },\n }));\n }, []);\n\n const removeFile = useCallback((id: string) => {\n setFiles((prev) => {\n const newFiles = { ...prev };\n delete newFiles[id];\n return newFiles;\n });\n uploadQueue.current.delete(id);\n }, []);\n\n const clearFiles = useCallback(() => {\n setFiles({});\n uploadQueue.current.clear();\n }, []);\n\n const isFileUploading = useCallback((id: string) => {\n return uploadQueue.current.has(id);\n }, []);\n\n const addToUploadQueue = useCallback((id: string) => {\n uploadQueue.current.add(id);\n }, []);\n\n const removeFromUploadQueue = useCallback((id: string) => {\n uploadQueue.current.delete(id);\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 id = addFile(file, date);\n addToUploadQueue(id);\n\n try {\n const onProgress = (progress: UploadProgress) => {\n updateFileProgress(id, 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(id, body.url, body.token);\n onFileUploaded?.({\n id,\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 token: body.token,\n });\n } catch (error) {\n console.error('Error al subir archivo:', error);\n markFileAsError(\n id,\n error instanceof Error ? error.message : 'Error desconocido',\n );\n } finally {\n removeFromUploadQueue(id);\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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.141",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/
|
|
29
|
-
"@mage-ui/
|
|
28
|
+
"@mage-ui/preset": "1.0.141",
|
|
29
|
+
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|