@aws-amplify/ui-react-storage 3.3.4 → 3.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/FileUploader/FileUploader.mjs +1 -2
- package/dist/esm/components/FileUploader/utils/getInput.mjs +2 -2
- package/dist/esm/components/StorageManager/StorageManager.mjs +1 -2
- package/dist/esm/version.mjs +1 -1
- package/dist/index.js +79 -82
- package/dist/types/version.d.ts +1 -1
- package/package.json +7 -6
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getLogger, ComponentClassName } from '@aws-amplify/ui';
|
|
3
3
|
import { VisuallyHidden } from '@aws-amplify/ui-react';
|
|
4
|
-
import { useDeprecationWarning, useSetUserAgent } from '@aws-amplify/ui-react-core';
|
|
5
|
-
import { useDropZone } from '@aws-amplify/ui-react/internal';
|
|
4
|
+
import { useDeprecationWarning, useDropZone, useSetUserAgent } from '@aws-amplify/ui-react-core';
|
|
6
5
|
import { useFileUploader } from './hooks/useFileUploader/useFileUploader.mjs';
|
|
7
6
|
import { useUploadFiles } from './hooks/useUploadFiles/useUploadFiles.mjs';
|
|
8
7
|
import { FileStatus } from './types.mjs';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { fetchAuthSession } from 'aws-amplify/auth';
|
|
2
|
-
import {
|
|
2
|
+
import { isFunction, isString } from '@aws-amplify/ui';
|
|
3
3
|
import { resolveFile } from './resolveFile.mjs';
|
|
4
4
|
|
|
5
5
|
const getInput = ({ accessLevel, file, key, onProgress, path, processFile, useAccelerateEndpoint, }) => {
|
|
6
6
|
return async () => {
|
|
7
|
-
const hasCallbackPath =
|
|
7
|
+
const hasCallbackPath = isFunction(path);
|
|
8
8
|
const hasStringPath = isString(path);
|
|
9
9
|
const hasKeyInput = !!accessLevel && !hasCallbackPath;
|
|
10
10
|
const { file: data, key: processedKey, ...rest } = await resolveFile({ file, key, processFile });
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getLogger, ComponentClassName } from '@aws-amplify/ui';
|
|
3
3
|
import { VisuallyHidden } from '@aws-amplify/ui-react';
|
|
4
|
-
import { useDeprecationWarning, useSetUserAgent } from '@aws-amplify/ui-react-core';
|
|
5
|
-
import { useDropZone } from '@aws-amplify/ui-react/internal';
|
|
4
|
+
import { useDeprecationWarning, useDropZone, useSetUserAgent } from '@aws-amplify/ui-react-core';
|
|
6
5
|
import { useFileUploader } from '../FileUploader/hooks/useFileUploader/useFileUploader.mjs';
|
|
7
6
|
import { useUploadFiles } from '../FileUploader/hooks/useUploadFiles/useUploadFiles.mjs';
|
|
8
7
|
import { FileStatus } from '../FileUploader/types.mjs';
|
package/dist/esm/version.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -6,11 +6,9 @@ var React = require('react');
|
|
|
6
6
|
var ui = require('@aws-amplify/ui');
|
|
7
7
|
var uiReact = require('@aws-amplify/ui-react');
|
|
8
8
|
var uiReactCore = require('@aws-amplify/ui-react-core');
|
|
9
|
-
var internal = require('@aws-amplify/ui-react/internal');
|
|
10
9
|
var auth = require('aws-amplify/auth');
|
|
11
10
|
var storage = require('aws-amplify/storage');
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
var internal = require('@aws-amplify/ui-react/internal');
|
|
14
12
|
|
|
15
13
|
function _interopNamespace(e) {
|
|
16
14
|
if (e && e.__esModule) return e;
|
|
@@ -30,7 +28,6 @@ function _interopNamespace(e) {
|
|
|
30
28
|
return Object.freeze(n);
|
|
31
29
|
}
|
|
32
30
|
|
|
33
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
34
31
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
35
32
|
|
|
36
33
|
var FileStatus;
|
|
@@ -176,12 +173,12 @@ const createFileFromDefault = (file) => isDefaultFile(file)
|
|
|
176
173
|
? { ...file, id: file.key, status: FileStatus.UPLOADED }
|
|
177
174
|
: undefined;
|
|
178
175
|
function useFileUploader(defaultFiles = []) {
|
|
179
|
-
const [{ files }, dispatch] =
|
|
176
|
+
const [{ files }, dispatch] = React__namespace["default"].useReducer(fileUploaderStateReducer, {
|
|
180
177
|
files: (Array.isArray(defaultFiles)
|
|
181
178
|
? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
|
|
182
179
|
: []),
|
|
183
180
|
});
|
|
184
|
-
const dispatchers =
|
|
181
|
+
const dispatchers = React__namespace["default"].useMemo(() => ({
|
|
185
182
|
addFiles: (params) => {
|
|
186
183
|
dispatch(addFilesAction(params));
|
|
187
184
|
},
|
|
@@ -305,7 +302,7 @@ const resolveFile = ({ processFile, ...input }) => {
|
|
|
305
302
|
|
|
306
303
|
const getInput = ({ accessLevel, file, key, onProgress, path, processFile, useAccelerateEndpoint, }) => {
|
|
307
304
|
return async () => {
|
|
308
|
-
const hasCallbackPath = ui.
|
|
305
|
+
const hasCallbackPath = ui.isFunction(path);
|
|
309
306
|
const hasStringPath = ui.isString(path);
|
|
310
307
|
const hasKeyInput = !!accessLevel && !hasCallbackPath;
|
|
311
308
|
const { file: data, key: processedKey, ...rest } = await resolveFile({ file, key, processFile });
|
|
@@ -424,16 +421,16 @@ function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onUploa
|
|
|
424
421
|
}
|
|
425
422
|
|
|
426
423
|
function Container$1({ children, className, }) {
|
|
427
|
-
return
|
|
424
|
+
return React__namespace["default"].createElement(uiReact.View, { className: className }, children);
|
|
428
425
|
}
|
|
429
426
|
|
|
430
427
|
function DropZone$1({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
|
|
431
428
|
const { dropFilesText } = displayText;
|
|
432
429
|
const icons = internal.useIcons('storageManager');
|
|
433
|
-
return (
|
|
430
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
|
|
434
431
|
ui.classNameModifier(ui.ComponentClassName.FileUploaderDropZone, 'active'), ui.ComponentClassName.FileUploaderDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
|
|
435
|
-
|
|
436
|
-
|
|
432
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.FileUploaderDropZoneIcon }, icons?.upload ?? React__namespace["default"].createElement(internal.IconUpload, null)),
|
|
433
|
+
React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderDropZoneText }, dropFilesText),
|
|
437
434
|
children));
|
|
438
435
|
}
|
|
439
436
|
|
|
@@ -441,17 +438,17 @@ const FileStatusMessage$1 = ({ errorMessage, getPausedText, getUploadingText, pe
|
|
|
441
438
|
const icons = internal.useIcons('storageManager');
|
|
442
439
|
switch (status) {
|
|
443
440
|
case FileStatus.UPLOADING: {
|
|
444
|
-
return (
|
|
441
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileStatus }, getUploadingText(percentage)));
|
|
445
442
|
}
|
|
446
443
|
case FileStatus.PAUSED:
|
|
447
|
-
return (
|
|
444
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileStatus }, getPausedText(percentage)));
|
|
448
445
|
case FileStatus.UPLOADED:
|
|
449
|
-
return (
|
|
450
|
-
|
|
446
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.FileUploaderFileStatus, ui.classNameModifier(ui.ComponentClassName.FileUploaderFileStatus, 'success')) },
|
|
447
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__namespace["default"].createElement(internal.IconCheck, null)),
|
|
451
448
|
uploadSuccessfulText));
|
|
452
449
|
case FileStatus.ERROR:
|
|
453
|
-
return (
|
|
454
|
-
|
|
450
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.FileUploaderFileStatus, ui.classNameModifier(ui.ComponentClassName.FileUploaderFileStatus, 'error')) },
|
|
451
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__namespace["default"].createElement(internal.IconError, null)),
|
|
455
452
|
errorMessage));
|
|
456
453
|
default:
|
|
457
454
|
return null;
|
|
@@ -460,35 +457,35 @@ const FileStatusMessage$1 = ({ errorMessage, getPausedText, getUploadingText, pe
|
|
|
460
457
|
|
|
461
458
|
const FileRemoveButton$1 = ({ altText, onClick, }) => {
|
|
462
459
|
const icons = internal.useIcons('storageManager');
|
|
463
|
-
return (
|
|
464
|
-
|
|
465
|
-
|
|
460
|
+
return (React__namespace["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
|
|
461
|
+
React__namespace["default"].createElement(uiReact.VisuallyHidden, null, altText),
|
|
462
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__namespace["default"].createElement(internal.IconClose, null))));
|
|
466
463
|
};
|
|
467
464
|
|
|
468
465
|
const UploadDetails$1 = ({ displayName, fileSize, }) => {
|
|
469
|
-
return (
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
466
|
+
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
|
|
467
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileMain },
|
|
468
|
+
React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileName }, displayName)),
|
|
469
|
+
React__namespace["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.FileUploaderFileSize }, fileSize ? ui.humanFileSize(fileSize, true) : '')));
|
|
473
470
|
};
|
|
474
471
|
|
|
475
472
|
const FileThumbnail$1 = ({ fileName, isImage, url, }) => {
|
|
476
473
|
const icons = internal.useIcons('storageManager');
|
|
477
|
-
const thumbnail = isImage ? (
|
|
478
|
-
return (
|
|
474
|
+
const thumbnail = isImage ? (React__namespace["default"].createElement(uiReact.Image, { alt: fileName, src: url })) : (icons?.file ?? React__namespace["default"].createElement(internal.IconFile, null));
|
|
475
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileImage }, thumbnail));
|
|
479
476
|
};
|
|
480
477
|
|
|
481
478
|
function FileControl$1({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails = true, size, status, displayText, thumbnailUrl, }) {
|
|
482
479
|
const { getPausedText, getUploadingText, uploadSuccessfulText, pauseButtonText, resumeButtonText, } = displayText;
|
|
483
|
-
return (
|
|
484
|
-
|
|
485
|
-
showThumbnails ? (
|
|
486
|
-
|
|
487
|
-
status === FileStatus.UPLOADING ? (
|
|
480
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFile },
|
|
481
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileWrapper },
|
|
482
|
+
showThumbnails ? (React__namespace["default"].createElement(FileThumbnail$1, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
|
|
483
|
+
React__namespace["default"].createElement(UploadDetails$1, { displayName: displayName, fileSize: size }),
|
|
484
|
+
status === FileStatus.UPLOADING ? (React__namespace["default"].createElement(uiReact.Loader, { className: ui.ComponentClassName.FileUploaderLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
|
|
488
485
|
isResumable &&
|
|
489
|
-
(status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (
|
|
490
|
-
|
|
491
|
-
|
|
486
|
+
(status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__namespace["default"].createElement(uiReact.Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__namespace["default"].createElement(uiReact.Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
|
|
487
|
+
React__namespace["default"].createElement(FileRemoveButton$1, { altText: `Remove file ${displayName}`, onClick: onRemove })),
|
|
488
|
+
React__namespace["default"].createElement(FileStatusMessage$1, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
|
|
492
489
|
}
|
|
493
490
|
|
|
494
491
|
function FileList$1({ displayText, files, hasMaxFilesError, isResumable, onCancelUpload, onDeleteUpload, onResume, onPause, showThumbnails, maxFileCount, }) {
|
|
@@ -497,7 +494,7 @@ function FileList$1({ displayText, files, hasMaxFilesError, isResumable, onCance
|
|
|
497
494
|
}
|
|
498
495
|
const { getMaxFilesErrorText } = displayText;
|
|
499
496
|
const headingMaxFiles = getMaxFilesErrorText(maxFileCount);
|
|
500
|
-
return (
|
|
497
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileList },
|
|
501
498
|
files.map((storageFile) => {
|
|
502
499
|
const { file, status, progress, error, key, isImage, id, uploadTask } = storageFile;
|
|
503
500
|
const thumbnailUrl = file && isImage ? URL.createObjectURL(file) : '';
|
|
@@ -523,14 +520,14 @@ function FileList$1({ displayText, files, hasMaxFilesError, isResumable, onCance
|
|
|
523
520
|
onResume({ id, uploadTask });
|
|
524
521
|
}
|
|
525
522
|
};
|
|
526
|
-
return (
|
|
523
|
+
return (React__namespace["default"].createElement(FileControl$1, { displayName: key, errorMessage: error, displayText: displayText, isImage: isImage, isUploading: isUploading, isResumable: isResumable, key: id, loaderIsDeterminate: loaderIsDeterminate, onRemove: onRemove, onPause: handlePauseUpload, onResume: handleResumeUpload, progress: progress, showThumbnails: showThumbnails, size: file?.size, status: status, thumbnailUrl: thumbnailUrl }));
|
|
527
524
|
}),
|
|
528
|
-
hasMaxFilesError && (
|
|
525
|
+
hasMaxFilesError && (React__namespace["default"].createElement(uiReact.Alert, { variation: "error", heading: headingMaxFiles }))));
|
|
529
526
|
}
|
|
530
527
|
|
|
531
528
|
function FileListHeader$1({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
|
|
532
529
|
const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
|
|
533
|
-
return (
|
|
530
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderPreviewerText }, selectedFilesCount
|
|
534
531
|
? getSelectedFilesText(selectedFilesCount)
|
|
535
532
|
: allUploadsSuccessful
|
|
536
533
|
? getFilesUploadedText(fileCount)
|
|
@@ -539,17 +536,17 @@ function FileListHeader$1({ allUploadsSuccessful, displayText, fileCount, remain
|
|
|
539
536
|
|
|
540
537
|
function FileListFooter$1({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
|
|
541
538
|
const { clearAllButtonText, getUploadButtonText } = displayText;
|
|
542
|
-
return (
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
539
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderPreviewerFooter },
|
|
540
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderPreviewerActions },
|
|
541
|
+
React__namespace["default"].createElement(uiReact.Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
|
|
542
|
+
React__namespace["default"].createElement(uiReact.Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
|
|
546
543
|
}
|
|
547
544
|
|
|
548
545
|
function FilePicker$1({ children, className = ui.ComponentClassName.FileUploaderFilePicker, size = 'small', ...props }) {
|
|
549
|
-
return (
|
|
546
|
+
return (React__namespace["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
|
|
550
547
|
}
|
|
551
548
|
|
|
552
|
-
const VERSION = '3.3.
|
|
549
|
+
const VERSION = '3.3.6';
|
|
553
550
|
|
|
554
551
|
const logger$1 = ui.getLogger('Storage');
|
|
555
552
|
const MISSING_REQUIRED_PROPS_MESSAGE$1 = '`FileUploader` requires a `maxFileCount` prop to be provided.';
|
|
@@ -592,7 +589,7 @@ const FileUploaderBase = React__namespace.forwardRef(function FileUploader({ acc
|
|
|
592
589
|
};
|
|
593
590
|
const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
|
|
594
591
|
React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
|
|
595
|
-
const { dragState, ...dropZoneProps } =
|
|
592
|
+
const { dragState, ...dropZoneProps } = uiReactCore.useDropZone({
|
|
596
593
|
acceptedFileTypes,
|
|
597
594
|
onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
|
|
598
595
|
if (rejectedFiles && rejectedFiles.length > 0) {
|
|
@@ -762,16 +759,16 @@ const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey,
|
|
|
762
759
|
};
|
|
763
760
|
|
|
764
761
|
function Container({ children, className, }) {
|
|
765
|
-
return
|
|
762
|
+
return React__namespace["default"].createElement(uiReact.View, { className: className }, children);
|
|
766
763
|
}
|
|
767
764
|
|
|
768
765
|
function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
|
|
769
766
|
const { dropFilesText } = displayText;
|
|
770
767
|
const icons = internal.useIcons('storageManager');
|
|
771
|
-
return (
|
|
768
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
|
|
772
769
|
ui.classNameModifier(ui.ComponentClassName.StorageManagerDropZone, 'active'), ui.ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
|
|
773
|
-
|
|
774
|
-
|
|
770
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__namespace["default"].createElement(internal.IconUpload, null)),
|
|
771
|
+
React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
|
|
775
772
|
children));
|
|
776
773
|
}
|
|
777
774
|
|
|
@@ -779,17 +776,17 @@ const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, perc
|
|
|
779
776
|
const icons = internal.useIcons('storageManager');
|
|
780
777
|
switch (status) {
|
|
781
778
|
case FileStatus.UPLOADING: {
|
|
782
|
-
return (
|
|
779
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getUploadingText(percentage)));
|
|
783
780
|
}
|
|
784
781
|
case FileStatus.PAUSED:
|
|
785
|
-
return (
|
|
782
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getPausedText(percentage)));
|
|
786
783
|
case FileStatus.UPLOADED:
|
|
787
|
-
return (
|
|
788
|
-
|
|
784
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'success')) },
|
|
785
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__namespace["default"].createElement(internal.IconCheck, null)),
|
|
789
786
|
uploadSuccessfulText));
|
|
790
787
|
case FileStatus.ERROR:
|
|
791
|
-
return (
|
|
792
|
-
|
|
788
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'error')) },
|
|
789
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__namespace["default"].createElement(internal.IconError, null)),
|
|
793
790
|
errorMessage));
|
|
794
791
|
default:
|
|
795
792
|
return null;
|
|
@@ -798,35 +795,35 @@ const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, perc
|
|
|
798
795
|
|
|
799
796
|
const FileRemoveButton = ({ altText, onClick, }) => {
|
|
800
797
|
const icons = internal.useIcons('storageManager');
|
|
801
|
-
return (
|
|
802
|
-
|
|
803
|
-
|
|
798
|
+
return (React__namespace["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
|
|
799
|
+
React__namespace["default"].createElement(uiReact.VisuallyHidden, null, altText),
|
|
800
|
+
React__namespace["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__namespace["default"].createElement(internal.IconClose, null))));
|
|
804
801
|
};
|
|
805
802
|
|
|
806
803
|
const UploadDetails = ({ displayName, fileSize, }) => {
|
|
807
|
-
return (
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
804
|
+
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
|
|
805
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileMain },
|
|
806
|
+
React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileName }, displayName)),
|
|
807
|
+
React__namespace["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.StorageManagerFileSize }, fileSize ? ui.humanFileSize(fileSize, true) : '')));
|
|
811
808
|
};
|
|
812
809
|
|
|
813
810
|
const FileThumbnail = ({ fileName, isImage, url, }) => {
|
|
814
811
|
const icons = internal.useIcons('storageManager');
|
|
815
|
-
const thumbnail = isImage ? (
|
|
816
|
-
return (
|
|
812
|
+
const thumbnail = isImage ? (React__namespace["default"].createElement(uiReact.Image, { alt: fileName, src: url })) : (icons?.file ?? React__namespace["default"].createElement(internal.IconFile, null));
|
|
813
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileImage }, thumbnail));
|
|
817
814
|
};
|
|
818
815
|
|
|
819
816
|
function FileControl({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails = true, size, status, displayText, thumbnailUrl, }) {
|
|
820
817
|
const { getPausedText, getUploadingText, uploadSuccessfulText, pauseButtonText, resumeButtonText, } = displayText;
|
|
821
|
-
return (
|
|
822
|
-
|
|
823
|
-
showThumbnails ? (
|
|
824
|
-
|
|
825
|
-
status === FileStatus.UPLOADING ? (
|
|
818
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFile },
|
|
819
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileWrapper },
|
|
820
|
+
showThumbnails ? (React__namespace["default"].createElement(FileThumbnail, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
|
|
821
|
+
React__namespace["default"].createElement(UploadDetails, { displayName: displayName, fileSize: size }),
|
|
822
|
+
status === FileStatus.UPLOADING ? (React__namespace["default"].createElement(uiReact.Loader, { className: ui.ComponentClassName.StorageManagerLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
|
|
826
823
|
isResumable &&
|
|
827
|
-
(status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (
|
|
828
|
-
|
|
829
|
-
|
|
824
|
+
(status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__namespace["default"].createElement(uiReact.Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__namespace["default"].createElement(uiReact.Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
|
|
825
|
+
React__namespace["default"].createElement(FileRemoveButton, { altText: `Remove file ${displayName}`, onClick: onRemove })),
|
|
826
|
+
React__namespace["default"].createElement(FileStatusMessage, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
|
|
830
827
|
}
|
|
831
828
|
|
|
832
829
|
function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelUpload, onDeleteUpload, onResume, onPause, showThumbnails, maxFileCount, }) {
|
|
@@ -835,7 +832,7 @@ function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelU
|
|
|
835
832
|
}
|
|
836
833
|
const { getMaxFilesErrorText } = displayText;
|
|
837
834
|
const headingMaxFiles = getMaxFilesErrorText(maxFileCount);
|
|
838
|
-
return (
|
|
835
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileList },
|
|
839
836
|
files.map((storageFile) => {
|
|
840
837
|
const { file, status, progress, error, key, isImage, id, uploadTask } = storageFile;
|
|
841
838
|
const thumbnailUrl = file && isImage ? URL.createObjectURL(file) : '';
|
|
@@ -861,14 +858,14 @@ function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelU
|
|
|
861
858
|
onResume({ id, uploadTask });
|
|
862
859
|
}
|
|
863
860
|
};
|
|
864
|
-
return (
|
|
861
|
+
return (React__namespace["default"].createElement(FileControl, { displayName: key, errorMessage: error, displayText: displayText, isImage: isImage, isUploading: isUploading, isResumable: isResumable, key: id, loaderIsDeterminate: loaderIsDeterminate, onRemove: onRemove, onPause: handlePauseUpload, onResume: handleResumeUpload, progress: progress, showThumbnails: showThumbnails, size: file?.size, status: status, thumbnailUrl: thumbnailUrl }));
|
|
865
862
|
}),
|
|
866
|
-
hasMaxFilesError && (
|
|
863
|
+
hasMaxFilesError && (React__namespace["default"].createElement(uiReact.Alert, { variation: "error", heading: headingMaxFiles }))));
|
|
867
864
|
}
|
|
868
865
|
|
|
869
866
|
function FileListHeader({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
|
|
870
867
|
const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
|
|
871
|
-
return (
|
|
868
|
+
return (React__namespace["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerPreviewerText }, selectedFilesCount
|
|
872
869
|
? getSelectedFilesText(selectedFilesCount)
|
|
873
870
|
: allUploadsSuccessful
|
|
874
871
|
? getFilesUploadedText(fileCount)
|
|
@@ -877,14 +874,14 @@ function FileListHeader({ allUploadsSuccessful, displayText, fileCount, remainin
|
|
|
877
874
|
|
|
878
875
|
function FileListFooter({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
|
|
879
876
|
const { clearAllButtonText, getUploadButtonText } = displayText;
|
|
880
|
-
return (
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
877
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerPreviewerFooter },
|
|
878
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerPreviewerActions },
|
|
879
|
+
React__namespace["default"].createElement(uiReact.Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
|
|
880
|
+
React__namespace["default"].createElement(uiReact.Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
|
|
884
881
|
}
|
|
885
882
|
|
|
886
883
|
function FilePicker({ children, className = ui.ComponentClassName.StorageManagerFilePicker, size = 'small', ...props }) {
|
|
887
|
-
return (
|
|
884
|
+
return (React__namespace["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
|
|
888
885
|
}
|
|
889
886
|
|
|
890
887
|
const logger = ui.getLogger('Storage');
|
|
@@ -932,7 +929,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
|
|
|
932
929
|
};
|
|
933
930
|
const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
|
|
934
931
|
React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
|
|
935
|
-
const { dragState, ...dropZoneProps } =
|
|
932
|
+
const { dragState, ...dropZoneProps } = uiReactCore.useDropZone({
|
|
936
933
|
acceptedFileTypes,
|
|
937
934
|
onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
|
|
938
935
|
if (rejectedFiles && rejectedFiles.length > 0) {
|
package/dist/types/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "3.3.
|
|
1
|
+
export declare const VERSION = "3.3.6";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aws-amplify/ui-react-storage",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.6",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/esm/index.mjs",
|
|
6
6
|
"exports": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react-storage\"'",
|
|
32
32
|
"clean": "rimraf dist node_modules",
|
|
33
33
|
"dev": "yarn build:rollup --watch",
|
|
34
|
-
"lint": "yarn typecheck && eslint
|
|
34
|
+
"lint": "yarn typecheck && eslint .",
|
|
35
35
|
"prebuild": "rimraf dist",
|
|
36
36
|
"size": "yarn size-limit",
|
|
37
37
|
"test": "jest",
|
|
@@ -39,14 +39,15 @@
|
|
|
39
39
|
"typecheck": "tsc --noEmit"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@aws-amplify/ui": "6.6.
|
|
43
|
-
"@aws-amplify/ui-react": "6.5.
|
|
44
|
-
"@aws-amplify/ui-react-core": "3.0.
|
|
42
|
+
"@aws-amplify/ui": "6.6.2",
|
|
43
|
+
"@aws-amplify/ui-react": "6.5.2",
|
|
44
|
+
"@aws-amplify/ui-react-core": "3.0.26",
|
|
45
45
|
"lodash": "4.17.21",
|
|
46
46
|
"tslib": "^2.5.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"aws-amplify": "
|
|
49
|
+
"@aws-amplify/core": "*",
|
|
50
|
+
"aws-amplify": "^6.6.0",
|
|
50
51
|
"react": "^16.14.0 || ^17.0 || ^18.0",
|
|
51
52
|
"react-dom": "^16.14.0 || ^17.0 || ^18.0"
|
|
52
53
|
},
|