@widergy/mobile-ui 1.6.0 → 1.8.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/components/UTTracker/README.md

@@ -0,0 +1,24 @@
+# UTTracker
+
+### Description
+
+This component displays a vertical stepper intended to track progress
+
+## Props
+
+| Name        | Type              | Default  | Description                                                                                                                                                           |
+| ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title       | string            |          | Displays the title above the tracker.                                                                                                                                 |
+| mode        | card \| flat      | card     | Defines whether the component should display as a card or as the bare components without any background.                                                              |
+| variant     | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step.                                                                                        |
+| steps       | stepsType         |          | Displays a step with a rounded icon on the left for each object received.                                                                                             |
+| currentStep | number            |          | Defines which step will be active, previous ones will be marked as completed while following ones will not. Use 1 for the first step                                  |
+| detailsTab  | detailsType       |          | Defines whether the detailsTab is enabled or not, if it is, it will show the subSteps of each step. The title property shows a message along the tab (card mode only) |
+
+### Custom Types
+
+| Type         | Shape                                                                          |
+| ------------ | ------------------------------------------------------------------------------ |
+| stepsType    | `{ id: number, title: string, subtitle: string, subSteps: [...subStepsType] }` |
+| subStepsType | `{ id: number, title: string, subtitle: string }`                              |
+| detailsType  | `{ enabled: bool, title: string }`                                             |

package/lib/components/UTTracker/components/Connectors/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { number } from 'prop-types';
+import merge from 'lodash/merge';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import ownStyles from './styles';
+
+const Connectors = ({ firstStepPosition, lastStepPosition, stepperHeight, style }) => {
+  const themedStyles = merge({}, ownStyles, style);
+
+  return (
+    <View style={themedStyles.wrapper(firstStepPosition, lastStepPosition, stepperHeight)}>
+      <View style={themedStyles.connectors} />
+    </View>
+  );
+};
+
+Connectors.propTypes = {
+  firstStepPosition: number,
+  lastStepPosition: number,
+  stepperHeight: number,
+  style: ViewPropTypes.style
+};
+
+export default Connectors;

package/lib/components/UTTracker/components/Connectors/styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export default StyleSheet.create({
+  connectors: {
+    borderColor: 'gray',
+    borderLeftWidth: 2,
+    borderStyle: 'dashed',
+    flexGrow: 1
+  },
+  wrapper: (firstStepPosition, lastStepHeight, stepperHeight) => ({
+    height: '100%',
+    paddingBottom: stepperHeight - lastStepHeight,
+    paddingLeft: OVAL_SIZE / 2 - 1,
+    paddingTop: OVAL_SIZE + 4 + firstStepPosition,
+    position: 'absolute',
+    width: 2
+  })
+});

package/lib/components/UTTracker/components/Step/index.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { bool, func } from 'prop-types';
+import merge from 'lodash/merge';
+
+import Label from '../../../Label';
+import { StepPropTypes, VariantPropTypes } from '../../propTypes';
+import Icon from '../../../Icon';
+import { ERROR } from '../../constants';
+
+import ownStyles, { ownVariantStyles } from './styles';
+
+const ERROR_ICON_SIZE = 16;
+
+const Step = ({
+  first,
+  isActive,
+  isCompleted,
+  last,
+  setFirstStepPosition,
+  setLastStepPosition,
+  step,
+  style = {},
+  variant
+}) => {
+  const stepCompleted = isCompleted(step.id);
+  const stepActive = isActive(step.id);
+
+  const themedStyles = merge({}, ownStyles, ownVariantStyles[variant], style[variant]);
+
+  const [stepIconOffset, setStepIconOffset] = useState(0);
+
+  return (
+    <View
+      onLayout={e => {
+        if (first) setFirstStepPosition(e.nativeEvent.layout.y + stepIconOffset);
+        if (last) setLastStepPosition(e.nativeEvent.layout.y + stepIconOffset);
+      }}
+      style={[
+        themedStyles.outerContainer,
+        stepCompleted && themedStyles.completedOuterContainer,
+        stepActive && themedStyles.activeOuterContainer,
+        !first && ownStyles.stepMargin
+      ]}
+    >
+      <View
+        onLayout={e => (first || last) && setStepIconOffset(e.nativeEvent.layout.y)}
+        style={[
+          themedStyles.container,
+          stepCompleted && themedStyles.completedContainer,
+          stepActive && themedStyles.activeContainer
+        ]}
+      >
+        <View
+          style={[
+            themedStyles.innerContainer,
+            stepCompleted && themedStyles.completedInnerContainer,
+            stepActive && themedStyles.activeInnerContainer
+          ]}
+        >
+          {stepActive && variant === ERROR && (
+            <Icon
+              color="white"
+              height={ERROR_ICON_SIZE}
+              name="close"
+              size={ERROR_ICON_SIZE}
+              style={themedStyles.icon}
+              type="antdesign"
+              width={ERROR_ICON_SIZE}
+            />
+          )}
+        </View>
+      </View>
+      <View style={themedStyles.textContainer}>
+        {step.title && (
+          <Label
+            color={
+              stepCompleted
+                ? themedStyles.completedTitleColor
+                : stepActive
+                  ? themedStyles.activeTitleColor
+                  : themedStyles.titleColor
+            }
+          >
+            {step.title}
+          </Label>
+        )}
+        {step.subtitle && (
+          <Label color={themedStyles.subtitleColor} style={themedStyles.subtitle}>
+            {step.subtitle}
+          </Label>
+        )}
+        {step.description && (
+          <Label color={themedStyles.descriptionColor} style={themedStyles.description}>
+            {step.description}
+          </Label>
+        )}
+      </View>
+    </View>
+  );
+};
+
+Step.propTypes = {
+  first: bool,
+  isActive: func,
+  isCompleted: func,
+  last: bool,
+  setFirstStepPosition: func,
+  setLastStepPosition: func,
+  step: StepPropTypes,
+  variant: VariantPropTypes
+};
+
+export default Step;

package/lib/components/UTTracker/components/Step/styles.js

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+import { ERROR, STANDARD } from '../../constants';
+
+export const ownVariantStyles = {
+  [ERROR]: {
+    activeContainer: {
+      backgroundColor: 'red',
+      borderColor: 'red'
+    },
+    activeInnerContainer: {
+      backgroundColor: 'red'
+    },
+    activeTitleColor: 'red',
+    completedContainer: {
+      borderColor: '#F38595'
+    },
+    completedInnerContainer: {
+      backgroundColor: '#F38595'
+    },
+    completedTitleColor: '#F38595'
+  },
+  [STANDARD]: {
+    activeContainer: {
+      borderColor: 'blue'
+    },
+    activeInnerContainer: {
+      backgroundColor: 'blue'
+    },
+    activeTitleColor: 'blue',
+    completedContainer: {
+      borderColor: '#93ACFF'
+    },
+    completedInnerContainer: {
+      backgroundColor: '#93ACFF'
+    },
+    completedTitleColor: '#93ACFF'
+  }
+};
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: 'gray',
+    borderRadius: OVAL_SIZE / 2,
+    borderWidth: OVAL_SIZE / 10,
+    height: OVAL_SIZE,
+    justifyContent: 'center',
+    marginRight: 16,
+    width: OVAL_SIZE
+  },
+  description: {
+    marginTop: 4
+  },
+  descriptionColor: 'gray',
+  icon: {
+    position: 'absolute',
+    right: -3,
+    top: -3
+  },
+  innerContainer: {
+    backgroundColor: 'white',
+    borderRadius: OVAL_SIZE / 4,
+    height: OVAL_SIZE / 2,
+    width: OVAL_SIZE / 2
+  },
+  outerContainer: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  stepMargin: { marginTop: 24 },
+  subtitle: {
+    marginTop: 4
+  },
+  textContainer: {
+    width: '90%'
+  }
+});

package/lib/components/UTTracker/components/SubStep/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import { string } from 'prop-types';
+import merge from 'lodash/merge';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import Label from '../../../Label';
+
+import ownStyles from './styles';
+
+const SubStep = ({ style, subtitle, title }) => {
+  const themedStyles = merge({}, ownStyles, style);
+
+  return (
+    <View style={themedStyles.container}>
+      <Label color={themedStyles.titleColor}>{title}</Label>
+      <Label color={themedStyles.subtitleColor}>{subtitle}</Label>
+    </View>
+  );
+};
+
+SubStep.propTypes = {
+  style: ViewPropTypes.style,
+  subtitle: string,
+  title: string
+};
+
+export default SubStep;

package/lib/components/UTTracker/components/SubStep/styles.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    marginLeft: 36,
+    marginTop: 8
+  },
+  subtitleColor: 'lightgray',
+  titleColor: 'gray'
+});

package/lib/components/UTTracker/constants.js

@@ -0,0 +1,4 @@
+export const CARD = 'card';
+export const FLAT = 'flat';
+export const STANDARD = 'standard';
+export const ERROR = 'error';