authscape 1.0.126 → 1.0.127
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/index.js +14 -3
- package/package.json +1 -1
- package/src/components/FileUploader.js +151 -134
package/index.js
CHANGED
|
@@ -249,7 +249,11 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
249
249
|
_ref$primaryColor = _ref.primaryColor,
|
|
250
250
|
primaryColor = _ref$primaryColor === void 0 ? "#000" : _ref$primaryColor,
|
|
251
251
|
_ref$onConfirmDelete = _ref.onConfirmDelete,
|
|
252
|
-
onConfirmDelete = _ref$onConfirmDelete === void 0 ? null : _ref$onConfirmDelete
|
|
252
|
+
onConfirmDelete = _ref$onConfirmDelete === void 0 ? null : _ref$onConfirmDelete,
|
|
253
|
+
_ref$variant = _ref.variant,
|
|
254
|
+
variant = _ref$variant === void 0 ? "filemanager" : _ref$variant,
|
|
255
|
+
_ref$onUploadComplete = _ref.onUploadCompleted,
|
|
256
|
+
onUploadCompleted = _ref$onUploadComplete === void 0 ? null : _ref$onUploadComplete;
|
|
253
257
|
// Declare a new state variable, which we'll call "count"
|
|
254
258
|
var _useState = (0, _react.useState)(""),
|
|
255
259
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -354,9 +358,12 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
354
358
|
_context.next = 12;
|
|
355
359
|
break;
|
|
356
360
|
case 30:
|
|
361
|
+
if (onUploadCompleted != null) {
|
|
362
|
+
onUploadCompleted();
|
|
363
|
+
}
|
|
357
364
|
setUploading(false);
|
|
358
365
|
setMessage("Uploaded successfully");
|
|
359
|
-
case
|
|
366
|
+
case 33:
|
|
360
367
|
case "end":
|
|
361
368
|
return _context.stop();
|
|
362
369
|
}
|
|
@@ -444,7 +451,11 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
444
451
|
style: {
|
|
445
452
|
display: "none"
|
|
446
453
|
}
|
|
447
|
-
}), /*#__PURE__*/_react["default"].createElement(
|
|
454
|
+
}), variant == "custom" && /*#__PURE__*/_react["default"].createElement(_system.Box, {
|
|
455
|
+
onClick: function onClick() {
|
|
456
|
+
handleUploadFileInput();
|
|
457
|
+
}
|
|
458
|
+
}, children), variant == "filemanager" && /*#__PURE__*/_react["default"].createElement(_material.Grid, {
|
|
448
459
|
container: true,
|
|
449
460
|
spacing: 2
|
|
450
461
|
}, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
|
package/package.json
CHANGED
|
@@ -19,7 +19,6 @@ import Tooltip from '@mui/material/Tooltip';
|
|
|
19
19
|
import Backdrop from '@mui/material/Backdrop';
|
|
20
20
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
21
21
|
|
|
22
|
-
|
|
23
22
|
export const FileUploader = ({
|
|
24
23
|
url,
|
|
25
24
|
params,
|
|
@@ -29,7 +28,9 @@ export const FileUploader = ({
|
|
|
29
28
|
isHidden = false,
|
|
30
29
|
refOveride = null,
|
|
31
30
|
primaryColor = "#000",
|
|
32
|
-
onConfirmDelete = null
|
|
31
|
+
onConfirmDelete = null,
|
|
32
|
+
variant = "filemanager", // custom vs filemanager
|
|
33
|
+
onUploadCompleted = null
|
|
33
34
|
}) => {
|
|
34
35
|
// Declare a new state variable, which we'll call "count"
|
|
35
36
|
const [message, setMessage] = useState("");
|
|
@@ -81,6 +82,7 @@ export const FileUploader = ({
|
|
|
81
82
|
data.append(element.key, element.value);
|
|
82
83
|
}
|
|
83
84
|
|
|
85
|
+
|
|
84
86
|
try {
|
|
85
87
|
await apiService().post(url, data, {
|
|
86
88
|
onUploadProgress: (ProgressEvent) => {
|
|
@@ -107,6 +109,11 @@ export const FileUploader = ({
|
|
|
107
109
|
fileIndex++;
|
|
108
110
|
}
|
|
109
111
|
|
|
112
|
+
if (onUploadCompleted != null)
|
|
113
|
+
{
|
|
114
|
+
onUploadCompleted();
|
|
115
|
+
}
|
|
116
|
+
|
|
110
117
|
setUploading(false);
|
|
111
118
|
setMessage("Uploaded successfully");
|
|
112
119
|
};
|
|
@@ -152,149 +159,159 @@ export const FileUploader = ({
|
|
|
152
159
|
return (
|
|
153
160
|
<Box sx={{ marginTop: 1, display: isHidden ? "none" : "block" }}>
|
|
154
161
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
sx={{ fill:
|
|
192
|
-
|
|
193
|
-
|
|
162
|
+
<input
|
|
163
|
+
className="inputfile"
|
|
164
|
+
id="file"
|
|
165
|
+
type="file"
|
|
166
|
+
name="file"
|
|
167
|
+
multiple={multiple}
|
|
168
|
+
ref={fileUploader}
|
|
169
|
+
onChange={handleUpload}
|
|
170
|
+
style={{ display: "none" }}
|
|
171
|
+
/>
|
|
172
|
+
|
|
173
|
+
{variant == "custom" &&
|
|
174
|
+
<Box onClick={() => {
|
|
175
|
+
handleUploadFileInput();
|
|
176
|
+
}}>
|
|
177
|
+
{children}
|
|
178
|
+
</Box>
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
{variant == "filemanager" &&
|
|
182
|
+
<Grid container spacing={2}>
|
|
183
|
+
<Grid ref={refOveride} item xs={4} onClick={handleUploadFileInput}>
|
|
184
|
+
<Grid
|
|
185
|
+
container
|
|
186
|
+
sx={{
|
|
187
|
+
padding: 2,
|
|
188
|
+
backgroundColor: "#ECEDED",
|
|
189
|
+
fontSize: "14px",
|
|
190
|
+
cursor: "pointer",
|
|
191
|
+
borderRadius: "8px",
|
|
192
|
+
border: "1px dashed #C8D4D5",
|
|
193
|
+
}}
|
|
194
|
+
>
|
|
195
|
+
<Grid item xs={2}>
|
|
196
|
+
<Box>
|
|
197
|
+
<FileCopyRoundedIcon
|
|
198
|
+
sx={{ fill: "#C8D4D5", width: 50, height: 50 }}
|
|
199
|
+
/>
|
|
200
|
+
</Box>
|
|
201
|
+
</Grid>
|
|
202
|
+
<Grid item xs={10}>
|
|
203
|
+
<Box>Drag and drop files here or</Box>
|
|
204
|
+
<Box sx={{ marginTop: 1 }}>
|
|
205
|
+
<Stack direction="row" spacing={2}>
|
|
206
|
+
<UploadRoundedIcon
|
|
207
|
+
sx={{ fill: primaryColor, width: 30, height: 30 }}
|
|
208
|
+
/>
|
|
209
|
+
<Typography
|
|
210
|
+
variant="h3"
|
|
211
|
+
component={"span"}
|
|
212
|
+
sx={{ color: primaryColor, paddingTop: 0.6 }}
|
|
213
|
+
>
|
|
214
|
+
Upload
|
|
215
|
+
</Typography>
|
|
216
|
+
</Stack>
|
|
217
|
+
</Box>
|
|
218
|
+
</Grid>
|
|
219
|
+
<Grid item xs={12}>
|
|
220
|
+
{loaded > 0 && (
|
|
221
|
+
<LinearProgress
|
|
222
|
+
variant="buffer"
|
|
223
|
+
value={loaded}
|
|
224
|
+
sx={{ marginTop: 2 }}
|
|
225
|
+
/>
|
|
226
|
+
)}
|
|
227
|
+
|
|
228
|
+
{loaded == 100 && (
|
|
229
|
+
<Typography
|
|
194
230
|
variant="h3"
|
|
195
231
|
component={"span"}
|
|
196
|
-
sx={{ color: primaryColor, paddingTop: 0.6 }}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
</
|
|
201
|
-
</Box>
|
|
232
|
+
sx={{ color: primaryColor, paddingTop: 0.6 }}>
|
|
233
|
+
Completed
|
|
234
|
+
</Typography>
|
|
235
|
+
)}
|
|
236
|
+
</Grid>
|
|
202
237
|
</Grid>
|
|
203
|
-
<Grid item xs={12}>
|
|
204
|
-
{loaded > 0 && (
|
|
205
|
-
<LinearProgress
|
|
206
|
-
variant="buffer"
|
|
207
|
-
value={loaded}
|
|
208
|
-
sx={{ marginTop: 2 }}
|
|
209
|
-
/>
|
|
210
|
-
)}
|
|
211
|
-
|
|
212
|
-
{loaded == 100 && (
|
|
213
|
-
<Typography
|
|
214
|
-
variant="h3"
|
|
215
|
-
component={"span"}
|
|
216
|
-
sx={{ color: primaryColor, paddingTop: 0.6 }}>
|
|
217
|
-
Completed
|
|
218
|
-
</Typography>
|
|
219
|
-
)}
|
|
220
238
|
</Grid>
|
|
221
|
-
</Grid>
|
|
222
|
-
</Grid>
|
|
223
239
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
>
|
|
252
|
-
<Tooltip placement="left" arrow title={fileUpload.name}>
|
|
253
|
-
<Stack
|
|
254
|
-
direction="row"
|
|
255
|
-
spacing={1}
|
|
256
|
-
display="flex"
|
|
257
|
-
justifyContent={"space-between"}
|
|
240
|
+
{children}
|
|
241
|
+
|
|
242
|
+
<Grid container sx={{ paddingTop: 1 }}>
|
|
243
|
+
{filesDownloadable != null &&
|
|
244
|
+
filesDownloadable.map((fileUpload, idx) => {
|
|
245
|
+
return (
|
|
246
|
+
<Grid
|
|
247
|
+
key={"fileDownloadable-" + idx}
|
|
248
|
+
item
|
|
249
|
+
xs={8}
|
|
250
|
+
sm={8}
|
|
251
|
+
md={5}
|
|
252
|
+
lg={3}
|
|
253
|
+
sx={{
|
|
254
|
+
marginLeft: 2,
|
|
255
|
+
padding: 1,
|
|
256
|
+
marginTop: 1,
|
|
257
|
+
backgroundColor: "#ECEDED",
|
|
258
|
+
position: "relative",
|
|
259
|
+
fontSize: "14px",
|
|
260
|
+
cursor: "pointer",
|
|
261
|
+
borderRadius: "8px",
|
|
262
|
+
border: "1px solid #54C7DD",
|
|
263
|
+
}}
|
|
264
|
+
onClick={async () => {
|
|
265
|
+
window.open(fileUpload.uri);
|
|
266
|
+
}}
|
|
258
267
|
>
|
|
259
|
-
|
|
260
|
-
<
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
}}
|
|
268
|
+
<Tooltip placement="left" arrow title={fileUpload.name}>
|
|
269
|
+
<Stack
|
|
270
|
+
direction="row"
|
|
271
|
+
spacing={1}
|
|
272
|
+
display="flex"
|
|
273
|
+
justifyContent={"space-between"}
|
|
266
274
|
>
|
|
267
|
-
|
|
275
|
+
<Box display={"flex"} alignItems="center">
|
|
276
|
+
<FileDownloadOutlinedIcon sx={{ fill: "#92D6E3" }} />
|
|
277
|
+
<Box
|
|
268
278
|
sx={{
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
textOverflow: "ellipsis",
|
|
272
|
-
width:"350px"
|
|
279
|
+
paddingTop: 0.6,
|
|
280
|
+
marginLeft: "5px",
|
|
273
281
|
}}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
282
|
+
>
|
|
283
|
+
<Typography
|
|
284
|
+
sx={{
|
|
285
|
+
overflow: "hidden",
|
|
286
|
+
whiteSpace: "nowrap",
|
|
287
|
+
textOverflow: "ellipsis",
|
|
288
|
+
width:"350px"
|
|
289
|
+
}}
|
|
290
|
+
>
|
|
291
|
+
{fileUpload.name}
|
|
292
|
+
</Typography>
|
|
293
|
+
</Box>
|
|
294
|
+
|
|
295
|
+
<IconButton
|
|
296
|
+
aria-label="delete"
|
|
297
|
+
sx={{ position: "absolute", right: "0" }}
|
|
298
|
+
onClick={(evt) => {
|
|
299
|
+
evt.stopPropagation();
|
|
300
|
+
setOrderFileId(fileUpload.id);
|
|
301
|
+
setViewDeleteDialog(true);
|
|
302
|
+
}}
|
|
303
|
+
>
|
|
304
|
+
<DeleteIcon />
|
|
305
|
+
</IconButton>
|
|
277
306
|
</Box>
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
setOrderFileId(fileUpload.id);
|
|
285
|
-
setViewDeleteDialog(true);
|
|
286
|
-
}}
|
|
287
|
-
>
|
|
288
|
-
<DeleteIcon />
|
|
289
|
-
</IconButton>
|
|
290
|
-
</Box>
|
|
291
|
-
</Stack>
|
|
292
|
-
</Tooltip>
|
|
293
|
-
</Grid>
|
|
294
|
-
);
|
|
295
|
-
})}
|
|
307
|
+
</Stack>
|
|
308
|
+
</Tooltip>
|
|
309
|
+
</Grid>
|
|
310
|
+
);
|
|
311
|
+
})}
|
|
312
|
+
</Grid>
|
|
296
313
|
</Grid>
|
|
297
|
-
|
|
314
|
+
}
|
|
298
315
|
|
|
299
316
|
<Dialog
|
|
300
317
|
open={viewDeleteDialog}
|