@widergy/mobile-ui 1.27.1 → 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/package.json

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

package/lib/components/MultipleFilePicker/components/Input/README.md

@@ -1,77 +0,0 @@
-# Input
-
-## Input
-
-Material Text Input with Title and Underline.
-
-### Props
-
-
-| NAME                                                                             | TYPE            | REQUIRED | DESCRIPTION                                                                                                                | DEFAULT VALUE              |
-| ---                                                                              | ---             | ---      | ---                                                                                                                        | ---                        |
-| [TextInput](https://facebook.github.io/react-native/docs/textinput#props) props. | TextInput props | No       |                                                                                                                            | -                          |
-| activeColor                                                                      | string          | No       | The color the input will have when active. If this prop is not specified, the color defaults to `theme.colors.primary`.    | -                          |
-| backgroundColor                                                                  | string          | No       | Background color for the input. Defaults to `theme.colors.inputBackground`.                                                | -                          |
-| caption                                                                          | string          | No       | Helper text to show below the input if no error is present.                                                                | -                          |
-| captionProps                                                                     | CaptionType     | No       | Additional props for caption.                                                                                              | -                          |
-| containerStyle                                                                   | ViewStyle       | No       | Style for the outer container of the input.                                                                                | -                          |
-| disabled                                                                         | bool            | No       | If `true` sets all styles to disabled and disables interactions with the input.                                            | -                          |
-| error                                                                            | string          | No       | Error to display instead of the caption. Also sets colors to the error color.                                              | -                          |
-| errorColor                                                                       | string          | No       | The color that errors will be displayed in. Defaults to `theme.colors.error`.                                              | -                          |
-| iconSize                                                                         | number          | No       | The size that applies to all icons.                                                                                        | DEFAULT ICON SIZE          |
-| inactiveColor                                                                    | string          | No       | The color the input will have when inactive. If this prop is not specified, the color defaults to `theme.fonts.fontColor`. | -                          |
-| inputRef                                                                         | func            | No       | A way to pass a `ref` from outside the component to the input.                                                             | -                          |
-| leadingIcon                                                                      | IconType        | No       | Icon to display on the left side.                                                                                          | -                          |
-| showEye                                                                          | bool            | No       | Show eye icon to show `secureTextEntry` text if that prop is enabled.                                                      | -                          |
-| textStyles                                                                       | TextStyle       | No       | Style for the input.                                                                                                       | -                          |
-| title                                                                            | string          | No       | Input title to show when the input is not active. Will float to the top once it is active.                                 | -                          |
-| trailingIcon                                                                     | IconButtonType  | No       | Icon button to display on the right side.                                                                                  | -                          |
-| underlineHeight                                                                  | number          | No       | The underline component height (reminder: underline is scaled twice as big when active).                                   | `portraitVerticalScale(1)` |
-| withValueColor                                                                   | string          | No       | The color of the title when it has values, but is not focused.                                                             | -                          |
-
-
-#### Example
-```js
-import React, { PureComponent } from 'react';
-import { Input } from '@widergy/mobile-ui';
-
-class InputShowcase extends PureComponent {
-  state = {
-    value: '',
-    error: ''
-  };
-
-  changeValue = value => this.setState({ value });
-
-  handleBlur = () => {
-    const { value } = this.state;
-    this.validate(value);
-  };
-
-  handleFocus = () => {
-    this.setState({ error: '' });
-  };
-
-  validate = text => {
-    const error =
-      text && text.length < 5 ? 'Debe tener más de 5 caracteres y este mensaje es de dos líneas' : '';
-
-    this.setState({ error });
-  };
-
-  render() {
-    return (
-      <Input
-        {...this.state}
-        {...this.props}
-        onBlur={this.handleBlur}
-        onFocus={this.handleFocus}
-        onChange={this.changeValue}
-        onSubmit={this.validate}
-        containerStyle={styles.input}
-      />
-    );
-  }
-}
-
-```

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/constants.js

@@ -1,2 +0,0 @@
-export const VISIBILITY = 'eye';
-export const VISIBILITY_OFF = 'eye-off';

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import UTButton from '../../../../../UTButton';
-
-import propTypes from './propTypes';
-import styles from './styles';
-
-const ShowPassword = ({ onShowPassword, passwordVisible }) => (
-  <View style={styles.container}>
-    <UTButton Icon={passwordVisible ? 'IconEye' : 'IconEyeOff'} onPress={onShowPassword} variant="text" />
-  </View>
-);
-
-ShowPassword.displayName = 'ShowPassword';
-
-ShowPassword.propTypes = propTypes;
-
-export default ShowPassword;

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/propTypes.js

@@ -1,8 +0,0 @@
-import { bool, func, number, string } from 'prop-types';
-
-export default {
-  color: string,
-  onShowPassword: func.isRequired,
-  passwordVisible: bool.isRequired,
-  size: number
-};

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/styles.js

@@ -1,11 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import { INPUT_ICON_MARGIN } from '../../styles';
-
-export default StyleSheet.create({
-  container: {
-    alignItems: 'flex-end',
-    flexDirection: 'row',
-    marginLeft: INPUT_ICON_MARGIN
-  }
-});