siam-ui-utils 2.0.24 → 2.0.26

package/src/archivos-adjuntos/index.jsx

@@ -1,139 +1,141 @@
 /* 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, pdfImage } from '../iconos'
-import './dropzone-uploader.css'
+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';
+import './simple-line-icons.css';
 
-const maxSize = 7
+const maxSize = 7;
 export const DropzoneUploader = ({
-	onChangeFiles,
-	totalFiles,
-	maxFiles = 3,
-	accept = 'image/*, application/pdf',
-	capture = null,
-    nameFileLabel = 'Subir archivos',
-    classNames=""
+  onChangeFiles,
+  totalFiles,
+  maxFiles = 3,
+  accept = 'image/*, application/pdf',
+  capture = null,
+  nameFileLabel = 'Subir archivos',
+  classNames = '',
+  maxFileSize = maxSize,
 }) => {
-	const [files, setFiles] = useState([])
-	const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
-	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) > maxSize) {
-			NotificationManager.error(
-				'El archivo supera el tamaño máximo',
-				'Advertencia'
-			)
-			remove()
-		}
-		return (
-			<div className='dropzone-upload-previewContainer'>
-				{meta.type === 'application/pdf' ? (
-					<>
-						<IconButtonSvg
-							className='form-control flex'
-							svg={pdfImage}
-							svgOver={pdfImage}
-							height='1.6rem'
-							width='1.6rem'
-							title={meta.name}
-						/>
-						<p>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				) : (
-					<>
-						<img
-							className='dropzone-upload-previewImage'
-							src={meta.previewUrl}
-							alt={meta.name}
-						/>
-						<p>
-							{meta.name.length > 17
-								? meta.name.substring(0, 17) + '...'
-								: meta.name}
-						</p>
-					</>
-				)}
-				<p>{(meta.size / 1024).toFixed(2)} .Kb</p>
-				<button
-					onClick={remove}
-					className='dropzone-upload-delete-btn simple-icon-trash'
-				></button>
-			</div>
-		)
-	}
-
-	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])
-
+  const [files, setFiles] = useState([]);
+  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
+  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',
+      );
+      remove();
+    }
     return (
-        <div className={`${classNames}`}>
-            <Dropzone
-                disableUpload={false}
-                maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
-                maxSize={maxSize} // en megas
-                InputComponent={Input}
-                PreviewComponent={CustomPreview}
-                classNames={{ dropzone: 'dropzone-upload-frame'}}
-                onChangeStatus={handleChangeStatus}
-                getFilesFromEvent={getFilesFromEvent}
-                accept={accept}
+      <div className="dropzone-upload-previewContainer">
+        {meta.type === 'application/pdf' ? (
+          <>
+            <IconButtonSvg
+              className="form-control flex"
+              svg={pdfImage}
+              svgOver={pdfImage}
+              height="1.6rem"
+              width="1.6rem"
+              title={meta.name}
+            />
+            <p>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        ) : (
+          <>
+            <img
+              className="dropzone-upload-previewImage"
+              src={meta.previewUrl}
+              alt={meta.name}
             />
-        </div>
-	)
-}
+            <p>
+              {meta.name.length > 17
+                ? meta.name.substring(0, 17) + '...'
+                : meta.name}
+            </p>
+          </>
+        )}
+        <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
+        <button
+          onClick={remove}
+          className="dropzone-upload-delete-btn simple-icon-trash"
+        ></button>
+      </div>
+    );
+  };
+
+  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}
+        maxSize={maxFileSize} // en megas
+        InputComponent={Input}
+        PreviewComponent={CustomPreview}
+        classNames={{ dropzone: 'dropzone-upload-frame' }}
+        onChangeStatus={handleChangeStatus}
+        getFilesFromEvent={getFilesFromEvent}
+        accept={accept}
+      />
+    </div>
+  );
+};