@sinco/react 1.2.2-rc.7 → 1.2.2-rc.9
Sign up to get free protection for your applications and to get access to all the features.
- package/index.esm.js +308 -10
- package/package.json +1 -1
- package/src/lib/Components/index.d.ts +2 -0
package/index.esm.js
CHANGED
@@ -1,10 +1,11 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import React__default, { Children, isValidElement, cloneElement, useState, useCallback, useEffect } from 'react';
|
3
|
-
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
|
3
|
+
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp, AttachFile, UploadFileOutlined, Autorenew, CancelOutlined, DeleteOutline } from '@mui/icons-material';
|
4
4
|
import { withEmotionCache, ThemeContext, keyframes, css } from '@emotion/react';
|
5
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
6
6
|
import * as ReactDOM from 'react-dom';
|
7
7
|
import ReactDOM__default from 'react-dom';
|
8
|
+
import { useDropzone } from 'react-dropzone';
|
8
9
|
|
9
10
|
function _arrayLikeToArray(r, a) {
|
10
11
|
(null == a || a > r.length) && (a = r.length);
|
@@ -14,6 +15,9 @@ function _arrayLikeToArray(r, a) {
|
|
14
15
|
function _arrayWithHoles(r) {
|
15
16
|
if (Array.isArray(r)) return r;
|
16
17
|
}
|
18
|
+
function _arrayWithoutHoles(r) {
|
19
|
+
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
20
|
+
}
|
17
21
|
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
18
22
|
try {
|
19
23
|
var i = n[a](c),
|
@@ -47,6 +51,9 @@ function _defineProperty(e, r, t) {
|
|
47
51
|
writable: !0
|
48
52
|
}) : e[r] = t, e;
|
49
53
|
}
|
54
|
+
function _iterableToArray(r) {
|
55
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
56
|
+
}
|
50
57
|
function _iterableToArrayLimit(r, l) {
|
51
58
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
52
59
|
if (null != t) {
|
@@ -77,6 +84,9 @@ function _iterableToArrayLimit(r, l) {
|
|
77
84
|
function _nonIterableRest() {
|
78
85
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
79
86
|
}
|
87
|
+
function _nonIterableSpread() {
|
88
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
89
|
+
}
|
80
90
|
function ownKeys(e, r) {
|
81
91
|
var t = Object.keys(e);
|
82
92
|
if (Object.getOwnPropertySymbols) {
|
@@ -402,6 +412,9 @@ function _regeneratorRuntime() {
|
|
402
412
|
function _slicedToArray(r, e) {
|
403
413
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
404
414
|
}
|
415
|
+
function _toConsumableArray(r) {
|
416
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
417
|
+
}
|
405
418
|
function _toPrimitive(t, r) {
|
406
419
|
if ("object" != typeof t || !t) return t;
|
407
420
|
var e = t[Symbol.toPrimitive];
|
@@ -8072,11 +8085,48 @@ var components = {
|
|
8072
8085
|
padding: "0px 0px",
|
8073
8086
|
minWidth: 0
|
8074
8087
|
},
|
8075
|
-
icon: {
|
8076
|
-
|
8077
|
-
|
8078
|
-
|
8079
|
-
|
8088
|
+
icon: function icon(_ref7) {
|
8089
|
+
var theme = _ref7.theme;
|
8090
|
+
return {
|
8091
|
+
padding: "4px",
|
8092
|
+
marginRight: "8px",
|
8093
|
+
display: "flex",
|
8094
|
+
alignItems: "center",
|
8095
|
+
borderRadius: "50%",
|
8096
|
+
variants: [{
|
8097
|
+
props: {
|
8098
|
+
variant: "standard",
|
8099
|
+
severity: "info"
|
8100
|
+
},
|
8101
|
+
style: {
|
8102
|
+
backgroundColor: theme.palette.info[100]
|
8103
|
+
}
|
8104
|
+
}, {
|
8105
|
+
props: {
|
8106
|
+
variant: "standard",
|
8107
|
+
severity: "error"
|
8108
|
+
},
|
8109
|
+
style: {
|
8110
|
+
backgroundColor: theme.palette.error[100]
|
8111
|
+
}
|
8112
|
+
}, {
|
8113
|
+
props: {
|
8114
|
+
variant: "standard",
|
8115
|
+
severity: "success"
|
8116
|
+
},
|
8117
|
+
style: {
|
8118
|
+
backgroundColor: theme.palette.success[100]
|
8119
|
+
}
|
8120
|
+
}, {
|
8121
|
+
props: {
|
8122
|
+
variant: "standard",
|
8123
|
+
severity: "warning"
|
8124
|
+
},
|
8125
|
+
style: {
|
8126
|
+
backgroundColor: theme.palette.warning[100]
|
8127
|
+
}
|
8128
|
+
}]
|
8129
|
+
};
|
8080
8130
|
},
|
8081
8131
|
action: {
|
8082
8132
|
display: "flex",
|
@@ -8190,9 +8240,9 @@ var components = {
|
|
8190
8240
|
size: "small"
|
8191
8241
|
},
|
8192
8242
|
style: {
|
8193
|
-
width:
|
8194
|
-
height:
|
8195
|
-
minHeight:
|
8243
|
+
width: 28,
|
8244
|
+
height: 28,
|
8245
|
+
minHeight: 28,
|
8196
8246
|
svg: {
|
8197
8247
|
height: 20,
|
8198
8248
|
width: 20
|
@@ -17054,6 +17104,7 @@ var PageHeaderComponent = function PageHeaderComponent(_ref2) {
|
|
17054
17104
|
return React__default.createElement(Stack, {
|
17055
17105
|
position: fixed ? "fixed" : "relative",
|
17056
17106
|
width: fixed ? "100%" : "inherit",
|
17107
|
+
height: 48,
|
17057
17108
|
bgcolor: "background.paper",
|
17058
17109
|
sx: {
|
17059
17110
|
boxShadow: function boxShadow(theme) {
|
@@ -17292,6 +17343,253 @@ var IncognitIconOutlined = createSvgIcon(React__default.createElement("svg", {
|
|
17292
17343
|
var Incognit = IncognitIcon;
|
17293
17344
|
var IncognitOutlined = IncognitIconOutlined;
|
17294
17345
|
|
17346
|
+
var AdjuntarArchivo = function AdjuntarArchivo(_ref) {
|
17347
|
+
var compact = _ref.compact,
|
17348
|
+
sx = _ref.sx,
|
17349
|
+
controlArchivo = _ref.controlArchivo;
|
17350
|
+
var _useState = useState(function () {
|
17351
|
+
var guardarArchivo = localStorage.getItem("archivos");
|
17352
|
+
return guardarArchivo ? JSON.parse(guardarArchivo).map(function (file) {
|
17353
|
+
return {
|
17354
|
+
file: new File([file], file.name),
|
17355
|
+
progress: 0,
|
17356
|
+
loadingComplete: false
|
17357
|
+
};
|
17358
|
+
}) : [];
|
17359
|
+
}),
|
17360
|
+
_useState2 = _slicedToArray(_useState, 2),
|
17361
|
+
archivos = _useState2[0],
|
17362
|
+
setArchivos = _useState2[1];
|
17363
|
+
useEffect(function () {
|
17364
|
+
setArchivos([]);
|
17365
|
+
}, []);
|
17366
|
+
useEffect(function () {
|
17367
|
+
archivos.forEach(function (archivo, index) {
|
17368
|
+
if (archivo.progress < 100) {
|
17369
|
+
var intervalo = setInterval(function () {
|
17370
|
+
setArchivos(function (prevArchivos) {
|
17371
|
+
return prevArchivos.map(function (item, idx) {
|
17372
|
+
return idx === index ? _objectSpread2(_objectSpread2({}, item), {}, {
|
17373
|
+
progress: Math.min(item.progress + 10, 100),
|
17374
|
+
loadingComplete: Math.min(item.progress + 10, 100) === 100
|
17375
|
+
}) : item;
|
17376
|
+
});
|
17377
|
+
});
|
17378
|
+
}, 1000);
|
17379
|
+
return function () {
|
17380
|
+
return clearInterval(intervalo);
|
17381
|
+
};
|
17382
|
+
}
|
17383
|
+
});
|
17384
|
+
}, [archivos]);
|
17385
|
+
var validarArchivoDuplicado = function validarArchivoDuplicado(file) {
|
17386
|
+
var archivoDuplicado = archivos.some(function (archivoExistente) {
|
17387
|
+
return archivoExistente.file.name === file.name;
|
17388
|
+
});
|
17389
|
+
if (archivoDuplicado) {
|
17390
|
+
return {
|
17391
|
+
code: "archivo-duplicado",
|
17392
|
+
message: "No se puede elegir el mismo archivo, seleccione otro por favor"
|
17393
|
+
};
|
17394
|
+
}
|
17395
|
+
return null;
|
17396
|
+
};
|
17397
|
+
var _useDropzone = useDropzone({
|
17398
|
+
validator: validarArchivoDuplicado,
|
17399
|
+
multiple: true,
|
17400
|
+
onDrop: function onDrop(acceptedFiles) {
|
17401
|
+
setArchivos(function (prev) {
|
17402
|
+
var actualizarArchivos = [].concat(_toConsumableArray(prev), _toConsumableArray(acceptedFiles.map(function (file) {
|
17403
|
+
return {
|
17404
|
+
file: file,
|
17405
|
+
progress: 0,
|
17406
|
+
loadingComplete: false
|
17407
|
+
};
|
17408
|
+
})));
|
17409
|
+
localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref2) {
|
17410
|
+
var file = _ref2.file;
|
17411
|
+
return file;
|
17412
|
+
})));
|
17413
|
+
return actualizarArchivos;
|
17414
|
+
});
|
17415
|
+
}
|
17416
|
+
}),
|
17417
|
+
getRootProps = _useDropzone.getRootProps,
|
17418
|
+
getInputProps = _useDropzone.getInputProps;
|
17419
|
+
var Eliminar = useCallback(function (index) {
|
17420
|
+
setArchivos(function (prevFiles) {
|
17421
|
+
var actualizarArchivos = prevFiles.filter(function (_, indexIteration) {
|
17422
|
+
return indexIteration !== index;
|
17423
|
+
});
|
17424
|
+
localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref3) {
|
17425
|
+
var file = _ref3.file;
|
17426
|
+
return file;
|
17427
|
+
})));
|
17428
|
+
return actualizarArchivos;
|
17429
|
+
});
|
17430
|
+
}, [setArchivos]);
|
17431
|
+
var Editar = useCallback(function (index) {
|
17432
|
+
var input = document.createElement('input');
|
17433
|
+
input.type = 'file';
|
17434
|
+
input.onchange = function (event) {
|
17435
|
+
var newFile = event.target.files[0];
|
17436
|
+
if (newFile) {
|
17437
|
+
setArchivos(function (prevFiles) {
|
17438
|
+
var actualizarArchivos = prevFiles.map(function (archivo, idx) {
|
17439
|
+
return idx === index ? _objectSpread2(_objectSpread2({}, archivo), {}, {
|
17440
|
+
file: newFile,
|
17441
|
+
progress: 0,
|
17442
|
+
loadingComplete: false
|
17443
|
+
}) : archivo;
|
17444
|
+
});
|
17445
|
+
localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref4) {
|
17446
|
+
var file = _ref4.file;
|
17447
|
+
return file;
|
17448
|
+
})));
|
17449
|
+
return actualizarArchivos;
|
17450
|
+
});
|
17451
|
+
}
|
17452
|
+
};
|
17453
|
+
input.click();
|
17454
|
+
}, [setArchivos]);
|
17455
|
+
var controlEventoAdjuntar = function controlEventoAdjuntar(e) {
|
17456
|
+
e.stopPropagation();
|
17457
|
+
controlArchivo(archivos.map(function (e) {
|
17458
|
+
return e.file;
|
17459
|
+
}));
|
17460
|
+
setArchivos([]);
|
17461
|
+
localStorage.removeItem("archivos");
|
17462
|
+
};
|
17463
|
+
return React__default.createElement(Stack, {
|
17464
|
+
width: "100%",
|
17465
|
+
alignItems: "center",
|
17466
|
+
bgcolor: "transparent",
|
17467
|
+
height: "100%",
|
17468
|
+
gap: 1
|
17469
|
+
}, React__default.createElement(Stack, _objectSpread2({
|
17470
|
+
id: "dropzone",
|
17471
|
+
alignItems: "center",
|
17472
|
+
flexDirection: compact === true ? "row" : "column",
|
17473
|
+
justifyContent: "center",
|
17474
|
+
bgcolor: "transparent",
|
17475
|
+
width: "100%",
|
17476
|
+
boxShadow: 1,
|
17477
|
+
gap: 1,
|
17478
|
+
borderRadius: 1,
|
17479
|
+
py: 3,
|
17480
|
+
sx: _objectSpread2({
|
17481
|
+
border: function border(theme) {
|
17482
|
+
return "1px dashed ".concat(theme.palette.grey[500]);
|
17483
|
+
},
|
17484
|
+
cursor: "pointer",
|
17485
|
+
":hover": {
|
17486
|
+
backgroundColor: "action.hover"
|
17487
|
+
}
|
17488
|
+
}, sx)
|
17489
|
+
}, getRootProps()), React__default.createElement("input", _objectSpread2({}, getInputProps())), React__default.createElement("img", {
|
17490
|
+
src: "src/assets/logoAdjuntarArchivos.svg",
|
17491
|
+
alt: "icon"
|
17492
|
+
}), React__default.createElement(Stack, {
|
17493
|
+
gap: 0.5
|
17494
|
+
}, React__default.createElement(Typography, {
|
17495
|
+
variant: "body2",
|
17496
|
+
color: "text.primary"
|
17497
|
+
}, "Arrastrar o adjuntar archivos"), React__default.createElement(Typography, {
|
17498
|
+
variant: "caption",
|
17499
|
+
color: "text.secondary"
|
17500
|
+
}, "DOCX, XML, PNG, JPG \u2022 Max 00 MB")), React__default.createElement(Button, {
|
17501
|
+
size: "small",
|
17502
|
+
startIcon: React__default.createElement(AttachFile, {
|
17503
|
+
fontSize: "inherit"
|
17504
|
+
}),
|
17505
|
+
onClick: controlEventoAdjuntar
|
17506
|
+
}, "Adjuntar")), React__default.createElement(Stack, {
|
17507
|
+
id: "informacion",
|
17508
|
+
width: "100%",
|
17509
|
+
height: "auto",
|
17510
|
+
gap: 1,
|
17511
|
+
sx: {
|
17512
|
+
overflowY: "auto"
|
17513
|
+
}
|
17514
|
+
}, archivos.map(function (_ref5, index) {
|
17515
|
+
var file = _ref5.file,
|
17516
|
+
progress = _ref5.progress,
|
17517
|
+
loadingComplete = _ref5.loadingComplete;
|
17518
|
+
return React__default.createElement(Stack, {
|
17519
|
+
flexDirection: "row",
|
17520
|
+
key: "".concat(file.name, "-").concat(index),
|
17521
|
+
width: "100%",
|
17522
|
+
gap: 1,
|
17523
|
+
borderRadius: 0.5,
|
17524
|
+
sx: {
|
17525
|
+
":hover": {
|
17526
|
+
backgroundColor: "action.hover"
|
17527
|
+
}
|
17528
|
+
}
|
17529
|
+
}, React__default.createElement(Stack, {
|
17530
|
+
width: "100%",
|
17531
|
+
alignItems: "center",
|
17532
|
+
flexDirection: "row",
|
17533
|
+
gap: 2,
|
17534
|
+
p: 1
|
17535
|
+
}, React__default.createElement(Stack, {
|
17536
|
+
width: "100%",
|
17537
|
+
flexDirection: "row",
|
17538
|
+
alignItems: "center",
|
17539
|
+
gap: 0.5
|
17540
|
+
}, React__default.createElement(UploadFileOutlined, {
|
17541
|
+
color: "primary",
|
17542
|
+
fontSize: "small"
|
17543
|
+
}), React__default.createElement(Stack, {
|
17544
|
+
flexDirection: "column",
|
17545
|
+
width: "100%"
|
17546
|
+
}, React__default.createElement(Typography, {
|
17547
|
+
variant: "body2",
|
17548
|
+
color: "text.primary"
|
17549
|
+
}, file.name), React__default.createElement(Typography, {
|
17550
|
+
variant: "caption",
|
17551
|
+
color: "text.secondary"
|
17552
|
+
}, loadingComplete ? "".concat(new Date().toLocaleDateString(), " \u2022 ").concat(Math.round(file.size / 1024), " KB") : " Cargando... \u2022 ".concat(Math.round(file.size / 1024), " KB")), !loadingComplete && React__default.createElement(LinearProgress, {
|
17553
|
+
color: "primary",
|
17554
|
+
variant: "determinate",
|
17555
|
+
value: progress,
|
17556
|
+
sx: {
|
17557
|
+
width: "100%"
|
17558
|
+
}
|
17559
|
+
})))), React__default.createElement(Box$1, {
|
17560
|
+
display: "flex",
|
17561
|
+
justifyContent: "center",
|
17562
|
+
alignItems: "center"
|
17563
|
+
}, !loadingComplete ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
|
17564
|
+
id: "editarArchivo",
|
17565
|
+
size: "small",
|
17566
|
+
onClick: function onClick() {
|
17567
|
+
return Editar(index);
|
17568
|
+
}
|
17569
|
+
}, React__default.createElement(Autorenew, {
|
17570
|
+
fontSize: "small",
|
17571
|
+
color: "action"
|
17572
|
+
})), React__default.createElement(IconButton, {
|
17573
|
+
id: "EliminarArchivo",
|
17574
|
+
size: "small",
|
17575
|
+
onClick: function onClick() {
|
17576
|
+
return Eliminar(index);
|
17577
|
+
}
|
17578
|
+
}, React__default.createElement(CancelOutlined, {
|
17579
|
+
fontSize: "small",
|
17580
|
+
color: "action"
|
17581
|
+
}))) : React__default.createElement(IconButton, {
|
17582
|
+
size: "medium",
|
17583
|
+
onClick: function onClick() {
|
17584
|
+
return Eliminar(index);
|
17585
|
+
}
|
17586
|
+
}, React__default.createElement(DeleteOutline, {
|
17587
|
+
fontSize: "small",
|
17588
|
+
color: "action"
|
17589
|
+
}))));
|
17590
|
+
})));
|
17591
|
+
};
|
17592
|
+
|
17295
17593
|
/**
|
17296
17594
|
* @license
|
17297
17595
|
* Copyright 2021 Google LLC
|
@@ -21705,4 +22003,4 @@ var useDynamicColor = function useDynamicColor(url) {
|
|
21705
22003
|
};
|
21706
22004
|
};
|
21707
22005
|
|
21708
|
-
export { AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, Incognit, IncognitIcon, IncognitIconOutlined, IncognitOutlined, PageHeaderComponent as PageHeader, PageHeaderComponent, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
|
22006
|
+
export { AdjuntarArchivo, AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, Incognit, IncognitIcon, IncognitIconOutlined, IncognitOutlined, PageHeaderComponent as PageHeader, PageHeaderComponent, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
|
package/package.json
CHANGED