@widergy/mobile-ui 1.27.0 → 1.28.0

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/components/IconAdornment/utils.js

@@ -1,7 +1,6 @@
-export const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) => {
-  return changeOnError && error
+export const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) =>
+  changeOnError && error
     ? { colorTheme: 'error', shade: '04' }
     : changeOnFocus && focused
       ? { colorTheme: 'accent', shade: '04' }
       : { colorTheme: colorTheme || 'gray', shade };
-};

package/lib/components/UTCheckBox/constants.js

@@ -5,3 +5,5 @@ export const SPACING = {
   SMALL: 'small',
   LARGE: 'large'
 };
+
+export const BUTTON_VARIANT = 'button';

package/lib/components/UTCheckBox/index.js

@@ -5,23 +5,24 @@ import { useTheme } from '../../theming';
 import UTFieldLabel from '../UTFieldLabel';
 import UTIcon from '../UTIcon';
 
-import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
 import { propTypes, defaultProps } from './proptypes';
 import { retrieveStyle } from './theme';
 import styles from './styles';
 
 const UTCheckBox = ({
-  checked,
+  value,
+  onChange,
   disabled,
   indeterminate,
   isSimple,
-  onPress,
   required,
   reversed,
   spacing,
   style,
   title,
-  variant
+  variant,
+  withMarkdown
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
@@ -29,7 +30,7 @@ const UTCheckBox = ({
   const { containerStyles, iconContainerStyles, boxStyles, pressableStyles, titleStyles } = useMemo(
     () =>
       retrieveStyle({
-        checked,
+        checked: value,
         disabled,
         indeterminate,
         pressed,
@@ -39,33 +40,36 @@ const UTCheckBox = ({
         theme,
         variant
       }),
-    [checked, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
+    [value, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
   );
 
   const iconName = useMemo(
-    () => (indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : ''),
-    [indeterminate, checked]
+    () => (indeterminate ? INDETERMINATE_ICON : value ? CHECKED_ICON : ''),
+    [indeterminate, value]
   );
 
   const handlePressIn = useCallback(() => setPressed(true), []);
   const handlePressOut = useCallback(() => setPressed(false), []);
 
+  const handlePress = useCallback(() => {
+    if (!disabled && onChange) {
+      onChange(!value);
+    }
+  }, [disabled, onChange, value]);
+
+  const shouldHighlightLabel = value && variant === BUTTON_VARIANT;
+
   return (
     <Pressable
       style={pressableStyles}
       disabled={disabled}
-      onPress={onPress}
+      onPress={handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
     >
       <View style={containerStyles}>
         {isSimple ? (
-          <UTIcon
-            name="IconCheck"
-            shade="04"
-            colorTheme="accent"
-            style={checked ? undefined : styles.hidden}
-          />
+          <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={value ? undefined : styles.hidden} />
         ) : (
           <View style={boxStyles}>
             <View style={iconContainerStyles}>
@@ -73,7 +77,12 @@ const UTCheckBox = ({
             </View>
           </View>
         )}
-        <UTFieldLabel colorTheme={checked ? 'accent' : 'dark'} required={required} style={titleStyles}>
+        <UTFieldLabel
+          colorTheme={shouldHighlightLabel ? 'accent' : 'dark'}
+          required={required}
+          style={titleStyles}
+          withMarkdown={withMarkdown}
+        >
           {title}
         </UTFieldLabel>
       </View>

package/lib/components/UTCheckBox/theme.js

@@ -1,6 +1,4 @@
-import { BUTTON_VARIANT } from '../UTCheckList/constants';
-
-import { SPACING } from './constants';
+import { BUTTON_VARIANT, SPACING } from './constants';
 
 const NORMAL_SPACING = 16;
 const SMALL_SPACING = 8;

package/lib/components/UTCheckList/constants.js

@@ -2,5 +2,3 @@ export const SPACING = {
   SMALL: 'small',
   LARGE: 'large'
 };
-
-export const BUTTON_VARIANT = 'button';