@aws-amplify/ui-react-storage 0.0.0-storagemanager-37cac7b-20230403170123 → 0.0.0-studio-26ea5cc-20230414194453

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.
Files changed (22) hide show
  1. package/dist/esm/components/StorageManager/StorageManager.mjs +1 -1
  2. package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs +1 -1
  3. package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs +1 -1
  4. package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.mjs +1 -0
  5. package/dist/esm/components/StorageManager/utils/displayText.mjs +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/styles.css +402 -1
  8. package/dist/types/components/StorageManager/StorageManager.d.ts +6 -6
  9. package/dist/types/components/StorageManager/hooks/index.d.ts +1 -1
  10. package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts +2 -2
  11. package/dist/types/components/StorageManager/hooks/useUploadFiles/useUploadFiles.d.ts +2 -2
  12. package/dist/types/components/StorageManager/types.d.ts +17 -12
  13. package/dist/types/components/StorageManager/ui/DropZone/index.d.ts +1 -2
  14. package/dist/types/components/StorageManager/ui/DropZone/types.d.ts +0 -6
  15. package/dist/types/components/StorageManager/ui/FilePicker/FilePicker.d.ts +6 -0
  16. package/dist/types/components/StorageManager/ui/FilePicker/index.d.ts +1 -0
  17. package/dist/types/components/StorageManager/ui/index.d.ts +2 -1
  18. package/dist/types/components/StorageManager/utils/displayText.d.ts +1 -1
  19. package/dist/types/components/StorageManager/utils/uploadFile.d.ts +1 -1
  20. package/package.json +4 -3
  21. package/dist/esm/components/StorageManager/ui/DropZone/FilePicker.mjs +0 -1
  22. package/dist/types/components/StorageManager/ui/DropZone/FilePicker.d.ts +0 -3
@@ -1 +1 @@
1
- import*as e from"react";import{Logger as i}from"aws-amplify";import{ComponentClassNames as s}from"@aws-amplify/ui-react";import{useDropZone as o}from"./hooks/useDropZone/useDropZone.mjs";import{useStorageManager as r}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as l}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as t}from"./types.mjs";import{Container as a}from"./ui/Container/Container.mjs";import{DropZone as n}from"./ui/DropZone/DropZone.mjs";import{FilePicker as p}from"./ui/DropZone/FilePicker.mjs";import{FileList as m}from"./ui/FileList/FileList.mjs";import{FileListHeader as d}from"./ui/FileListHeader/FileListHeader.mjs";import{checkMaxFileSize as u}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as c}from"./utils/displayText.mjs";import{filterAllowedFiles as F}from"./utils/filterAllowedFiles.mjs";import"tslib";const f=new i("Storage.StorageManager");function g({acceptedFileTypes:i,accessLevel:g,defaultFiles:h,displayText:U,isResumable:y=!1,maxFileCount:x,maxFileSize:T,onUploadError:j,onUploadSuccess:S,onFileRemove:C,showThumbnails:L=!0,processFile:k,components:E,provider:v,path:b}){i&&g&&x||f.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const D=Object.assign({Container:a,DropZone:n,FileList:m,FilePicker:p,FileListHeader:d},E),M=void 0===x||"number"==typeof x&&x>1,P=Object.assign(Object.assign({},c),U),{getFileSizeErrorText:w}=P,Z=e=>u({file:e,maxFileSize:T,getFileSizeErrorText:w}),{addFiles:R,files:z,removeUpload:H,setUploadingFile:O,setUploadPaused:A,setUploadProgress:$,setUploadSuccess:q,setUploadResumed:N}=r(h),B=o({onChange:e=>{const{files:s}=e.dataTransfer;if(!s||0===s.length)return;const o=F(Array.from(s),i);R({files:o,getFileErrorMessage:Z})}});l({accessLevel:g,files:z,isResumable:y,maxFileCount:x,onUploadError:j,onUploadSuccess:S,setUploadingFile:O,setUploadProgress:$,setUploadSuccess:q,processFile:k,provider:v,path:b});const G=0!==z.length&&z.every((e=>100===(null==e?void 0:e.progress))),I=z.filter((e=>e.progress<100)).length>x,J=z.filter((e=>(null==e?void 0:e.status)===t.UPLOADED)).length,K=z.length-J,Q=z.length>0;return e.createElement(D.Container,{className:`${s.StorageManager} ${Q?s.StorageManagerPreviewer:""}`},e.createElement(D.DropZone,Object.assign({},B,{displayText:P}),e.createElement(D.FilePicker,{onFileChange:e=>{const{files:i}=e.target;i&&0!==i.length&&R({files:Array.from(i),getFileErrorMessage:Z})},displayText:P,acceptedFileTypes:i,allowMultipleFiles:M})),Q?e.createElement(D.FileListHeader,{allUploadsSuccessful:G,displayText:P,fileCount:z.length,remainingFilesCount:K}):null,e.createElement(D.FileList,{displayText:P,files:z,isResumable:y,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),H({id:e})},onDeleteUpload:({id:e})=>{if(H({id:e}),"function"==typeof C){const i=z.find((i=>i.id===e));i&&C({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),N({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),A({id:e})},showThumbnails:L,hasMaxFilesError:I,maxFileCount:x}))}g.Container=a,g.DropZone=n,g.FileList=m,g.FileListHeader=d,g.FilePicker=p;export{g as StorageManager};
1
+ import*as e from"react";import{Logger as i}from"aws-amplify";import{ComponentClassNames as o,VisuallyHidden as s}from"@aws-amplify/ui-react";import{useDropZone as r}from"./hooks/useDropZone/useDropZone.mjs";import{useStorageManager as t}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as l}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as a}from"./types.mjs";import{Container as n}from"./ui/Container/Container.mjs";import{DropZone as p}from"./ui/DropZone/DropZone.mjs";import{FileList as m}from"./ui/FileList/FileList.mjs";import{FileListHeader as u}from"./ui/FileListHeader/FileListHeader.mjs";import{FilePicker as c}from"./ui/FilePicker/FilePicker.mjs";import{checkMaxFileSize as d}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as f}from"./utils/displayText.mjs";import{filterAllowedFiles as F}from"./utils/filterAllowedFiles.mjs";import"tslib";const g=new i("Storage.StorageManager");function U({acceptedFileTypes:i,accessLevel:U,defaultFiles:h,displayText:x,isResumable:y=!1,maxFileCount:S,maxFileSize:j,onUploadError:E,onUploadSuccess:k,onFileRemove:T,onUploadStart:C,showThumbnails:L=!0,processFile:b,components:v,provider:D,path:P}){i&&U&&S||g.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const w=Object.assign({Container:n,DropZone:p,FileList:m,FilePicker:c,FileListHeader:u},v),M=void 0===S||"number"==typeof S&&S>1,R=Object.assign(Object.assign({},f),x),{getFileSizeErrorText:Z}=R,O=e=>d({file:e,maxFileSize:j,getFileSizeErrorText:Z}),{addFiles:z,files:A,removeUpload:H,setUploadingFile:$,setUploadPaused:q,setUploadProgress:I,setUploadSuccess:N,setUploadResumed:B}=t(h),G=r({onChange:e=>{const{files:o}=e.dataTransfer;if(!o||0===o.length)return;const s=F(Array.from(o),i);z({files:s,getFileErrorMessage:O})}});l({accessLevel:U,files:A,isResumable:y,maxFileCount:S,onUploadError:E,onUploadSuccess:k,onUploadStart:C,setUploadingFile:$,setUploadProgress:I,setUploadSuccess:N,processFile:b,provider:D,path:P});const J=0!==A.length&&A.every((e=>(null==e?void 0:e.status)===a.UPLOADED)),K=A.filter((e=>e.progress<100)).length>S,Q=A.filter((e=>(null==e?void 0:e.status)===a.UPLOADED)).length,V=A.length-Q,W=A.length>0,X=e.useRef(null);return e.createElement(w.Container,{className:`${o.StorageManager} ${W?o.StorageManagerPreviewer:""}`},e.createElement(w.DropZone,Object.assign({},G,{displayText:R}),e.createElement(e.Fragment,null,e.createElement(w.FilePicker,{onClick:function(){X.current&&(X.current.click(),X.current.value="")}},R.browseFilesText),e.createElement(s,null,e.createElement("input",{type:"file",tabIndex:-1,ref:X,onChange:e=>{const{files:i}=e.target;i&&0!==i.length&&z({files:Array.from(i),getFileErrorMessage:O})},multiple:M,accept:i.join(",")})))),W?e.createElement(w.FileListHeader,{allUploadsSuccessful:J,displayText:R,fileCount:A.length,remainingFilesCount:V}):null,e.createElement(w.FileList,{displayText:R,files:A,isResumable:y,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),H({id:e})},onDeleteUpload:({id:e})=>{if(H({id:e}),"function"==typeof T){const i=A.find((i=>i.id===e));i&&T({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),B({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),q({id:e})},showThumbnails:L,hasMaxFilesError:K,maxFileCount:S}))}U.Container=n,U.DropZone=p,U.FileList=m,U.FileListHeader=u,U.FilePicker=c;export{U as StorageManager};
@@ -1 +1 @@
1
- import s from"react";import{FileStatus as e}from"../../types.mjs";import{storageManagerStateReducer as i}from"./reducer.mjs";import{addFilesAction as r,setUploadingFileAction as t,setUploadProgressAction as d,setUploadStatusAction as o,removeUploadAction as a}from"./actions.mjs";function l(l=[]){const[{files:p},m]=s.useReducer(i,{files:l.map((s=>Object.assign(Object.assign({},s),{id:s.key,key:s.key,status:e.UPLOADED})))});return{removeUpload:({id:s})=>{m(a({id:s}))},setUploadPaused:({id:s})=>{m(o({id:s,status:e.PAUSED}))},setUploadProgress:({progress:s,id:e})=>{m(d({id:e,progress:s}))},setUploadResumed:({id:s})=>{m(o({id:s,status:e.UPLOADING}))},setUploadSuccess:({id:s})=>{m(o({id:s,status:e.UPLOADED}))},setUploadingFile:({uploadTask:s,id:e})=>{m(t({id:e,uploadTask:s}))},addFiles:({files:s,getFileErrorMessage:e})=>{m(r({files:s,getFileErrorMessage:e}))},files:p}}export{l as useStorageManager};
1
+ import s from"react";import{FileStatus as e}from"../../types.mjs";import{storageManagerStateReducer as i}from"./reducer.mjs";import{addFilesAction as r,setUploadingFileAction as t,setUploadProgressAction as o,setUploadStatusAction as d,removeUploadAction as a}from"./actions.mjs";import{isObject as l}from"@aws-amplify/ui";const p=s=>(s=>!(!l(s)||!s.key))(s)?Object.assign(Object.assign({},s),{id:s.key,status:e.UPLOADED}):void 0;function m(l=[]){const[{files:m},u]=s.useReducer(i,{files:Array.isArray(l)?l.map(p).filter((s=>!!s)):[]});return{removeUpload:({id:s})=>{u(a({id:s}))},setUploadPaused:({id:s})=>{u(d({id:s,status:e.PAUSED}))},setUploadProgress:({progress:s,id:e})=>{u(o({id:e,progress:s}))},setUploadResumed:({id:s})=>{u(d({id:s,status:e.UPLOADING}))},setUploadSuccess:({id:s})=>{u(d({id:s,status:e.UPLOADED}))},setUploadingFile:({uploadTask:s,id:e})=>{u(t({id:e,uploadTask:s}))},addFiles:({files:s,getFileErrorMessage:e})=>{u(r({files:s,getFileErrorMessage:e}))},files:m}}export{m as useStorageManager};
@@ -1 +1 @@
1
- import*as e from"react";import{uploadFile as l}from"../../utils/uploadFile.mjs";import{FileStatus as o}from"../../types.mjs";function s({files:s,accessLevel:i,isResumable:a,setUploadProgress:r,setUploadingFile:t,setUploadSuccess:c,onUploadError:f,onUploadSuccess:p,maxFileCount:d,processFile:n,provider:m,path:u=""}){e.useEffect((()=>{const e=s.filter((e=>e.status===o.QUEUED));if(!(e.length>d))for(const{file:o,key:s,id:d}of e){const e=e=>{null==p||p(e),c({id:d})},k=e=>{const l=0===e.total?100:Math.floor(e.loaded/e.total*100);r({id:d,progress:l})},b=e=>{null==f||f(e)};if(o){const r="function"==typeof n?n({file:o,key:s}):{file:o,key:s};if(a){const o=l({file:r.file,fileName:u+r.key,isResumable:!0,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m});t({id:d,uploadTask:o})}else l({file:r.file,fileName:u+r.key,isResumable:!1,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m}),t({id:d})}}}),[s,i,a,r,t,f,p,d,c,n,m,u])}export{s as useUploadFiles};
1
+ import*as e from"react";import{uploadFile as l}from"../../utils/uploadFile.mjs";import{FileStatus as o}from"../../types.mjs";function s({files:s,accessLevel:a,isResumable:i,setUploadProgress:r,setUploadingFile:t,setUploadSuccess:c,onUploadError:f,onUploadSuccess:p,onUploadStart:n,maxFileCount:d,processFile:m,provider:u,path:k=""}){e.useEffect((()=>{const e=s.filter((e=>e.status===o.QUEUED));if(!(e.length>d))for(const{file:o,key:s,id:d}of e){const e=e=>{null==p||p(e),c({id:d})},b=e=>{const l=0===e.total?100:Math.floor(e.loaded/e.total*100);r({id:d,progress:l})},y=e=>{null==f||f(e,{key:s})};if(o){const r="function"==typeof m?m({file:o,key:s}):{file:o,key:s};if(null==n||n({key:s}),i){const o=l({file:r.file,fileName:k+r.key,isResumable:!0,level:a,completeCallback:e,progressCallback:b,errorCallback:y,provider:u});t({id:d,uploadTask:o})}else l({file:r.file,fileName:k+r.key,isResumable:!1,level:a,completeCallback:e,progressCallback:b,errorCallback:y,provider:u}),t({id:d})}}}),[s,a,i,r,t,f,p,n,d,c,m,u,k])}export{s as useUploadFiles};
@@ -0,0 +1 @@
1
+ import{__rest as e}from"tslib";import r from"react";import{ComponentClassNames as a,Button as i}from"@aws-amplify/ui-react";function s(s){var{children:t,className:m=a.StorageManagerFilePicker,size:c="small"}=s,l=e(s,["children","className","size"]);return r.createElement(i,Object.assign({},l,{className:m,size:c}),t)}export{s as FilePicker};
@@ -1 +1 @@
1
- const e={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded successfully",getPausedText:e=>`Paused: ${e}%`};export{e as defaultStorageManagerDisplayText};
1
+ const e={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded",getPausedText:e=>`Paused: ${e}%`};export{e as defaultStorageManagerDisplayText};
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("tslib"),l=require("classnames"),r=require("@aws-amplify/ui"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var u,c,d=o(e),p=i(e),m=o(l);function g(e,a){switch(a.type){case c.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?u.ERROR:u.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case c.SET_STATUS_UPLOADING:{const{id:t,uploadTask:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:u.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_UPLOAD_PROGRESS:{const{id:t,progress:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{progress:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_STATUS:{const{id:t,status:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.REMOVE_UPLOAD:{const{id:t}=a,{files:s}=e,l=s.reduce(((e,a)=>a.id===t?[...e]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:l})}}}!function(e){e.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(u||(u={})),function(e){e.ADD_FILES="ADD_FILES",e.SET_STATUS="SET_STATUS",e.SET_STATUS_UPLOADING="SET_STATUS_UPLOADING",e.SET_UPLOAD_PROGRESS="SET_UPLOAD_PROGRESS",e.REMOVE_UPLOAD="REMOVE_UPLOAD"}(c||(c={}));const f=({id:e,status:a})=>({type:c.SET_STATUS,id:e,status:a});function E(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:e.map((e=>Object.assign(Object.assign({},e),{id:e.key,key:e.key,status:u.UPLOADED})))});return{removeUpload:({id:e})=>{t((({id:e})=>({type:c.REMOVE_UPLOAD,id:e}))({id:e}))},setUploadPaused:({id:e})=>{t(f({id:e,status:u.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t((({id:e,progress:a})=>({type:c.SET_UPLOAD_PROGRESS,id:e,progress:a}))({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(f({id:e,status:u.UPLOADING}))},setUploadSuccess:({id:e})=>{t(f({id:e,status:u.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t((({id:e,uploadTask:a})=>({type:c.SET_STATUS_UPLOADING,id:e,uploadTask:a}))({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t((({files:e,getFileErrorMessage:a})=>({type:c.ADD_FILES,files:e,getFileErrorMessage:a}))({files:e,getFileErrorMessage:a}))},files:a}}function T(e){var{file:t,fileName:l,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:u=!1,provider:c}=e,d=s.__rest(e,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===u?a.Storage.put(l,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:c},d)):a.Storage.put(l,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:c},d)).then(i,o)}function S({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function C({children:e,displayText:a,inDropZone:s,onDragEnter:l,onDragLeave:o,onDragOver:i,onDragStart:u,onDrop:c,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(s&&r.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:u,onDragEnter:l,onDragLeave:o,onDrop:c,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}function U({acceptedFileTypes:e,allowMultipleFiles:a,displayText:s,onFileChange:l}){const r=d.default.useRef(null),{browseFilesText:n}=s;return d.default.createElement(t.View,null,d.default.createElement(t.Button,{className:t.ComponentClassNames.StorageManagerDropZoneButton,onClick:function(){r.current&&(r.current.click(),r.current.value="")},size:"small"},n),d.default.createElement(t.VisuallyHidden,null,d.default.createElement("input",{type:"file",tabIndex:-1,ref:r,onChange:l,multiple:a,accept:e.join(",")})))}const D=({errorMessage:e,getPausedText:a,getUploadingText:s,percentage:l,status:o,uploadSuccessfulText:i})=>{switch(o){case u.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},s(l));case u.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(l));case u.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case u.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},F=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),b=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?r.humanFileSize(a,!0):"")),x=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function O({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:c,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:T,getUploadingText:S,uploadSuccessfulText:C,pauseText:U,resumeText:O}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(x,{isImage:r,fileName:s,url:E}):null,d.default.createElement(b,{displayName:s,fileSize:m}),g===u.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==u.UPLOADING&&g!==u.PAUSED?null:g===u.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},O):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},U),d.default.createElement(F,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(D,{uploadSuccessfulText:C,getUploadingText:S,getPausedText:T,status:g,errorMessage:l,percentage:c}))}function N({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:c,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:T}=a,S=t&&f?URL.createObjectURL(t):"",C=!l||p>0,U=s===u.UPLOADING;return d.default.createElement(O,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:U,isResumable:l,key:E,loaderIsDeterminate:C,onRemove:()=>{l&&(s===u.UPLOADING||s===u.PAUSED)&&T?r({id:E,uploadTask:T}):n({id:E})},onPause:()=>{T&&i({id:E,uploadTask:T})},onResume:()=>{T&&o({id:E,uploadTask:T})},progress:p,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:S})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function P({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}const y=({file:e,getFileSizeErrorText:a,maxFileSize:t})=>void 0===t?"":e.size>t?a(function(e,a=!1,t=1){const s=a?1e3:1024;if(Math.abs(e)<s)return`${e} B`;const l=a?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let r=-1;const n=Math.pow(10,t);do{e/=s,++r}while(Math.round(Math.abs(e)*n)/n>=s&&r<l.length-1);return e.toFixed(t)+" "+l[r]}(t,!0)):"",k={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded successfully",getPausedText:e=>`Paused: ${e}%`},v=new a.Logger("Storage.StorageManager");function M({acceptedFileTypes:a,accessLevel:s,defaultFiles:l,displayText:r,isResumable:n=!1,maxFileCount:o,maxFileSize:i,onUploadError:c,onUploadSuccess:d,onFileRemove:m,showThumbnails:g=!0,processFile:f,components:D,provider:F,path:b}){a&&s&&o||v.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const x=Object.assign({Container:S,DropZone:C,FileList:N,FilePicker:U,FileListHeader:P},D),O=void 0===o||"number"==typeof o&&o>1,M=Object.assign(Object.assign({},k),r),{getFileSizeErrorText:h}=M,L=e=>y({file:e,maxFileSize:i,getFileSizeErrorText:h}),{addFiles:R,files:A,removeUpload:w,setUploadingFile:I,setUploadPaused:_,setUploadProgress:j,setUploadSuccess:B,setUploadResumed:z}=E(l),G=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>e.filter((e=>{const t=e.name||"",s=(e.type||"").toLowerCase(),l=s.replace(/\/.*$/,"");return a.some((e=>{const a=e.trim().toLowerCase();return"."===a.charAt(0)?t.toLowerCase().endsWith(a):a.endsWith("/*")?l===a.replace(/\/.*$/,""):s===a}))})))(Array.from(t),a);R({files:s,getFileErrorMessage:L})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:l,setUploadSuccess:r,onUploadError:n,onUploadSuccess:o,maxFileCount:i,processFile:c,provider:d,path:m=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===u.QUEUED));if(!(p.length>i))for(const{file:e,key:i,id:u}of p){const p=e=>{null==o||o(e),r({id:u})},g=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:u,progress:a})},f=e=>{null==n||n(e)};if(e){const s="function"==typeof c?c({file:e,key:i}):{file:e,key:i};if(t){const e=T({file:s.file,fileName:m+s.key,isResumable:!0,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d});l({id:u,uploadTask:e})}else T({file:s.file,fileName:m+s.key,isResumable:!1,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d}),l({id:u})}}}),[e,a,t,s,l,n,o,i,r,c,d,m])}({accessLevel:s,files:A,isResumable:n,maxFileCount:o,onUploadError:c,onUploadSuccess:d,setUploadingFile:I,setUploadProgress:j,setUploadSuccess:B,processFile:f,provider:F,path:b});const $=0!==A.length&&A.every((e=>100===(null==e?void 0:e.progress))),V=A.filter((e=>e.progress<100)).length>o,Z=A.filter((e=>(null==e?void 0:e.status)===u.UPLOADED)).length,q=A.length-Z,H=A.length>0;return p.createElement(x.Container,{className:`${t.ComponentClassNames.StorageManager} ${H?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(x.DropZone,Object.assign({},G,{displayText:M}),p.createElement(x.FilePicker,{onFileChange:e=>{const{files:a}=e.target;a&&0!==a.length&&R({files:Array.from(a),getFileErrorMessage:L})},displayText:M,acceptedFileTypes:a,allowMultipleFiles:O})),H?p.createElement(x.FileListHeader,{allUploadsSuccessful:$,displayText:M,fileCount:A.length,remainingFilesCount:q}):null,p.createElement(x.FileList,{displayText:M,files:A,isResumable:n,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),w({id:e})},onDeleteUpload:({id:e})=>{if(w({id:e}),"function"==typeof m){const a=A.find((a=>a.id===e));a&&m({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),z({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),_({id:e})},showThumbnails:g,hasMaxFilesError:V,maxFileCount:o}))}M.Container=S,M.DropZone=C,M.FileList=N,M.FileListHeader=P,M.FilePicker=U,exports.StorageManager=M;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("@aws-amplify/ui"),l=require("tslib"),r=require("classnames"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var u,c,d=o(e),p=i(e),m=o(r);function g(e,a){switch(a.type){case c.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?u.ERROR:u.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case c.SET_STATUS_UPLOADING:{const{id:t,uploadTask:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:u.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_UPLOAD_PROGRESS:{const{id:t,progress:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{progress:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_STATUS:{const{id:t,status:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.REMOVE_UPLOAD:{const{id:t}=a,{files:s}=e,l=s.reduce(((e,a)=>a.id===t?[...e]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:l})}}}!function(e){e.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(u||(u={})),function(e){e.ADD_FILES="ADD_FILES",e.SET_STATUS="SET_STATUS",e.SET_STATUS_UPLOADING="SET_STATUS_UPLOADING",e.SET_UPLOAD_PROGRESS="SET_UPLOAD_PROGRESS",e.REMOVE_UPLOAD="REMOVE_UPLOAD"}(c||(c={}));const f=({files:e,getFileErrorMessage:a})=>({type:c.ADD_FILES,files:e,getFileErrorMessage:a}),E=({id:e,uploadTask:a})=>({type:c.SET_STATUS_UPLOADING,id:e,uploadTask:a}),S=({id:e,progress:a})=>({type:c.SET_UPLOAD_PROGRESS,id:e,progress:a}),T=({id:e,status:a})=>({type:c.SET_STATUS,id:e,status:a}),U=({id:e})=>({type:c.REMOVE_UPLOAD,id:e}),C=e=>(e=>!(!s.isObject(e)||!e.key))(e)?Object.assign(Object.assign({},e),{id:e.key,status:u.UPLOADED}):void 0;function D(e){var{file:t,fileName:s,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:u=!1,provider:c}=e,d=l.__rest(e,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===u?a.Storage.put(s,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:c},d)):a.Storage.put(s,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:c},d)).then(i,o)}function b({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function F({children:e,displayText:a,inDropZone:l,onDragEnter:r,onDragLeave:o,onDragOver:i,onDragStart:u,onDrop:c,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(l&&s.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:u,onDragEnter:r,onDragLeave:o,onDrop:c,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}const x=({errorMessage:e,getPausedText:a,getUploadingText:l,percentage:r,status:o,uploadSuccessfulText:i})=>{switch(o){case u.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},l(r));case u.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(r));case u.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case u.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},O=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),N=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?s.humanFileSize(a,!0):"")),P=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function y({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:c,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:S,getUploadingText:T,uploadSuccessfulText:U,pauseText:C,resumeText:D}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(P,{isImage:r,fileName:s,url:E}):null,d.default.createElement(N,{displayName:s,fileSize:m}),g===u.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==u.UPLOADING&&g!==u.PAUSED?null:g===u.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},D):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},C),d.default.createElement(O,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(x,{uploadSuccessfulText:U,getUploadingText:T,getPausedText:S,status:g,errorMessage:l,percentage:c}))}function k({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:c,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:S}=a,T=t&&f?URL.createObjectURL(t):"",U=!l||p>0,C=s===u.UPLOADING;return d.default.createElement(y,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:C,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===u.UPLOADING||s===u.PAUSED)&&S?r({id:E,uploadTask:S}):n({id:E})},onPause:()=>{S&&i({id:E,uploadTask:S})},onResume:()=>{S&&o({id:E,uploadTask:S})},progress:p,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:T})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function v({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}function h(e){var{children:a,className:s=t.ComponentClassNames.StorageManagerFilePicker,size:r="small"}=e,n=l.__rest(e,["children","className","size"]);return d.default.createElement(t.Button,Object.assign({},n,{className:s,size:r}),a)}const M=({file:e,getFileSizeErrorText:a,maxFileSize:t})=>void 0===t?"":e.size>t?a(function(e,a=!1,t=1){const s=a?1e3:1024;if(Math.abs(e)<s)return`${e} B`;const l=a?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let r=-1;const n=Math.pow(10,t);do{e/=s,++r}while(Math.round(Math.abs(e)*n)/n>=s&&r<l.length-1);return e.toFixed(t)+" "+l[r]}(t,!0)):"",A={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded",getPausedText:e=>`Paused: ${e}%`},L=new a.Logger("Storage.StorageManager");function R({acceptedFileTypes:a,accessLevel:s,defaultFiles:l,displayText:r,isResumable:n=!1,maxFileCount:o,maxFileSize:i,onUploadError:c,onUploadSuccess:m,onFileRemove:x,onUploadStart:O,showThumbnails:N=!0,processFile:P,components:y,provider:R,path:_}){a&&s&&o||L.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const j=Object.assign({Container:b,DropZone:F,FileList:k,FilePicker:h,FileListHeader:v},y),w=void 0===o||"number"==typeof o&&o>1,I=Object.assign(Object.assign({},A),r),{getFileSizeErrorText:z}=I,B=e=>M({file:e,maxFileSize:i,getFileSizeErrorText:z}),{addFiles:G,files:$,removeUpload:V,setUploadingFile:Z,setUploadPaused:q,setUploadProgress:H,setUploadSuccess:W,setUploadResumed:Q}=function(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:Array.isArray(e)?e.map(C).filter((e=>!!e)):[]});return{removeUpload:({id:e})=>{t(U({id:e}))},setUploadPaused:({id:e})=>{t(T({id:e,status:u.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t(S({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(T({id:e,status:u.UPLOADING}))},setUploadSuccess:({id:e})=>{t(T({id:e,status:u.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t(E({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t(f({files:e,getFileErrorMessage:a}))},files:a}}(l),Y=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>e.filter((e=>{const t=e.name||"",s=(e.type||"").toLowerCase(),l=s.replace(/\/.*$/,"");return a.some((e=>{const a=e.trim().toLowerCase();return"."===a.charAt(0)?t.toLowerCase().endsWith(a):a.endsWith("/*")?l===a.replace(/\/.*$/,""):s===a}))})))(Array.from(t),a);G({files:s,getFileErrorMessage:B})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:l,setUploadSuccess:r,onUploadError:n,onUploadSuccess:o,onUploadStart:i,maxFileCount:c,processFile:d,provider:m,path:g=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===u.QUEUED));if(!(p.length>c))for(const{file:e,key:u,id:c}of p){const p=e=>{null==o||o(e),r({id:c})},f=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:c,progress:a})},E=e=>{null==n||n(e,{key:u})};if(e){const s="function"==typeof d?d({file:e,key:u}):{file:e,key:u};if(null==i||i({key:u}),t){const e=D({file:s.file,fileName:g+s.key,isResumable:!0,level:a,completeCallback:p,progressCallback:f,errorCallback:E,provider:m});l({id:c,uploadTask:e})}else D({file:s.file,fileName:g+s.key,isResumable:!1,level:a,completeCallback:p,progressCallback:f,errorCallback:E,provider:m}),l({id:c})}}}),[e,a,t,s,l,n,o,i,c,r,d,m,g])}({accessLevel:s,files:$,isResumable:n,maxFileCount:o,onUploadError:c,onUploadSuccess:m,onUploadStart:O,setUploadingFile:Z,setUploadProgress:H,setUploadSuccess:W,processFile:P,provider:R,path:_});const K=0!==$.length&&$.every((e=>(null==e?void 0:e.status)===u.UPLOADED)),J=$.filter((e=>e.progress<100)).length>o,X=$.filter((e=>(null==e?void 0:e.status)===u.UPLOADED)).length,ee=$.length-X,ae=$.length>0,te=p.useRef(null);return p.createElement(j.Container,{className:`${t.ComponentClassNames.StorageManager} ${ae?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(j.DropZone,Object.assign({},Y,{displayText:I}),p.createElement(p.Fragment,null,p.createElement(j.FilePicker,{onClick:function(){te.current&&(te.current.click(),te.current.value="")}},I.browseFilesText),p.createElement(t.VisuallyHidden,null,p.createElement("input",{type:"file",tabIndex:-1,ref:te,onChange:e=>{const{files:a}=e.target;a&&0!==a.length&&G({files:Array.from(a),getFileErrorMessage:B})},multiple:w,accept:a.join(",")})))),ae?p.createElement(j.FileListHeader,{allUploadsSuccessful:K,displayText:I,fileCount:$.length,remainingFilesCount:ee}):null,p.createElement(j.FileList,{displayText:I,files:$,isResumable:n,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),V({id:e})},onDeleteUpload:({id:e})=>{if(V({id:e}),"function"==typeof x){const a=$.find((a=>a.id===e));a&&x({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),Q({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),q({id:e})},showThumbnails:N,hasMaxFilesError:J,maxFileCount:o}))}R.Container=b,R.DropZone=F,R.FileList=k,R.FileListHeader=v,R.FilePicker=h,exports.StorageManager=R;
package/dist/styles.css CHANGED
@@ -349,6 +349,7 @@
349
349
  --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
350
350
  --amplify-components-field-gap: var(--amplify-space-xs);
351
351
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
352
+ --amplify-components-field-flex-direction: column;
352
353
  --amplify-components-field-small-gap: var(--amplify-space-xxxs);
353
354
  --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
354
355
  --amplify-components-field-large-gap: var(--amplify-space-small);
@@ -511,6 +512,7 @@
511
512
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
512
513
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
513
514
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
515
+ --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
514
516
  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
515
517
  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
516
518
  --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
@@ -2620,6 +2622,7 @@ strong.amplify-text {
2620
2622
  .amplify-field {
2621
2623
  font-size: var(--amplify-components-field-font-size);
2622
2624
  gap: var(--amplify-components-field-gap);
2625
+ flex-direction: var(--amplify-components-field-flex-direction);
2623
2626
  }
2624
2627
  .amplify-field--small {
2625
2628
  font-size: var(--amplify-components-field-small-font-size);
@@ -2768,6 +2771,405 @@ html[dir=rtl] .amplify-field-group__inner-start {
2768
2771
  height: 100%;
2769
2772
  }
2770
2773
 
2774
+ .amplify-liveness-cancel-container {
2775
+ z-index: 2;
2776
+ position: absolute;
2777
+ top: var(--amplify-space-medium);
2778
+ right: var(--amplify-space-medium);
2779
+ }
2780
+
2781
+ .amplify-liveness-cancel-button {
2782
+ background-color: var(--amplify-colors-background-primary);
2783
+ }
2784
+
2785
+ .amplify-liveness-fade-out {
2786
+ animation-name: amplify-liveness-animation-fadeout;
2787
+ animation-duration: 1s;
2788
+ animation-fill-mode: forwards;
2789
+ }
2790
+
2791
+ @keyframes amplify-liveness-animation-fadeout {
2792
+ from {
2793
+ opacity: 1;
2794
+ }
2795
+ to {
2796
+ opacity: 0;
2797
+ }
2798
+ }
2799
+ .amplify-liveness-camera-module {
2800
+ flex-direction: column;
2801
+ align-items: center;
2802
+ justify-content: center;
2803
+ background-color: var(--amplify-components-liveness-camera-module-background-color);
2804
+ border: 1px solid var(--amplify-colors-neutral-40);
2805
+ position: relative;
2806
+ }
2807
+
2808
+ .amplify-liveness-camera-module--mobile {
2809
+ position: fixed;
2810
+ top: 0;
2811
+ left: 0;
2812
+ height: 100%;
2813
+ width: 100%;
2814
+ }
2815
+
2816
+ .amplify-liveness-video {
2817
+ position: absolute;
2818
+ top: 0;
2819
+ left: 0;
2820
+ width: 100%;
2821
+ height: 100%;
2822
+ }
2823
+
2824
+ .amplify-liveness-freshness-canvas {
2825
+ height: 100%;
2826
+ width: 100%;
2827
+ position: fixed;
2828
+ top: 0;
2829
+ left: 0;
2830
+ pointer-events: none;
2831
+ z-index: 1;
2832
+ }
2833
+
2834
+ .amplify-liveness-loader {
2835
+ position: absolute;
2836
+ left: 50%;
2837
+ top: 50%;
2838
+ transform: translate(-50%, -50%);
2839
+ }
2840
+
2841
+ .amplify-liveness-oval-canvas {
2842
+ flex-direction: column;
2843
+ position: absolute;
2844
+ top: 0;
2845
+ left: 0;
2846
+ width: 100%;
2847
+ height: 100%;
2848
+ align-items: center;
2849
+ justify-content: center;
2850
+ }
2851
+
2852
+ .amplify-liveness-oval-canvas--mobile {
2853
+ position: fixed;
2854
+ }
2855
+
2856
+ .amplify-liveness-video-anchor {
2857
+ position: relative;
2858
+ width: 100%;
2859
+ }
2860
+
2861
+ .amplify-liveness-recording-icon-container {
2862
+ z-index: 1;
2863
+ position: absolute;
2864
+ top: var(--amplify-space-medium);
2865
+ left: var(--amplify-space-medium);
2866
+ }
2867
+
2868
+ .amplify-liveness-recording-icon {
2869
+ flex-direction: column;
2870
+ align-items: center;
2871
+ background-color: var(--amplify-colors-background-primary);
2872
+ padding: var(--amplify-space-xxs);
2873
+ gap: var(--amplify-space-xxs);
2874
+ border-radius: var(--amplify-radii-small);
2875
+ }
2876
+
2877
+ .amplify-liveness-instruction-overlay {
2878
+ z-index: 1;
2879
+ }
2880
+
2881
+ .amplify-liveness-countdown-container {
2882
+ background-color: var(--amplify-colors-background-primary);
2883
+ border-radius: 100%;
2884
+ padding: var(--amplify-space-xs);
2885
+ }
2886
+
2887
+ .amplify-liveness-instruction-list {
2888
+ flex-direction: column;
2889
+ }
2890
+ .amplify-liveness-instruction-list li {
2891
+ display: flex;
2892
+ }
2893
+
2894
+ .amplify-liveness-toast {
2895
+ background-color: var(--amplify-colors-background-primary);
2896
+ }
2897
+
2898
+ .amplify-liveness-toast__message {
2899
+ color: var(--amplify-colors-font-primary);
2900
+ }
2901
+
2902
+ .amplify-liveness-toast--large {
2903
+ font-size: var(--amplify-font-sizes-xl);
2904
+ }
2905
+
2906
+ .amplify-liveness-toast--primary {
2907
+ background-color: var(--amplify-colors-brand-primary-80);
2908
+ }
2909
+ .amplify-liveness-toast--primary .amplify-liveness-toast__message {
2910
+ color: var(--amplify-colors-font-inverse);
2911
+ }
2912
+
2913
+ .amplify-liveness-toast--error {
2914
+ background-color: var(--amplify-colors-red-80);
2915
+ }
2916
+ .amplify-liveness-toast--error .amplify-liveness-toast__message {
2917
+ color: var(--amplify-colors-font-inverse);
2918
+ }
2919
+
2920
+ .amplify-liveness-match-indicator {
2921
+ display: block;
2922
+ width: min(70%, 200px);
2923
+ position: relative;
2924
+ --amplify-liveness-match-indicator-transition: transform 0.2s linear;
2925
+ }
2926
+
2927
+ .amplify-liveness-match-indicator__bar {
2928
+ --percentage: 0;
2929
+ display: block;
2930
+ width: 100%;
2931
+ height: var(--amplify-space-medium);
2932
+ border-radius: var(--amplify-radii-medium);
2933
+ background: var(--amplify-colors-white);
2934
+ position: relative;
2935
+ overflow: hidden;
2936
+ /*
2937
+ This translateZ transform fixes in issue in Safari where the bar::after
2938
+ element doesn't appear clipped from overflow: hidden here */
2939
+ transform: translateZ(0);
2940
+ border: 1px solid var(--amplify-colors-border-tertiary);
2941
+ }
2942
+
2943
+ .amplify-liveness-match-indicator__pin {
2944
+ --percentage: 0;
2945
+ display: block;
2946
+ width: 100%;
2947
+ position: absolute;
2948
+ top: 50%;
2949
+ left: 0;
2950
+ transform: translate(var(--percentage), 0);
2951
+ transition: var(--amplify-liveness-match-indicator-transition);
2952
+ }
2953
+
2954
+ .amplify-liveness-match-indicator__bar:after {
2955
+ position: absolute;
2956
+ content: "";
2957
+ width: 100%;
2958
+ height: 100%;
2959
+ background: var(--amplify-colors-brand-primary-40);
2960
+ left: -100%;
2961
+ transform: translate(var(--percentage), 0);
2962
+ transition: var(--amplify-liveness-match-indicator-transition);
2963
+ }
2964
+
2965
+ .amplify-liveness-match-indicator__pin:after {
2966
+ --height: var(--amplify-space-xl);
2967
+ position: absolute;
2968
+ content: "";
2969
+ width: var(--amplify-space-small);
2970
+ height: var(--height);
2971
+ border-radius: var(--amplify-radii-medium);
2972
+ background: var(--amplify-colors-brand-primary-80);
2973
+ left: 0;
2974
+ top: 0;
2975
+ transform: translate(-50%, calc(var(--height) / 2 * -1));
2976
+ }
2977
+
2978
+ .amplify-liveness-figures {
2979
+ flex-wrap: wrap;
2980
+ }
2981
+
2982
+ .amplify-liveness-figure {
2983
+ flex-direction: column;
2984
+ gap: 0;
2985
+ }
2986
+
2987
+ .amplify-liveness-figure__caption {
2988
+ padding: var(--amplify-space-xxs);
2989
+ }
2990
+
2991
+ .amplify-liveness-figure__caption--success {
2992
+ background-color: var(--amplify-colors-background-success);
2993
+ color: var(--amplify-colors-font-success);
2994
+ }
2995
+
2996
+ .amplify-liveness-figure__caption--error {
2997
+ background-color: var(--amplify-colors-background-error);
2998
+ color: var(--amplify-colors-font-error);
2999
+ }
3000
+
3001
+ .amplify-liveness-figure__image {
3002
+ background-color: #fff;
3003
+ border: 1px solid var(--amplify-colors-border-primary);
3004
+ position: relative;
3005
+ display: flex;
3006
+ justify-content: center;
3007
+ }
3008
+ .amplify-liveness-figure__image svg {
3009
+ display: block;
3010
+ }
3011
+
3012
+ .amplify-liveness-figure__image--success {
3013
+ border-color: var(--amplify-colors-green-90);
3014
+ }
3015
+
3016
+ .amplify-liveness-figure__image--error {
3017
+ border-color: var(--amplify-colors-border-error);
3018
+ }
3019
+
3020
+ .amplify-liveness-figure__icon {
3021
+ position: absolute;
3022
+ left: 0;
3023
+ top: 0;
3024
+ }
3025
+
3026
+ .amplify-fileuploader__dropzone {
3027
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
3028
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
3029
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
3030
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
3031
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
3032
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
3033
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
3034
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
3035
+ display: flex;
3036
+ flex-direction: column;
3037
+ align-items: center;
3038
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
3039
+ }
3040
+ .amplify-fileuploader__dropzone--small {
3041
+ flex-direction: row;
3042
+ justify-content: center;
3043
+ }
3044
+ .amplify-fileuploader__dropzone--active {
3045
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
3046
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
3047
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
3048
+ }
3049
+ .amplify-fileuploader__dropzone__icon {
3050
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
3051
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
3052
+ }
3053
+ .amplify-fileuploader__dropzone__text {
3054
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
3055
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
3056
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
3057
+ }
3058
+ .amplify-fileuploader__file {
3059
+ position: relative;
3060
+ border-width: var(--amplify-components-fileuploader-file-border-width);
3061
+ border-style: var(--amplify-components-fileuploader-file-border-style);
3062
+ border-color: var(--amplify-components-fileuploader-file-border-color);
3063
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
3064
+ display: flex;
3065
+ flex-direction: column;
3066
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
3067
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
3068
+ align-items: var(--amplify-components-fileuploader-file-align-items);
3069
+ }
3070
+ .amplify-fileuploader__file__wrapper {
3071
+ width: 100%;
3072
+ display: flex;
3073
+ flex-direction: row;
3074
+ align-items: center;
3075
+ gap: var(--amplify-components-fileuploader-file-gap);
3076
+ }
3077
+ .amplify-fileuploader__file__name {
3078
+ text-overflow: ellipsis;
3079
+ overflow: hidden;
3080
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
3081
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
3082
+ color: var(--amplify-components-fileuploader-file-name-color);
3083
+ }
3084
+ .amplify-fileuploader__file__size {
3085
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
3086
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
3087
+ color: var(--amplify-components-fileuploader-file-size-color);
3088
+ }
3089
+ .amplify-fileuploader__file__main {
3090
+ flex: 1;
3091
+ white-space: nowrap;
3092
+ overflow: hidden;
3093
+ }
3094
+ .amplify-fileuploader__file__image {
3095
+ position: relative;
3096
+ display: flex;
3097
+ align-items: center;
3098
+ justify-content: center;
3099
+ width: var(--amplify-components-fileuploader-file-image-width);
3100
+ height: var(--amplify-components-fileuploader-file-image-height);
3101
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
3102
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
3103
+ color: var(--amplify-components-fileuploader-file-image-color);
3104
+ }
3105
+ .amplify-fileuploader__file__image img {
3106
+ max-height: 100%;
3107
+ }
3108
+ .amplify-fileuploader__file__status--error {
3109
+ color: var(--amplify-colors-font-error);
3110
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
3111
+ }
3112
+ .amplify-fileuploader__file__status--success {
3113
+ color: var(--amplify-colors-font-success);
3114
+ }
3115
+ .amplify-fileuploader__loader {
3116
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
3117
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
3118
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
3119
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
3120
+ --amplify-components-loader-linear-stroke-filled: var(
3121
+ --amplify-components-fileuploader-loader-stroke-filled
3122
+ );
3123
+ overflow: hidden;
3124
+ position: absolute;
3125
+ bottom: 0;
3126
+ left: 0;
3127
+ width: 100%;
3128
+ }
3129
+ .amplify-fileuploader__previewer {
3130
+ display: block;
3131
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
3132
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
3133
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
3134
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
3135
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
3136
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
3137
+ padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
3138
+ padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
3139
+ }
3140
+ .amplify-fileuploader__previewer__text {
3141
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
3142
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
3143
+ color: var(--amplify-components-fileuploader-previewer-text-color);
3144
+ }
3145
+ .amplify-fileuploader__previewer__body {
3146
+ display: flex;
3147
+ flex-direction: column;
3148
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
3149
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
3150
+ overflow: auto;
3151
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
3152
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
3153
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
3154
+ }
3155
+ .amplify-fileuploader__previewer__footer {
3156
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
3157
+ border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
3158
+ border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
3159
+ border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
3160
+ padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
3161
+ padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
3162
+ position: relative;
3163
+ display: flex;
3164
+ flex-direction: row;
3165
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
3166
+ }
3167
+ .amplify-fileuploader__previewer__footer__actions {
3168
+ display: flex;
3169
+ flex-direction: row;
3170
+ gap: var(--amplify-space-small);
3171
+ }
3172
+
2771
3173
  .amplify-menu-content-wrapper {
2772
3174
  z-index: 999999;
2773
3175
  }
@@ -3812,7 +4214,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3812
4214
  }
3813
4215
 
3814
4216
  .amplify-textfield {
3815
- flex-direction: column;
3816
4217
  --amplify-components-fieldcontrol-color: var(
3817
4218
  --amplify-components-textfield-color
3818
4219
  );
@@ -1,11 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import { StorageManagerProps } from './types';
3
- declare function StorageManager({ acceptedFileTypes, accessLevel, defaultFiles, displayText: overrideDisplayText, isResumable, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, showThumbnails, processFile, components, provider, path, }: StorageManagerProps): JSX.Element;
3
+ declare function StorageManager({ acceptedFileTypes, accessLevel, defaultFiles, displayText: overrideDisplayText, isResumable, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, onUploadStart, showThumbnails, processFile, components, provider, path, }: StorageManagerProps): JSX.Element;
4
4
  declare namespace StorageManager {
5
- var Container: typeof import("./ui/").Container;
6
- var DropZone: typeof import("./ui/").DropZone;
7
- var FileList: typeof import("./ui/").FileList;
8
- var FileListHeader: typeof import("./ui/").FileListHeader;
9
- var FilePicker: typeof import("./ui/").FilePicker;
5
+ var Container: typeof import("./ui").Container;
6
+ var DropZone: typeof import("./ui").DropZone;
7
+ var FileList: typeof import("./ui").FileList;
8
+ var FileListHeader: typeof import("./ui").FileListHeader;
9
+ var FilePicker: typeof import("./ui").FilePicker;
10
10
  }
11
11
  export { StorageManager };
@@ -1,3 +1,3 @@
1
1
  export { useDropZone } from './useDropZone';
2
- export { useStorageManager } from './useStorageManager';
2
+ export { useStorageManager, UseStorageManager } from './useStorageManager';
3
3
  export { useUploadFiles } from './useUploadFiles';
@@ -10,8 +10,8 @@ export declare enum StorageManagerActionTypes {
10
10
  SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS",
11
11
  REMOVE_UPLOAD = "REMOVE_UPLOAD"
12
12
  }
13
- export declare type GetFileErrorMessage = (file: File) => string;
14
- export declare type Action = {
13
+ export type GetFileErrorMessage = (file: File) => string;
14
+ export type Action = {
15
15
  type: StorageManagerActionTypes.ADD_FILES;
16
16
  files: File[];
17
17
  getFileErrorMessage: GetFileErrorMessage;
@@ -1,5 +1,5 @@
1
1
  import { StorageManagerProps } from '../../types';
2
2
  import { UseStorageManager } from '../useStorageManager';
3
- export interface UseUploadFilesProps extends Pick<StorageManagerProps, 'accessLevel' | 'isResumable' | 'onUploadSuccess' | 'onUploadError' | 'maxFileCount' | 'processFile' | 'provider' | 'path'>, Pick<UseStorageManager, 'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'> {
3
+ export interface UseUploadFilesProps extends Pick<StorageManagerProps, 'accessLevel' | 'isResumable' | 'onUploadSuccess' | 'onUploadError' | 'onUploadStart' | 'maxFileCount' | 'processFile' | 'provider' | 'path'>, Pick<UseStorageManager, 'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'> {
4
4
  }
5
- export declare function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, maxFileCount, processFile, provider, path, }: UseUploadFilesProps): void;
5
+ export declare function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, provider, path, }: UseUploadFilesProps): void;
@@ -1,9 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { StorageAccessLevel, UploadTask } from '@aws-amplify/storage';
3
- import { DropZoneProps, FilePickerProps } from './ui/DropZone';
4
- import { FileListProps } from './ui/FileList';
5
- import { ContainerProps } from './ui/Container';
6
- import { FileListHeaderProps } from './ui/FileListHeader';
3
+ import { ContainerProps, DropZoneProps, FileListHeaderProps, FileListProps, FilePickerProps } from './ui';
7
4
  import { StorageManagerDisplayText } from './utils';
8
5
  export declare enum FileStatus {
9
6
  QUEUED = "queued",
@@ -22,8 +19,8 @@ export interface StorageFile {
22
19
  error: string;
23
20
  isImage: boolean;
24
21
  }
25
- export declare type StorageFiles = StorageFile[];
26
- export declare type DefaultFile = Pick<StorageFile, 'key'>;
22
+ export type StorageFiles = StorageFile[];
23
+ export type DefaultFile = Pick<StorageFile, 'key'>;
27
24
  export interface StorageManagerProps {
28
25
  /**
29
26
  * List of accepted File types
@@ -39,11 +36,11 @@ export interface StorageManagerProps {
39
36
  * Component overrides
40
37
  */
41
38
  components?: {
42
- Container?: (props: ContainerProps) => JSX.Element;
43
- DropZone?: (props: DropZoneProps) => JSX.Element;
44
- FileList?: (props: FileListProps) => JSX.Element;
45
- FilePicker?: (props: FilePickerProps) => JSX.Element;
46
- FileListHeader?: (props: FileListHeaderProps) => JSX.Element;
39
+ Container?: React.ComponentType<ContainerProps>;
40
+ DropZone?: React.ComponentType<DropZoneProps>;
41
+ FileList?: React.ComponentType<FileListProps>;
42
+ FilePicker?: React.ComponentType<FilePickerProps>;
43
+ FileListHeader?: React.ComponentType<FileListHeaderProps>;
47
44
  };
48
45
  /**
49
46
  * List of default files already uploaded
@@ -74,13 +71,21 @@ export interface StorageManagerProps {
74
71
  /**
75
72
  * Monitor upload errors
76
73
  */
77
- onUploadError?: (error: string) => void;
74
+ onUploadError?: (error: string, file: {
75
+ key: string;
76
+ }) => void;
78
77
  /**
79
78
  * Monitor upload success
80
79
  */
81
80
  onUploadSuccess?: (event: {
82
81
  key?: string;
83
82
  }) => void;
83
+ /**
84
+ * When a file begins uploading
85
+ */
86
+ onUploadStart?: (event: {
87
+ key?: string;
88
+ }) => void;
84
89
  /**
85
90
  * Process file before upload
86
91
  */
@@ -1,3 +1,2 @@
1
1
  export { DropZone } from './DropZone';
2
- export { FilePicker } from './FilePicker';
3
- export { DropZoneProps, FilePickerProps } from './types';
2
+ export { DropZoneProps } from './types';
@@ -11,9 +11,3 @@ export interface DropZoneProps {
11
11
  onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
12
12
  testId?: string;
13
13
  }
14
- export interface FilePickerProps {
15
- acceptedFileTypes: string[];
16
- displayText: StorageManagerDisplayText;
17
- allowMultipleFiles: boolean;
18
- onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
19
- }
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { Button } from '@aws-amplify/ui-react';
3
+ export type FilePickerProps = Parameters<typeof Button>[0] & {
4
+ onClick: React.MouseEventHandler<HTMLButtonElement>;
5
+ };
6
+ export declare function FilePicker({ children, className, size, ...props }: FilePickerProps): JSX.Element;
@@ -0,0 +1 @@
1
+ export { FilePicker, FilePickerProps } from './FilePicker';
@@ -1,4 +1,5 @@
1
1
  export { Container, ContainerProps } from './Container';
2
- export { DropZone, DropZoneProps, FilePicker, FilePickerProps, } from './DropZone';
2
+ export { DropZone, DropZoneProps } from './DropZone';
3
3
  export { FileList, FileListProps } from './FileList';
4
4
  export { FileListHeader, FileListHeaderProps } from './FileListHeader';
5
+ export { FilePicker, FilePickerProps } from './FilePicker';
@@ -16,4 +16,4 @@ export declare const defaultStorageManagerDisplayText: {
16
16
  uploadSuccessfulText: string;
17
17
  getPausedText(percentage: number): string;
18
18
  };
19
- export declare type StorageManagerDisplayText = typeof defaultStorageManagerDisplayText;
19
+ export type StorageManagerDisplayText = typeof defaultStorageManagerDisplayText;
@@ -14,6 +14,6 @@ interface UploadFileProps {
14
14
  }) => void;
15
15
  provider?: string;
16
16
  }
17
- declare type UploadFile = Promise<void> | UploadTask;
17
+ type UploadFile = Promise<void> | UploadTask;
18
18
  export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, provider, ...rest }: UploadFileProps): UploadFile;
19
19
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-storage",
3
- "version": "0.0.0-storagemanager-37cac7b-20230403170123",
3
+ "version": "0.0.0-studio-26ea5cc-20230414194453",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -40,8 +40,9 @@
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "0.0.0-storagemanager-37cac7b-20230403170123",
44
- "@aws-amplify/ui-react-core": "0.0.0-storagemanager-37cac7b-20230403170123",
43
+ "@aws-amplify/ui": "0.0.0-studio-26ea5cc-20230414194453",
44
+ "@aws-amplify/ui-react": "0.0.0-studio-26ea5cc-20230414194453",
45
+ "@aws-amplify/ui-react-core": "0.0.0-studio-26ea5cc-20230414194453",
45
46
  "classnames": "2.3.1",
46
47
  "lodash": "4.17.21",
47
48
  "tslib": "2.4.1"
@@ -1 +0,0 @@
1
- import e from"react";import{View as t,Button as l,ComponentClassNames as n,VisuallyHidden as r}from"@aws-amplify/ui-react";function a({acceptedFileTypes:a,allowMultipleFiles:c,displayText:i,onFileChange:o}){const u=e.useRef(null),{browseFilesText:p}=i;return e.createElement(t,null,e.createElement(l,{className:n.StorageManagerDropZoneButton,onClick:function(){u.current&&(u.current.click(),u.current.value="")},size:"small"},p),e.createElement(r,null,e.createElement("input",{type:"file",tabIndex:-1,ref:u,onChange:o,multiple:c,accept:a.join(",")})))}export{a as FilePicker};
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { FilePickerProps } from './types';
3
- export declare function FilePicker({ acceptedFileTypes, allowMultipleFiles, displayText, onFileChange, }: FilePickerProps): JSX.Element;