@widergy/mobile-ui 1.6.0 → 1.7.0

package/lib/components/MultipleFilePicker/components/UploadedFiles/styles.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+
+import { portraitHorizontalScale, portraitVerticalScale } from '../../../../utils/portraitScalingUtils';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  containerInput: {
+    height: '100%',
+    width: '100%'
+  },
+  containerStyle: {
+    flex: 1,
+    shadowColor: '#E4E6EA',
+    elevation: 4
+  },
+  containerButtonPadding: {
+    padding: portraitHorizontalScale(65)
+  },
+  containerPadding: {
+    padding: portraitHorizontalScale(18)
+  },
+  fieldInput: {
+    borderRadius: 5,
+    borderStyle: 'dashed',
+    borderWidth: 1,
+    flex: 1,
+    height: 'auto',
+    paddingBottom: portraitVerticalScale(24),
+    paddingTop: portraitVerticalScale(16),
+    width: '100%',
+    marginVertical: 10
+  },
+  helpText: {
+    textAlign: 'center',
+    marginBottom: 10
+  },
+  pickerText: {
+    textAlign: 'center'
+  },
+  textStyles: {
+    marginLeft: 5,
+    marginTop: 16
+  },
+  textButtonStyles: {
+    flex: 1,
+    padding: 0,
+    textAlignVertical: 'center',
+    margin: 15
+  },
+  touchable: {
+    borderRadius: 4,
+    paddingHorizontal: portraitHorizontalScale(12),
+    height: 80,
+    width: '100%'
+  },
+  uploadTouchable: {
+    borderRadius: 4,
+    marginHorizontal: 16,
+    marginVertical: 10,
+    height: 38,
+    width: '90%'
+  }
+});

package/lib/components/MultipleFilePicker/components/UploadedFiles/utils.js

@@ -0,0 +1,6 @@
+export const bytesFormater = bytes => {
+  const lista = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) return '0 Byte';
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+  return `${Math.round(bytes / 1024 ** i, 2)} ${lista[i]}`;
+};

package/lib/components/MultipleFilePicker/constants.js

@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-unresolved
+import DocumentPicker from 'react-native-document-picker';
+
+import { MEGABYTE } from '../../utils/fileUtils.js';
+
+export const FILE_UPLOAD_ICON = 'file-upload';
+
+export const UPLOAD_ICON = 'upload';
+
+export const CHECK_ICON = 'check';
+
+export const TRASH_ICON = 'trash-2';
+
+export const TYPE_ICON = 'feather';
+
+export const DEFAULT_ALLOWED_TYPES = [DocumentPicker.types.allFiles];
+
+export const DEFAULT_MAX_SIZE = 10 * MEGABYTE;

package/lib/components/MultipleFilePicker/index.js

@@ -0,0 +1,162 @@
+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 { retrieveFile, isImageByUri, 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';
+
+class MultipleFilePicker extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      uploadedFiles: []
+    };
+  }
+
+  handleShowPicker = async () => {
+    const {
+      allowedTypes,
+      onMaxSizeError,
+      onError,
+      onChange,
+      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;
+
+      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(' - ')})`
+            );
+          }
+        }
+
+        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);
+      }
+    }
+  };
+
+  handleDeleteFile = index => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(null);
+    }
+    this.setState(prevState => ({
+      uploadedFiles: prevState.uploadedFiles.filter((a, i) => i !== index)
+    }));
+  };
+
+  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>
+    );
+  }
+}
+
+MultipleFilePicker.defaultProps = {
+  maxFileByteSize: DEFAULT_MAX_SIZE
+};
+
+MultipleFilePicker.propTypes = filePickerPropTypes;
+
+export default MultipleFilePicker;

package/lib/components/MultipleFilePicker/propTypes.js

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

package/lib/components/MultipleFilePicker/utils.js

@@ -0,0 +1,41 @@
+import { PDFDocument } from 'pdf-lib';
+
+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;
+};
+
+const pageMatches = (pageSize, allowedPDFUploadSizes) =>
+  allowedPDFUploadSizes.some(
+    size =>
+      (lengthMatches(size.heightInPt, pageSize.height, size.toleranceInPercentage) &&
+        lengthMatches(size.widthInPt, pageSize.width, size.toleranceInPercentage)) ||
+      (lengthMatches(size.heightInPt, pageSize.width, size.toleranceInPercentage) &&
+        lengthMatches(size.widthInPt, pageSize.height, size.toleranceInPercentage))
+  );
+
+const blobToBase64 = blob =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function () {
+      const result = reader.result.replace(/^data:.+;base64,/, '');
+      resolve(result);
+    };
+    reader.onerror = function () {
+      reject(new Error('No es posible leer el archivo.'));
+    };
+    reader.readAsDataURL(blob);
+  });
+
+export const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
+  const base64 = await blobToBase64(file);
+  const pdf = await PDFDocument.load(base64);
+  const pages = pdf.getPages();
+
+  return pages.some(page => {
+    const { width, height } = page.getSize();
+    return !pageMatches({ width, height }, allowedPDFUploadSizes);
+  });
+};

package/lib/index.js

@@ -16,6 +16,7 @@ export { default as RadioGroup } from './components/RadioGroup';
 export { default as Input } from './components/Input';
 export { default as ImagePicker } from './components/ImagePicker';
 export { default as FilePicker } from './components/FilePicker';
+export { default as MultipleFilePicker } from './components/MultipleFilePicker';
 export { default as Picker } from './components/Picker';
 export { default as ImageLabel } from './components/ImageLabel';
 export { default as CheckList } from './components/CheckList';

package/package.json

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