@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 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
- padding: "4px",
8077
- marginRight: 0,
8078
- display: "flex",
8079
- alignItems: "center"
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: 32,
8194
- height: 32,
8195
- minHeight: 32,
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sinco/react",
3
- "version": "1.2.2-rc.8",
3
+ "version": "1.2.2-rc.9",
4
4
  "description": "package for the configuration of mui react sinco",
5
5
  "private": false,
6
6
  "license": "MIT",
@@ -6,3 +6,5 @@ export * from "./PageHeader";
6
6
  export * from "./ProgressSinco";
7
7
  export * from "./CardRadio";
8
8
  export * from "./Icons";
9
+ export * from './adjuntar/';
10
+ export * from './MultiSelect';