@widergy/mobile-ui 1.29.5 → 1.30.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.30.1](https://github.com/widergy/mobile-ui/compare/v1.30.0...v1.30.1) (2024-11-01)
+
+
+### Bug Fixes
+
+* [EVE-4316] attachment list fix ([055a2c5](https://github.com/widergy/mobile-ui/commit/055a2c508c266b763777d8c13a13f6d8f07265ab))
+
+# [1.30.0](https://github.com/widergy/mobile-ui/compare/v1.29.5...v1.30.0) (2024-10-30)
+
+
+### Features
+
+* [UG-2034] new icons ([#381](https://github.com/widergy/mobile-ui/issues/381)) ([d0e9ce2](https://github.com/widergy/mobile-ui/commit/d0e9ce2f2379253bb1b2f79c193478312e1d1cc0))
+
 ## [1.29.5](https://github.com/widergy/mobile-ui/compare/v1.29.4...v1.29.5) (2024-10-29)
 
 

package/lib/components/MultipleFilePicker/index.js

@@ -13,7 +13,13 @@ import UTBottomSheet from '../UTBottomSheet';
 import UTButton from '../UTButton';
 
 import { DEFAULT_MAX_SIZE } from './constants';
-import { getInitialValuesFrom, isFileFormatInvalid, isFileSizeInvaid, isFileTypeInvalid } from './utils';
+import {
+  getDocumentPickerType,
+  getInitialValuesFrom,
+  isFileFormatInvalid,
+  isFileSizeInvaid,
+  isFileTypeInvalid
+} from './utils';
 import filePickerPropTypes from './propTypes';
 import Picker from './components/Picker';
 import styles from './styles';
@@ -70,7 +76,7 @@ const MultipleFilePicker = ({
   const onPickFiles = async () => {
     const documents = await DocumentPicker.pick({
       allowMultiSelection: true,
-      type: allowedTypes ?? DocumentPicker.types.allFiles
+      type: isEmpty(allowedTypes) ? DocumentPicker.types.allFiles : allowedTypes.map(getDocumentPickerType)
     });
 
     if (uploadedFiles.length + documents.length > maxFiles)

package/lib/components/MultipleFilePicker/utils.js

@@ -1,5 +1,44 @@
-import { PDFDocument } from 'pdf-lib';
 import { isEmpty } from 'lodash';
+import { PDFDocument } from 'pdf-lib';
+// eslint-disable-next-line import/no-unresolved
+import DocumentPicker from 'react-native-document-picker';
+
+const mimeTypes = {
+  allFiles: '*/*',
+  audio: 'audio/*',
+  csv: 'text/csv',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  images: 'image/*',
+  json: 'application/json',
+  pdf: 'application/pdf',
+  plainText: 'text/plain',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  video: 'video/*',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/zip'
+};
+
+const extensions = {
+  allFiles: '*',
+  audio:
+    '.3g2 .3gp .aac .adt .adts .aif .aifc .aiff .asf .au .m3u .m4a .m4b .mid .midi .mp2 .mp3 .rmi .snd .wav .wax .wma',
+  csv: '.csv',
+  doc: '.doc',
+  docx: '.docx',
+  images: '.jpeg .jpg .png .gif .bmp .svg .heic .heif',
+  json: '.json',
+  pdf: '.pdf',
+  plainText: '.txt',
+  ppt: '.ppt',
+  pptx: '.pptx',
+  video: '.mp4 .avi .mov .wmv',
+  xls: '.xls',
+  xlsx: '.xlsx',
+  zip: '.zip .gz'
+};
 
 const lengthMatches = (length1, length2, toleranceInPercentage) => {
   const delta = length1 * (toleranceInPercentage / 100);
@@ -39,11 +78,19 @@ const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
   });
 };
 
+export const getFileType = extension =>
+  Object.entries(extensions).find(([, value]) => value.includes(extension))[0];
+
+export const getMimeType = extension => {
+  const fileType = getFileType(extension);
+  const mimeType = mimeTypes[fileType];
+  return mimeType.replace('*', extension.replace(/\./g, ''));
+};
+
+export const getDocumentPickerType = extension => DocumentPicker.types[getFileType(extension)];
+
 export const isFileTypeInvalid = (document, allowedTypes, fileTypeError, onError) => {
-  const isInvalid = !(
-    allowedTypes.includes(document.type) ||
-    (document.type.includes('image') && allowedTypes.includes('image/*'))
-  );
+  const isInvalid = !allowedTypes.map(getMimeType).includes(document.type);
   if (isInvalid) onError(fileTypeError || 'Tipo de archivo inválido.');
   return isInvalid;
 };

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCarbonFootprint.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 26 26" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="2">
+<path d="M21.7202 15.1902C20.9202 18.3602 16.5302 20.2802 13.0702 20.0602C12.4102 19.3902 10.1702 16.7202 11.0102 13.2802C11.9902 9.26018 18.0102 7.71018 20.9302 5.86018C21.5502 5.47018 22.7302 11.2102 21.7202 15.1902Z" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5201 11.1602C14.9501 12.3102 12.5401 16.1902 13.0701 20.0602" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.41028 19.3202C6.36028 18.5002 4.63028 17.0602 4.16028 15.1902C3.15028 11.2102 4.33028 5.47018 4.95028 5.86018" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.9502 5.86035C6.2902 6.71035 8.2702 7.49035 10.1302 8.48035" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconConsumption.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 49 48" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6446 0.828056C18.3112 0.828056 18.0179 1.04806 17.9246 1.36806L10.0769 28.2743C10.0108 28.501
+10.0552 28.7455 10.1969 28.9343C10.3385 29.1232 10.5608 29.2343 10.7969 29.2343H21.1583L19.0214 46.3288C18.9783 46.674 19.1781 47.0035 19.5041
+47.1248C19.8301 47.2461 20.1967 47.1273 20.3897 46.8379L38.3272 19.9316C38.4806 19.7015 38.4949 19.4056 38.3644 19.1617C38.2339 18.9178 37.9798
+18.7656 37.7032 18.7656H27.5745L33.921 1.8414C34.0074 1.61108 33.9753 1.35304 33.8352 1.15086C33.6951 0.948679 33.4648 0.828056 33.2188
+0.828056H18.6446Z" stroke="currentColor"/>
+</svg>

package/lib/components/UTIcon/constants.js

@@ -1,11 +1,26 @@
 import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
 
+import BrandIconAmex from './components/EnergyIcons/BrandIconAmex.svg';
+import BrandIconBancoEstado from './components/EnergyIcons/BrandIconBancoEstado.svg';
+import BrandIconDiners from './components/EnergyIcons/BrandIconDiners.svg';
+import BrandIconMacro from './components/EnergyIcons/BrandIconMacro.svg';
+import BrandIconMagna from './components/EnergyIcons/BrandIconMagna.svg';
+import BrandIconMasterCard from './components/EnergyIcons/BrandIconMasterCard.svg';
+import BrandIconMercadoPago from './components/EnergyIcons/BrandIconMercadoPago.svg';
+import BrandIconPlusPago from './components/EnergyIcons/BrandIconPlusPago.svg';
+import BrandIconRedcompra from './components/EnergyIcons/BrandIconRedcompra.svg';
+import BrandIconTapp from './components/EnergyIcons/BrandIconTapp.svg';
+import BrandIconTbk from './components/EnergyIcons/BrandIconTbk.svg';
+import BrandIconVisa from './components/EnergyIcons/BrandIconVisa.svg';
+import BrandIconWebpayOneClick from './components/EnergyIcons/BrandIconWebpayOneClick.svg';
 import EnergyIconArrowBack from './components/EnergyIcons/EnergyIconArrowBack.svg';
 import EnergyIconCamera from './components/EnergyIcons/EnergyIconCamera.svg';
 import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
+import EnergyIconCarbonFootprint from './components/EnergyIcons/EnergyIconCarbonFootprint.svg';
 import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
 import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
 import EnergyIconCheckCircle from './components/EnergyIcons/EnergyIconCheckCircle.svg';
+import EnergyIconConsumption from './components/EnergyIcons/EnergyIconConsumption.svg';
 import EnergyIconDelete from './components/EnergyIcons/EnergyIconDelete.svg';
 import EnergyIconDeleteOutline from './components/EnergyIcons/EnergyIconDeleteOutline.svg';
 import EnergyIconDeleteVariant from './components/EnergyIcons/EnergyIconDeleteVariant.svg';
@@ -20,19 +35,6 @@ import EnergyIconMyLocation from './components/EnergyIcons/EnergyIconMyLocation.
 import EnergyIconSettings from './components/EnergyIcons/EnergyIconSettings.svg';
 import EnergyIconShare from './components/EnergyIcons/EnergyIconShare.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
-import BrandIconAmex from './components/EnergyIcons/BrandIconAmex.svg';
-import BrandIconBancoEstado from './components/EnergyIcons/BrandIconBancoEstado.svg';
-import BrandIconDiners from './components/EnergyIcons/BrandIconDiners.svg';
-import BrandIconMacro from './components/EnergyIcons/BrandIconMacro.svg';
-import BrandIconMagna from './components/EnergyIcons/BrandIconMagna.svg';
-import BrandIconMasterCard from './components/EnergyIcons/BrandIconMasterCard.svg';
-import BrandIconMercadoPago from './components/EnergyIcons/BrandIconMercadoPago.svg';
-import BrandIconPlusPago from './components/EnergyIcons/BrandIconPlusPago.svg';
-import BrandIconRedcompra from './components/EnergyIcons/BrandIconRedcompra.svg';
-import BrandIconTapp from './components/EnergyIcons/BrandIconTapp.svg';
-import BrandIconTbk from './components/EnergyIcons/BrandIconTbk.svg';
-import BrandIconVisa from './components/EnergyIcons/BrandIconVisa.svg';
-import BrandIconWebpayOneClick from './components/EnergyIcons/BrandIconWebpayOneClick.svg';
 
 export const DEFAULT_PROPS = {
   color: COLOR_THEMES.dark
@@ -41,12 +43,27 @@ export const DEFAULT_PROPS = {
 export const DEFAULT_INTERNAL_SHADE = COLOR_SHADES.shade02;
 
 export const ENERGY_ICONS = {
+  BrandIconAmex,
+  BrandIconBancoEstado,
+  BrandIconDiners,
+  BrandIconMacro,
+  BrandIconMagna,
+  BrandIconMasterCard,
+  BrandIconMercadoPago,
+  BrandIconPlusPago,
+  BrandIconRedcompra,
+  BrandIconTapp,
+  BrandIconTbk,
+  BrandIconVisa,
+  BrandIconWebpayOneClick,
   EnergyIconArrowBack,
   EnergyIconCamera,
   EnergyIconCar,
+  EnergyIconCarbonFootprint,
   EnergyIconCart,
   EnergyIconChartPie,
   EnergyIconCheckCircle,
+  EnergyIconConsumption,
   EnergyIconDelete,
   EnergyIconDeleteOutline,
   EnergyIconDeleteVariant,
@@ -60,18 +77,5 @@ export const ENERGY_ICONS = {
   EnergyIconMyLocation,
   EnergyIconSettings,
   EnergyIconShare,
-  EnergyIconTruck,
-  BrandIconAmex,
-  BrandIconBancoEstado,
-  BrandIconDiners,
-  BrandIconMacro,
-  BrandIconMagna,
-  BrandIconMasterCard,
-  BrandIconMercadoPago,
-  BrandIconPlusPago,
-  BrandIconRedcompra,
-  BrandIconTapp,
-  BrandIconTbk,
-  BrandIconVisa,
-  BrandIconWebpayOneClick
+  EnergyIconTruck
 };

package/lib/components/UTIcon/index.js

@@ -15,6 +15,7 @@ const UTIcon = ({
   colorTheme = 'dark',
   fillShade,
   fillTheme,
+  iconStyles,
   name,
   shade,
   size,
@@ -31,6 +32,7 @@ const UTIcon = ({
     colorTheme,
     fillShade,
     fillTheme,
+    iconStyles,
     name,
     shade,
     size,
@@ -62,6 +64,7 @@ UTIcon.propTypes = {
   colorTheme: string,
   fillShade: string,
   fillTheme: string,
+  iconStyles: object,
   name: string,
   shade: string,
   size: oneOfType([number, string]),

package/lib/components/UTIcon/utils.js

@@ -3,7 +3,17 @@ import { retrieveColor } from './theme';
 
 export const isUTIcon = icon => typeof icon === 'string';
 
-export const getIconProps = ({ color, colorTheme, fillShade, fillTheme, name, shade, size, theme }) => {
+export const getIconProps = ({
+  color,
+  colorTheme,
+  fillShade,
+  fillTheme,
+  iconStyles,
+  name,
+  shade,
+  size,
+  theme
+}) => {
   const themeColor = retrieveColor({ colorTheme: color || colorTheme, theme, shade });
   const filled = name.endsWith('Filled');
   const isEnergyIcon = name.startsWith('Energy');
@@ -19,7 +29,7 @@ export const getIconProps = ({ color, colorTheme, fillShade, fillTheme, name, sh
   };
 
   return {
-    style: [filled && { color: themeColor }],
+    style: [filled && { color: themeColor }, iconStyles],
     ...(internalFill && { fill: internalFill }),
     ...(isEnergyIcon || isBrandIcon ? customIconProps : defaultIconProps)
   };

package/package.json

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