@codezee/sixtify-brahma 0.2.135 → 0.2.136
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/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6RpB"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.error_with_transaltion = void 0;
|
|
4
7
|
exports.FileUpload = FileUpload;
|
|
5
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
9
|
const material_1 = require("@mui/material");
|
|
7
|
-
const
|
|
10
|
+
const isFunction_1 = __importDefault(require("lodash/isFunction"));
|
|
11
|
+
const isNull_1 = __importDefault(require("lodash/isNull"));
|
|
8
12
|
const react_1 = require("react");
|
|
9
13
|
const react_i18next_1 = require("react-i18next");
|
|
10
14
|
const PadBox_1 = require("../../PadBox");
|
|
@@ -15,53 +19,162 @@ const Skeleton_1 = require("./Skeleton");
|
|
|
15
19
|
exports.error_with_transaltion = "error_with_transaltion";
|
|
16
20
|
function FileUpload({ loading = false, onChange, isDisabled, multiple = false, required = false, error, helperText, label, fileNames, size = 10, name, setError, accept = utils_1.SUPPORTED_FILE_TYPES, acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
|
|
17
21
|
const theme = (0, material_1.useTheme)();
|
|
18
|
-
const { red, iron } = theme.palette.app.color;
|
|
22
|
+
const { red, iron, black } = theme.palette.app.color;
|
|
19
23
|
const { t } = (0, react_i18next_1.useTranslation)();
|
|
20
24
|
const inputRef = (0, react_1.useRef)(null);
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
isShowError = true;
|
|
38
|
-
inValidFiles.push(t("fileUpload.fileType.error.message", {
|
|
39
|
-
fileName: element.name,
|
|
40
|
-
}));
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
uploadFiles.push(element);
|
|
44
|
-
}
|
|
25
|
+
const dragCounter = (0, react_1.useRef)(0);
|
|
26
|
+
const rafRef = (0, react_1.useRef)(null);
|
|
27
|
+
const animStartRef = (0, react_1.useRef)(null);
|
|
28
|
+
const animFromRef = (0, react_1.useRef)(0);
|
|
29
|
+
const animToRef = (0, react_1.useRef)(0);
|
|
30
|
+
const [dragProgress, setDragProgress] = (0, react_1.useState)(0);
|
|
31
|
+
const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3);
|
|
32
|
+
const processFiles = (files) => {
|
|
33
|
+
const result = files.reduce((acc, currentFile) => {
|
|
34
|
+
const { name } = currentFile;
|
|
35
|
+
if (!(0, utils_1.isFileSizeValid)(currentFile, size)) {
|
|
36
|
+
acc.errors.push(t("fileUpload.fileSize.error.message", {
|
|
37
|
+
fileName: name,
|
|
38
|
+
fileSize: size,
|
|
39
|
+
}));
|
|
40
|
+
return acc;
|
|
45
41
|
}
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
return;
|
|
42
|
+
if (accept.length && !(0, utils_1.isFileTypeValid)(currentFile, accept)) {
|
|
43
|
+
acc.errors.push(t("fileUpload.fileType.error.message", {
|
|
44
|
+
fileName: name,
|
|
45
|
+
}));
|
|
46
|
+
return acc;
|
|
54
47
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
acc.validFiles.push(currentFile);
|
|
49
|
+
return acc;
|
|
50
|
+
}, { validFiles: [], errors: [] });
|
|
51
|
+
const { errors, validFiles } = result;
|
|
52
|
+
if (errors.length && (0, isFunction_1.default)(setError)) {
|
|
53
|
+
setError(name, {
|
|
54
|
+
type: exports.error_with_transaltion,
|
|
55
|
+
message: errors.join("\n"),
|
|
56
|
+
});
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (!validFiles.length) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
onChange(validFiles);
|
|
63
|
+
if (inputRef.current) {
|
|
64
|
+
inputRef.current.value = "";
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const handleFileChange = (event) => {
|
|
68
|
+
const files = event.target.files;
|
|
69
|
+
if (files) {
|
|
70
|
+
processFiles(Array.from(files));
|
|
71
|
+
event.target.value = "";
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const animate = (timestamp) => {
|
|
75
|
+
if ((0, isNull_1.default)(animStartRef.current)) {
|
|
76
|
+
animStartRef.current = timestamp;
|
|
77
|
+
}
|
|
78
|
+
const duration = 220;
|
|
79
|
+
const elapsed = Math.min(timestamp - animStartRef.current, duration);
|
|
80
|
+
const tNorm = !duration ? 1 : elapsed / duration;
|
|
81
|
+
const eased = easeOutCubic(tNorm);
|
|
82
|
+
const value = animFromRef.current + (animToRef.current - animFromRef.current) * eased;
|
|
83
|
+
setDragProgress(Number(value.toFixed(3)));
|
|
84
|
+
if (elapsed < duration) {
|
|
85
|
+
rafRef.current = requestAnimationFrame(animate);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
setDragProgress(animToRef.current);
|
|
89
|
+
animStartRef.current = null;
|
|
90
|
+
rafRef.current = null;
|
|
91
|
+
};
|
|
92
|
+
const animateTo = (target) => {
|
|
93
|
+
const clamped = Math.max(0, Math.min(1, target));
|
|
94
|
+
if (rafRef.current) {
|
|
95
|
+
cancelAnimationFrame(rafRef.current);
|
|
96
|
+
rafRef.current = null;
|
|
97
|
+
}
|
|
98
|
+
animFromRef.current = dragProgress;
|
|
99
|
+
animToRef.current = clamped;
|
|
100
|
+
animStartRef.current = null;
|
|
101
|
+
rafRef.current = requestAnimationFrame(animate);
|
|
102
|
+
};
|
|
103
|
+
(0, react_1.useEffect)(() => {
|
|
104
|
+
// useEffect ensures RAF cleanup happens when the component unmounts
|
|
105
|
+
return () => {
|
|
106
|
+
if (rafRef.current) {
|
|
107
|
+
cancelAnimationFrame(rafRef.current);
|
|
108
|
+
rafRef.current = null;
|
|
58
109
|
}
|
|
110
|
+
};
|
|
111
|
+
}, []);
|
|
112
|
+
const handleDragEnter = (e) => {
|
|
113
|
+
e.preventDefault();
|
|
114
|
+
e.stopPropagation();
|
|
115
|
+
if (isDisabled) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
dragCounter.current += 1;
|
|
119
|
+
if (dragCounter.current) {
|
|
120
|
+
animateTo(1);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
const handleDragOver = (e) => {
|
|
124
|
+
e.preventDefault();
|
|
125
|
+
e.stopPropagation();
|
|
126
|
+
if (isDisabled) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (e.dataTransfer) {
|
|
130
|
+
e.dataTransfer.dropEffect = "copy";
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
const handleDragLeave = (e) => {
|
|
134
|
+
e.preventDefault();
|
|
135
|
+
e.stopPropagation();
|
|
136
|
+
if (isDisabled) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
dragCounter.current -= 1;
|
|
140
|
+
if (dragCounter.current <= 0) {
|
|
141
|
+
dragCounter.current = 0;
|
|
142
|
+
animateTo(0);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
const handleDrop = (e) => {
|
|
146
|
+
e.preventDefault();
|
|
147
|
+
e.stopPropagation();
|
|
148
|
+
if (isDisabled) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
dragCounter.current = 0;
|
|
152
|
+
animateTo(0);
|
|
153
|
+
const dt = e.dataTransfer;
|
|
154
|
+
if (!dt) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
const { files } = dt;
|
|
158
|
+
if (!files?.length) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
const fileArray = Array.from(files);
|
|
162
|
+
processFiles(fileArray);
|
|
163
|
+
if (inputRef.current) {
|
|
164
|
+
inputRef.current.value = "";
|
|
59
165
|
}
|
|
60
166
|
};
|
|
61
167
|
if (loading) {
|
|
62
168
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
|
|
63
169
|
}
|
|
64
|
-
|
|
170
|
+
const boxShadowIntensity = 0.08 + 0.12 * dragProgress;
|
|
171
|
+
const scale = 1 + 0.02 * dragProgress;
|
|
172
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, sx: {
|
|
173
|
+
transform: `scale(${scale})`,
|
|
174
|
+
transition: "transform 30ms linear",
|
|
175
|
+
boxShadow: `0 0px ${12 * dragProgress}px ${(0, material_1.alpha)(black[900], boxShadowIntensity)}`,
|
|
176
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
177
|
+
}, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: inputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
|
|
65
178
|
color: `${red[900]}`,
|
|
66
179
|
whiteSpace: "pre",
|
|
67
180
|
textWrap: "wrap",
|