@balena/ui-shared-components 6.1.0 → 6.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -44,7 +44,11 @@ const getFileTypeIcon = (fileType) => {
|
|
|
44
44
|
};
|
|
45
45
|
const fileSizeToReadable = (size) => {
|
|
46
46
|
const i = Math.floor(Math.log(size) / Math.log(1024));
|
|
47
|
-
|
|
47
|
+
const readableFileSize = size / Math.pow(1024, i);
|
|
48
|
+
if (Number.isNaN(readableFileSize)) {
|
|
49
|
+
return '';
|
|
50
|
+
}
|
|
51
|
+
return `${readableFileSize.toFixed(2)}${['B', 'kB', 'MB', 'GB', 'TB'][i]}`;
|
|
48
52
|
};
|
|
49
53
|
// Improve error messages from react-dropzone
|
|
50
54
|
const getErrorMessage = (code, message, maxSize) => {
|
|
@@ -166,14 +170,11 @@ export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
|
|
|
166
170
|
// Remove the dot from the file type and capitalize it
|
|
167
171
|
.map((fileType) => fileType.slice(1).toUpperCase())).join(', ')}` })), maxSize != null && (_jsxs(Typography, Object.assign({ color: designTokens.color.text.subtle.value, align: "right" }, { children: ["Maximum size: ", fileSizeToReadable(maxSize)] })))] })), hideUploadedFiles && !!errorFiles.length && (_jsx(Stack, Object.assign({ color: "error.main", gap: 1 }, { children: errorFiles
|
|
168
172
|
.flatMap((errorFile) => errorFile.errors)
|
|
169
|
-
.map((error) => getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)) }))), !hideUploadedFiles && (_jsxs(Stack, Object.assign({ gap: 1 }, { children: [files.map((file, index) => {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
// So that the Button padding does not affect the Stack padding
|
|
177
|
-
sx: { p: '0' } }, { children: _jsx(FontAwesomeIcon, { icon: faTrash }) }))] }))] })));
|
|
178
|
-
}), errorFiles.map(({ file, errors }) => (_jsxs(Stack, Object.assign({ gap: 1, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px", border: "1px solid", borderColor: designTokens.color.border.danger.value }, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2 }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center", width: "100%" }, { children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, { children: file.name })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: file.type })), _jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: fileSizeToReadable(file.size) }))] }))] })), _jsx(Stack, Object.assign({ gap: 1 }, { children: errors.map((error) => (_jsxs(Stack, Object.assign({ gap: 2, color: designTokens.color.text.danger.value, direction: "row", alignItems: "center" }, { children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation }), getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)] })))) }))] }))))] })))] }))] })) })));
|
|
173
|
+
.map((error) => getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)) }))), !hideUploadedFiles && (_jsxs(Stack, Object.assign({ gap: 1 }, { children: [files.map((file, index) => (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px" }, (mobile && { flexWrap: 'wrap' }), { children: [_jsxs(Stack, Object.assign({ direction: "row" }, (mobile && { justifyContent: 'space-between' }), { gap: 2, alignItems: "center", width: "100%" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center", maxWidth: "45%" }, { children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, Object.assign({}, (mobile
|
|
174
|
+
? { maxWidth: '100%' }
|
|
175
|
+
: { width: '150px' }), { noWrap: true }, { children: file.name }))] })), file.loadingPercentage != null && (_jsx(LinearProgress, { variant: "determinate", value: file.loadingPercentage, sx: Object.assign(Object.assign({ width: mobile ? '100%' : '150px' }, (mobile && { maxWidth: '45%' })), { height: '8px' }) }))] })), _jsxs(Stack, Object.assign({ direction: "row" }, (mobile
|
|
176
|
+
? { justifyContent: 'space-between', width: '100%' }
|
|
177
|
+
: { gap: 2 }), { alignItems: "center" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2 }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: file.type })), _jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: fileSizeToReadable(file.size) }))] })), _jsx(IconButtonWithTracking, Object.assign({ eventName: "FileWidget: Delete uploaded file", "aria-label": "Delete uploaded file", onClick: () => removeFile(index),
|
|
178
|
+
// So that the Button padding does not affect the Stack padding
|
|
179
|
+
sx: { p: '0' } }, { children: _jsx(FontAwesomeIcon, { icon: faTrash }) }))] }))] })))), errorFiles.map(({ file, errors }) => (_jsxs(Stack, Object.assign({ gap: 1, bgcolor: designTokens.color.bg.value, p: 3, borderRadius: "8px", border: "1px solid", borderColor: designTokens.color.border.danger.value }, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2 }, { children: [_jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center", width: "100%" }, { children: [_jsx(FontAwesomeIcon, { icon: getFileTypeIcon(file.type) }), _jsx(Typography, { children: file.name })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: 2, alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: file.type })), _jsx(Typography, Object.assign({ color: designTokens.color.text.subtle.value }, { children: fileSizeToReadable(file.size) }))] }))] })), _jsx(Stack, Object.assign({ gap: 1 }, { children: errors.map((error) => (_jsxs(Stack, Object.assign({ gap: 2, color: designTokens.color.text.danger.value, direction: "row", alignItems: "center" }, { children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation }), getErrorMessage(error.code, error.message, maxSize !== null && maxSize !== void 0 ? maxSize : Infinity)] })))) }))] }))))] })))] }))] })) })));
|
|
179
180
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@balena/ui-shared-components",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"files": [
|
|
@@ -112,6 +112,6 @@
|
|
|
112
112
|
},
|
|
113
113
|
"homepage": "https://github.com/balena-io/ui-shared-components#readme",
|
|
114
114
|
"versionist": {
|
|
115
|
-
"publishedAt": "2024-06-20T15:
|
|
115
|
+
"publishedAt": "2024-06-20T15:58:39.130Z"
|
|
116
116
|
}
|
|
117
117
|
}
|