siam-ui-utils 2.0.25 → 2.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@types/react-intl": "^3.0.0",
+    "events": "^3.3.0",
     "html5-file-selector": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -41,14 +42,17 @@
     "vite-plugin-commonjs": "^0.10.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
@@ -56,6 +60,9 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "sass-embedded": "^1.79.4",
     "vite": "^5.3.4",
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^2.0.5"

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.jsx

@@ -6,9 +6,11 @@ import {
   AccordionItem,
 } from 'reactstrap';
 import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
+import './index.css';
+import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 
-function App() {
+const App = () => {
   const [open, setOpen] = useState('0');
   const toggle = (id) => {
     if (open === id) {
@@ -56,16 +58,19 @@ function App() {
           <AccordionBody accordionId="3">
             <DropzoneUploaderDniDigital
               totalFiles={0}
-              maxFiles={1}
+              maxFiles={2}
               onChangeFiles={() => {
                 console.log('onChange');
               }}
+              onMaxFileSizeError={() => {
+                console.log('MAXIMO ARCHIVO PERMITIDO :>> ');
+              }}
             />
           </AccordionBody>
         </AccordionItem>
       </Accordion>
     </div>
   );
-}
+};
 
 export default App;

package/src/archivos-adjuntos/dropzone-uploader-dni-digital/index.jsx

@@ -1,153 +1,151 @@
 /* eslint-disable react/prop-types */
-import { useState } from 'react'
-
-import { Button } from 'reactstrap'
-
-import { getDroppedOrSelectedFiles } from 'html5-file-selector'
-import Dropzone from 'react-dropzone-uploader'
-import 'react-dropzone-uploader/dist/styles.css'
-import { NotificationManager } from 'react-notifications'
-import { pdfImage, IconButtonSvg } from '../../iconos'
-import '../dropzone-uploader.css'
+import { useState } from 'react';
+import { Button } from 'reactstrap';
+import { getDroppedOrSelectedFiles } from 'html5-file-selector';
+import Dropzone from 'react-dropzone-uploader';
+import 'react-dropzone-uploader/dist/styles.css';
+import { pdfImage, IconButtonSvg } from '../../iconos';
+import '../dropzone-uploader.css';
 
 export const DropzoneUploaderDniDigital = ({
-	accept = 'image/*, application/pdf',
-	classNames = '',
-	onChangeFiles,
-	totalFiles,
-	label = 'Cargar Dni',
-	maxSize = 2,
+  accept = 'image/*, application/pdf',
+  classNames = '',
+  onChangeFiles,
+  totalFiles,
+  label = 'Cargar Dni',
+  maxSize = 2,
+  onMaxFileSizeError = () => {
+    alert('El archivo supera el tamaño máximo');
+  },
 }) => {
-	const [files, setFiles] = useState([])
+  const [files, setFiles] = useState([]);
 
-	const handleChangeStatus = ({ file }, status) => {
-		if (status === 'done') {
-			const filesTemp = [...files]
-			filesTemp.push(file)
-			setFiles(filesTemp)
-			onChangeFiles(filesTemp)
-		} else if (status === 'removed') {
-			const filesTemp = [...files]
-			const index = filesTemp.indexOf(file)
-			if (index > -1) {
-				filesTemp.splice(index, 1)
-			}
-			setFiles(filesTemp)
-			onChangeFiles(filesTemp)
-		}
-	}
+  const handleChangeStatus = ({ file }, status) => {
+    if (status === 'done') {
+      const filesTemp = [...files];
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    } else if (status === 'removed') {
+      const filesTemp = [...files];
+      const index = filesTemp.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    }
+  };
 
-	const getFilesFromEvent = (e) => {
-		return new Promise((resolve) => {
-			getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-				resolve(chosenFiles.map((f) => f.fileObject))
-			})
-		})
-	}
+  const getFilesFromEvent = (e) => {
+    return new Promise((resolve) => {
+      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+        resolve(chosenFiles.map((f) => f.fileObject));
+      });
+    });
+  };
 
-	const CustomPreview = ({ fileWithMeta }) => {
-		const { meta, remove } = fileWithMeta
-		if (meta.size / (1024 * 1024) > maxSize) {
-			NotificationManager.error(
-				'El archivo supera el tamaño máximo',
-				'Advertencia'
-			)
-			remove()
-		}
-		return (
-			<div
-				className='dropzone-upload-previewContainer'
-				style={{ width: '100%', display: 'flex', alignItems: 'center' }}
-			>
-				{meta.type === 'application/pdf' ? (
-					<>
-						<IconButtonSvg
-							className='form-control flex'
-							svg={pdfImage}
-							svgOver={pdfImage}
-							height='1.6rem'
-							width='1.6rem'
-							title={meta.name}
-						/>
-						<p style={{ paddingRight: '1rem' }}>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				) : (
-					<>
-						<img
-							className='dropzone-upload-previewImage mt-1'
-							src={meta.previewUrl}
-							alt={meta.name}
-							style={{
-								width: '110px',
-								height: '110px',
-								objectFit: 'cover',
-								marginRight: '0.5rem',
-							}}
-						/>
-						<div className='dropzone-upload-file-name-container'>
-							<p className='dropzone-upload-file-name' title={meta.name}>
-								{meta.name}
-							</p>
-						</div>
-					</>
-				)}
-				<button
-					style={{ marginTop: '0rem' }}
-					onClick={remove}
-					className='dropzone-upload-delete-btn simple-icon-trash'
-				></button>
-			</div>
-		)
-	}
+  const CustomPreview = ({ fileWithMeta }) => {
+    const { meta, remove } = fileWithMeta;
+    console.log('meta.size :>> ', meta.size);
+    if (meta.size / (1024 * 1024) > maxSize) {
+      onMaxFileSizeError();
+      remove();
+    }
+    return (
+      <div
+        className="dropzone-upload-previewContainer"
+        style={{ width: '100%', display: 'flex', alignItems: 'center' }}
+      >
+        {meta.type === 'application/pdf' ? (
+          <>
+            <IconButtonSvg
+              className="form-control flex"
+              svg={pdfImage}
+              svgOver={pdfImage}
+              height="1.6rem"
+              width="1.6rem"
+              title={meta.name}
+            />
+            <p style={{ paddingRight: '1rem' }}>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        ) : (
+          <>
+            <img
+              className="dropzone-upload-previewImage mt-1"
+              src={meta.previewUrl}
+              alt={meta.name}
+              style={{
+                width: '110px',
+                height: '110px',
+                objectFit: 'cover',
+                marginRight: '0.5rem',
+              }}
+            />
+            <div className="dropzone-upload-file-name-container">
+              <p className="dropzone-upload-file-name" title={meta.name}>
+                {meta.name}
+              </p>
+            </div>
+          </>
+        )}
+        <button
+          style={{ marginTop: '0rem' }}
+          onClick={remove}
+          className="dropzone-upload-delete-btn simple-icon-trash"
+        ></button>
+      </div>
+    );
+  };
 
-	const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-		const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`
-		return (
-			<>
-				<Button
-					outline
-					block
-					size='xs'
-					className='mt-5 ml-5'
-					onClick={() => document.getElementById('fileInput').click()}
-				>
-					{text}
-					<input
-						id='fileInput'
-						style={{ display: 'none' }}
-						type='file'
-						accept={accept}
-						multiple
-						onChange={(e) => {
-							getFilesFromEvent(e).then((chosenFiles) => {
-								onFiles(chosenFiles)
-							})
-						}}
-					/>
-				</Button>
-			</>
-		)
-	}
+  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
+    const text = totalFiles > 0 ? `${2 - totalFiles} archivos más` : `${label}`;
+    return (
+      <>
+        <Button
+          outline
+          block
+          size="xs"
+          className="mt-5 ml-5"
+          onClick={() => document.getElementById('fileInput').click()}
+        >
+          {text}
+          <input
+            id="fileInput"
+            style={{ display: 'none' }}
+            type="file"
+            accept={accept}
+            multiple
+            onChange={(e) => {
+              getFilesFromEvent(e).then((chosenFiles) => {
+                onFiles(chosenFiles);
+              });
+            }}
+          />
+        </Button>
+      </>
+    );
+  };
 
-	return (
-		<div className={classNames}>
-			<Dropzone
-				disableUpload={false}
-				maxFiles={totalFiles < 2 ? 2 : 0}
-				maxSize={maxSize} // en megas
-				InputComponent={Input}
-				PreviewComponent={CustomPreview}
-				classNames={{ dropzone: 'dropzone-upload-frame' }}
-				onChangeStatus={handleChangeStatus}
-				getFilesFromEvent={getFilesFromEvent}
-				accept={accept}
-			/>
-		</div>
-	)
-}
+  return (
+    <div className={classNames}>
+      <Dropzone
+        disableUpload={false}
+        maxFiles={totalFiles < 2 ? 2 : 0}
+        maxSize={maxSize} // en megas
+        InputComponent={Input}
+        PreviewComponent={CustomPreview}
+        classNames={{ dropzone: 'dropzone-upload-frame' }}
+        onChangeStatus={handleChangeStatus}
+        getFilesFromEvent={getFilesFromEvent}
+        accept={accept}
+      />
+    </div>
+  );
+};
 
-export default DropzoneUploaderDniDigital
+export default DropzoneUploaderDniDigital;

package/src/archivos-adjuntos/index.jsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from 'react';
 import { getDroppedOrSelectedFiles } from 'html5-file-selector';
 import Dropzone from 'react-dropzone-uploader';
-import { NotificationManager } from 'react-notifications';
 import 'react-dropzone-uploader/dist/styles.css';
 import { IconButtonSvg, pdfImage } from '../iconos';
 import './dropzone-uploader.css';
@@ -18,6 +17,9 @@ export const DropzoneUploader = ({
   nameFileLabel = 'Subir archivos',
   classNames = '',
   maxFileSize = maxSize,
+  onMaxFileSizeError = () => {
+    alert('El archivo supera el tamaño máximo');
+  },
 }) => {
   const [files, setFiles] = useState([]);
   const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
@@ -49,10 +51,7 @@ export const DropzoneUploader = ({
   const CustomPreview = ({ fileWithMeta }) => {
     const { meta, remove } = fileWithMeta;
     if (meta.size / (1024 * 1024) > maxFileSize) {
-      NotificationManager.error(
-        'El archivo supera el tamaño máximo',
-        'Advertencia',
-      );
+      onMaxFileSizeError();
       remove();
     }
     return (