@mage-ui/components 1.0.114 → 1.0.115
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 +2 -0
- 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/use-dropzone-state.mjs +1 -1
- package/dist/components/controls/dropzone/use-dropzone-state.mjs.map +1 -1
- package/dist/components/controls/dropzone-files/DropzoneFiles.mjs +1 -1
- package/dist/components/controls/dropzone-files/DropzoneFiles.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -35,6 +35,7 @@ type DropzoneProps = {
|
|
|
35
35
|
subtitle?: ReactNode;
|
|
36
36
|
hint?: ReactNode;
|
|
37
37
|
inputId?: string;
|
|
38
|
+
onFileUploaded?: (file: FileData) => void;
|
|
38
39
|
classNames?: {
|
|
39
40
|
dropzone?: string;
|
|
40
41
|
root?: string;
|
|
@@ -62,6 +63,7 @@ declare const Dropzone: ({
|
|
|
62
63
|
subtitle,
|
|
63
64
|
hint,
|
|
64
65
|
inputId,
|
|
66
|
+
onFileUploaded,
|
|
65
67
|
classNames
|
|
66
68
|
}: DropzoneProps) => react_jsx_runtime0.JSX.Element;
|
|
67
69
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA2BY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;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;EACA,IAAA,GAAO,MAAA;EACP,GAAA;EACA,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA2BY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;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;EACA,IAAA,GAAO,MAAA;EACP,GAAA;EACA,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA;EACxB,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,cAAA;EAAA;AAAA,GAatB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -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{dropzone as i,dropzoneDropzoneInner as a,dropzoneDropzoneRoot as o,dropzoneHint as s,dropzoneIcon as c,dropzoneIconSlot as l,dropzoneLoader as u,dropzoneLoaderRoot as d,dropzoneRoot as f,dropzoneSubtitle as p,dropzoneTextSlot as m,dropzoneTitle 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,children:C,initialFiles:w={},maxFiles:T,accept:E,url:D,title:O,subtitle:k,hint:A,inputId:j,classNames:
|
|
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{dropzone as i,dropzoneDropzoneInner as a,dropzoneDropzoneRoot as o,dropzoneHint as s,dropzoneIcon as c,dropzoneIconSlot as l,dropzoneLoader as u,dropzoneLoaderRoot as d,dropzoneRoot as f,dropzoneSubtitle as p,dropzoneTextSlot as m,dropzoneTitle 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,children:C,initialFiles:w={},maxFiles:T,accept:E,url:D,title:O,subtitle:k,hint:A,inputId:j,onFileUploaded:M,classNames:N})=>{let P=b(null),{files:F,isUploading:I,uploadMultipleFiles:L,removeFile:R}=n(D,w,M),z=y(async e=>{let t=Object.keys(F).length,n=(T??1/0)-t;n<=0||await L(e.slice(0,n),S)},[L,S,F,T]);return v(`div`,{className:r(N?.dropzone??i(),N?.root??f()),children:[v(x,{ref:P,onDrop:z,disabled:Object.keys(F).length>=(T??1/0),loading:I,accept:E,preventDropOnDocument:!0,inputProps:{id:j},classNames:{root:N?.dropzoneDropzone?.root??r(o(),`group`),inner:N?.dropzoneDropzone?.inner??a()},children:[_(`div`,{className:N?.iconSlot??l(),children:I?_(t,{classNames:{loader:N?.loader?.loader??u(),root:N?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:N?.dropzoneIcon?.icon??c()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:N?.dropzoneIcon?.icon??c()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:N?.dropzoneIcon?.icon??c()}})})]})}),v(`div`,{className:N?.textSlot??m(),children:[_(`span`,{className:N?.title??h(),children:O||`Upload files`}),_(`span`,{className:N?.subtitle??p(),children:k||`Drag images here or click to select files`}),_(`span`,{className:N?.hint??s(),children:A||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),C({files:F,isUploading:I,removeFile:R})]})};export{S 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 { useDropzoneState } from './use-dropzone-state';\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 data?: Record<string, unknown>;\n url: string;\n accept?: string[];\n preventDropOnDocument?: boolean;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\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};\n\nexport const Dropzone = ({\n data,\n children,\n initialFiles = {},\n maxFiles,\n accept,\n url,\n title,\n subtitle,\n hint,\n inputId,\n classNames,\n}: DropzoneProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const { files, isUploading, uploadMultipleFiles, removeFile } =\n useDropzoneState(url, initialFiles);\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 filesToUpload = acceptedFiles.slice(0, remainingSlots);\n await uploadMultipleFiles(filesToUpload, data);\n },\n [uploadMultipleFiles, data, files, maxFiles],\n );\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={\n Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n }\n loading={isUploading}\n accept={accept}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root:\n classNames?.dropzoneDropzone?.root ??\n cx(dropzoneDropzoneRoot(), 'group'),\n inner: 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 {
|
|
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 { useDropzoneState } from './use-dropzone-state';\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 data?: Record<string, unknown>;\n url: string;\n accept?: string[];\n preventDropOnDocument?: boolean;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\n onFileUploaded?: (file: FileData) => void;\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};\n\nexport const Dropzone = ({\n data,\n children,\n initialFiles = {},\n maxFiles,\n accept,\n url,\n title,\n subtitle,\n hint,\n inputId,\n onFileUploaded,\n classNames,\n}: DropzoneProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const { files, isUploading, uploadMultipleFiles, removeFile } =\n useDropzoneState(url, initialFiles, onFileUploaded);\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 filesToUpload = acceptedFiles.slice(0, remainingSlots);\n await uploadMultipleFiles(filesToUpload, data);\n },\n [uploadMultipleFiles, data, files, maxFiles],\n );\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={\n Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n }\n loading={isUploading}\n accept={accept}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root:\n classNames?.dropzoneDropzone?.root ??\n cx(dropzoneDropzoneRoot(), 'group'),\n inner: 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 {children({ files, isUploading, removeFile })}\n </div>\n );\n};\n"],"mappings":"wrBA6EA,MAAaA,GAAY,CACvB,OACA,WACA,eAAe,EAAE,CACjB,WACA,SACA,MACA,QACA,WACA,OACA,UACA,iBACA,gBACmB,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAE,QAAO,cAAa,sBAAqB,cAC/C,EAAiB,EAAK,EAAc,EAAe,CAC/C,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EACzB,GAAkB,GAItB,MAAM,EADgB,EAAc,MAAM,EAAG,EAAe,CACnB,EAAK,EAEhD,CAAC,EAAqB,EAAM,EAAO,EAAS,CAC7C,CAED,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,UAJH,CAME,EAACC,EAAD,CACE,IAAK,EACL,OAAQ,EACR,SACE,OAAO,KAAK,EAAM,CAAC,SAAW,GAAY,KAE5C,QAAS,EACD,SACR,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MAAO,GAAY,kBAAkB,OAAS,GAAuB,CACtE,UAfH,CAiBE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CACD,CAAA,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACmB,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACxB,CAAA,CAAA,CAED,CAAA,CACN,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UAA1D,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,eACL,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,4CACR,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,oEACG,CAAA,CACH,GACU,GACjB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CACzC"}
|
|
@@ -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={})=>{let[
|
|
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)=>{let[s,c]=r((()=>{if(!a)return{};if(typeof a==`object`&&!(`name`in a))return a;if(typeof a==`object`&&`name`in a){let e=a;return{[e.name]:{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}}}return{}})()),[l,u]=r(!1),d=n(new Set),f=t((e,t)=>{let 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 c(t=>({...t,[e.name]:n})),e.name},[]),p=t((e,t)=>{c(n=>({...n,[e]:{...n[e],progress:t,loading:t<100}}))},[]),m=t((e,t)=>{c(n=>({...n,[e]:{...n[e],uploaded:!0,loading:!1,progress:100,url:t}}))},[]),h=t((e,t)=>{c(n=>({...n,[e]:{...n[e],uploaded:!1,loading:!1,progress:0,error:t}}))},[]),g=t(e=>{c(t=>{let n={...t};return delete n[e],n}),d.current.delete(e)},[]),_=t(()=>{c({}),d.current.clear()},[]),v=t(e=>d.current.has(e),[]),y=t(e=>{d.current.add(e)},[]),b=t(e=>{d.current.delete(e)},[]),x=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=f(t,r);y(a);try{let{body:s}=await e(i,t,n,e=>{p(a,e.percentage)});m(a,s.url),o?.({name:t.name,size:t.size,type:t.type,date:r,uploaded:!0,loading:!1,progress:100,url:s.url})}catch(e){console.error(`Error al subir archivo:`,e),h(a,e instanceof Error?e.message:`Error desconocido`)}finally{b(a)}},[f,y,p,m,h,b,o,i]);return{files:s,isUploading:l,setIsUploading:u,addFile:f,updateFileProgress:p,markFileAsUploaded:m,markFileAsError:h,removeFile:g,clearFiles:_,isFileUploading:v,addToUploadQueue:y,removeFromUploadQueue:b,uploadFileToServer:x,uploadMultipleFiles:t(async(e,t)=>{if(l){console.warn(`Ya hay una subida en progreso`);return}u(!0);try{for(let n of e)await x(n,t)}finally{u(!1)}},[l,u,x])}};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 './Dropzone';\nimport { uploadFile } from './upload-service';\n\nexport const useDropzoneState = (\n url: string,\n initialFiles: Record<string, FileData> | FileData | null | undefined = {},\n) => {\n const normalizeInitialFiles = (): Record<string, FileData> => {\n if (!initialFiles) return {};\n\n if (typeof initialFiles === 'object' && !('name' in initialFiles)) {\n return initialFiles as Record<string, FileData>;\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) => {\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
|
|
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 './Dropzone';\nimport { uploadFile } from './upload-service';\n\nexport const useDropzoneState = (\n url: string,\n initialFiles: Record<string, FileData> | FileData | null | undefined = {},\n onFileUploaded?: (file: FileData) => void,\n) => {\n const normalizeInitialFiles = (): Record<string, FileData> => {\n if (!initialFiles) return {};\n\n if (typeof initialFiles === 'object' && !('name' in initialFiles)) {\n return initialFiles as Record<string, FileData>;\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 { body } = await uploadFile(url, file, data, (progress) => {\n updateFileProgress(fileName, progress.percentage);\n });\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 ],\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":"gHAKA,MAAa,GACX,EACA,EAAuE,EAAE,CACzE,IACG,CA4BH,GAAM,CAAC,EAAO,GAAY,OA3BoC,CAC5D,GAAI,CAAC,EAAc,MAAO,EAAE,CAE5B,GAAI,OAAO,GAAiB,UAAY,EAAE,SAAU,GAClD,OAAO,EAGT,GAAI,OAAO,GAAiB,UAAY,SAAU,EAAc,CAC9D,IAAM,EAAW,EACjB,MAAO,EACJ,EAAS,MAAO,CACf,KAAM,EAAS,KACf,KAAM,EAAS,KACf,KAAM,EAAS,KACf,KAAM,EAAS,KACf,SAAU,EAAS,UAAY,GAC/B,QAAS,EAAS,SAAW,GAC7B,IAAK,EAAS,IACd,MAAO,EAAS,MAChB,SAAU,EAAS,SACpB,CACF,CAGH,MAAO,EAAE,IAIc,CACxB,CACK,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,EAAc,EAAoB,IAAI,IAAM,CAE5C,EAAU,GAAa,EAAY,IAAkB,CACzD,IAAM,EAAqB,CACzB,KAAM,EAAK,KACX,KAAM,EAAK,KACX,KAAM,EAAK,KACX,IAAK,GACL,SAAU,GACV,QAAS,GACT,SAAU,EACV,KACE,GACA,IAAI,MAAM,CAAC,eAAe,QAAS,CACjC,SAAU,gBACV,KAAM,UACN,MAAO,UACP,IAAK,UACL,KAAM,UACN,OAAQ,UACR,OAAQ,UACT,CAAC,CACL,CAOD,OALA,EAAU,IAAU,CAClB,GAAG,GACF,EAAK,MAAO,EACd,EAAE,CAEI,EAAK,MACX,EAAE,CAAC,CAEA,EAAqB,GACxB,EAAkB,IAAqB,CACtC,EAAU,IAAU,CAClB,GAAG,GACF,GAAW,CACV,GAAG,EAAK,GACR,WACA,QAAS,EAAW,IACrB,CACF,EAAE,EAEL,EAAE,CACH,CAEK,EAAqB,GAAa,EAAkB,IAAgB,CACxE,EAAU,IAAU,CAClB,GAAG,GACF,GAAW,CACV,GAAG,EAAK,GACR,SAAU,GACV,QAAS,GACT,SAAU,IACV,MACD,CACF,EAAE,EACF,EAAE,CAAC,CAEA,EAAkB,GAAa,EAAkB,IAAkB,CACvE,EAAU,IAAU,CAClB,GAAG,GACF,GAAW,CACV,GAAG,EAAK,GACR,SAAU,GACV,QAAS,GACT,SAAU,EACV,QACD,CACF,EAAE,EACF,EAAE,CAAC,CAEA,EAAa,EAAa,GAAqB,CACnD,EAAU,GAAS,CACjB,IAAM,EAAW,CAAE,GAAG,EAAM,CAE5B,OADA,OAAO,EAAS,GACT,GACP,CACF,EAAY,QAAQ,OAAO,EAAS,EACnC,EAAE,CAAC,CAEA,EAAa,MAAkB,CACnC,EAAS,EAAE,CAAC,CACZ,EAAY,QAAQ,OAAO,EAC1B,EAAE,CAAC,CAEA,EAAkB,EAAa,GAC5B,EAAY,QAAQ,IAAI,EAAS,CACvC,EAAE,CAAC,CAEA,EAAmB,EAAa,GAAqB,CACzD,EAAY,QAAQ,IAAI,EAAS,EAChC,EAAE,CAAC,CAEA,EAAwB,EAAa,GAAqB,CAC9D,EAAY,QAAQ,OAAO,EAAS,EACnC,EAAE,CAAC,CAEA,EAAqB,EACzB,MAAO,EAAY,IAAmC,CACpD,IAAM,EAAO,IAAI,MAAM,CAAC,eAAe,QAAS,CAC9C,SAAU,gBACV,KAAM,UACN,MAAO,UACP,IAAK,UACL,KAAM,UACN,OAAQ,UACR,OAAQ,UACT,CAAC,CACI,EAAW,EAAQ,EAAM,EAAK,CACpC,EAAiB,EAAS,CAE1B,GAAI,CACF,GAAM,CAAE,QAAS,MAAM,EAAW,EAAK,EAAM,EAAO,GAAa,CAC/D,EAAmB,EAAU,EAAS,WAAW,EACjD,CAEF,EAAmB,EAAU,EAAK,IAAI,CACtC,IAAiB,CACf,KAAM,EAAK,KACX,KAAM,EAAK,KACX,KAAM,EAAK,KACX,OACA,SAAU,GACV,QAAS,GACT,SAAU,IACV,IAAK,EAAK,IACX,CAAC,OACK,EAAO,CACd,QAAQ,MAAM,0BAA2B,EAAM,CAC/C,EACE,EACA,aAAiB,MAAQ,EAAM,QAAU,oBAC1C,QACO,CACR,EAAsB,EAAS,GAGnC,CACE,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAsBD,MAAO,CACL,QACA,cACA,iBACA,UACA,qBACA,qBACA,kBACA,aACA,aACA,kBACA,mBACA,wBACA,qBACA,oBAlC0B,EAC1B,MAAO,EAAuB,IAAmC,CAC/D,GAAI,EAAa,CACf,QAAQ,KAAK,gCAAgC,CAC7C,OAGF,EAAe,GAAK,CAEpB,GAAI,CACF,IAAK,IAAM,KAAQ,EACjB,MAAM,EAAmB,EAAM,EAAK,QAE9B,CACR,EAAe,GAAM,GAGzB,CAAC,EAAa,EAAgB,EAAmB,CAClD,CAiBA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{UploadedFile as e}from"../../data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as t}from"../../data-display/uploaded-file/UploadedFileDetails.mjs";import{Dropzone as n}from"../dropzone/Dropzone.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneFiles as i,dropzoneFilesDescription as a,dropzoneFilesDropzone as o,dropzoneFilesError as s,dropzoneFilesFileItem as c,dropzoneFilesFileList as l,dropzoneFilesLabel as u,dropzoneFilesLabelWrapper as d,dropzoneFilesRoot as f,dropzoneFilesUploadedFile as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useId as g}from"react";const _=({label:_,description:v,error:y,title:b,subtitle:x,hint:S,initialFiles:C,maxFiles:w,accept:T,url:E,inputId:D,classNames:O})=>{let k=g(),A=D??k;return h(`div`,{className:r(O?.dropzoneFiles??i(),O?.root??f()),children:[h(`div`,{className:O?.labelWrapper??d(),children:[_&&m(`label`,{htmlFor:A,className:O?.label??u(),children:_}),v&&m(`p`,{className:O?.description??a(),children:v})]}),m(n,{maxFiles:w,accept:T,url:E,initialFiles:C,inputId:A,title:b,subtitle:x,hint:S,classNames:{dropzone:O?.dropzone?.dropzone??o()},children:({files:n,removeFile:r})=>m(`ul`,{className:O?.fileList??l(),children:Object.values(n).map(n=>m(`li`,{className:O?.fileItem??c(),children:m(e,{fileName:n.name,fileType:n.type,url:n.url,onRemove:()=>r(n.name),classNames:{uploadedFile:O?.uploadedFile?.uploadedFile??p()},children:m(t,{fileSize:`${(n.size/1024).toFixed(1)} KB`,fileDate:n.date,fileType:n.type})},n.name)},n.name))})}),y&&m(`p`,{className:O?.error??s(),children:y})]})};export{_ as DropzoneFiles};
|
|
1
|
+
import{UploadedFile as e}from"../../data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as t}from"../../data-display/uploaded-file/UploadedFileDetails.mjs";import{Dropzone as n}from"../dropzone/Dropzone.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneFiles as i,dropzoneFilesDescription as a,dropzoneFilesDropzone as o,dropzoneFilesError as s,dropzoneFilesFileItem as c,dropzoneFilesFileList as l,dropzoneFilesLabel as u,dropzoneFilesLabelWrapper as d,dropzoneFilesRoot as f,dropzoneFilesUploadedFile as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useId as g}from"react";const _=({label:_,description:v,error:y,title:b,subtitle:x,hint:S,initialFiles:C,maxFiles:w,accept:T,url:E,inputId:D,classNames:O})=>{let k=g(),A=D??k;return h(`div`,{className:r(O?.dropzoneFiles??i(),O?.root??f()),children:[h(`div`,{className:O?.labelWrapper??d(),children:[_&&m(`label`,{htmlFor:A,className:O?.label??u(),children:_}),v&&m(`p`,{className:O?.description??a(),children:v})]}),m(n,{maxFiles:w,accept:T,url:E,initialFiles:C,inputId:A,title:b,subtitle:x,hint:S,classNames:{dropzone:O?.dropzone?.dropzone??o()},children:({files:n,removeFile:r})=>Object.keys(n).length>0?m(`ul`,{className:O?.fileList??l(),children:Object.values(n).map(n=>m(`li`,{className:O?.fileItem??c(),children:m(e,{fileName:n.name,fileType:n.type,url:n.url,onRemove:()=>r(n.name),classNames:{uploadedFile:O?.uploadedFile?.uploadedFile??p()},children:m(t,{fileSize:`${(n.size/1024).toFixed(1)} KB`,fileDate:n.date,fileType:n.type})},n.name)},n.name))}):null}),y&&m(`p`,{className:O?.error??s(),children:y})]})};export{_ as DropzoneFiles};
|
|
2
2
|
//# sourceMappingURL=DropzoneFiles.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropzoneFiles.mjs","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzoneFiles,\n dropzoneFilesDescription,\n dropzoneFilesDropzone,\n dropzoneFilesError,\n dropzoneFilesFileItem,\n dropzoneFilesFileList,\n dropzoneFilesLabel,\n dropzoneFilesLabelWrapper,\n dropzoneFilesRoot,\n dropzoneFilesUploadedFile,\n // dropzoneFilesUploadedFileStartIconWrapped,\n // dropzoneFilesUploadedFileStartIconWrappedRoot,\n // dropzoneFilesUploadedFileStartIcon,\n // dropzoneFilesUploadedFileStartIconRoot,\n // dropzoneFilesUploadedFileStartIconIconRaw,\n // dropzoneFilesUploadedFileStartIconIconRawRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n Dropzone,\n type DropzoneProps,\n type FileData,\n} from '@/components/controls';\nimport {\n // Icon,\n // type IconProps,\n // IconWrapped,\n // type IconWrappedProps,\n UploadedFile,\n UploadedFileDetails,\n type UploadedFileProps,\n} from '@/components/data-display';\n\nexport type DropzoneFilesProps = {\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n accept?: string[];\n url: string;\n inputId?: string;\n fileListHeight?: number | string;\n classNames?: {\n dropzoneFiles?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n fileList?: string;\n fileItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzone?: DropzoneProps['classNames'];\n scrollArea?: { scrollArea?: string };\n // startIconWrapped?: IconWrappedProps['classNames'];\n // startIcon?: IconProps['classNames'];\n };\n};\n\nexport const DropzoneFiles = ({\n label,\n description,\n error,\n title,\n subtitle,\n hint,\n initialFiles,\n maxFiles,\n accept,\n url,\n inputId,\n classNames,\n}: DropzoneFilesProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n // TODO: gestionar error\n // TOOD: gestionar required\n return (\n <div\n className={cx(\n classNames?.dropzoneFiles ?? dropzoneFiles(),\n classNames?.root ?? dropzoneFilesRoot(),\n )}\n >\n <div className={classNames?.labelWrapper ?? dropzoneFilesLabelWrapper()}>\n {/* TODO: label obligatori / hidden */}\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneFilesLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneFilesDescription()}>\n {description}\n </p>\n )}\n </div>\n <Dropzone\n maxFiles={maxFiles}\n accept={accept}\n url={url}\n initialFiles={initialFiles}\n inputId={groupId}\n title={title}\n subtitle={subtitle}\n hint={hint}\n classNames={{\n dropzone: classNames?.dropzone?.dropzone ?? dropzoneFilesDropzone(),\n }}\n >\n {({ files, removeFile })
|
|
1
|
+
{"version":3,"file":"DropzoneFiles.mjs","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzoneFiles,\n dropzoneFilesDescription,\n dropzoneFilesDropzone,\n dropzoneFilesError,\n dropzoneFilesFileItem,\n dropzoneFilesFileList,\n dropzoneFilesLabel,\n dropzoneFilesLabelWrapper,\n dropzoneFilesRoot,\n dropzoneFilesUploadedFile,\n // dropzoneFilesUploadedFileStartIconWrapped,\n // dropzoneFilesUploadedFileStartIconWrappedRoot,\n // dropzoneFilesUploadedFileStartIcon,\n // dropzoneFilesUploadedFileStartIconRoot,\n // dropzoneFilesUploadedFileStartIconIconRaw,\n // dropzoneFilesUploadedFileStartIconIconRawRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n Dropzone,\n type DropzoneProps,\n type FileData,\n} from '@/components/controls';\nimport {\n // Icon,\n // type IconProps,\n // IconWrapped,\n // type IconWrappedProps,\n UploadedFile,\n UploadedFileDetails,\n type UploadedFileProps,\n} from '@/components/data-display';\n\nexport type DropzoneFilesProps = {\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n accept?: string[];\n url: string;\n inputId?: string;\n fileListHeight?: number | string;\n classNames?: {\n dropzoneFiles?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n fileList?: string;\n fileItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzone?: DropzoneProps['classNames'];\n scrollArea?: { scrollArea?: string };\n // startIconWrapped?: IconWrappedProps['classNames'];\n // startIcon?: IconProps['classNames'];\n };\n};\n\nexport const DropzoneFiles = ({\n label,\n description,\n error,\n title,\n subtitle,\n hint,\n initialFiles,\n maxFiles,\n accept,\n url,\n inputId,\n classNames,\n}: DropzoneFilesProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n // TODO: gestionar error\n // TOOD: gestionar required\n return (\n <div\n className={cx(\n classNames?.dropzoneFiles ?? dropzoneFiles(),\n classNames?.root ?? dropzoneFilesRoot(),\n )}\n >\n <div className={classNames?.labelWrapper ?? dropzoneFilesLabelWrapper()}>\n {/* TODO: label obligatori / hidden */}\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneFilesLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneFilesDescription()}>\n {description}\n </p>\n )}\n </div>\n <Dropzone\n maxFiles={maxFiles}\n accept={accept}\n url={url}\n initialFiles={initialFiles}\n inputId={groupId}\n title={title}\n subtitle={subtitle}\n hint={hint}\n classNames={{\n dropzone: classNames?.dropzone?.dropzone ?? dropzoneFilesDropzone(),\n }}\n >\n {({ files, removeFile }) =>\n Object.keys(files).length > 0 ? (\n <ul className={classNames?.fileList ?? dropzoneFilesFileList()}>\n {Object.values(files).map((file) => (\n <li\n key={file.name}\n className={classNames?.fileItem ?? dropzoneFilesFileItem()}\n >\n <UploadedFile\n key={file.name}\n fileName={file.name}\n fileType={file.type}\n url={file.url}\n onRemove={() => removeFile(file.name)}\n classNames={{\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneFilesUploadedFile(),\n }}\n >\n {/* TODO: comentar */}\n <UploadedFileDetails\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n fileType={file.type}\n />\n </UploadedFile>\n </li>\n ))}\n </ul>\n ) : null\n }\n </Dropzone>\n {error && (\n <p className={classNames?.error ?? dropzoneFilesError()}>{error}</p>\n )}\n </div>\n );\n};\n"],"mappings":"upBAkEA,MAAa,GAAiB,CAC5B,QACA,cACA,QACA,QACA,WACA,OACA,eACA,WACA,SACA,MACA,UACA,gBACwB,CACxB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAI3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,UAJH,CAME,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAA2B,UAAvE,CAEG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAoB,UAEnD,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAA0B,UAChE,EACC,CAAA,CAEF,GACN,EAAC,EAAD,CACY,WACF,SACH,MACS,eACd,QAAS,EACF,QACG,WACJ,OACN,WAAY,CACV,SAAU,GAAY,UAAU,UAAY,GAAuB,CACpE,WAEC,CAAE,QAAO,gBACT,OAAO,KAAK,EAAM,CAAC,OAAS,EAC1B,EAAC,KAAD,CAAI,UAAW,GAAY,UAAY,GAAuB,UAC3D,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,KAAD,CAEE,UAAW,GAAY,UAAY,GAAuB,UAE1D,EAAC,EAAD,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,WAAY,CACV,aACE,GAAY,cAAc,cAC1B,GAA2B,CAC9B,UAGD,EAAC,EAAD,CACE,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,SAAU,EAAK,KACf,CAAA,CACW,CAjBR,EAAK,KAiBG,CACZ,CAtBE,EAAK,KAsBP,CACL,CACC,CAAA,CACH,KAEG,CAAA,CACV,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAoB,UAAG,EAAU,CAAA,CAElE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.115",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.115",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|