@sinco/react 1.2.2-rc.8 → 1.2.2-rc.9
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.esm.js +307 -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
|
@@ -17293,6 +17343,253 @@ var IncognitIconOutlined = createSvgIcon(React__default.createElement("svg", {
|
|
17293
17343
|
var Incognit = IncognitIcon;
|
17294
17344
|
var IncognitOutlined = IncognitIconOutlined;
|
17295
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
|
+
|
17296
17593
|
/**
|
17297
17594
|
* @license
|
17298
17595
|
* Copyright 2021 Google LLC
|
@@ -21706,4 +22003,4 @@ var useDynamicColor = function useDynamicColor(url) {
|
|
21706
22003
|
};
|
21707
22004
|
};
|
21708
22005
|
|
21709
|
-
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