@transferwise/components 0.0.0-experimental-05bf45b → 0.0.0-experimental-5c0d645
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/build/typeahead/util/highlight.js +14 -2
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/typeahead/util/highlight.mjs +15 -3
- package/build/typeahead/util/highlight.mjs.map +1 -1
- package/build/types/typeahead/util/highlight.d.ts +1 -1
- package/build/types/typeahead/util/highlight.d.ts.map +1 -1
- package/build/types/uploadInput/UploadInput.d.ts +0 -9
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts +1 -3
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -1
- package/build/uploadInput/UploadInput.js +51 -57
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +51 -57
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +3 -8
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +3 -8
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js +0 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs +0 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
- package/package.json +1 -1
- package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +7 -5
- package/src/typeahead/util/highlight.tsx +7 -2
- package/src/uploadInput/UploadInput.spec.tsx +2 -90
- package/src/uploadInput/UploadInput.tsx +60 -81
- package/src/uploadInput/uploadItem/UploadItem.tsx +6 -12
- package/src/uploadInput/uploadItem/UploadItemLink.tsx +1 -9
|
@@ -22,15 +22,6 @@ function generateFileId(file) {
|
|
|
22
22
|
const uploadTimeStamp = new Date().getTime();
|
|
23
23
|
return `${name}_${size}_${uploadTimeStamp}`;
|
|
24
24
|
}
|
|
25
|
-
/**
|
|
26
|
-
* The component allows users to upload files, manage the list of uploaded files,
|
|
27
|
-
* and handle file validation and deletion.
|
|
28
|
-
*
|
|
29
|
-
* @param {UploadInputProps} props - The properties for the UploadInput component.
|
|
30
|
-
*
|
|
31
|
-
* @see {@link UploadInput} for further information.
|
|
32
|
-
* @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
|
|
33
|
-
*/
|
|
34
25
|
const UploadInput = ({
|
|
35
26
|
files = [],
|
|
36
27
|
fileInputName = 'file',
|
|
@@ -56,7 +47,7 @@ const UploadInput = ({
|
|
|
56
47
|
nonLabelable: true
|
|
57
48
|
});
|
|
58
49
|
const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
|
|
59
|
-
const [
|
|
50
|
+
const [fileToRemoveIndex, setFileToRemoveIndex] = useState(null);
|
|
60
51
|
const [mounted, setMounted] = useState(false);
|
|
61
52
|
const {
|
|
62
53
|
formatMessage
|
|
@@ -64,73 +55,56 @@ const UploadInput = ({
|
|
|
64
55
|
const itemRefs = useRef([]);
|
|
65
56
|
const uploadInputRef = useRef(null);
|
|
66
57
|
const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
|
|
67
|
-
const FOCUS_TIMEOUT = 400;
|
|
68
58
|
const [uploadedFiles, setUploadedFiles] = useState(multiple || files.length === 0 ? files : [files[0]]);
|
|
69
59
|
const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
|
|
70
|
-
function updateFileList(updateFn) {
|
|
71
|
-
setUploadedFiles(updateFn);
|
|
72
|
-
uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);
|
|
73
|
-
}
|
|
74
60
|
function addFileToList(recentUploadedFile) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
function modifyFileInList(file, updates) {
|
|
81
|
-
updateFileList(list => list.map(fileInList => fileInList === file || fileInList.id === file.id ? {
|
|
82
|
-
...file,
|
|
83
|
-
...updates
|
|
84
|
-
} : fileInList));
|
|
61
|
+
function addToList(listToAddTo) {
|
|
62
|
+
return [...listToAddTo, recentUploadedFile];
|
|
63
|
+
}
|
|
64
|
+
setUploadedFiles(addToList);
|
|
65
|
+
uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);
|
|
85
66
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
67
|
+
const removeFileFromList = file => {
|
|
68
|
+
function filterOutFrom(listToFilterFrom) {
|
|
69
|
+
return listToFilterFrom.filter(fileInList => file !== fileInList && file.id !== fileInList.id);
|
|
70
|
+
}
|
|
71
|
+
setUploadedFiles(filterOutFrom);
|
|
72
|
+
uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);
|
|
73
|
+
};
|
|
74
|
+
const modifyFileInList = (file, updates) => {
|
|
75
|
+
const updateListItem = listToUpdate => listToUpdate.map(fileInList => {
|
|
76
|
+
return fileInList === file || fileInList.id === file.id ? {
|
|
77
|
+
...file,
|
|
78
|
+
...updates
|
|
79
|
+
} : fileInList;
|
|
98
80
|
});
|
|
99
|
-
|
|
81
|
+
setUploadedFiles(updateListItem);
|
|
82
|
+
uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
|
|
83
|
+
};
|
|
84
|
+
const [fileToRemove, setFileToRemove] = useState(null);
|
|
100
85
|
const removeFile = file => {
|
|
101
86
|
const {
|
|
102
87
|
id,
|
|
103
88
|
status
|
|
104
89
|
} = file;
|
|
105
90
|
const index = uploadedFiles.findIndex(f => f.id === file.id);
|
|
106
|
-
|
|
107
|
-
const nextIndexId = uploadedFiles[index + 1]?.id;
|
|
108
|
-
const focusId = nextIndexId ?? null;
|
|
91
|
+
setFileToRemoveIndex(index);
|
|
109
92
|
if (status === Status.FAILED) {
|
|
110
93
|
removeFileFromList(file);
|
|
111
|
-
|
|
112
|
-
focusId: focusId ?? null,
|
|
113
|
-
isLastItem
|
|
114
|
-
});
|
|
94
|
+
setFileToRemove(file);
|
|
115
95
|
} else if (onDeleteFile && id) {
|
|
116
96
|
modifyFileInList(file, {
|
|
117
97
|
status: Status.PROCESSING,
|
|
118
98
|
error: undefined
|
|
119
99
|
});
|
|
120
|
-
setNextFocusItem({
|
|
121
|
-
focusId,
|
|
122
|
-
isLastItem
|
|
123
|
-
});
|
|
124
100
|
onDeleteFile(id).then(() => {
|
|
125
101
|
removeFileFromList(file);
|
|
126
102
|
}).catch(error => {
|
|
127
103
|
modifyFileInList(file, {
|
|
128
104
|
error: error
|
|
129
105
|
});
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
isLastItem
|
|
133
|
-
});
|
|
106
|
+
}).finally(() => {
|
|
107
|
+
setFileToRemove(file);
|
|
134
108
|
});
|
|
135
109
|
}
|
|
136
110
|
};
|
|
@@ -162,17 +136,22 @@ const UploadInput = ({
|
|
|
162
136
|
const numberOfValidFiles = getNumberOfFilesUploaded();
|
|
163
137
|
return numberOfValidFiles >= maxFiles;
|
|
164
138
|
}
|
|
139
|
+
// One or more files selected, create entries for them
|
|
165
140
|
const addFiles = selectedFiles => {
|
|
166
141
|
for (let i = 0; i < selectedFiles.length; i += 1) {
|
|
167
142
|
const file = selectedFiles.item(i);
|
|
143
|
+
// Returning a FormData[] array instead of FileList so we can filter out incorrect files
|
|
168
144
|
const formData = new FormData();
|
|
169
145
|
if (file) {
|
|
170
146
|
generateFileId(file);
|
|
171
147
|
const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
|
|
148
|
+
// Check if file type is valid
|
|
172
149
|
if (!isTypeValid(file, allowedFileTypes)) {
|
|
173
150
|
handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));
|
|
174
151
|
continue;
|
|
175
152
|
}
|
|
153
|
+
// Check if the filesize is valid
|
|
154
|
+
// Convert to rough bytes
|
|
176
155
|
if (!isSizeValid(file, sizeLimit * 1000)) {
|
|
177
156
|
const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
|
|
178
157
|
handleFileUploadFailure(file, failureMessage);
|
|
@@ -185,10 +164,13 @@ const UploadInput = ({
|
|
|
185
164
|
handleFileUploadFailure(file, failureMessage);
|
|
186
165
|
continue;
|
|
187
166
|
}
|
|
167
|
+
// Check if the file is already in the list
|
|
188
168
|
const existingFile = uploadedFiles.find(f => f.filename === file.name);
|
|
189
169
|
if (existingFile) {
|
|
170
|
+
// Remove the file from the list before adding it again
|
|
190
171
|
removeFileFromList(existingFile);
|
|
191
172
|
}
|
|
173
|
+
// Add the file to the list
|
|
192
174
|
formData.append(fileInputName, file);
|
|
193
175
|
const pendingFile = {
|
|
194
176
|
id: generateFileId(file),
|
|
@@ -196,11 +178,13 @@ const UploadInput = ({
|
|
|
196
178
|
status: Status.PENDING
|
|
197
179
|
};
|
|
198
180
|
addFileToList(pendingFile);
|
|
181
|
+
// Start uploading the file
|
|
199
182
|
onUploadFile(formData).then(({
|
|
200
183
|
id,
|
|
201
184
|
url,
|
|
202
185
|
error
|
|
203
186
|
}) => {
|
|
187
|
+
// Replace the temporary id with the final one received from the API, and also set any errors
|
|
204
188
|
modifyFileInList(pendingFile, {
|
|
205
189
|
id,
|
|
206
190
|
url,
|
|
@@ -214,17 +198,27 @@ const UploadInput = ({
|
|
|
214
198
|
});
|
|
215
199
|
});
|
|
216
200
|
if (!multiple) {
|
|
201
|
+
// Only upload a single file
|
|
217
202
|
break;
|
|
218
203
|
}
|
|
219
204
|
}
|
|
220
205
|
}
|
|
221
206
|
};
|
|
222
207
|
useLayoutEffect(() => {
|
|
223
|
-
if (
|
|
224
|
-
|
|
208
|
+
if (fileToRemove && fileToRemoveIndex !== null) {
|
|
209
|
+
requestAnimationFrame(() => {
|
|
210
|
+
const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
|
|
211
|
+
if (itemRefs.current[nextFocusIndex]) {
|
|
212
|
+
itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
|
|
213
|
+
} else {
|
|
214
|
+
// If there's only one item left, focus the UploadButton
|
|
215
|
+
uploadInputRef.current?.focus();
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
setFileToRemove(null); // Reset the state
|
|
219
|
+
setFileToRemoveIndex(null); // Reset the index
|
|
225
220
|
}
|
|
226
|
-
|
|
227
|
-
}, [nextFocusItem]);
|
|
221
|
+
}, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
|
|
228
222
|
useEffect(() => {
|
|
229
223
|
setMounted(true);
|
|
230
224
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n}\n\n/**\n * Represents the next item to focus on after an action is performed.\n */\ntype NextFocusItem = {\n /** The ID of the next item to focus on. If null, no specific item is targeted. */\n focusId: number | null;\n /** Indicates if the next item to focus on is the last item in the list. */\n isLastItem: boolean;\n};\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [nextFocusItem, setNextFocusItem] = useState<NextFocusItem | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n const FOCUS_TIMEOUT = 400;\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n function focusNextItem(\n focusId: number | null = null,\n isLastItem = false,\n timeout: number = FOCUS_TIMEOUT,\n ) {\n const nextFocusIdIndex = focusId\n ? uploadedFilesListReference.current.findIndex((item: UploadedFile) => item.id === focusId)\n : -1;\n\n requestAnimationFrame(() => {\n setTimeout(() => {\n if (isLastItem || nextFocusIdIndex === -1) {\n // If it's the last item or no next item, focus on the upload input reference\n uploadInputRef.current?.focus();\n } else {\n const nextFocusElement = itemRefs.current[nextFocusIdIndex];\n nextFocusElement?.focus();\n }\n }, timeout);\n });\n }\n\n const removeFile = (file: UploadedFile) => {\n const { id, status } = file;\n const index = uploadedFiles.findIndex((f) => f.id === file.id);\n const isLastItem = index === uploadedFiles.length - 1;\n const nextIndexId = uploadedFiles[index + 1]?.id as number;\n const focusId = nextIndexId ?? null;\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n setNextFocusItem({ focusId: focusId ?? null, isLastItem });\n } else if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n setNextFocusItem({ focusId, isLastItem });\n\n onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n setNextFocusItem({ focusId, isLastItem });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n const id = generateFileId(file);\n const failedUpload = {\n id,\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const { name } = file;\n const id = generateFileId(file);\n\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useLayoutEffect(() => {\n if (nextFocusItem) {\n focusNextItem(nextFocusItem.focusId, nextFocusItem.isLastItem);\n }\n setNextFocusItem(null);\n }, [nextFocusItem]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n itemRefs.current[index] = el;\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? () => removeFile(file)\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n onClick={() => {\n if (markedFileForDelete) {\n removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","nextFocusItem","setNextFocusItem","mounted","setMounted","formatMessage","useIntl","itemRefs","useRef","uploadInputRef","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","FOCUS_TIMEOUT","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","modifyFileInList","updates","map","focusNextItem","focusId","isLastItem","timeout","nextFocusIdIndex","findIndex","item","requestAnimationFrame","setTimeout","focus","nextFocusElement","removeFile","status","index","f","nextIndexId","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","append","pendingFile","url","useLayoutEffect","useEffect","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","ref","el","singleFileUpload","canDelete","onDelete","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState, useLayoutEffect } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n function addToList(listToAddTo: readonly UploadedFile[]) {\n return [...listToAddTo, recentUploadedFile];\n }\n\n setUploadedFiles(addToList);\n uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n }\n\n const removeFileFromList = (file: UploadedFile) => {\n function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n return listToFilterFrom.filter(\n (fileInList) => file !== fileInList && file.id !== fileInList.id,\n );\n }\n\n setUploadedFiles(filterOutFrom);\n uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n };\n\n const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n listToUpdate.map((fileInList) => {\n return fileInList === file || fileInList.id === file.id\n ? { ...file, ...updates }\n : fileInList;\n });\n\n setUploadedFiles(updateListItem);\n uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n };\n\n const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);\n\n const removeFile = (file: UploadedFile) => {\n const { id, status } = file;\n const index = uploadedFiles.findIndex((f) => f.id === file.id);\n setFileToRemoveIndex(index);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n setFileToRemove(file);\n } else if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n })\n .finally(() => {\n setFileToRemove(file);\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n const id = generateFileId(file);\n const failedUpload = {\n id,\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n // One or more files selected, create entries for them\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n const formData = new FormData();\n\n if (file) {\n const { name } = file;\n const id = generateFileId(file);\n\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n // Check if file type is valid\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n // Check if the filesize is valid\n // Convert to rough bytes\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n // Check if the file is already in the list\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n // Remove the file from the list before adding it again\n removeFileFromList(existingFile);\n }\n\n // Add the file to the list\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n // Start uploading the file\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n // Replace the temporary id with the final one received from the API, and also set any errors\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n // Only upload a single file\n break;\n }\n }\n }\n };\n\n useLayoutEffect(() => {\n if (fileToRemove && fileToRemoveIndex !== null) {\n requestAnimationFrame(() => {\n const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);\n if (itemRefs.current[nextFocusIndex]) {\n itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem\n } else {\n // If there's only one item left, focus the UploadButton\n uploadInputRef.current?.focus();\n }\n });\n setFileToRemove(null); // Reset the state\n setFileToRemoveIndex(null); // Reset the index\n }\n }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n itemRefs.current[index] = el;\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? () => removeFile(file)\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n onClick={() => {\n if (markedFileForDelete) {\n removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","fileToRemoveIndex","setFileToRemoveIndex","mounted","setMounted","formatMessage","useIntl","itemRefs","useRef","uploadInputRef","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","fileToRemove","setFileToRemove","removeFile","status","index","findIndex","f","FAILED","error","undefined","then","catch","finally","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","append","pendingFile","url","useLayoutEffect","requestAnimationFrame","nextFocusIndex","Math","min","focus","useEffect","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","ref","el","singleFileUpload","canDelete","onDelete","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
|
|
@@ -19,8 +19,6 @@ exports.TEST_IDS = void 0;
|
|
|
19
19
|
(function (TEST_IDS) {
|
|
20
20
|
TEST_IDS["uploadItem"] = "uploadItem";
|
|
21
21
|
TEST_IDS["mediaBody"] = "mediaBody";
|
|
22
|
-
TEST_IDS["link"] = "link";
|
|
23
|
-
TEST_IDS["action"] = "action";
|
|
24
22
|
})(exports.TEST_IDS || (exports.TEST_IDS = {}));
|
|
25
23
|
const UploadItem = /*#__PURE__*/React.forwardRef(({
|
|
26
24
|
file,
|
|
@@ -41,7 +39,6 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
|
|
|
41
39
|
} = file;
|
|
42
40
|
const linkRef = React.useRef(null);
|
|
43
41
|
const buttonRef = React.useRef(null);
|
|
44
|
-
const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
|
|
45
42
|
React.useImperativeHandle(ref, () => ({
|
|
46
43
|
focus: () => {
|
|
47
44
|
if (url) {
|
|
@@ -51,6 +48,7 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
|
|
|
51
48
|
}
|
|
52
49
|
}
|
|
53
50
|
}));
|
|
51
|
+
const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
|
|
54
52
|
/**
|
|
55
53
|
* We're temporarily reverting to the regular icon components,
|
|
56
54
|
* until the StatusIcon receives 24px sizing. Some misalignment
|
|
@@ -143,19 +141,18 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
|
|
|
143
141
|
className: clsx.clsx('np-upload-input__item', {
|
|
144
142
|
'is-interactive': isSucceeded && url
|
|
145
143
|
}),
|
|
146
|
-
"data-testid":
|
|
144
|
+
"data-testid": exports.TEST_IDS.uploadItem,
|
|
147
145
|
children: [/*#__PURE__*/jsxRuntime.jsxs(UploadItemLink.UploadItemLink, {
|
|
148
146
|
ref: linkRef,
|
|
149
147
|
url: isSucceeded ? url : undefined,
|
|
150
148
|
singleFileUpload: singleFileUpload,
|
|
151
|
-
"data-testid": `${file.id}-${exports.TEST_IDS.link}`,
|
|
152
149
|
onDownload: onDownloadFile,
|
|
153
150
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
154
151
|
className: "np-upload-input__icon",
|
|
155
152
|
children: getIcon()
|
|
156
153
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
157
154
|
className: "np-upload-input__item-content",
|
|
158
|
-
"data-testid":
|
|
155
|
+
"data-testid": exports.TEST_IDS.mediaBody,
|
|
159
156
|
children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
160
157
|
type: typography.Typography.BODY_LARGE,
|
|
161
158
|
className: "np-upload-input__title text-word-break",
|
|
@@ -171,8 +168,6 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
|
|
|
171
168
|
}),
|
|
172
169
|
className: "np-upload-input__item-button",
|
|
173
170
|
type: "button",
|
|
174
|
-
tabIndex: 0,
|
|
175
|
-
"data-testid": `${file.id}-${exports.TEST_IDS.action}`,
|
|
176
171
|
onClick: () => onDelete(),
|
|
177
172
|
children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
|
|
178
173
|
size: 16
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n link = 'link',\n action = 'action',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={`${file.id}-${TEST_IDS.uploadItem}`}\n >\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n data-testid={`${file.id}-${TEST_IDS.link}`}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div\n className=\"np-upload-input__item-content\"\n data-testid={`${file.id}-${TEST_IDS.mediaBody}`}\n >\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n tabIndex={0}\n data-testid={`${file.id}-${TEST_IDS.action}`}\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","isSucceeded","Status","SUCCEEDED","undefined","includes","useImperativeHandle","focus","current","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","id","uploadItem","UploadItemLink","link","mediaBody","BODY_LARGE","removeFile","tabIndex","action","onClick","Bin","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","useImperativeHandle","focus","current","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","mediaBody","BODY_LARGE","removeFile","onClick","Bin","displayName"],"mappings":"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"}
|
|
@@ -15,8 +15,6 @@ var TEST_IDS;
|
|
|
15
15
|
(function (TEST_IDS) {
|
|
16
16
|
TEST_IDS["uploadItem"] = "uploadItem";
|
|
17
17
|
TEST_IDS["mediaBody"] = "mediaBody";
|
|
18
|
-
TEST_IDS["link"] = "link";
|
|
19
|
-
TEST_IDS["action"] = "action";
|
|
20
18
|
})(TEST_IDS || (TEST_IDS = {}));
|
|
21
19
|
const UploadItem = /*#__PURE__*/forwardRef(({
|
|
22
20
|
file,
|
|
@@ -37,7 +35,6 @@ const UploadItem = /*#__PURE__*/forwardRef(({
|
|
|
37
35
|
} = file;
|
|
38
36
|
const linkRef = useRef(null);
|
|
39
37
|
const buttonRef = useRef(null);
|
|
40
|
-
const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
|
|
41
38
|
useImperativeHandle(ref, () => ({
|
|
42
39
|
focus: () => {
|
|
43
40
|
if (url) {
|
|
@@ -47,6 +44,7 @@ const UploadItem = /*#__PURE__*/forwardRef(({
|
|
|
47
44
|
}
|
|
48
45
|
}
|
|
49
46
|
}));
|
|
47
|
+
const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
|
|
50
48
|
/**
|
|
51
49
|
* We're temporarily reverting to the regular icon components,
|
|
52
50
|
* until the StatusIcon receives 24px sizing. Some misalignment
|
|
@@ -139,19 +137,18 @@ const UploadItem = /*#__PURE__*/forwardRef(({
|
|
|
139
137
|
className: clsx('np-upload-input__item', {
|
|
140
138
|
'is-interactive': isSucceeded && url
|
|
141
139
|
}),
|
|
142
|
-
"data-testid":
|
|
140
|
+
"data-testid": TEST_IDS.uploadItem,
|
|
143
141
|
children: [/*#__PURE__*/jsxs(UploadItemLink, {
|
|
144
142
|
ref: linkRef,
|
|
145
143
|
url: isSucceeded ? url : undefined,
|
|
146
144
|
singleFileUpload: singleFileUpload,
|
|
147
|
-
"data-testid": `${file.id}-${TEST_IDS.link}`,
|
|
148
145
|
onDownload: onDownloadFile,
|
|
149
146
|
children: [/*#__PURE__*/jsx("span", {
|
|
150
147
|
className: "np-upload-input__icon",
|
|
151
148
|
children: getIcon()
|
|
152
149
|
}), /*#__PURE__*/jsxs("div", {
|
|
153
150
|
className: "np-upload-input__item-content",
|
|
154
|
-
"data-testid":
|
|
151
|
+
"data-testid": TEST_IDS.mediaBody,
|
|
155
152
|
children: [/*#__PURE__*/jsx(Body, {
|
|
156
153
|
type: Typography.BODY_LARGE,
|
|
157
154
|
className: "np-upload-input__title text-word-break",
|
|
@@ -167,8 +164,6 @@ const UploadItem = /*#__PURE__*/forwardRef(({
|
|
|
167
164
|
}),
|
|
168
165
|
className: "np-upload-input__item-button",
|
|
169
166
|
type: "button",
|
|
170
|
-
tabIndex: 0,
|
|
171
|
-
"data-testid": `${file.id}-${TEST_IDS.action}`,
|
|
172
167
|
onClick: () => onDelete(),
|
|
173
168
|
children: /*#__PURE__*/jsx(Bin, {
|
|
174
169
|
size: 16
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n link = 'link',\n action = 'action',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={`${file.id}-${TEST_IDS.uploadItem}`}\n >\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n data-testid={`${file.id}-${TEST_IDS.link}`}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div\n className=\"np-upload-input__item-content\"\n data-testid={`${file.id}-${TEST_IDS.mediaBody}`}\n >\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n tabIndex={0}\n data-testid={`${file.id}-${TEST_IDS.action}`}\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","isSucceeded","Status","SUCCEEDED","undefined","includes","useImperativeHandle","focus","current","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","id","uploadItem","UploadItemLink","link","mediaBody","BODY_LARGE","removeFile","tabIndex","action","onClick","Bin","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","useImperativeHandle","focus","current","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","mediaBody","BODY_LARGE","removeFile","onClick","Bin","displayName"],"mappings":"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"}
|
|
@@ -23,7 +23,6 @@ const UploadItemLink = /*#__PURE__*/React.forwardRef(({
|
|
|
23
23
|
target: "_blank",
|
|
24
24
|
rel: "noopener noreferrer",
|
|
25
25
|
className: clsx.clsx('np-upload-input__item-link', singleFileUpload ? 'np-upload-input__item-link--single-file' : ''),
|
|
26
|
-
tabIndex: 0,
|
|
27
26
|
onClick: onDownload,
|
|
28
27
|
children: children
|
|
29
28
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(\n ({ children, url, onDownload, singleFileUpload }, ref) => {\n if (!url) {\n return
|
|
1
|
+
{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(\n ({ children, url, onDownload, singleFileUpload }, ref) => {\n if (!url) {\n return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;\n }\n\n return (\n <a\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-input__item-link',\n singleFileUpload ? 'np-upload-input__item-link--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","className","clsx","href","target","rel","onClick"],"mappings":";;;;;;AASaA,MAAAA,cAAc,gBAAGC,gBAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,GAAG,EAAEA,GAAuC;AAACE,MAAAA,SAAS,EAAEC,SAAI,CAAC,iCAAiC,CAAE;AAAAP,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC/H,GAAA;AAEA,EAAA,oBACEK,cAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAA0C;AAC/CI,IAAAA,IAAI,EAAEP,GAAI;AACVQ,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBJ,SAAS,EAAEC,SAAI,CACb,4BAA4B,EAC5BJ,gBAAgB,GAAG,yCAAyC,GAAG,EAAE,CACjE;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}
|
|
@@ -21,7 +21,6 @@ const UploadItemLink = /*#__PURE__*/forwardRef(({
|
|
|
21
21
|
target: "_blank",
|
|
22
22
|
rel: "noopener noreferrer",
|
|
23
23
|
className: clsx('np-upload-input__item-link', singleFileUpload ? 'np-upload-input__item-link--single-file' : ''),
|
|
24
|
-
tabIndex: 0,
|
|
25
24
|
onClick: onDownload,
|
|
26
25
|
children: children
|
|
27
26
|
});
|