@etsoo/materialui 1.2.90 → 1.2.91

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.
Files changed (4) hide show
  1. package/lib/FileUploadButton.d.ts +14 -0
  2. package/lib/FileUploadButton.js +20 -2
  3. package/package.json +7 -7
  4. package/src/FileUploadButton.tsx +47 -2
package/lib/FileUploadButton.d.ts CHANGED
@@ -4,10 +4,24 @@ import React from "react";
4
4
  * File upload button props
5
5
  */
6
6
  export type FileUploadButtonProps = ButtonProps<"label"> & {
7
+ /**
8
+ * Max files allowed
9
+ */
10
+ maxFiles?: number;
11
+ /**
12
+ * Max file size
13
+ */
14
+ maxFileSize?: number;
7
15
  /**
8
16
  * Input field attributes
9
17
  */
10
18
  inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
19
+ /**
20
+ * File invalid handler
21
+ * @param values [expected, actual]
22
+ * @param file File
23
+ */
24
+ onFileInvalid?: (values: [number, number], file?: File) => void;
11
25
  /**
12
26
  * Upload files callback
13
27
  * @param files Files
package/lib/FileUploadButton.js CHANGED
@@ -7,7 +7,7 @@ import React from "react";
7
7
  */
8
8
  export function FileUploadButton(props) {
9
9
  // Destruct
10
- const { inputProps, onUploadFiles, children, ...rest } = props;
10
+ const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
11
11
  const { onChange } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
12
12
  // Layout
13
13
  return (React.createElement(Button, { component: "label", ...rest },
@@ -19,8 +19,26 @@ export function FileUploadButton(props) {
19
19
  return;
20
20
  if (onUploadFiles) {
21
21
  const files = event.target.files;
22
- if (files == null || files.length == 0)
22
+ if (files == null)
23
23
  return;
24
+ const fl = files.length;
25
+ if (fl === 0)
26
+ return;
27
+ if (maxFiles && maxFiles > 0 && fl > maxFiles) {
28
+ if (onFileInvalid)
29
+ onFileInvalid([maxFiles, fl]);
30
+ return;
31
+ }
32
+ if (maxFileSize && maxFileSize > 0) {
33
+ for (let f = 0; f < fl; f++) {
34
+ const file = files[f];
35
+ if (file.size > maxFileSize) {
36
+ if (onFileInvalid)
37
+ onFileInvalid([maxFileSize, file.size], file);
38
+ return;
39
+ }
40
+ }
41
+ }
24
42
  onUploadFiles(files);
25
43
  }
26
44
  }, ...inputProps })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.90",
3
+ "version": "1.2.91",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
53
53
  "@etsoo/appscript": "^1.4.32",
54
54
  "@etsoo/notificationbase": "^1.1.26",
55
55
  "@etsoo/react": "^1.7.3",
56
- "@etsoo/shared": "^1.2.8",
57
- "@mui/icons-material": "^5.14.6",
58
- "@mui/material": "^5.14.6",
59
- "@mui/x-data-grid": "^6.11.2",
56
+ "@etsoo/shared": "^1.2.9",
57
+ "@mui/icons-material": "^5.14.7",
58
+ "@mui/material": "^5.14.7",
59
+ "@mui/x-data-grid": "^6.12.0",
60
60
  "@types/pica": "^9.0.1",
61
61
  "@types/pulltorefreshjs": "^0.1.5",
62
62
  "@types/react": "^18.2.21",
@@ -85,8 +85,8 @@
85
85
  "@testing-library/jest-dom": "^6.1.2",
86
86
  "@testing-library/react": "^14.0.0",
87
87
  "@types/jest": "^29.5.4",
88
- "@typescript-eslint/eslint-plugin": "^6.4.1",
89
- "@typescript-eslint/parser": "^6.4.1",
88
+ "@typescript-eslint/eslint-plugin": "^6.5.0",
89
+ "@typescript-eslint/parser": "^6.5.0",
90
90
  "jest": "^29.6.4",
91
91
  "jest-environment-jsdom": "^29.6.4",
92
92
  "typescript": "^5.2.2"
package/src/FileUploadButton.tsx CHANGED
@@ -5,6 +5,16 @@ import React from "react";
5
5
  * File upload button props
6
6
  */
7
7
  export type FileUploadButtonProps = ButtonProps<"label"> & {
8
+ /**
9
+ * Max files allowed
10
+ */
11
+ maxFiles?: number;
12
+
13
+ /**
14
+ * Max file size
15
+ */
16
+ maxFileSize?: number;
17
+
8
18
  /**
9
19
  * Input field attributes
10
20
  */
@@ -13,6 +23,13 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
13
23
  "type" | "hidden"
14
24
  >;
15
25
 
26
+ /**
27
+ * File invalid handler
28
+ * @param values [expected, actual]
29
+ * @param file File
30
+ */
31
+ onFileInvalid?: (values: [number, number], file?: File) => void;
32
+
16
33
  /**
17
34
  * Upload files callback
18
35
  * @param files Files
@@ -27,7 +44,15 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
27
44
  */
28
45
  export function FileUploadButton(props: FileUploadButtonProps) {
29
46
  // Destruct
30
- const { inputProps, onUploadFiles, children, ...rest } = props;
47
+ const {
48
+ maxFiles,
49
+ maxFileSize,
50
+ inputProps,
51
+ onFileInvalid,
52
+ onUploadFiles,
53
+ children,
54
+ ...rest
55
+ } = props;
31
56
 
32
57
  const { onChange } = inputProps ?? {};
33
58
 
@@ -44,7 +69,27 @@ export function FileUploadButton(props: FileUploadButtonProps) {
44
69
 
45
70
  if (onUploadFiles) {
46
71
  const files = event.target.files;
47
- if (files == null || files.length == 0) return;
72
+ if (files == null) return;
73
+
74
+ const fl = files.length;
75
+ if (fl === 0) return;
76
+
77
+ if (maxFiles && maxFiles > 0 && fl > maxFiles) {
78
+ if (onFileInvalid) onFileInvalid([maxFiles, fl]);
79
+ return;
80
+ }
81
+
82
+ if (maxFileSize && maxFileSize > 0) {
83
+ for (let f = 0; f < fl; f++) {
84
+ const file = files[f];
85
+ if (file.size > maxFileSize) {
86
+ if (onFileInvalid)
87
+ onFileInvalid([maxFileSize, file.size], file);
88
+ return;
89
+ }
90
+ }
91
+ }
92
+
48
93
  onUploadFiles(files);
49
94
  }
50
95
  }}