@widergy/mobile-ui 1.27.1 → 1.28.1

package/lib/components/MultipleFilePicker/index.js

@@ -1,168 +1,217 @@
-import React, { Component } from 'react';
-import { View } from 'react-native';
+import { isArray, isEmpty } from 'lodash';
+// eslint-disable-next-line import/no-unresolved
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+// eslint-disable-next-line react-native/split-platform-components
+import { View, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import DocumentPicker from 'react-native-document-picker';
-import { isArray, isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
 
+import { IS_IOS } from '../../utils/platformUtils/constants';
 import { retrieveFile, blobToFile } from '../../utils/fileUtils.js';
+import UTBottomSheet from '../UTBottomSheet';
+import UTButton from '../UTButton';
 
-import Picker from './components/Picker';
-import UploadedFiles from './components/UploadedFiles';
-import { UPLOAD_ICON, DEFAULT_MAX_SIZE } from './constants';
+import { DEFAULT_MAX_SIZE } from './constants';
+import { getInitialValuesFrom, isFileFormatInvalid, isFileSizeInvaid, isFileTypeInvalid } from './utils';
 import filePickerPropTypes from './propTypes';
-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: 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,
-      maxFileByteSize,
-      maxFiles,
-      minFiles,
-      avoidRetrieveFile,
-      fileTypeError,
-      allowedPDFUploadSizes,
-      pdfFormatError
-    } = this.props;
-    try {
-      const documents = await DocumentPicker.pick({
-        allowMultiSelection: true,
-        type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
-      });
-      const { uploadedFiles } = this.state;
-
-      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;
+import Picker from './components/Picker';
+import styles from './styles';
+
+const MultipleFilePicker = ({
+  allowedPDFUploadSizes,
+  allowedTypes,
+  disabled,
+  enabledInputs: { camera, files, gallery } = { files: true },
+  error,
+  filePlaceholder,
+  fileTypeError,
+  helpText,
+  maxFileByteSize = DEFAULT_MAX_SIZE,
+  maxFiles,
+  onChange,
+  onError: onError_,
+  onMaxSizeError: onMaxSizeError_,
+  pickerText,
+  style,
+  title,
+  value
+}) => {
+  const { files: values } = value || {};
+
+  const [newFile, setNewFile] = useState(null);
+  const [uploadedFiles, setUploadedFiles] = useState(isArray(values) ? getInitialValuesFrom(values) : []);
+  const [rawFiles, setRawFiles] = useState(isArray(values) ? values : []);
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const closeDrawer = () => setIsDrawerOpen(false);
+
+  const onError = errorMsg => {
+    onError_(errorMsg);
+    closeDrawer();
+  };
 
-            const file =
-              !avoidRetrieveFile && (await retrieveFile(document.uri, document.type, document.name));
+  const onMaxSizeError = () => {
+    onMaxSizeError_(maxFileByteSize);
+    closeDrawer();
+  };
 
-            await validateFileFormat(file, document, allowedPDFUploadSizes, pdfFormatError);
+  useEffect(() => {
+    onChange?.(isEmpty(rawFiles) ? null : { files: rawFiles });
+  }, [rawFiles]);
 
-            const fileToUpload = avoidRetrieveFile ? { document } : { file: blobToFile(file, document.type) };
+  useEffect(() => {
+    if (newFile) {
+      setUploadedFiles([...uploadedFiles, newFile.uploadFile]);
+      setRawFiles([...rawFiles, newFile.rawFile]);
+    }
+  }, [newFile]);
+
+  const onPickFiles = async () => {
+    const documents = await DocumentPicker.pick({
+      allowMultiSelection: true,
+      type: allowedTypes ?? DocumentPicker.types.allFiles
+    });
+
+    if (uploadedFiles.length + documents.length > maxFiles)
+      onError('La cantidad de archivos supera al máximo permitido');
+    else {
+      closeDrawer();
+      documents.forEach(async document => {
+        if (!uploadedFiles.some(({ name }) => name === document.name)) {
+          if (isFileTypeInvalid(document, allowedTypes, fileTypeError, onError)) return;
+          if (isFileSizeInvaid(document, maxFileByteSize, onMaxSizeError)) return;
+          const file = await retrieveFile(document.uri, document.type, document.name);
+          if (await isFileFormatInvalid(file, allowedPDFUploadSizes, onError)) return;
+          setNewFile({
+            uploadFile: { name: document.name, size: document.size },
+            rawFile: blobToFile(file, document.type)
+          });
+        }
+      });
+    }
+  };
 
-            this.setState(prevState => ({
-              uploadedFiles: [...prevState.uploadedFiles, { name: document.name, size: document.size }],
-              rawFiles: [...prevState.rawFiles, fileToUpload]
-            }));
-          }
-        })
-      );
+  // eslint-disable-next-line consistent-return
+  const requestPermissionCamera = async () => {
+    try {
+      const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
+      return granted === PermissionsAndroid.RESULTS.GRANTED
+        ? launchCamera
+        : { errorCode: 'Son necesarios permisos para utilizar la cámara' };
     } catch (err) {
-      if (!DocumentPicker.isCancel(err)) {
-        onError(err.message);
-      }
+      onError(err.message);
     }
   };
 
-  handleDeleteFile = index => {
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(null);
+  const handleShowImagePicker = sourceImage => {
+    if (sourceImage?.errorCode) {
+      onError(sourceImage.errorCode);
+      return;
     }
-    this.setState(prevState => ({
-      uploadedFiles: prevState.uploadedFiles.filter((a, i) => i !== index),
-      rawFiles: prevState.rawFiles.filter((a, i) => i !== index)
-    }));
+    sourceImage(
+      {
+        mediaType: 'photo',
+        selectionLimit: Math.max(maxFiles - uploadedFiles.length, 0)
+      },
+      async response => {
+        if (response.didCancel) return;
+
+        if (response.errorCode) {
+          onError(response.errorCode);
+          return;
+        }
+        closeDrawer();
+        response.assets.forEach(async asset => {
+          const file = await retrieveFile(asset.uri, asset.type);
+          if (!file) {
+            onError(response.errorCode);
+            return;
+          }
+          if (isFileTypeInvalid(file, allowedTypes, fileTypeError, onError)) return;
+          if (isFileSizeInvaid(file, maxFileByteSize, onMaxSizeError)) return;
+
+          setNewFile({
+            uploadFile: { name: file.data.name, size: file.data.size },
+            rawFile: blobToFile(file, asset.type)
+          });
+        });
+      }
+    );
   };
 
-  render() {
-    const {
-      error,
-      title,
-      filePlaceholder,
-      style,
-      withMarkdownTitle,
-      markdownStyles,
-      disabled,
-      helpText,
-      pickerText,
-      UploadIcon
-    } = this.props;
-    const { uploadedFiles } = this.state;
-
-    return uploadedFiles.length !== 0 ? (
-      <View style={style}>
-        <UploadedFiles
-          icon={UPLOAD_ICON}
-          error={error}
-          onAdd={this.handleShowPicker}
-          onDelete={this.handleDeleteFile}
-          uploadedFiles={uploadedFiles}
-          filePlaceholder={filePlaceholder}
-          title={title}
-          withMarkdownTitle={withMarkdownTitle}
-          markdownStyles={markdownStyles}
-          disabled={disabled}
-          pickerText={pickerText}
-          helpText={helpText}
-        />
-      </View>
-    ) : (
-      <View style={style}>
-        <Picker
-          icon={UPLOAD_ICON}
-          error={error}
-          onAdd={this.handleShowPicker}
-          onDelete={this.handleDeleteFile}
-          uploadedFiles={uploadedFiles}
-          filePlaceholder={filePlaceholder}
-          title={title}
-          withMarkdownTitle={withMarkdownTitle}
-          markdownStyles={markdownStyles}
-          disabled={disabled}
-          pickerText={pickerText}
-          helpText={helpText}
-          UploadIcon={UploadIcon}
-        />
-      </View>
-    );
-  }
-}
+  const onPickCamera = async () =>
+    handleShowImagePicker(IS_IOS ? launchCamera : await requestPermissionCamera());
+
+  const onPickGallery = () => handleShowImagePicker(launchImageLibrary);
+
+  const handleDeleteFile = index => {
+    onChange?.(null);
+    setUploadedFiles(uploadedFiles.filter((_, i) => i !== index));
+    setRawFiles(rawFiles.filter((_, i) => i !== index));
+  };
+
+  const onAdd = () => {
+    if (Boolean(camera) + Boolean(files) + Boolean(gallery) > 1) setIsDrawerOpen(true);
+    else if (camera) onPickCamera();
+    else if (files) onPickFiles();
+    else if (gallery) onPickGallery();
+  };
 
-MultipleFilePicker.defaultProps = {
-  maxFileByteSize: DEFAULT_MAX_SIZE
+  return (
+    <View style={style}>
+      <Picker
+        disabled={disabled}
+        error={error}
+        filePlaceholder={filePlaceholder}
+        helpText={helpText}
+        maxFiles={maxFiles}
+        onAdd={onAdd}
+        onDelete={handleDeleteFile}
+        pickerText={pickerText}
+        title={title}
+        uploadedFiles={uploadedFiles}
+      />
+      <UTBottomSheet onClose={closeDrawer} visible={isDrawerOpen}>
+        <View style={styles.actions}>
+          {[
+            {
+              Icon: 'IconCamera',
+              onPress: onPickCamera,
+              show: camera,
+              text: 'Cámara'
+            },
+            {
+              Icon: 'IconPhoto',
+              onPress: onPickGallery,
+              show: gallery,
+              text: 'Fotos'
+            },
+            {
+              Icon: 'IconFileArrowRight',
+              onPress: onPickFiles,
+              show: files,
+              text: 'Archivos'
+            }
+          ].map(
+            ({ Icon, onPress, show, text }) =>
+              show && (
+                <UTButton
+                  colorTheme="secondary"
+                  Icon={Icon}
+                  key={text}
+                  onPress={onPress}
+                  size="large"
+                  variant="shadow"
+                >
+                  {text}
+                </UTButton>
+              )
+          )}
+        </View>
+      </UTBottomSheet>
+    </View>
+  );
 };
 
 MultipleFilePicker.propTypes = filePickerPropTypes;

package/lib/components/MultipleFilePicker/propTypes.js

@@ -1,17 +1,21 @@
-import { oneOfType, string, bool, func, number, arrayOf, shape } from 'prop-types';
+import { string, bool, func, number, array, object } from 'prop-types';
 
 export default {
-  error: oneOfType([string, bool]),
-  onChange: func,
-  allowedTypes: arrayOf(string),
+  allowedPDFUploadSizes: array,
+  allowedTypes: array,
+  disabled: bool,
+  enabledInputs: object,
+  error: string,
   filePlaceholder: string,
-  title: string,
-  onMaxSizeError: func,
+  fileTypeError: string,
+  helpText: string,
   maxFileByteSize: number,
+  maxFiles: number,
+  onChange: func,
   onError: func,
-  fileTypeError: string,
-  allowedPDFUploadSizes: arrayOf(
-    shape({ name: string, heightInPt: number, widthInPt: number, tolerance: number })
-  ),
-  disabled: bool
+  onMaxSizeError: func,
+  pickerText: string,
+  style: object,
+  title: string,
+  value: object
 };

package/lib/components/MultipleFilePicker/styles.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  actions: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8
+  }
+});

package/lib/components/MultipleFilePicker/utils.js

@@ -1,10 +1,6 @@
 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');
-
 const lengthMatches = (length1, length2, toleranceInPercentage) => {
   const delta = length1 * (toleranceInPercentage / 100);
   return Math.abs(length1 - length2) < delta;
@@ -32,7 +28,7 @@ const blobToBase64 = blob =>
     reader.readAsDataURL(blob);
   });
 
-export const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
+const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
   const base64 = await blobToBase64(file);
   const pdf = await PDFDocument.load(base64);
   const pages = pdf.getPages();
@@ -43,58 +39,33 @@ export const pdfAspectRatioValidation = async (file, 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 isFileTypeInvalid = (document, allowedTypes, fileTypeError, onError) => {
+  const isInvalid = !(
+    allowedTypes.includes(document.type) ||
+    (document.type.includes('image') && allowedTypes.includes('image/*'))
+  );
+  if (isInvalid) onError(fileTypeError || 'Tipo de archivo inválido.');
+  return isInvalid;
 };
 
-export const isInvalidFileSize = (document, maxFileByteSize, onMaxSizeError) => {
+export const isFileSizeInvaid = (document, maxFileByteSize, onError) => {
   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}`);
-    }
-  }
+  if (isInvalid) onError(`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 isFileFormatInvalid = async (file, allowedPDFUploadSizes, onError) => {
+  const isInvalid =
+    file.type.includes('pdf') &&
+    !isEmpty(allowedPDFUploadSizes) &&
+    (await pdfAspectRatioValidation(file, allowedPDFUploadSizes));
+  if (isInvalid)
+    onError(
+      `El formato de archivo es inválido. (Válidos: ${allowedPDFUploadSizes
+        ?.map(aspectRatio => aspectRatio.name)
+        .join(' - ')})`
+    );
+  return isInvalid;
 };
 
 export const getInitialValuesFrom = files =>

package/lib/components/UTBaseInputField/index.js

@@ -17,7 +17,7 @@ import UTLabel from '../UTLabel';
 import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
 import { defaultProps, propTypes } from './proptypes';
 import { getPropsByType } from './utils';
-import { LINE_HEIGHT, retrieveStyle } from './theme';
+import { CONTAINER, LINE_HEIGHT, retrieveStyle } from './theme';
 
 const UTBaseInputField = forwardRef(
   (
@@ -170,7 +170,8 @@ const UTBaseInputField = forwardRef(
     const minHeight =
       containerStyle.borderWidth * 2 +
       containerStyle.paddingVertical * 2 +
-      (inputStyle.lineHeight || LINE_HEIGHT) * maxRows;
+      (inputStyle.lineHeight || LINE_HEIGHT) * maxRows +
+      (maxLength && showCharacterCount ? LINE_HEIGHT + CONTAINER.ROW_GAP : 0);
 
     return (
       <View style={[containerStyle, { minHeight }]}>
@@ -179,6 +180,7 @@ const UTBaseInputField = forwardRef(
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
+            cursorColor={inputStyle.cursorColor}
             defaultValue={value}
             editable={!disabled && !readOnly && editable}
             id={id ? `${id}` : undefined}

package/lib/components/UTBaseInputField/theme.js

@@ -4,7 +4,7 @@ import { SIZES, VARIANT } from './constants';
 
 export const LINE_HEIGHT = 22;
 
-const CONTAINER = {
+export const CONTAINER = {
   PADDING: {
     HORIZONTAL: 16,
     VERTICAL: 12
@@ -37,9 +37,10 @@ const COLORS = {
     READ_ONLY: 'transparent'
   },
   TEXT: {
+    CURSOR: theme => theme.Palette.accent['04'],
     INPUT: theme => theme.Palette.dark['05'],
     PLACEHOLDER: theme => theme.Palette.gray['02'],
-    SELECTION: theme => theme.Palette.accent['04']
+    SELECTION: theme => theme.Palette.accent['02']
   }
 };
 
@@ -75,6 +76,7 @@ const baseTextInputTheme = theme => ({
       textAlignVertical: 'center',
       zIndex: 4
     },
+    cursorColor: COLORS.TEXT.CURSOR(theme),
     placeholderTextColor: COLORS.TEXT.PLACEHOLDER(theme),
     selectionColor: COLORS.TEXT.SELECTION(theme)
   },
@@ -117,8 +119,8 @@ const conditionalContainerStyle = (disabled, error, focused, inputSize, readOnly
     borderColor: COLORS.BORDER.READ_ONLY
   }),
   ...(inputSize === SIZES.SMALL && {
-    paddingHorizontal: SMALL_INPUT_PADDING.HORIZONTAL,
-    paddingVertical: SMALL_INPUT_PADDING.VERTICAL
+    paddingHorizontal: SMALL_INPUT_PADDING.HORIZONTAL - (focused ? 1 : 0),
+    paddingVertical: SMALL_INPUT_PADDING.VERTICAL - (focused ? 1 : 0)
   })
 });
 
@@ -155,6 +157,7 @@ export const retrieveStyle = ({
       ...conditionalInputStyle(maxRows, multiline),
       ...style.input
     },
+    cursorColor: baseTheme.input.cursorColor,
     placeholderTextColor: baseTheme.input.placeholderTextColor,
     selectionColor: baseTheme.input.selectionColor
   };

package/package.json

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