ece-docs-components 1.0.33 → 1.0.34
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.
|
@@ -5,6 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var Button = require('./Button.js');
|
|
6
6
|
var styles = require('@mui/material/styles');
|
|
7
7
|
var iconsMaterial = require('@mui/icons-material');
|
|
8
|
+
var reactToastify = require('react-toastify');
|
|
8
9
|
|
|
9
10
|
const HiddenInput = styles.styled('input')({
|
|
10
11
|
display: 'none',
|
|
@@ -12,8 +13,34 @@ const HiddenInput = styles.styled('input')({
|
|
|
12
13
|
const FileUploadButton = ({ id, label = 'Upload File', accept, multiple = false, onFileSelect, variant = 'primary', size = 'md', }) => {
|
|
13
14
|
const handleFileChange = (event) => {
|
|
14
15
|
const files = event.target.files;
|
|
15
|
-
if (
|
|
16
|
-
onFileSelect(files);
|
|
16
|
+
if (!files || files.length === 0) {
|
|
17
|
+
onFileSelect?.(files);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
// If multiple, filter; if single, validate the first
|
|
21
|
+
if (multiple) {
|
|
22
|
+
const valid = [];
|
|
23
|
+
for (const f of Array.from(files)) {
|
|
24
|
+
if (f.size > (25 * 1024 * 1024))
|
|
25
|
+
continue;
|
|
26
|
+
valid.push(f);
|
|
27
|
+
}
|
|
28
|
+
const dt = new DataTransfer();
|
|
29
|
+
valid.forEach((f) => dt.items.add(f));
|
|
30
|
+
onFileSelect?.(dt.files);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
const f = files[0];
|
|
34
|
+
if (f.size > (25 * 1024 * 1024)) {
|
|
35
|
+
// Notify user and abort selection
|
|
36
|
+
// Example: toast.error('File exceeds 5MB');
|
|
37
|
+
reactToastify.toast.error('File exceeds 25MB');
|
|
38
|
+
onFileSelect?.(null);
|
|
39
|
+
// Clear the input so user can reselect
|
|
40
|
+
event.target.value = '';
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
onFileSelect?.(files);
|
|
17
44
|
}
|
|
18
45
|
};
|
|
19
46
|
const autoId = React.useId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUploadButton.js","sources":["../../../../src/components/FileUploadButton.tsx"],"sourcesContent":["import React, { useId } from 'react';\r\nimport { Button } from './Button'; // Import your existing styled button component\r\nimport { styled } from '@mui/material/styles';\r\nimport { FileUploadRounded } from '@mui/icons-material';\r\n\r\ninterface FileUploadButtonProps {\r\n id?: string;\r\n label?: string;\r\n accept?: string;\r\n multiple?: boolean;\r\n onFileSelect?: (files: FileList | null) => void;\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst HiddenInput = styled('input')({\r\n display: 'none',\r\n});\r\n\r\nexport const FileUploadButton: React.FC<FileUploadButtonProps> = ({\r\n id,\r\n label = 'Upload File',\r\n accept,\r\n multiple = false,\r\n onFileSelect,\r\n variant = 'primary',\r\n size = 'md',\r\n}) => {\r\
|
|
1
|
+
{"version":3,"file":"FileUploadButton.js","sources":["../../../../src/components/FileUploadButton.tsx"],"sourcesContent":["import React, { useId } from 'react';\r\nimport { Button } from './Button'; // Import your existing styled button component\r\nimport { styled } from '@mui/material/styles';\r\nimport { FileUploadRounded } from '@mui/icons-material';\r\nimport { toast } from 'react-toastify';\r\n\r\ninterface FileUploadButtonProps {\r\n id?: string;\r\n label?: string;\r\n accept?: string;\r\n multiple?: boolean;\r\n onFileSelect?: (files: FileList | null) => void;\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst HiddenInput = styled('input')({\r\n display: 'none',\r\n});\r\n\r\nexport const FileUploadButton: React.FC<FileUploadButtonProps> = ({\r\n id,\r\n label = 'Upload File',\r\n accept,\r\n multiple = false,\r\n onFileSelect,\r\n variant = 'primary',\r\n size = 'md',\r\n}) => {\r\nconst handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const files = event.target.files;\r\n\r\n if (!files || files.length === 0) {\r\n onFileSelect?.(files);\r\n return;\r\n }\r\n\r\n // If multiple, filter; if single, validate the first\r\n if (multiple) {\r\n const valid: File[] = [];\r\n for (const f of Array.from(files)) {\r\n if ((25 * 1024 * 1024) && f.size > (25 * 1024 * 1024)) continue;\r\n valid.push(f);\r\n }\r\n const dt = new DataTransfer();\r\n valid.forEach((f) => dt.items.add(f));\r\n onFileSelect?.(dt.files);\r\n } else {\r\n const f = files[0];\r\n if ((25 * 1024 * 1024) && f.size > (25 * 1024 * 1024)) {\r\n // Notify user and abort selection\r\n // Example: toast.error('File exceeds 5MB');\r\n toast.error('File exceeds 25MB')\r\n onFileSelect?.(null);\r\n // Clear the input so user can reselect\r\n event.target.value = '';\r\n return;\r\n }\r\n onFileSelect?.(files);\r\n }\r\n };\r\n const autoId = useId(); \r\n const inputId = id || `file-upload-${autoId}`;\r\n return (\r\n <label htmlFor={inputId}>\r\n <HiddenInput\r\n id={inputId}\r\n type=\"file\"\r\n accept={accept}\r\n multiple={multiple}\r\n onChange={handleFileChange}\r\n />\r\n <Button\r\n component=\"span\"\r\n variant={variant}\r\n size={size}\r\n >\r\n <FileUploadRounded/>{label}\r\n </Button>\r\n </label>\r\n );\r\n};\r\n"],"names":["styled","toast","useId","_jsxs","_jsx","Button","FileUploadRounded"],"mappings":";;;;;;;;;AAgBA,MAAM,WAAW,GAAGA,aAAM,CAAC,OAAO,CAAC,CAAC;AAClC,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC;AAEK,MAAM,gBAAgB,GAAoC,CAAC,EAChE,EAAE,EACF,KAAK,GAAG,aAAa,EACrB,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,GACZ,KAAI;AACL,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAA0C,KAAI;AACpE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAEhC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,YAAY,GAAG,KAAK,CAAC;YACrB;QACF;;QAGA,IAAI,QAAQ,EAAE;YACZ,MAAM,KAAK,GAAW,EAAE;YACxB,KAAK,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACjC,gBAAA,IAA0B,CAAC,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;oBAAE;AACvD,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;YACf;AACA,YAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;AAC7B,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACrC,YAAA,YAAY,GAAG,EAAE,CAAC,KAAK,CAAC;QAC1B;aAAO;AACL,YAAA,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YAClB,IAA0B,CAAC,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,EAAE;;;AAGrD,gBAAAC,mBAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC;AAChC,gBAAA,YAAY,GAAG,IAAI,CAAC;;AAEpB,gBAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;gBACvB;YACF;AACA,YAAA,YAAY,GAAG,KAAK,CAAC;QACvB;AACF,IAAA,CAAC;AACD,IAAA,MAAM,MAAM,GAAGC,WAAK,EAAE;AACtB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,YAAA,EAAe,MAAM,EAAE;IAC7C,QACEC,eAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,aACrBC,cAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,EAAA,CAC1B,EACFD,eAAA,CAACE,aAAM,EAAA,EACL,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAAA,QAAA,EAAA,CAEVD,cAAA,CAACE,+BAAiB,EAAA,EAAA,CAAE,EAAC,KAAK,CAAA,EAAA,CACnB,CAAA,EAAA,CACH;AAEZ;;;;"}
|
|
@@ -3,6 +3,7 @@ import { useId } from 'react';
|
|
|
3
3
|
import { Button } from './Button.js';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { FileUploadRounded } from '@mui/icons-material';
|
|
6
|
+
import { toast } from 'react-toastify';
|
|
6
7
|
|
|
7
8
|
const HiddenInput = styled('input')({
|
|
8
9
|
display: 'none',
|
|
@@ -10,8 +11,34 @@ const HiddenInput = styled('input')({
|
|
|
10
11
|
const FileUploadButton = ({ id, label = 'Upload File', accept, multiple = false, onFileSelect, variant = 'primary', size = 'md', }) => {
|
|
11
12
|
const handleFileChange = (event) => {
|
|
12
13
|
const files = event.target.files;
|
|
13
|
-
if (
|
|
14
|
-
onFileSelect(files);
|
|
14
|
+
if (!files || files.length === 0) {
|
|
15
|
+
onFileSelect?.(files);
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
// If multiple, filter; if single, validate the first
|
|
19
|
+
if (multiple) {
|
|
20
|
+
const valid = [];
|
|
21
|
+
for (const f of Array.from(files)) {
|
|
22
|
+
if (f.size > (25 * 1024 * 1024))
|
|
23
|
+
continue;
|
|
24
|
+
valid.push(f);
|
|
25
|
+
}
|
|
26
|
+
const dt = new DataTransfer();
|
|
27
|
+
valid.forEach((f) => dt.items.add(f));
|
|
28
|
+
onFileSelect?.(dt.files);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
const f = files[0];
|
|
32
|
+
if (f.size > (25 * 1024 * 1024)) {
|
|
33
|
+
// Notify user and abort selection
|
|
34
|
+
// Example: toast.error('File exceeds 5MB');
|
|
35
|
+
toast.error('File exceeds 25MB');
|
|
36
|
+
onFileSelect?.(null);
|
|
37
|
+
// Clear the input so user can reselect
|
|
38
|
+
event.target.value = '';
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
onFileSelect?.(files);
|
|
15
42
|
}
|
|
16
43
|
};
|
|
17
44
|
const autoId = useId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUploadButton.js","sources":["../../../../src/components/FileUploadButton.tsx"],"sourcesContent":["import React, { useId } from 'react';\r\nimport { Button } from './Button'; // Import your existing styled button component\r\nimport { styled } from '@mui/material/styles';\r\nimport { FileUploadRounded } from '@mui/icons-material';\r\n\r\ninterface FileUploadButtonProps {\r\n id?: string;\r\n label?: string;\r\n accept?: string;\r\n multiple?: boolean;\r\n onFileSelect?: (files: FileList | null) => void;\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst HiddenInput = styled('input')({\r\n display: 'none',\r\n});\r\n\r\nexport const FileUploadButton: React.FC<FileUploadButtonProps> = ({\r\n id,\r\n label = 'Upload File',\r\n accept,\r\n multiple = false,\r\n onFileSelect,\r\n variant = 'primary',\r\n size = 'md',\r\n}) => {\r\
|
|
1
|
+
{"version":3,"file":"FileUploadButton.js","sources":["../../../../src/components/FileUploadButton.tsx"],"sourcesContent":["import React, { useId } from 'react';\r\nimport { Button } from './Button'; // Import your existing styled button component\r\nimport { styled } from '@mui/material/styles';\r\nimport { FileUploadRounded } from '@mui/icons-material';\r\nimport { toast } from 'react-toastify';\r\n\r\ninterface FileUploadButtonProps {\r\n id?: string;\r\n label?: string;\r\n accept?: string;\r\n multiple?: boolean;\r\n onFileSelect?: (files: FileList | null) => void;\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst HiddenInput = styled('input')({\r\n display: 'none',\r\n});\r\n\r\nexport const FileUploadButton: React.FC<FileUploadButtonProps> = ({\r\n id,\r\n label = 'Upload File',\r\n accept,\r\n multiple = false,\r\n onFileSelect,\r\n variant = 'primary',\r\n size = 'md',\r\n}) => {\r\nconst handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const files = event.target.files;\r\n\r\n if (!files || files.length === 0) {\r\n onFileSelect?.(files);\r\n return;\r\n }\r\n\r\n // If multiple, filter; if single, validate the first\r\n if (multiple) {\r\n const valid: File[] = [];\r\n for (const f of Array.from(files)) {\r\n if ((25 * 1024 * 1024) && f.size > (25 * 1024 * 1024)) continue;\r\n valid.push(f);\r\n }\r\n const dt = new DataTransfer();\r\n valid.forEach((f) => dt.items.add(f));\r\n onFileSelect?.(dt.files);\r\n } else {\r\n const f = files[0];\r\n if ((25 * 1024 * 1024) && f.size > (25 * 1024 * 1024)) {\r\n // Notify user and abort selection\r\n // Example: toast.error('File exceeds 5MB');\r\n toast.error('File exceeds 25MB')\r\n onFileSelect?.(null);\r\n // Clear the input so user can reselect\r\n event.target.value = '';\r\n return;\r\n }\r\n onFileSelect?.(files);\r\n }\r\n };\r\n const autoId = useId(); \r\n const inputId = id || `file-upload-${autoId}`;\r\n return (\r\n <label htmlFor={inputId}>\r\n <HiddenInput\r\n id={inputId}\r\n type=\"file\"\r\n accept={accept}\r\n multiple={multiple}\r\n onChange={handleFileChange}\r\n />\r\n <Button\r\n component=\"span\"\r\n variant={variant}\r\n size={size}\r\n >\r\n <FileUploadRounded/>{label}\r\n </Button>\r\n </label>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAgBA,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AAClC,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC;AAEK,MAAM,gBAAgB,GAAoC,CAAC,EAChE,EAAE,EACF,KAAK,GAAG,aAAa,EACrB,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,GACZ,KAAI;AACL,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAA0C,KAAI;AACpE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAEhC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,YAAY,GAAG,KAAK,CAAC;YACrB;QACF;;QAGA,IAAI,QAAQ,EAAE;YACZ,MAAM,KAAK,GAAW,EAAE;YACxB,KAAK,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACjC,gBAAA,IAA0B,CAAC,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;oBAAE;AACvD,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;YACf;AACA,YAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;AAC7B,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACrC,YAAA,YAAY,GAAG,EAAE,CAAC,KAAK,CAAC;QAC1B;aAAO;AACL,YAAA,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YAClB,IAA0B,CAAC,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,EAAE;;;AAGrD,gBAAA,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC;AAChC,gBAAA,YAAY,GAAG,IAAI,CAAC;;AAEpB,gBAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;gBACvB;YACF;AACA,YAAA,YAAY,GAAG,KAAK,CAAC;QACvB;AACF,IAAA,CAAC;AACD,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,YAAA,EAAe,MAAM,EAAE;IAC7C,QACEA,IAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,aACrBC,GAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,EAAA,CAC1B,EACFD,IAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAAA,QAAA,EAAA,CAEVC,GAAA,CAAC,iBAAiB,EAAA,EAAA,CAAE,EAAC,KAAK,CAAA,EAAA,CACnB,CAAA,EAAA,CACH;AAEZ;;;;"}
|