@widergy/mobile-ui 1.26.0 → 1.26.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.26.1](https://github.com/widergy/mobile-ui/compare/v1.26.0...v1.26.1) (2024-09-26)
+
+
+### Bug Fixes
+
+* preview and validations attachment list ([#361](https://github.com/widergy/mobile-ui/issues/361)) ([7fa7c2b](https://github.com/widergy/mobile-ui/commit/7fa7c2b7ff95bd916d7f44804c4afc8055936a50))
+
 # [1.26.0](https://github.com/widergy/mobile-ui/compare/v1.25.1...v1.26.0) (2024-09-25)
 
 

package/lib/components/MultipleFilePicker/index.js

@@ -2,30 +2,50 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import DocumentPicker from 'react-native-document-picker';
-import { isEmpty } from '@widergy/web-utils/lib/array';
+import { isArray, isEmpty } from 'lodash';
 
-import { retrieveFile, isImageByUri, blobToFile } from '../../utils/fileUtils.js';
+import { retrieveFile, blobToFile } from '../../utils/fileUtils.js';
 
 import Picker from './components/Picker';
 import UploadedFiles from './components/UploadedFiles';
 import { UPLOAD_ICON, DEFAULT_MAX_SIZE } from './constants';
 import filePickerPropTypes from './propTypes';
-import { onlyPDFAllowed, pdfAspectRatioValidation } from './utils';
+import {
+  getInitialValuesFrom,
+  isInvalidFileSize,
+  onlyPDFAllowed,
+  validateFileFormat,
+  validateFileQuantity,
+  validateFileType,
+  validateOnlyPDFAllowed
+} from './utils';
 
 class MultipleFilePicker extends Component {
   constructor(props) {
     super(props);
+    const { files } = props?.value || [];
+
     this.state = {
-      uploadedFiles: []
+      uploadedFiles: isArray(files) ? getInitialValuesFrom(files) : [],
+      rawFiles: isArray(files) ? files : []
     };
   }
 
+  componentDidUpdate(_, prevState) {
+    const { rawFiles } = this.state;
+    const { onChange } = this.props;
+
+    if (prevState.rawFiles !== rawFiles && onChange) {
+      const payloadOnChange = isEmpty(rawFiles) ? null : { files: rawFiles };
+      onChange(payloadOnChange);
+    }
+  }
+
   handleShowPicker = async () => {
     const {
       allowedTypes,
       onMaxSizeError,
       onError,
-      onChange,
       maxFileByteSize,
       maxFiles,
       minFiles,
@@ -41,47 +61,34 @@ class MultipleFilePicker extends Component {
       });
       const { uploadedFiles } = this.state;
 
-      if (uploadedFiles.length + documents.length > maxFiles) {
-        throw new Error(fileTypeError || 'La cantidad de archivos supera al máximo permitido');
-      }
-      if (uploadedFiles.length + documents.length < minFiles) {
-        throw new Error(fileTypeError || 'La cantidad de archivos es menor al mínimo permitido');
-      }
-      documents.map(async document => {
-        const isPDF = document.type.includes('pdf');
-        const isImage = document.type.includes('image');
-        if (onlyPDFAllowed(allowedTypes) && !isPDF) {
-          throw new Error(fileTypeError || 'El tipo de archivo debe ser PDF.');
-        }
-        if (allowedTypes && !isImage && !isImageByUri(document.uri) && !isPDF) {
-          throw new Error(fileTypeError || 'Tipo de archivo inválido.');
-        }
-        if (maxFileByteSize && document.size > maxFileByteSize) {
-          onMaxSizeError(document.size, maxFileByteSize);
-          return;
-        }
-
-        const file = !avoidRetrieveFile && (await retrieveFile(document.uri, document.type));
-
-        if (file && isPDF && !isEmpty(allowedPDFUploadSizes)) {
-          const isWrongFormat = await pdfAspectRatioValidation(file, allowedPDFUploadSizes);
-          if (isWrongFormat) {
-            throw new Error(
-              pdfFormatError ||
-                `El formato de archivo es inválido. (Válidos: ${allowedPDFUploadSizes
-                  ?.map(aspectRatio => aspectRatio.name)
-                  .join(' - ')})`
-            );
+      const filesSelectedQuantity = uploadedFiles.length + documents.length;
+      validateFileQuantity(filesSelectedQuantity, { maxFiles, minFiles }, fileTypeError);
+
+      await Promise.all(
+        documents.map(async document => {
+          const hasFileBeenUploaded = uploadedFiles.some(fileAdded => fileAdded.name === document.name);
+
+          if (!hasFileBeenUploaded) {
+            validateOnlyPDFAllowed(document, allowedTypes, fileTypeError);
+            validateFileType(document, allowedTypes, fileTypeError);
+
+            const isValid = isInvalidFileSize(document, maxFileByteSize, onMaxSizeError);
+            if (isValid) return;
+
+            const file =
+              !avoidRetrieveFile && (await retrieveFile(document.uri, document.type, document.name));
+
+            await validateFileFormat(file, document, allowedPDFUploadSizes, pdfFormatError);
+
+            const fileToUpload = avoidRetrieveFile ? { document } : { file: blobToFile(file, document.type) };
+
+            this.setState(prevState => ({
+              uploadedFiles: [...prevState.uploadedFiles, { name: document.name, size: document.size }],
+              rawFiles: [...prevState.rawFiles, fileToUpload]
+            }));
           }
-        }
-
-        if (onChange) {
-          onChange(avoidRetrieveFile ? { document } : { file: blobToFile(file, document.type) });
-        }
-        this.setState(prevState => ({
-          uploadedFiles: [...prevState.uploadedFiles, { name: document.name, size: document.size }]
-        }));
-      });
+        })
+      );
     } catch (err) {
       if (!DocumentPicker.isCancel(err)) {
         onError(err.message);
@@ -95,7 +102,8 @@ class MultipleFilePicker extends Component {
       onChange(null);
     }
     this.setState(prevState => ({
-      uploadedFiles: prevState.uploadedFiles.filter((a, i) => i !== index)
+      uploadedFiles: prevState.uploadedFiles.filter((a, i) => i !== index),
+      rawFiles: prevState.rawFiles.filter((a, i) => i !== index)
     }));
   };
 

package/lib/components/MultipleFilePicker/utils.js

@@ -1,4 +1,7 @@
 import { PDFDocument } from 'pdf-lib';
+import { isEmpty } from 'lodash';
+
+import { isImageByUri } from '../../utils/fileUtils.js';
 
 export const onlyPDFAllowed = allowedTypes => allowedTypes.length === 1 && allowedTypes[0].includes('pdf');
 
@@ -39,3 +42,67 @@ export const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
     return !pageMatches({ width, height }, allowedPDFUploadSizes);
   });
 };
+
+export const validateFileQuantity = (fieldQuantity, { maxFiles, minFiles }, fileTypeError) => {
+  if (fieldQuantity > maxFiles) {
+    throw new Error(fileTypeError || 'La cantidad de archivos supera al máximo permitido');
+  }
+  if (fieldQuantity < minFiles) {
+    throw new Error(fileTypeError || 'La cantidad de archivos es menor al mínimo permitido');
+  }
+};
+
+const isPDF = document => document.type.includes('pdf');
+const isImage = document => document.type.includes('image');
+
+export const validateOnlyPDFAllowed = (document, allowedTypes, fileTypeError) => {
+  const condition = onlyPDFAllowed(allowedTypes) && !isPDF(document);
+  if (condition) {
+    throw new Error(fileTypeError || 'El tipo de archivo debe ser PDF.');
+  }
+};
+
+export const validateFileType = (document, allowedTypes, fileTypeError) => {
+  const isInvalidImage = !isImage(document) && !isImageByUri(document.uri);
+  const condition = allowedTypes && isInvalidImage && !isPDF(document);
+  if (condition) {
+    throw new Error(fileTypeError || 'Tipo de archivo inválido.');
+  }
+};
+
+export const isInvalidFileSize = (document, maxFileByteSize, onMaxSizeError) => {
+  const isInvalid = maxFileByteSize && document.size > maxFileByteSize;
+  if (isInvalid) {
+    if (onMaxSizeError) {
+      onMaxSizeError(document.size, maxFileByteSize);
+    } else {
+      throw new Error(`El archivo debe ser menor a ${maxFileByteSize}`);
+    }
+  }
+  return isInvalid;
+};
+
+export const validateFileFormat = async (file, document, allowedPDFUploadSizes, pdfFormatError) => {
+  const isInvalid = file && isPDF(document) && !isEmpty(allowedPDFUploadSizes);
+  if (isInvalid) {
+    const isWrongFormat = await pdfAspectRatioValidation(file, allowedPDFUploadSizes);
+    if (isWrongFormat) {
+      throw new Error(
+        pdfFormatError ||
+          `El formato de archivo es inválido. (Válidos: ${allowedPDFUploadSizes
+            ?.map(aspectRatio => aspectRatio.name)
+            .join(' - ')})`
+      );
+    }
+  }
+};
+
+export const getInitialValuesFrom = files =>
+  files
+    ?.map(fileBlob => {
+      // eslint-disable-next-line no-underscore-dangle
+      const fileData = fileBlob?.file?._data || {};
+
+      return fileData ? { name: fileData?.name, size: fileData?.size } : null;
+    })
+    .filter(file => file !== null) || [];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.26.0",
+  "version": "1.26.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [