@s_mart/dropzone 9.1.5 → 9.2.1
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/index.d.mts +33 -8
- package/dist/index.mjs +12 -12
- package/package.json +4 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { Theme } from '@mui/material';
|
|
2
|
+
import { Theme, TypographyProps } from '@mui/material';
|
|
3
3
|
import { StyledComponent } from '@emotion/styled';
|
|
4
4
|
import { MUIStyledCommonProps } from '@mui/system';
|
|
5
5
|
import { HtmlHTMLAttributes, LabelHTMLAttributes, HTMLAttributes } from 'react';
|
|
@@ -14,15 +14,36 @@ declare const DropzoneLabelContainer: DropzoneComponent<LabelHTMLAttributes<HTML
|
|
|
14
14
|
declare const DropzoneListContainer: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
|
|
15
15
|
declare const DropzoneListItem: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
|
|
16
16
|
|
|
17
|
-
type
|
|
18
|
-
|
|
19
|
-
overlay?: Parameters<typeof DropzoneOverlay>[0];
|
|
20
|
-
labelContainer?: Parameters<typeof DropzoneLabelContainer>[0];
|
|
21
|
-
listContainer?: Parameters<typeof DropzoneListContainer>[0];
|
|
22
|
-
listItem?: Parameters<typeof DropzoneListItem>[0];
|
|
17
|
+
type DropzoneHeaderTitleSlotProps = {
|
|
18
|
+
headerTitle?: DropzoneHeaderTitleBaseProps & TypographyProps;
|
|
23
19
|
};
|
|
24
|
-
type
|
|
20
|
+
type DropzoneHeaderTitleSlots = {
|
|
21
|
+
headerTitleContent?: (props: DropzoneHeaderTitleBaseProps) => JSX.Element;
|
|
22
|
+
};
|
|
23
|
+
type DropzoneHeaderTitleBaseProps = {
|
|
24
|
+
filesLengthLabel?: string;
|
|
25
|
+
filesTotalSize?: string;
|
|
26
|
+
showFilesSize?: boolean;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
type DropzoneV2SlotProps = Partial<{
|
|
30
|
+
root: Parameters<typeof DropzoneRoot>[0];
|
|
31
|
+
overlay: Parameters<typeof DropzoneOverlay>[0];
|
|
32
|
+
labelContainer: Parameters<typeof DropzoneLabelContainer>[0];
|
|
33
|
+
listContainer: Parameters<typeof DropzoneListContainer>[0];
|
|
34
|
+
listItem: Parameters<typeof DropzoneListItem>[0];
|
|
35
|
+
header: DropzoneHeaderTitleSlotProps;
|
|
36
|
+
}>;
|
|
37
|
+
type DropzoneV2Slots = DropzoneHeaderTitleSlots;
|
|
38
|
+
type DropzoneV2Props = Pick<DropzoneHeaderTitleBaseProps, 'showFilesSize'> & {
|
|
25
39
|
onChange(files: File[]): void;
|
|
40
|
+
/**
|
|
41
|
+
* Permite filtrar os arquivos que são adicionados
|
|
42
|
+
*
|
|
43
|
+
* É chamado antes de `onChange`
|
|
44
|
+
* @param files Arquivos que serão filtrados
|
|
45
|
+
*/
|
|
46
|
+
filterOnDrop?(files: File[]): Promise<File[]> | File[];
|
|
26
47
|
maxSize?: number;
|
|
27
48
|
maxFiles?: number;
|
|
28
49
|
/**
|
|
@@ -38,6 +59,10 @@ type DropzoneV2Props = {
|
|
|
38
59
|
* @description Acessa as propriedades dos componentes internos
|
|
39
60
|
*/
|
|
40
61
|
slotProps?: DropzoneV2SlotProps;
|
|
62
|
+
/**
|
|
63
|
+
* @description Substitui os componentes internos
|
|
64
|
+
*/
|
|
65
|
+
slots?: DropzoneV2Slots;
|
|
41
66
|
/**
|
|
42
67
|
* @param message Mensagem tratado do erro
|
|
43
68
|
* @param errorFromCatch O erro capturado pelo `try catch`
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{styled as
|
|
1
|
+
import{styled as P}from"@mui/material";import{colorPalette as B}from"@s_mart/tokens";var K=P("div")`
|
|
2
2
|
min-width: 300px;
|
|
3
3
|
align-items: center;
|
|
4
4
|
display: flex;
|
|
@@ -6,7 +6,7 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
gap: 8px;
|
|
8
8
|
padding: 16px;
|
|
9
|
-
`,
|
|
9
|
+
`,N=P("div")`
|
|
10
10
|
display: none;
|
|
11
11
|
position: absolute;
|
|
12
12
|
z-index: 20;
|
|
@@ -14,7 +14,7 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
14
14
|
left: 0;
|
|
15
15
|
height: 0;
|
|
16
16
|
width: 0;
|
|
17
|
-
border: 0px dashed ${
|
|
17
|
+
border: 0px dashed ${B.neutral[500]};
|
|
18
18
|
border-radius: 8px;
|
|
19
19
|
display: flex;
|
|
20
20
|
justify-content: center;
|
|
@@ -27,7 +27,7 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
27
27
|
width: 99.3%;
|
|
28
28
|
border-width: 2px;
|
|
29
29
|
}
|
|
30
|
-
`,
|
|
30
|
+
`,Q=P("label")`
|
|
31
31
|
width: 100%;
|
|
32
32
|
pointer-events: all;
|
|
33
33
|
min-height: 40px;
|
|
@@ -84,17 +84,17 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
84
84
|
&:hover {
|
|
85
85
|
background-color: ${({theme:e})=>e.palette.primary.dark};
|
|
86
86
|
}
|
|
87
|
-
`,
|
|
87
|
+
`,J=P("div")`
|
|
88
88
|
width: 100%;
|
|
89
89
|
max-height: 300px;
|
|
90
|
-
background-color: ${
|
|
90
|
+
background-color: ${B.neutral[20]};
|
|
91
91
|
border-radius: 16px;
|
|
92
92
|
overflow-y: auto;
|
|
93
93
|
display: flex;
|
|
94
94
|
flex-direction: column;
|
|
95
|
-
border: 8px solid ${
|
|
95
|
+
border: 8px solid ${B.neutral[20]};
|
|
96
96
|
gap: 8px;
|
|
97
|
-
`,
|
|
97
|
+
`,W=P("div")`
|
|
98
98
|
background-color: white;
|
|
99
99
|
border-radius: 16px;
|
|
100
100
|
padding: 8px;
|
|
@@ -102,7 +102,7 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
102
102
|
display: flex;
|
|
103
103
|
align-items: center;
|
|
104
104
|
justify-content: space-between;
|
|
105
|
-
`;import{
|
|
105
|
+
`;import{Tooltip as Ve,Typography as ie}from"@mui/material";import{IconButton as Oe,LIcon as ae}from"@s_mart/core";import{lineTimes as Xe}from"@s_mart/regular-icons";import{colorPalette as le}from"@s_mart/tokens";import{useMemo as ee}from"react";import{lineFile as Ce,linePicture as Le,lineXMLFile as we}from"@s_mart/light-icons";import{lineFileCertificate as Pe}from"@s_mart/regular-icons";var Y=e=>{switch(e){case"application/xml":case"text/xml":return we;case"image/gif":case"image/jpeg":case"image/png":case"image/svg":case"image/webp":return Le;case"application/pkcs12":return Pe;default:return Ce}},H=e=>{let t="";return e<1024?t=`${e} Bytes`:e<1024*1024?t=`${(e/1024).toFixed(2)} KB`:e<1024*1024*1024&&(t=`${(e/1024/1024).toFixed(2)} MB`),t};var oe=({filesInfo:e})=>{let t=ee(()=>e.map(o=>({name:o.name,fileSize:H(o.size),icon:Y(o.type)})),[e]),r=ee(()=>({totalSize:H(e.reduce((o,n)=>o+n.size,0)),totalFilesLabel:e.length===1?"1 arquivo":`${e.length} arquivos`}),[e]);return{files:t,headerInfo:r}};import{Tooltip as He}from"@mui/material";import q from"@mui/utils/deepmerge";import{IconButton as Se,LIcon as Ee}from"@s_mart/core";import{lineTimes as Me}from"@s_mart/regular-icons";import{jsx as O}from"react/jsx-runtime";var U={headerCleartooltip:{title:"Remover todos"},headerClearIconButton:{variant:"text",color:"neutral",sx:{borderRadius:50}},headerClearLicon:{icon:Me,removeMargin:!0}},V={clone:!1},te=({onClick:e,slotProps:t})=>{let r=q(U.headerCleartooltip,t?.headerCleartooltip,V),o=q(U.headerClearIconButton,t?.headerClearIconButton,V),n=q(U.headerClearLicon,t?.headerClearLicon,V);return O(He,{...r,children:O(Se,{...o,onClick:e,children:O(Ee,{...n})})})};import{styled as Ie}from"@mui/material";var re=Ie("div")({display:"flex",justifyContent:"space-between",alignItems:"center",paddingBlock:"0.5rem"});import{Typography as Re}from"@mui/material";import Ae from"@mui/utils/deepmerge";import{useMemo as ke}from"react";import{Fragment as Ue,jsx as R}from"react/jsx-runtime";var $e={headerTitle:{variant:"titleXXS"}},Be={headerTitleContent:e=>R(qe,{...e})},qe=e=>{let t=`${e.filesLengthLabel}`;return e.showFilesSize&&(t+=` - ${e.filesTotalSize}`),R(Ue,{children:t})},ne=e=>{let t=e.slots?.headerTitleContent??Be.headerTitleContent,r=ke(()=>Ae($e.headerTitle,{...e,...e.slotProps?.headerTitle}),[e.filesLengthLabel,e.filesTotalSize,e]);return R(Re,{...r,children:R(t,{...r})})};var A={Container:re,Title:ne,ClearButton:te};import{jsx as y,jsxs as X}from"react/jsx-runtime";var se=({filesInfo:e,onRemoveFile:t,onRemoveAllFiles:r,slotProps:o,slots:n,showFilesSize:p})=>{let{files:d,headerInfo:a}=oe({filesInfo:e});return d.length===0?null:X(J,{...o?.listContainer,children:[X(A.Container,{children:[y(A.Title,{slots:n,slotProps:o?.header,filesLengthLabel:a.totalFilesLabel,filesTotalSize:a.totalSize,showFilesSize:p}),y(A.ClearButton,{onClick:r})]}),d.map((l,u)=>y(Ve,{title:l.name,children:X(W,{...o?.listItem,children:[y(ae,{icon:l.icon,removeMargin:!0,size:"24px"}),p&&y(ie,{variant:"titleXXS",color:le.neutral[600],whiteSpace:"nowrap",children:l.fileSize}),y(ie,{variant:"titleXXS",color:le.neutral[600],overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",textAlign:"center",children:l.name}),y(Oe,{variant:"text",color:"neutral",sx:{borderRadius:50},onClick:()=>t(u),children:y(ae,{icon:Xe,removeMargin:!0})})]})},`${l.name}-${u}`))]})};import{CircularProgress as pe,Stack as Z,Typography as k}from"@mui/material";import{LIcon as Ze}from"@s_mart/core";import{lineFileUpload as _e}from"@s_mart/regular-icons";import{jsx as b,jsxs as S}from"react/jsx-runtime";var de=({placeholder:e,isProcessingZip:t})=>t?S("div",{children:[S(Z,{id:"dropzone-upload-info",direction:"row",sx:{gap:1,alignItems:"center"},children:[b(pe,{sx:{color:"white"},size:24}),b(k,{variant:"titleSM",color:"white",children:"Descompactando zip..."})]}),S(Z,{id:"dropzone-upload-more-label",direction:"row",sx:{gap:1,alignItems:"center"},children:[b(pe,{sx:{color:"white"},size:12}),b(k,{variant:"bodySM",sx:{fontWeight:700},children:"Descompactando zip..."})]})]}):S("div",{children:[S(Z,{id:"dropzone-upload-info",direction:"row",sx:{gap:1,alignItems:"center"},children:[b(Ze,{icon:_e,size:"48px",color:"white",removeMargin:!0}),b(k,{variant:"titleSM",color:"white",children:e})]}),b(k,{id:"dropzone-upload-more-label",variant:"bodySM",sx:{fontWeight:700},children:"Carregar mais arquivos"})]});import{useCallback as E,useEffect as Qe,useMemo as Je,useRef as me,useState as G}from"react";var ce=async(e,t)=>{let r=[];for(let o of e.items){if(o.kind!=="file")continue;if(typeof o.webkitGetAsEntry=="function"){let p=o.webkitGetAsEntry();if(p===null)continue;let d=await je(p);r.push(...d);continue}let n=o.getAsFile();n&&r.push(n)}return t!==void 0&&(r=Ne(r,t)),r},je=e=>new Promise((t,r)=>{let o=0,n=[];p(e);function p(a){Ke(a)?(o++,a.file(l=>{o--,n.push(l),o===0&&t(n)})):Ge(a)&&d(a.createReader())}function d(a){o++,a.readEntries(function(l){o--;for(let u of l)p(u);o===0&&t(n)})}}),Ge=e=>e.isDirectory,Ke=e=>e.isFile,Ne=(e,t)=>{let r=[],o=t.split(",");for(let n of e){let p=`.${n.name.split(".").pop()?.toLowerCase()}`;o.includes(p)&&r.push(n)}return r};var _=e=>{e.stopPropagation(),e.preventDefault()},j=e=>{e.dataTransfer.dropEffect="link",_(e)};var ue=({onChange:e,filterOnDrop:t,maxSize:r,maxFiles:o,accept:n,onError:p,onWarning:d})=>{let[a,l]=G([]),[u,z]=G(!1),[C,L]=G(!1),x=me(null),s=me(!1),h=E(async i=>{L(!0);let m=[],{BlobReader:g,BlobWriter:f,ZipReader:M}=await import("@zip.js/zip.js").catch(()=>{throw new Error("Fa\xE7a a instala\xE7\xE3o da biblioteca @zip.js/zip.js para utilizar o Dropzone.")}),w=new g(i),D=new M(w);try{let T=await D.getEntries();for(let I of T){if(I.directory||I.getData===void 0)continue;let Te=await I.getData(new f),be=new File([Te],I.filename);m.push(be)}}catch(T){p?.("Ocorreu um erro ao processar o arquivo compactado.",T)}finally{L(!1),await D.close()}return m},[p]),c=E(async i=>{if(!n)return i;let m=[];for(let g of i){let f=`.${g.name.split(".").pop()?.toLocaleLowerCase()}`;if(!n.split(",").includes(f)){d?.(`O arquivo "${g.name}" n\xE3o \xE9 valido, extens\xF5es aceitas ${n}`);continue}if(f===".zip"){let w=await h(g);if(!w.length)continue;let D=await c(w);D.length&&m.push(...D);continue}m.push(g)}return m},[n,d,h]),F=E(async i=>{let m=await t?.(i)??i,g=await c(m);l(f=>{if(o!==void 0&&f.length+g.length>o)return d?.(`Quantidade m\xE1xima de arquivos ${o} alcan\xE7ada`),f;if(r!==void 0){let M=f.reduce((D,T)=>D+T.size,0),w=g.reduce((D,T)=>D+T.size,0);if(M+w>r)return d?.(`O arquivo \xE9 muito grande, O tamanho m\xE1ximo permitido \xE9 ${H(r)}`),f}return f!==void 0?[...f,...g]:g}),s.current=!0},[t,o,r,d,c]),De=async i=>{if(i.target.files){let m=[...i.target.files];F(m)}},ye=E(i=>{x.current?.value&&(x.current.value=""),l(m=>m?.filter((g,f)=>f!==i))},[]),ve=E(()=>{x.current?.value&&(x.current.value=""),l([])},[]),xe=Je(()=>a?.map(i=>({size:i.size,type:i.type,name:i.name}))??[],[a]),Fe=n?`${n.toUpperCase()},${n.toLowerCase()}`:void 0;return Qe(()=>{s.current&&e(a)},[a,e]),{inputRef:x,isDragging:u,filesInfo:xe,treatedAccept:Fe,isProcessingZip:C,handleRemoveFile:ye,handleRemoveAllFiles:ve,handleChangeFiles:De,handleDragEnter:i=>{j(i),z(!0)},handleDragLeave:i=>{j(i),z(!1)},handleDrop:async i=>{_(i),z(!1);let m=await ce(i.dataTransfer,n);F(m)}}};import{jsx as $,jsxs as fe}from"react/jsx-runtime";var We=e=>{let{inputRef:t,filesInfo:r,treatedAccept:o,handleChangeFiles:n,handleRemoveFile:p,handleRemoveAllFiles:d,handleDragEnter:a,handleDragLeave:l,handleDrop:u,isDragging:z,isProcessingZip:C}=ue(e),L=e.placeholder??"Pressione para carregar os arquivos";return fe(K,{onDragOver:a,...e.slotProps?.root,children:[$(N,{"data-is-dragging":z,onDrop:u,onDragLeave:l,...e.slotProps?.overlay}),$(se,{filesInfo:r,onRemoveFile:p,onRemoveAllFiles:d,showFilesSize:e.showFilesSize,slotProps:e.slotProps,slots:e.slots}),fe(Q,{htmlFor:"dropzone","data-max-files":e.maxFiles,"data-has-files":!!r.length,"data-is-processing-zip":C,...e.slotProps?.labelContainer,children:[$(de,{placeholder:L,isProcessingZip:C}),$("input",{ref:t,id:"dropzone",type:"file",accept:o,hidden:!0,onChange:n,multiple:e.maxFiles===void 0||e.maxFiles>1})]})]})};import{useEffect as eo,useState as oo}from"react";import{Dropzone as to,FileItem as ro}from"@dropzone-ui/react";import{LIcon as no}from"@s_mart/core";import{Tooltip as io,Typography as ao}from"@mui/material";import{lineTimes as lo}from"@s_mart/regular-icons";import{styled as Ye}from"@mui/material";import{colorPalette as ge}from"@s_mart/tokens";var he=Ye("button")`
|
|
106
106
|
display: flex;
|
|
107
107
|
align-items: center;
|
|
108
108
|
justify-content: center;
|
|
@@ -122,10 +122,10 @@ import{styled as T}from"@mui/material";import{colorPalette as k}from"@s_mart/tok
|
|
|
122
122
|
cursor: pointer;
|
|
123
123
|
transition: all 0.3s ease;
|
|
124
124
|
|
|
125
|
-
color: ${
|
|
125
|
+
color: ${ge.neutral[500]};
|
|
126
126
|
|
|
127
127
|
&:hover {
|
|
128
|
-
background-color: ${
|
|
128
|
+
background-color: ${ge.neutral[40]};
|
|
129
129
|
transition: all 0.3s ease;
|
|
130
130
|
}
|
|
131
|
-
`;import{Fragment as
|
|
131
|
+
`;import{Fragment as so,jsx as v,jsxs as po}from"react/jsx-runtime";var ze=({showDeleteAllFilesButton:e=!0,placeholder:t,fileItemProps:r,initialValue:o=[],onClean:n,onReset:p,tratamentoFilesOnChange:d,onNotification:a,...l})=>{let[u,z]=oo(o),C=s=>{let h=s.filter(c=>c.valid===!0);if(z(h),s.length>0){let c=s.filter(F=>F.valid===!1);c.length===1?a({variant:"warning",duration:5e3,title:`Arquivo ${c[0].file.name} inv\xE1lido`,message:c[0].errors?.[0]}):c.length>1&&c.forEach(F=>{a({variant:"warning",duration:5e3,title:`Arquivo ${F.file.name} inv\xE1lido`,message:F.errors?.[0]})})}},L=()=>{z([]),p?.()},x=s=>{let h=u.filter(c=>c.id!==s.id);z(h),n?.(h)};return eo(()=>{o.length&&z(o)},[o]),v(to,{localization:"PT-pt",header:!1,footer:!1,headerClassName:"header",view:"grid",value:u,...l,onChange:async s=>{let h=s;if(d){let c=await d(s);c&&(h=c)}C(h),l.onChange?.(h)},children:u.length===0?v("div",{children:t||"Arraste os arquivos aqui ou clique para selecionar"}):po(so,{children:[e&&v(io,{title:v(ao,{variant:"bodyMD",children:"Remover"}),children:v(he,{onClick:s=>{s.preventDefault(),s.stopPropagation(),L()},children:v(no,{icon:lo,size:"24px"})})}),v("div",{style:{display:"flex"},children:u?.map(s=>v(ro,{info:!0,localization:"PT-pt",preview:!0,...s,...r,onDelete:()=>x(s)},s.id))})]})})};export{ze as Dropzone,ze as DropzoneV1,We as DropzoneV2};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@s_mart/dropzone",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.2.1",
|
|
4
4
|
"main": "./dist/index.mjs",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.mts",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@dropzone-ui/react": "^6.7.20",
|
|
14
|
+
"@mui/utils": "^6.4.3",
|
|
14
15
|
"tsup": "8.0.2"
|
|
15
16
|
},
|
|
16
17
|
"peerDependencies": {
|
|
@@ -27,9 +28,9 @@
|
|
|
27
28
|
"react-dom": ">=18.3.1",
|
|
28
29
|
"typescript": ">=5.4.2",
|
|
29
30
|
"@s_mart/core": "9.1.5",
|
|
30
|
-
"@s_mart/light-icons": "6.0.9",
|
|
31
31
|
"@s_mart/regular-icons": "6.0.10",
|
|
32
|
-
"@s_mart/tokens": "5.1.1"
|
|
32
|
+
"@s_mart/tokens": "5.1.1",
|
|
33
|
+
"@s_mart/light-icons": "6.0.9"
|
|
33
34
|
},
|
|
34
35
|
"devDependencies": {
|
|
35
36
|
"@emotion/react": "^11.11.4",
|