@aws-amplify/ui-react-storage 2.3.1 → 3.0.0

package/dist/esm/components/StorageImage/StorageImage.mjs

@@ -1 +1,31 @@
-import{__rest as e}from"tslib";import*as r from"react";import a from"classnames";import{Image as t,ComponentClassNames as o}from"@aws-amplify/ui-react";import{useStorageURL as s}from"@aws-amplify/ui-react/internal";const c=c=>{var{accessLevel:i,className:m,fallbackSrc:l,identityId:n,imgKey:f,onStorageGetError:p}=c,g=e(c,["accessLevel","className","fallbackSrc","identityId","imgKey","onStorageGetError"]);const y=r.useMemo((()=>({level:i,identityId:n})),[i,n]),d=s({key:f,options:y,fallbackURL:l,onStorageGetError:p});return r.createElement(t,Object.assign({},g,{className:a(o.StorageImage,m),src:d}))};export{c as StorageImage};
+import * as React from 'react';
+import { isUndefined, classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Image } from '@aws-amplify/ui-react';
+import { useStorageURL } from '@aws-amplify/ui-react/internal';
+import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { VERSION } from '../../version.mjs';
+
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, validateObjectExistence, ...rest }) => {
+    const resolvedValidateObjectExistence = isUndefined(validateObjectExistence)
+        ? true
+        : validateObjectExistence;
+    const options = React.useMemo(() => ({
+        accessLevel,
+        identityId,
+        validateObjectExistence: resolvedValidateObjectExistence,
+    }), [accessLevel, identityId, resolvedValidateObjectExistence]);
+    useSetUserAgent({
+        componentName: 'StorageImage',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    const url = useStorageURL({
+        key: imgKey,
+        options,
+        fallbackURL: fallbackSrc,
+        onStorageGetError,
+    });
+    return (React.createElement(Image, { ...rest, className: classNames(ComponentClassName.StorageImage, className), src: url }));
+};
+
+export { StorageImage };

package/dist/esm/components/StorageManager/StorageManager.mjs

@@ -1 +1,168 @@
-import{__rest as e}from"tslib";import*as i from"react";import{Logger as t}from"aws-amplify";import{ComponentClassNames as l,VisuallyHidden as o}from"@aws-amplify/ui-react";import{useDropZone as s}from"@aws-amplify/ui-react/internal";import{useStorageManager as r}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as a}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as n}from"./types.mjs";import{Container as p}from"./ui/Container/Container.mjs";import{DropZone as m}from"./ui/DropZone/DropZone.mjs";import{FileList as c}from"./ui/FileList/FileList.mjs";import{FileListHeader as u}from"./ui/FileListHeader/FileListHeader.mjs";import{FileListFooter as d}from"./ui/FileListFooter/FileListFooter.mjs";import{FilePicker as F}from"./ui/FilePicker/FilePicker.mjs";import{checkMaxFileSize as f}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as g}from"./utils/displayText.mjs";import{filterAllowedFiles as U}from"./utils/filterAllowedFiles.mjs";const E=new t("Storage.StorageManager");const j=Object.assign(i.forwardRef((function({acceptedFileTypes:t=[],accessLevel:j,autoUpload:D=!0,defaultFiles:L,displayText:S,isResumable:h=!1,maxFileCount:x,maxFileSize:y,onUploadError:C,onUploadSuccess:T,onFileRemove:k,onUploadStart:v,showThumbnails:b=!0,processFile:w,components:P,provider:M,path:R},A){j&&x||E.warn("FileUploader requires accessLevel and maxFileCount props");const O=Object.assign({Container:p,DropZone:m,FileList:c,FilePicker:F,FileListHeader:u,FileListFooter:d},P),H=void 0===x||"number"==typeof x&&x>1,Z=Object.assign(Object.assign({},g),S),{getFileSizeErrorText:z}=Z,q=e=>f({file:e,maxFileSize:y,getFileSizeErrorText:z}),{addFiles:I,clearFiles:Q,files:$,removeUpload:N,queueFiles:B,setUploadingFile:G,setUploadPaused:J,setUploadProgress:K,setUploadSuccess:V,setUploadResumed:W}=r(L);i.useImperativeHandle(A,(()=>({clearFiles:Q})));const X=s({acceptedFileTypes:t,onDropComplete:({acceptedFiles:e,rejectedFiles:i})=>{i&&i.length>0&&E.warn("Rejected files: ",i);const l=U(e,t);I({files:l,status:D?n.QUEUED:n.ADDED,getFileErrorMessage:q})}}),{dragState:Y}=X,_=e(X,["dragState"]);a({accessLevel:j,files:$,isResumable:h,maxFileCount:x,onUploadError:C,onUploadSuccess:T,onUploadStart:v,setUploadingFile:G,setUploadProgress:K,setUploadSuccess:V,processFile:w,provider:M,path:R});const ee=0!==$.length&&$.every((e=>(null==e?void 0:e.status)===n.UPLOADED)),ie=$.filter((e=>e.progress<100)).length>x,te=$.filter((e=>(null==e?void 0:e.status)===n.UPLOADED)).length,le=$.length-te,oe=D?0:le,se=$.length>0,re=!D&&le>0,ae=i.useRef(null);return i.createElement(O.Container,{className:`${l.StorageManager} ${se?l.StorageManagerPreviewer:""}`},i.createElement(O.DropZone,Object.assign({inDropZone:"inactive"!==Y},_,{displayText:Z}),i.createElement(i.Fragment,null,i.createElement(O.FilePicker,{onClick:function(){ae.current&&(ae.current.click(),ae.current.value="")}},Z.browseFilesText),i.createElement(o,null,i.createElement("input",{type:"file",tabIndex:-1,ref:ae,onChange:e=>{const{files:i}=e.target;i&&0!==i.length&&I({files:Array.from(i),status:D?n.QUEUED:n.ADDED,getFileErrorMessage:q})},multiple:H,accept:t.join(",")})))),se?i.createElement(O.FileListHeader,{allUploadsSuccessful:ee,displayText:Z,fileCount:$.length,remainingFilesCount:le,selectedFilesCount:oe}):null,i.createElement(O.FileList,{displayText:Z,files:$,isResumable:h,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),N({id:e})},onDeleteUpload:({id:e})=>{if(N({id:e}),"function"==typeof k){const i=$.find((i=>i.id===e));i&&k({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),W({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),J({id:e})},showThumbnails:b,hasMaxFilesError:ie,maxFileCount:x}),re?i.createElement(O.FileListFooter,{displayText:Z,remainingFilesCount:le,onClearAll:()=>{Q()},onUploadAll:()=>{B()}}):null)})),{Container:p,DropZone:m,FileList:c,FileListHeader:u,FileListFooter:d,FilePicker:F});export{j as StorageManager};
+import * as React from 'react';
+import { getLogger, ComponentClassName } from '@aws-amplify/ui';
+import { VisuallyHidden } from '@aws-amplify/ui-react';
+import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useDropZone } from '@aws-amplify/ui-react/internal';
+import { useStorageManager } from './hooks/useStorageManager/useStorageManager.mjs';
+import { useUploadFiles } from './hooks/useUploadFiles/useUploadFiles.mjs';
+import { FileStatus } from './types.mjs';
+import { Container } from './ui/Container/Container.mjs';
+import { DropZone } from './ui/DropZone/DropZone.mjs';
+import { FileList } from './ui/FileList/FileList.mjs';
+import { FileListHeader } from './ui/FileListHeader/FileListHeader.mjs';
+import { FileListFooter } from './ui/FileListFooter/FileListFooter.mjs';
+import { FilePicker } from './ui/FilePicker/FilePicker.mjs';
+import { checkMaxFileSize } from './utils/checkMaxFileSize.mjs';
+import { defaultStorageManagerDisplayText } from './utils/displayText.mjs';
+import { filterAllowedFiles } from './utils/filterAllowedFiles.mjs';
+import 'aws-amplify/storage';
+import { VERSION } from '../../version.mjs';
+
+const logger = getLogger('Storage');
+function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload = true, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, onUploadStart, showThumbnails = true, processFile, components, path, }, ref) {
+    if (!accessLevel || !maxFileCount) {
+        logger.warn('StorageManager requires accessLevel and maxFileCount props');
+    }
+    const Components = {
+        Container,
+        DropZone,
+        FileList,
+        FilePicker,
+        FileListHeader,
+        FileListFooter,
+        ...components,
+    };
+    const allowMultipleFiles = maxFileCount === undefined ||
+        (typeof maxFileCount === 'number' && maxFileCount > 1);
+    const displayText = {
+        ...defaultStorageManagerDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
+    React.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = useDropZone({
+        acceptedFileTypes,
+        onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
+            if (rejectedFiles && rejectedFiles.length > 0) {
+                logger.warn('Rejected files: ', rejectedFiles);
+            }
+            // We need to filter out files by extension here,
+            // we don't get filenames on the drag event, only on drop
+            const _acceptedFiles = filterAllowedFiles(acceptedFiles, acceptedFileTypes);
+            addFiles({
+                files: _acceptedFiles,
+                status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+                getFileErrorMessage: getMaxFileSizeErrorMessage,
+            });
+        },
+    });
+    useUploadFiles({
+        accessLevel,
+        files,
+        isResumable,
+        maxFileCount,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        setUploadingFile,
+        setUploadProgress,
+        setUploadSuccess,
+        processFile,
+        path,
+    });
+    const onFilePickerChange = (event) => {
+        const { files } = event.target;
+        if (!files || files.length === 0) {
+            return;
+        }
+        addFiles({
+            files: Array.from(files),
+            status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+            getFileErrorMessage: getMaxFileSizeErrorMessage,
+        });
+    };
+    const onClearAll = () => {
+        clearFiles();
+    };
+    const onUploadAll = () => {
+        queueFiles();
+    };
+    const onPauseUpload = ({ id, uploadTask, }) => {
+        uploadTask.pause();
+        setUploadPaused({ id });
+    };
+    const onResumeUpload = ({ id, uploadTask, }) => {
+        uploadTask.resume();
+        setUploadResumed({ id });
+    };
+    const onCancelUpload = ({ id, uploadTask, }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled (required to cancel upload),
+        // so we do a pause instead and remove from files
+        uploadTask.pause();
+        removeUpload({ id });
+    };
+    const onDeleteUpload = ({ id }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled, so we do a soft delete
+        // from file list, but don't remove from storage
+        removeUpload({ id });
+        if (typeof onFileRemove === 'function') {
+            const file = files.find((file) => file.id === id);
+            if (file) {
+                onFileRemove({ key: file.key });
+            }
+        }
+    };
+    // checks if all downloads completed to 100%
+    const allUploadsSuccessful = files.length === 0
+        ? false
+        : files.every((file) => file?.status === FileStatus.UPLOADED);
+    // Displays if over max files
+    const hasMaxFilesError = files.filter((file) => file.progress < 100).length > maxFileCount;
+    const uploadedFilesLength = files.filter((file) => file?.status === FileStatus.UPLOADED).length;
+    const remainingFilesCount = files.length - uploadedFilesLength;
+    // number of files selected for upload when autoUpload is turned off
+    const selectedFilesCount = autoUpload ? 0 : remainingFilesCount;
+    const hasFiles = files.length > 0;
+    const hasUploadActions = !autoUpload && remainingFilesCount > 0;
+    const hiddenInput = React.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    useSetUserAgent({
+        componentName: 'StorageManager',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React.createElement(Components.Container, { className: `${ComponentClassName.StorageManager} ${hasFiles ? ComponentClassName.StorageManagerPreviewer : ''}` },
+        React.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React.createElement(React.Fragment, null,
+                React.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React.createElement(VisuallyHidden, null,
+                    React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        hasFiles ? (React.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
+        React.createElement(Components.FileList, { displayText: displayText, files: files, isResumable: isResumable, onCancelUpload: onCancelUpload, onDeleteUpload: onDeleteUpload, onResume: onResumeUpload, onPause: onPauseUpload, showThumbnails: showThumbnails, hasMaxFilesError: hasMaxFilesError, maxFileCount: maxFileCount }),
+        hasUploadActions ? (React.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
+}
+const StorageManager = Object.assign(React.forwardRef(StorageManagerBase), {
+    Container,
+    DropZone,
+    FileList,
+    FileListHeader,
+    FileListFooter,
+    FilePicker,
+});
+
+export { StorageManager };

package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs

@@ -1 +1,49 @@
-import{StorageManagerActionTypes as s}from"./types.mjs";const e=({files:e,status:t,getFileErrorMessage:p})=>({type:s.ADD_FILES,files:e,status:t,getFileErrorMessage:p}),t=()=>({type:s.CLEAR_FILES}),p=()=>({type:s.QUEUE_FILES}),E=({id:e,uploadTask:t})=>({type:s.SET_STATUS_UPLOADING,id:e,uploadTask:t}),i=({id:e,progress:t})=>({type:s.SET_UPLOAD_PROGRESS,id:e,progress:t}),r=({id:e,status:t})=>({type:s.SET_STATUS,id:e,status:t}),S=({id:e})=>({type:s.REMOVE_UPLOAD,id:e});export{e as addFilesAction,t as clearFilesAction,p as queueFilesAction,S as removeUploadAction,i as setUploadProgressAction,r as setUploadStatusAction,E as setUploadingFileAction};
+import { StorageManagerActionTypes } from './types.mjs';
+
+const addFilesAction = ({ files, status, getFileErrorMessage, }) => {
+    return {
+        type: StorageManagerActionTypes.ADD_FILES,
+        files,
+        status,
+        getFileErrorMessage,
+    };
+};
+const clearFilesAction = () => {
+    return {
+        type: StorageManagerActionTypes.CLEAR_FILES,
+    };
+};
+const queueFilesAction = () => {
+    return {
+        type: StorageManagerActionTypes.QUEUE_FILES,
+    };
+};
+const setUploadingFileAction = ({ id, uploadTask, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
+        id,
+        uploadTask,
+    };
+};
+const setUploadProgressAction = ({ id, progress, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
+        id,
+        progress,
+    };
+};
+const setUploadStatusAction = ({ id, status, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_STATUS,
+        id,
+        status,
+    };
+};
+const removeUploadAction = ({ id }) => {
+    return {
+        type: StorageManagerActionTypes.REMOVE_UPLOAD,
+        id,
+    };
+};
+
+export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };

package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs

@@ -1 +1,130 @@
-import{FileStatus as s}from"../../types.mjs";import{StorageManagerActionTypes as e}from"./types.mjs";function t(t,i){switch(i.type){case e.ADD_FILES:{const{files:e,status:a}=i,c=e.map((e=>{const t=i.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?s.ERROR:a,isImage:e.type.startsWith("image/"),progress:-1}})),n=[...t.files,...c];return Object.assign(Object.assign({},t),{files:n})}case e.CLEAR_FILES:return Object.assign(Object.assign({},t),{files:[]});case e.QUEUE_FILES:{const{files:e}=t,i=e.reduce(((e,t)=>[...e,Object.assign(Object.assign({},t),{status:s.QUEUED})]),[]);return Object.assign(Object.assign({},t),{files:i})}case e.SET_STATUS_UPLOADING:{const{id:e,uploadTask:a}=i,{files:c}=t,n=c.reduce(((t,i)=>i.id===e?[...t,Object.assign(Object.assign({},i),{status:s.UPLOADING,progress:0,uploadTask:a||void 0})]:[...t,i]),[]);return Object.assign(Object.assign({},t),{files:n})}case e.SET_UPLOAD_PROGRESS:{const{id:s,progress:e}=i,{files:a}=t,c=a.reduce(((t,i)=>i.id===s?[...t,Object.assign(Object.assign({},i),{progress:e})]:[...t,i]),[]);return Object.assign(Object.assign({},t),{files:c})}case e.SET_STATUS:{const{id:s,status:e}=i,{files:a}=t,c=a.reduce(((t,i)=>i.id===s?[...t,Object.assign(Object.assign({},i),{status:e})]:[...t,i]),[]);return Object.assign(Object.assign({},t),{files:c})}case e.REMOVE_UPLOAD:{const{id:s}=i,{files:e}=t,a=e.reduce(((e,t)=>t.id===s?[...e]:[...e,t]),[]);return Object.assign(Object.assign({},t),{files:a})}}}export{t as storageManagerStateReducer};
+import { FileStatus } from '../../types.mjs';
+import { StorageManagerActionTypes } from './types.mjs';
+
+function storageManagerStateReducer(state, action) {
+    switch (action.type) {
+        case StorageManagerActionTypes.ADD_FILES: {
+            const { files, status } = action;
+            const newUploads = files.map((file) => {
+                const errorText = action.getFileErrorMessage(file);
+                return {
+                    // make sure id is unique,
+                    // we only use it internally and don't send it to Storage
+                    id: `${Date.now()}-${file.name}`,
+                    file,
+                    error: errorText,
+                    key: file.name,
+                    status: errorText ? FileStatus.ERROR : status,
+                    isImage: file.type.startsWith('image/'),
+                    progress: -1,
+                };
+            });
+            const newFiles = [...state.files, ...newUploads];
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.CLEAR_FILES: {
+            return {
+                ...state,
+                files: [],
+            };
+        }
+        case StorageManagerActionTypes.QUEUE_FILES: {
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                return [
+                    ...files,
+                    {
+                        ...currentFile,
+                        status: FileStatus.QUEUED,
+                    },
+                ];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
+            const { id, uploadTask } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            status: FileStatus.UPLOADING,
+                            progress: 0,
+                            uploadTask: uploadTask ? uploadTask : undefined,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
+            const { id, progress } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            progress,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_STATUS: {
+            const { id, status } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            status,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.REMOVE_UPLOAD: {
+            const { id } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    // remove by not returning currentFile
+                    return [...files];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+    }
+}
+
+export { storageManagerStateReducer };

package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs

@@ -1 +1,12 @@
-var E;!function(E){E.ADD_FILES="ADD_FILES",E.CLEAR_FILES="CLEAR_FILES",E.QUEUE_FILES="QUEUE_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"}(E||(E={}));export{E as StorageManagerActionTypes};
+var StorageManagerActionTypes;
+(function (StorageManagerActionTypes) {
+    StorageManagerActionTypes["ADD_FILES"] = "ADD_FILES";
+    StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
+    StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
+    StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
+    StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
+    StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
+    StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
+})(StorageManagerActionTypes || (StorageManagerActionTypes = {}));
+
+export { StorageManagerActionTypes };

package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs

@@ -1 +1,58 @@
-import s from"react";import{FileStatus as e}from"../../types.mjs";import{storageManagerStateReducer as i}from"./reducer.mjs";import{addFilesAction as r,clearFilesAction as t,queueFilesAction as a,setUploadingFileAction as o,setUploadProgressAction as d,setUploadStatusAction as l,removeUploadAction as p}from"./actions.mjs";import{isObject as u}from"@aws-amplify/ui";const m=s=>(s=>!(!u(s)||!s.key))(s)?Object.assign(Object.assign({},s),{id:s.key,status:e.UPLOADED}):void 0;function f(u=[]){const[{files:f},c]=s.useReducer(i,{files:Array.isArray(u)?u.map(m).filter((s=>!!s)):[]});return{removeUpload:({id:s})=>{c(p({id:s}))},setUploadPaused:({id:s})=>{c(l({id:s,status:e.PAUSED}))},setUploadProgress:({progress:s,id:e})=>{c(d({id:e,progress:s}))},setUploadResumed:({id:s})=>{c(l({id:s,status:e.UPLOADING}))},setUploadSuccess:({id:s})=>{c(l({id:s,status:e.UPLOADED}))},setUploadingFile:({uploadTask:s,id:e})=>{c(o({id:e,uploadTask:s}))},queueFiles:()=>{c(a())},addFiles:({files:s,status:e,getFileErrorMessage:i})=>{c(r({files:s,status:e,getFileErrorMessage:i}))},clearFiles:()=>{c(t())},files:f}}export{f as useStorageManager};
+import React__default from 'react';
+import { isObject } from '@aws-amplify/ui';
+import { FileStatus } from '../../types.mjs';
+import { storageManagerStateReducer } from './reducer.mjs';
+import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
+
+const isDefaultFile = (file) => !!(isObject(file) && file.key);
+const createFileFromDefault = (file) => isDefaultFile(file)
+    ? { ...file, id: file.key, status: FileStatus.UPLOADED }
+    : undefined;
+function useStorageManager(defaultFiles = []) {
+    const [{ files }, dispatch] = React__default.useReducer(storageManagerStateReducer, {
+        files: (Array.isArray(defaultFiles)
+            ? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
+            : []),
+    });
+    const addFiles = ({ files, status, getFileErrorMessage, }) => {
+        dispatch(addFilesAction({ files, status, getFileErrorMessage }));
+    };
+    const clearFiles = () => {
+        dispatch(clearFilesAction());
+    };
+    const queueFiles = () => {
+        dispatch(queueFilesAction());
+    };
+    const setUploadingFile = ({ uploadTask, id, }) => {
+        dispatch(setUploadingFileAction({ id, uploadTask }));
+    };
+    const setUploadProgress = ({ progress, id, }) => {
+        dispatch(setUploadProgressAction({ id, progress }));
+    };
+    const setUploadSuccess = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADED }));
+    };
+    const setUploadPaused = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.PAUSED }));
+    };
+    const setUploadResumed = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADING }));
+    };
+    const removeUpload = ({ id }) => {
+        dispatch(removeUploadAction({ id }));
+    };
+    return {
+        removeUpload,
+        setUploadPaused,
+        setUploadProgress,
+        setUploadResumed,
+        setUploadSuccess,
+        setUploadingFile,
+        queueFiles,
+        addFiles,
+        clearFiles,
+        files,
+    };
+}
+
+export { useStorageManager };

package/dist/esm/components/StorageManager/hooks/useUploadFiles/resolveFile.mjs

@@ -1 +1,22 @@
-import{isFunction as e}from"@aws-amplify/ui";const i=({processFile:i,file:o,key:s})=>new Promise(((t,c)=>{const f=e(i)?i({file:o,key:s}):{file:o,key:s};f instanceof Promise?f.then(t).catch(c):t(f)}));export{i as resolveFile};
+import { isFunction } from '@aws-amplify/ui';
+
+/**
+ * Utility function that takes the processFile prop, along with a file a key
+ * and returns a Promise that resolves to { file, key, ..rest }
+ * regardless if processFile is defined and if it is sync or async
+ */
+const resolveFile = ({ processFile, file, key, }) => {
+    return new Promise((resolve, reject) => {
+        const result = isFunction(processFile)
+            ? processFile({ file, key })
+            : { file, key };
+        if (result instanceof Promise) {
+            result.then(resolve).catch(reject);
+        }
+        else {
+            resolve(result);
+        }
+    });
+};
+
+export { resolveFile };

package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs

@@ -1 +1,64 @@
-import{__rest as e}from"tslib";import*as o from"react";import{uploadFile as s}from"../../utils/uploadFile.mjs";import{FileStatus as l}from"../../types.mjs";import{resolveFile as t}from"./resolveFile.mjs";function r({files:r,accessLevel:a,isResumable:i,setUploadProgress:p,setUploadingFile:c,setUploadSuccess:n,onUploadError:d,onUploadSuccess:m,onUploadStart:f,maxFileCount:u,processFile:k,provider:b,path:y=""}){o.useEffect((()=>{const o=r.filter((e=>e.status===l.QUEUED));if(!(o.length>u))for(const{file:l,key:r,id:u}of o){const o=e=>{null==m||m(e),n({id:u})},U=e=>{const o=0===e.total?100:Math.floor(e.loaded/e.total*100);p({id:u,progress:o})},g=e=>{null==d||d(e,{key:r})};l&&t({processFile:k,file:l,key:r}).then((l=>{var{key:t}=l,r=e(l,["key"]);null==f||f({key:t});const p=s(Object.assign(Object.assign({},r),{isResumable:i,provider:b,key:y+t,level:a,completeCallback:o,progressCallback:U,errorCallback:g}));c({id:u,uploadTask:i?p:void 0})}))}}),[r,a,i,p,c,d,m,f,u,n,k,b,y])}export{r as useUploadFiles};
+import * as React from 'react';
+import { uploadFile } from '../../utils/uploadFile.mjs';
+import { FileStatus } from '../../types.mjs';
+import { resolveFile } from './resolveFile.mjs';
+
+function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path = '', }) {
+    React.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
+        if (filesReadyToUpload.length > maxFileCount) {
+            return;
+        }
+        for (const { file, key, id } of filesReadyToUpload) {
+            const onComplete = (event) => {
+                onUploadSuccess?.(event);
+                setUploadSuccess({ id });
+            };
+            const onProgress = (event) => {
+                /**
+                 * When a file is zero bytes, the progress.total will equal zero.
+                 * Therefore, this will prevent a divide by zero error.
+                 */
+                const progressPercentage = event.totalBytes === undefined || event.totalBytes === 0
+                    ? 100
+                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
+                setUploadProgress({ id, progress: progressPercentage });
+            };
+            const onError = (error) => {
+                onUploadError?.(error, { key });
+            };
+            if (file) {
+                resolveFile({ processFile, file, key }).then(({ key: processedKey, ...rest }) => {
+                    onUploadStart?.({ key: processedKey });
+                    const uploadTask = uploadFile({
+                        ...rest,
+                        key: processedKey,
+                        level: accessLevel,
+                        progressCallback: onProgress,
+                        errorCallback: onError,
+                        completeCallback: onComplete,
+                    });
+                    setUploadingFile({
+                        id,
+                        uploadTask,
+                    });
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+    ]);
+}
+
+export { useUploadFiles };

package/dist/esm/components/StorageManager/types.mjs

@@ -1 +1,11 @@
-var d;!function(d){d.ADDED="added",d.QUEUED="queued",d.UPLOADING="uploading",d.PAUSED="paused",d.ERROR="error",d.UPLOADED="uploaded"}(d||(d={}));export{d as FileStatus};
+var FileStatus;
+(function (FileStatus) {
+    FileStatus["ADDED"] = "added";
+    FileStatus["QUEUED"] = "queued";
+    FileStatus["UPLOADING"] = "uploading";
+    FileStatus["PAUSED"] = "paused";
+    FileStatus["ERROR"] = "error";
+    FileStatus["UPLOADED"] = "uploaded";
+})(FileStatus || (FileStatus = {}));
+
+export { FileStatus };

package/dist/esm/components/StorageManager/ui/Container/Container.mjs

@@ -1 +1,8 @@
-import e from"react";import{View as r}from"@aws-amplify/ui-react";function a({children:a,className:t}){return e.createElement(r,{className:t},a)}export{a as Container};
+import React__default from 'react';
+import { View } from '@aws-amplify/ui-react';
+
+function Container({ children, className, }) {
+    return React__default.createElement(View, { className: className }, children);
+}
+
+export { Container };

package/dist/esm/components/StorageManager/ui/DropZone/DropZone.mjs

@@ -1 +1,16 @@
-import a from"react";import e from"classnames";import{View as r,ComponentClassNames as o,Text as n}from"@aws-amplify/ui-react";import{classNameModifier as t}from"@aws-amplify/ui";import{useIcons as i,IconUpload as l}from"@aws-amplify/ui-react/internal";function m({children:m,displayText:p,inDropZone:s,onDragEnter:g,onDragLeave:c,onDragOver:D,onDragStart:d,onDrop:f,testId:u}){var v;const{dropFilesText:E}=p,S=i("storageManager");return a.createElement(r,{className:e(s&&t(o.StorageManagerDropZone,"active"),o.StorageManagerDropZone),"data-testid":u,onDragStart:d,onDragEnter:g,onDragLeave:c,onDrop:f,onDragOver:D},a.createElement(r,{as:"span","aria-hidden":!0,className:o.StorageManagerDropZoneIcon},null!==(v=null==S?void 0:S.upload)&&void 0!==v?v:a.createElement(l,null)),a.createElement(n,{className:o.StorageManagerDropZoneText},E),m)}export{m as DropZone};
+import React__default from 'react';
+import { classNames, classNameModifier, ComponentClassName } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+import { useIcons, IconUpload } from '@aws-amplify/ui-react/internal';
+
+function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = useIcons('storageManager');
+    return (React__default.createElement(View, { className: classNames(inDropZone &&
+            classNameModifier(ComponentClassName.StorageManagerDropZone, 'active'), ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default.createElement(View, { as: "span", "aria-hidden": true, className: ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__default.createElement(IconUpload, null)),
+        React__default.createElement(Text, { className: ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
+        children));
+}
+
+export { DropZone };

package/dist/esm/components/StorageManager/ui/FileList/FileControl.mjs

@@ -1 +1,23 @@
-import e from"react";import{View as a,ComponentClassNames as t,Loader as r,Button as l}from"@aws-amplify/ui-react";import{FileStatus as s}from"../../types.mjs";import{FileStatusMessage as i}from"./FileStatusMessage.mjs";import{FileRemoveButton as m}from"./FileRemoveButton.mjs";import{UploadDetails as n}from"./FileDetails.mjs";import{FileThumbnail as o}from"./FileThumbnail.mjs";function u({onPause:u,onResume:c,displayName:p,errorMessage:g,isImage:f,isResumable:d,loaderIsDeterminate:T,onRemove:x,progress:E,showThumbnails:S=!0,size:N,status:P,displayText:D,thumbnailUrl:U}){const{getPausedText:v,getUploadingText:F,uploadSuccessfulText:M,pauseText:j,resumeText:k}=D;return e.createElement(a,{className:t.StorageManagerFile},e.createElement(a,{className:t.StorageManagerFileWrapper},S?e.createElement(o,{isImage:f,fileName:p,url:U}):null,e.createElement(n,{displayName:p,fileSize:N}),P===s.UPLOADING?e.createElement(r,{className:t.StorageManagerLoader,variation:"linear",percentage:E,isDeterminate:T,isPercentageTextHidden:!0}):null,!d||P!==s.UPLOADING&&P!==s.PAUSED?null:P===s.PAUSED?e.createElement(l,{onClick:c,size:"small",variation:"link"},k):e.createElement(l,{onClick:u,size:"small",variation:"link"},j),e.createElement(m,{altText:`Remove file ${p}`,onClick:x})),e.createElement(i,{uploadSuccessfulText:M,getUploadingText:F,getPausedText:v,status:P,errorMessage:g,percentage:E}))}export{u as FileControl};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Loader, Button } from '@aws-amplify/ui-react';
+import { FileStatus } from '../../types.mjs';
+import { FileStatusMessage } from './FileStatusMessage.mjs';
+import { FileRemoveButton } from './FileRemoveButton.mjs';
+import { UploadDetails } from './FileDetails.mjs';
+import { FileThumbnail } from './FileThumbnail.mjs';
+
+function FileControl({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails = true, size, status, displayText, thumbnailUrl, }) {
+    const { getPausedText, getUploadingText, uploadSuccessfulText, pauseButtonText, resumeButtonText, } = displayText;
+    return (React__default.createElement(View, { className: ComponentClassName.StorageManagerFile },
+        React__default.createElement(View, { className: ComponentClassName.StorageManagerFileWrapper },
+            showThumbnails ? (React__default.createElement(FileThumbnail, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
+            React__default.createElement(UploadDetails, { displayName: displayName, fileSize: size }),
+            status === FileStatus.UPLOADING ? (React__default.createElement(Loader, { className: ComponentClassName.StorageManagerLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
+            isResumable &&
+                (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__default.createElement(Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__default.createElement(Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
+            React__default.createElement(FileRemoveButton, { altText: `Remove file ${displayName}`, onClick: onRemove })),
+        React__default.createElement(FileStatusMessage, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
+}
+
+export { FileControl };

package/dist/esm/components/StorageManager/ui/FileList/FileDetails.mjs

@@ -1 +1,14 @@
-import e from"react";import{View as a,ComponentClassNames as r,Text as t}from"@aws-amplify/ui-react";import{humanFileSize as m}from"@aws-amplify/ui";const l=({displayName:l,fileSize:i})=>e.createElement(e.Fragment,null,e.createElement(a,{className:r.StorageManagerFileMain},e.createElement(t,{className:r.StorageManagerFileName},l)),e.createElement(t,{as:"span",className:r.StorageManagerFileSize},i?m(i,!0):""));export{l as UploadDetails};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+import { humanFileSize } from '../../utils/humanFileSize.mjs';
+import 'aws-amplify/storage';
+
+const UploadDetails = ({ displayName, fileSize, }) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(View, { className: ComponentClassName.StorageManagerFileMain },
+            React__default.createElement(Text, { className: ComponentClassName.StorageManagerFileName }, displayName)),
+        React__default.createElement(Text, { as: "span", className: ComponentClassName.StorageManagerFileSize }, fileSize ? humanFileSize(fileSize, true) : '')));
+};
+
+export { UploadDetails };