siam-ui-utils 2.1.9 → 2.1.11

package/src/{dropzone-uploader → archivos-adjuntos}/index.jsx

@@ -1,22 +1,13 @@
+/* eslint-disable react/prop-types */
 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 from '../iconos/icon-button-svg';
-import { pdfImage } from '../constants-svg';
+import { IconButtonSvg, pdfImage } from '../iconos';
 import './dropzone-uploader.css';
+import './simple-line-icons.css';
 
-const maxSize = 7; //en MB
-
-const getFilesFromEvent = (e) => {
-  return new Promise((resolve) => {
-    getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-      resolve(chosenFiles.map((f) => f.fileObject));
-    });
-  });
-};
-
+const maxSize = 7;
 export const DropzoneUploader = ({
   onChangeFiles,
   totalFiles,
@@ -24,42 +15,43 @@ export const DropzoneUploader = ({
   accept = 'image/*, application/pdf',
   capture = null,
   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);
-
-  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-    const text =
-      totalFilesDU > 0
-        ? `${maxFiles - totalFilesDU} archivo/s más`
-        : nameFileLabel;
-    return (
-      <label className="dropzone-upload-button">
-        {text}
-        <input
-          style={{ display: 'none' }}
-          type="file"
-          accept={accept}
-          capture={capture}
-          multiple
-          onChange={(e) => {
-            getFilesFromEvent(e).then((chosenFiles) => {
-              onFiles(chosenFiles);
-            });
-          }}
-        />
-      </label>
-    );
+  const handleChangeStatus = ({ file }, status) => {
+    if (status == 'done') {
+      const filesTemp = files;
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    } else if (status == 'removed') {
+      const filesTemp = files;
+      const index = files.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    }
+  };
+  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) > maxFileSize) {
-      NotificationManager.error(
-        'El archivo supera el tamaño máximo',
-        'Advertencia',
-      );
+      onMaxFileSizeError();
       remove();
     }
     return (
@@ -103,31 +95,35 @@ export const DropzoneUploader = ({
     );
   };
 
-  const handleChangeStatus = ({ file }, status) => {
-    if (status == 'done') {
-      const filesTemp = files;
-      filesTemp.push(file);
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    } else if (status == 'removed') {
-      const filesTemp = files;
-      const index = files.indexOf(file);
-      if (index > -1) {
-        filesTemp.splice(index, 1);
-      }
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    }
+  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
+    const text =
+      totalFilesDU > 0
+        ? `${maxFiles - totalFilesDU} archivo/s más`
+        : nameFileLabel;
+    return (
+      <label className="dropzone-upload-button">
+        {text}
+        <input
+          style={{ display: 'none' }}
+          type="file"
+          accept={accept}
+          capture={capture}
+          multiple
+          onChange={(e) => {
+            getFilesFromEvent(e).then((chosenFiles) => {
+              onFiles(chosenFiles);
+            });
+          }}
+        />
+      </label>
+    );
   };
-
   useEffect(() => {
     setTotalFilesDU(totalFiles);
   }, [totalFiles]);
 
   return (
-    <>
+    <div className={`${classNames}`}>
       <Dropzone
         disableUpload={false}
         maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
@@ -139,8 +135,6 @@ export const DropzoneUploader = ({
         getFilesFromEvent={getFilesFromEvent}
         accept={accept}
       />
-    </>
+    </div>
   );
 };
-
-export default DropzoneUploader;