@widergy/mobile-ui 1.25.1 → 1.26.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Features
+
+* ut icon updates ([#358](https://github.com/widergy/mobile-ui/issues/358)) ([30af561](https://github.com/widergy/mobile-ui/commit/30af5617d47e62ccbba7bf175a3a5127e0f5db7e))
+
 ## [1.25.1](https://github.com/widergy/mobile-ui/compare/v1.25.0...v1.25.1) (2024-09-23)
 
 

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/lib/components/UTIcon/README.md

@@ -13,14 +13,17 @@ For a comprehensive list of available icons and their design specifications, ref
 
 ## Props
 
-| Name       | Type   | Default | Description                                             |
-| ---------- | ------ | ------- | ------------------------------------------------------- |
-| colorTheme | string | 'dark'  | The icon color, must be from the theme palette.         |
-| fillTheme  | string |         | The internal fill color must be from the theme palette. |
-| name       | string |         | The name of the icon from the Tabler Icons library.     |
-| shade      | string |         | The shade of the color theme to use.                    |
-| size       | number |         | The size of the icon.                                   |
-| style      | object |         | Custom styles to apply to the icon.                     |
+
+| Name       | Type    | Default   | Description                                                                                                                                         |
+| :----------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| area       | boolean | false     | Padding around the icon is added when it is true.                                                                                                   |
+| colorTheme | string  | 'dark'    | The icon color, must be from the theme palette.                                                                                                     |
+| fillTheme  | string  |           | The internal fill color must be from the theme palette.                                                                                             |
+| name       | string  |           | The name of the icon from the Tabler Icons library.                                                                                                 |
+| shade      | string  |           | The shade of the color theme to use.                                                                                                                |
+| size       | number  |           | The size of the icon.                                                                                                                               |
+| style      | object  |           | Custom styles to apply to the icon.                                                                                                                 |
+| variant    | string  | 'default' | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
 
 ## Icon Names
 
@@ -97,7 +100,7 @@ Clarifications:
 
 - Note that not all icons look good with an internal fill color.
 
-## Fill Shade  (opcional)
+## Fill Shade (optional)
 
 The `fillShade` prop must be one of these:
 

package/lib/components/UTIcon/index.js

@@ -1,13 +1,26 @@
 import React from 'react';
-import { number, object, oneOfType, string } from 'prop-types';
+import { bool, number, object, oneOfType, string } from 'prop-types';
+import { View } from 'react-native';
 import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
 
 import { ENERGY_ICONS } from './constants';
-import { getIconProps } from './utils';
+import { getIconProps, getVariantStyle } from './utils';
+import ownStyles from './styles';
 
-const UTIcon = ({ color, colorTheme = 'dark', fillShade, fillTheme, name, shade, size, style }) => {
+const UTIcon = ({
+  area,
+  color,
+  colorTheme = 'dark',
+  fillShade,
+  fillTheme,
+  name,
+  shade,
+  size,
+  style,
+  variant = 'default'
+}) => {
   const theme = useTheme();
 
   const IconComponent = ENERGY_ICONS[name] || TablerIcons[name];
@@ -25,10 +38,23 @@ const UTIcon = ({ color, colorTheme = 'dark', fillShade, fillTheme, name, shade,
     theme
   });
 
-  return <IconComponent {...iconProps} />;
+  return (
+    <View
+      style={
+        area && [
+          ownStyles.withArea,
+          ownStyles[`size${size}`],
+          getVariantStyle({ color: colorTheme || color, shade, theme, variant })
+        ]
+      }
+    >
+      <IconComponent {...iconProps} />
+    </View>
+  );
 };
 
 UTIcon.propTypes = {
+  area: bool,
   /**
    * @deprecated The "color" prop is deprecated and will be removed in a future release. Please use "colorTheme" instead.
    */
@@ -39,7 +65,8 @@ UTIcon.propTypes = {
   name: string,
   shade: string,
   size: oneOfType([number, string]),
-  style: object
+  style: object,
+  variant: string
 };
 
 export default UTIcon;

package/lib/components/UTIcon/styles.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+const paddingSmall = 2;
+const paddingMedium = 4;
+const paddingLarge = 10;
+const paddingXlarge = 12;
+const paddingXxlarge = 21;
+
+const generateSizeStyles = () => {
+  const sizes = [
+    { range: [0, 23], padding: paddingSmall },
+    { range: [24, 27], padding: paddingMedium },
+    { range: [28, 31], padding: paddingLarge },
+    { range: [32, 55], padding: paddingXlarge },
+    { range: [56, 100], padding: paddingXxlarge }
+  ];
+
+  return sizes.reduce((styles, { range, padding }) => {
+    const [start, end] = range;
+    const sizeStyles = Array.from({ length: end - start + 1 }, (_, i) => i + start).reduce(
+      (acc, size) => ({ ...acc, [`size${size}`]: { padding } }),
+      {}
+    );
+    return { ...styles, ...sizeStyles };
+  }, {});
+};
+
+export default StyleSheet.create({
+  withArea: {
+    backgroundColor: 'transparent',
+    borderRadius: 100
+  },
+  ...generateSizeStyles()
+});

package/lib/components/UTIcon/utils.js

@@ -4,15 +4,15 @@ import { retrieveColor } from './theme';
 export const isUTIcon = icon => typeof icon === 'string';
 
 export const getIconProps = ({
-  name,
-  theme,
   color,
   colorTheme,
-  shade,
-  fillTheme,
   fillShade,
+  fillTheme,
+  name,
+  shade,
   size,
-  style
+  style,
+  theme
 }) => {
   const themeColor = retrieveColor({ colorTheme: color || colorTheme, theme, shade });
   const filled = name.endsWith('Filled');
@@ -34,3 +34,27 @@ export const getIconProps = ({
     ...(isEnergyIcon || isBrandIcon ? customIconProps : defaultIconProps)
   };
 };
+
+export const getVariantStyle = ({ color, shade, theme, variant }) => {
+  const borderColor = retrieveColor({ colorTheme: color, theme, shade });
+
+  const defaultBackgrounds = {
+    accent: theme.Palette.actions?.accent['01'] || theme.Palette.accent['01'],
+    dark: theme.Palette.light['03'],
+    error: theme.Palette.error['01'],
+    gray: theme.Palette.light['03'],
+    information: theme.Palette.information['01'],
+    light: theme.Palette.light['03'],
+    negative: theme.Palette.actions?.negative['01'] || theme.Palette.negative['01'],
+    neutral: theme.Palette.actions?.neutral['01'] || theme.Palette.neutral['01'],
+    success: theme.Palette.success['01'],
+    warning: theme.Palette.warning['01']
+  };
+
+  const variantStyles = {
+    default: { backgroundColor: defaultBackgrounds[color] },
+    outlined: { borderColor, borderWidth: 2 }
+  };
+
+  return variantStyles[variant];
+};

package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js

@@ -81,7 +81,7 @@ const OutlinedInput = ({
                 : focused
                   ? 2
                   : disabled
-                    ? (themeStyles?.inactive?.disabledBorderWidth ?? 1)
+                    ? themeStyles?.inactive?.disabledBorderWidth ?? 1
                     : 1,
               borderColor: active ? activeColor : inactiveColor
             },

package/package.json

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