siam-ui-utils 2.2.26 → 2.2.28

package/src/dropzone-uploader/index.jsx

@@ -1,138 +0,0 @@
-import { getDroppedOrSelectedFiles } from 'html5-file-selector';
-import { useEffect, useState } from 'react';
-import Dropzone from '../dropzone/Dropzone';
-import '../dropzone/styles.css';
-import { IconButtonSvg, pdfImage } from '../iconos';
-import './dropzone-uploader.css';
-
-const maxSize = 7;
-export const DropzoneUploader = ({
-  onChangeFiles,
-  totalFiles,
-  maxFiles = 3,
-  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 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) {
-      onMaxFileSizeError();
-      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 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>
-  );
-};