@widergy/mobile-ui 0.31.2 → 0.32.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [0.32.0](https://github.com/widergy/mobile-ui/compare/v0.31.5...v0.32.0) (2021-12-10)
+
+
+### Features
+
+* new borderless prop for borderless searchbar ([#209](https://github.com/widergy/mobile-ui/issues/209)) ([8d5f9ae](https://github.com/widergy/mobile-ui/commit/8d5f9ae55d7e8ed6dea53d3d9e16b0a9dfcdf7b3))
+
+## [0.31.5](https://github.com/widergy/mobile-ui/compare/v0.31.4...v0.31.5) (2021-11-16)
+
+
+### Bug Fixes
+
+* improve image radio ([#206](https://github.com/widergy/mobile-ui/issues/206)) ([dd415e4](https://github.com/widergy/mobile-ui/commit/dd415e41323c2dd3ac7d9a43a490f86fa8947400))
+
+## [0.31.4](https://github.com/widergy/mobile-ui/compare/v0.31.3...v0.31.4) (2021-11-09)
+
+
+### Bug Fixes
+
+* add disabled props to select all checkbox ([#207](https://github.com/widergy/mobile-ui/issues/207)) ([6657729](https://github.com/widergy/mobile-ui/commit/6657729d9178d8d193459162da9ee68c6268da27))
+
+## [0.31.3](https://github.com/widergy/mobile-ui/compare/v0.31.2...v0.31.3) (2021-11-09)
+
+
+### Bug Fixes
+
+* application update to api 30 ([#205](https://github.com/widergy/mobile-ui/issues/205)) ([7c8480b](https://github.com/widergy/mobile-ui/commit/7c8480bcf1d66958840680d9769a72a163be6d96))
+
 ## [0.31.2](https://github.com/widergy/mobile-ui/compare/v0.31.1...v0.31.2) (2021-11-03)
 
 

package/lib/components/CheckList/components/CheckBoxRenderer/index.js

@@ -24,7 +24,8 @@ const CheckBoxRenderer = ({
 }) => {
   const { Component, label, subLabel, disabled, value, required } = item;
 
-  const disableContainerStyle = disabledStyleEnabled && (disabled || required) ? styles.disabled : {};
+  const disableContainerStyle =
+    disabledStyleEnabled && (disabled || required) ? disabledStyle || styles.disabled : {};
   const alternateColorStyle = alternateColors && index % 2 ? coloredStyle || styles.colored : {};
   return (
     <Checkbox

package/lib/components/CheckList/index.js

@@ -90,9 +90,13 @@ class CheckList extends PureComponent {
       separatorStyle,
       selectAllSeparator,
       includesSeparator,
-      error
+      error,
+      disabledSelectAll,
+      disabledStyleEnabled,
+      disabledStyle
     } = this.props;
-
+    const disableContainerStyle =
+      disabledStyleEnabled && disabledSelectAll ? disabledStyle || styles.disabled : {};
     return (
       <View style={[styles.container, style]}>
         {!!title && <Label style={styles.title}>{title}</Label>}
@@ -105,8 +109,13 @@ class CheckList extends PureComponent {
             checkedColor={checkedColor}
             labelsContainerStyle={selectAlllabelStyle}
             reversed={reversedSelectAll}
-            style={[selectAllContainerStyle, alternateColors ? coloredStyle || styles.colored : {}]}
+            style={[
+              selectAllContainerStyle,
+              alternateColors ? coloredStyle || styles.colored : {},
+              disableContainerStyle
+            ]}
             textProps={textProps}
+            disabled={disabledSelectAll}
           />
         )}
         {!!selectAllSeparator && !hideSelectAll && <SeparatorBar style={separatorStyle} />}

package/lib/components/CheckList/styles.js

@@ -20,5 +20,8 @@ export default StyleSheet.create({
   },
   colored: {
     backgroundColor: transparentGray
+  },
+  disabled: {
+    opacity: 0.5
   }
 });

package/lib/components/FilePicker/index.js

@@ -30,10 +30,18 @@ class FilePicker extends Component {
       allowedPDFUploadSizes,
       pdfFormatError
     } = this.props;
+    const promisePicker = new Promise(async (resolve, reject) => {
+      try {
+        const picker = await DocumentPicker.pick({
+          type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
+        });
+        return resolve(picker[0]);
+      } catch (error) {
+        return reject(error);
+      }
+    });
     try {
-      const document = await DocumentPicker.pick({
-        type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
-      });
+      const document = await promisePicker;
       const isPDF = document.type.includes('pdf');
       const isImage = document.type.includes('image');
       if (onlyPDFAllowed(allowedTypes) && !isPDF) {

package/lib/components/ImagePicker/ModalSelectionOption/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+import Modal from '../../Modal';
+import Label from '../../Label';
+import imagePickerPropTypes from '../propTypes';
+
+import styles from './styles';
+
+const optionsModalDefault = {
+  title: 'Seleccionar imagen',
+  takePhotoButtonTitle: 'Tomar una foto',
+  chooseFromLibraryButtonTitle: 'Elegir desde galería',
+  cancelButtonTitle: 'CANCELAR'
+};
+
+const ModalSelectionOption = ({
+  openModalSelection,
+  closeModalSelection,
+  openOptionSelected,
+  optionsModal
+}) => {
+  const { title, takePhotoButtonTitle, chooseFromLibraryButtonTitle, cancelButtonTitle } =
+    optionsModal ?? optionsModalDefault;
+  return (
+    <Modal
+      visible={openModalSelection}
+      dismissable
+      onDismiss={closeModalSelection}
+      style={styles.displayImageModal}
+      elevation={0}
+    >
+      <Label bold style={styles.title}>
+        {title}
+      </Label>
+      <View style={styles.container}>
+        <TouchableOpacity onPress={() => openOptionSelected(true)} style={styles.button}>
+          <Label medium bold>
+            {takePhotoButtonTitle}
+          </Label>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => openOptionSelected(false)} style={styles.button}>
+          <Label medium bold>
+            {chooseFromLibraryButtonTitle}
+          </Label>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.cancelButtonContent}>
+        <TouchableOpacity onPress={closeModalSelection} style={[styles.button, styles.cancelButton]}>
+          <Label medium bold color={Colors.primary}>
+            {cancelButtonTitle}
+          </Label>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+ModalSelectionOption.propTypes = imagePickerPropTypes;
+
+export default ModalSelectionOption;

package/lib/components/ImagePicker/ModalSelectionOption/styles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+
+import {
+  horizontalScale,
+  moderateHorizontalScale,
+  moderateVerticalScale,
+  WINDOW_HEIGHT
+} from '../../../utils/scaleUtils';
+
+const styles = StyleSheet.create({
+  title: {
+    marginTop: moderateVerticalScale(-5)
+  },
+  container: {
+    marginLeft: horizontalScale(5)
+  },
+  displayImageModal: {
+    height: WINDOW_HEIGHT * 0.275
+  },
+  button: {
+    marginTop: moderateVerticalScale(2),
+    paddingTop: moderateVerticalScale(20),
+    borderRadius: 5
+  },
+  cancelButton: {
+    paddingLeft: moderateHorizontalScale(10)
+  },
+  cancelButtonContent: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'flex-end'
+  }
+});
+
+export default styles;

package/lib/components/ImagePicker/constants.js

@@ -3,13 +3,8 @@ import { MEGABYTE } from '../../utils/fileUtils.js';
 export const ADD_ICON = 'add-a-photo';
 
 export const options = {
-  title: 'Seleccionar imagen',
-  storageOptions: {
-    path: 'images'
-  },
-  takePhotoButtonTitle: 'Tomar una foto',
-  chooseFromLibraryButtonTitle: 'Elegir desde galería',
-  cancelButtonTitle: 'Cancelar'
+  mediaType: 'photo',
+  quality: 0.8
 };
 
 export const DEFAULT_MAX_SIZE = 10 * MEGABYTE;

package/lib/components/ImagePicker/index.js

@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-// eslint-disable-next-line import/no-unresolved
-import ImagePicker from 'react-native-image-picker';
 
 import { retrieveFile } from '../../utils/fileUtils.js';
 
@@ -34,18 +32,22 @@ const ImagePickerComponent = ({
   const [imageModalOpen, setImageModalOpen] = useState(false);
   const mergedOptions = { ...options, ...pickerOptions };
 
-  const handleShowImagePicker = () => {
-    ImagePicker.showImagePicker(mergedOptions, async response => {
+  const handleShowImagePicker = sourceImage => {
+    if (sourceImage?.errorCode) {
+      onError(sourceImage.errorCode);
+      return;
+    }
+    sourceImage(mergedOptions, async response => {
       if (response.didCancel) return;
-      if (response.error) {
-        onError(response.error);
+      if (response.errorCode) {
+        onError(response.errorCode);
         return;
       }
-
-      const file = await retrieveFile(response.uri, response.type);
-
+      const { assets } = response;
+      const item = assets[0];
+      const file = await retrieveFile(item.uri, item.type);
       if (!file) {
-        onError(response.error);
+        onError(response.errorCode);
         return;
       }
 
@@ -55,7 +57,7 @@ const ImagePickerComponent = ({
       }
 
       if (onChange) {
-        const fileNameAndSource = { source: response.uri, fileName: response.fileName };
+        const fileNameAndSource = { source: item.uri, fileName: item.fileName };
         onChange({ file, ...fileNameAndSource });
         setImage(fileNameAndSource);
       }

package/lib/components/ImagePicker/layout.js

@@ -1,6 +1,10 @@
-import React from 'react';
-import { View, Image, TouchableWithoutFeedback } from 'react-native';
+import React, { useState } from 'react';
+// eslint-disable-next-line react-native/split-platform-components
+import { View, Image, TouchableWithoutFeedback, PermissionsAndroid } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 
+import { IS_IOS } from '../../utils/platformUtils/constants';
 import Picker from '../Picker';
 import Modal from '../Modal';
 import Label from '../Label';
@@ -8,6 +12,7 @@ import Label from '../Label';
 import styles from './styles';
 import { ADD_ICON } from './constants';
 import imagePickerPropTypes from './propTypes';
+import ModalSelectionOption from './ModalSelectionOption';
 
 const ImagePicker = ({
   editable,
@@ -27,48 +32,81 @@ const ImagePicker = ({
   style,
   onOpenImageModal,
   withMarkdownTitle,
-  markdownStyles
-}) => (
-  <View style={[styles.container, style]}>
-    <Picker
-      icon={ADD_ICON}
-      error={error}
-      onAdd={editable && onShowImagePicker}
-      onDelete={onOpenDeleteModal}
-      filePlaceholder={filePlaceholder}
-      title={title}
-      fileName={image ? image.fileName : ''}
-      withMarkdownTitle={withMarkdownTitle}
-      markdownStyles={markdownStyles}
-    />
-    {image && (
-      <View style={styles.imageContainer}>
-        <TouchableWithoutFeedback onPress={onOpenImageModal} style={styles.touchable}>
-          <Image source={{ uri: image.source }} style={styles.image} resizeMode="contain" />
+  markdownStyles,
+  optionsModal
+}) => {
+  const [openModalSelection, setOpenModalSelection] = useState(false);
+  const visibleModalSelection = () => setOpenModalSelection(true);
+  const closeModalSelection = () => setOpenModalSelection(false);
+  const requestPermissionCamera = async () => {
+    try {
+      const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
+      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+        return launchCamera;
+      }
+      return { errorCode: 'Son necesarios permisos para utilizar la cámara' };
+    } catch (err) {
+      return { errorCode: 'Son necesarios permisos para utilizar la cámara' };
+    }
+  };
+  const openOptionSelected = async selected => {
+    closeModalSelection();
+    return (
+      editable &&
+      onShowImagePicker(
+        selected ? (IS_IOS ? launchCamera : await requestPermissionCamera()) : launchImageLibrary
+      )
+    );
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <Picker
+        icon={ADD_ICON}
+        error={error}
+        onAdd={visibleModalSelection}
+        onDelete={onOpenDeleteModal}
+        filePlaceholder={filePlaceholder}
+        title={title}
+        fileName={image ? image.fileName : ''}
+        withMarkdownTitle={withMarkdownTitle}
+        markdownStyles={markdownStyles}
+      />
+      {image && (
+        <View style={styles.imageContainer}>
+          <TouchableWithoutFeedback onPress={onOpenImageModal} style={styles.touchable}>
+            <Image source={{ uri: image.source }} style={styles.image} resizeMode="contain" />
+          </TouchableWithoutFeedback>
+        </View>
+      )}
+      <Modal
+        title={deleteImageModalTitle}
+        visible={deleteModalOpen}
+        acceptButton={acceptButton}
+        cancelButton={cancelButton}
+      >
+        <Label>{deleteImageModalText}</Label>
+      </Modal>
+      <Modal
+        visible={imageModalOpen}
+        dismissable
+        onDismiss={onCloseImageModal}
+        style={styles.displayImageModal}
+        elevation={0}
+      >
+        <TouchableWithoutFeedback onPress={onCloseImageModal}>
+          <Image source={image && { uri: image.source }} style={styles.displayImage} resizeMode="contain" />
         </TouchableWithoutFeedback>
-      </View>
-    )}
-    <Modal
-      title={deleteImageModalTitle}
-      visible={deleteModalOpen}
-      acceptButton={acceptButton}
-      cancelButton={cancelButton}
-    >
-      <Label>{deleteImageModalText}</Label>
-    </Modal>
-    <Modal
-      visible={imageModalOpen}
-      dismissable
-      onDismiss={onCloseImageModal}
-      style={styles.displayImageModal}
-      elevation={0}
-    >
-      <TouchableWithoutFeedback onPress={onCloseImageModal}>
-        <Image source={image && { uri: image.source }} style={styles.displayImage} resizeMode="contain" />
-      </TouchableWithoutFeedback>
-    </Modal>
-  </View>
-);
+      </Modal>
+      <ModalSelectionOption
+        openModalSelection={openModalSelection}
+        closeModalSelection={closeModalSelection}
+        openOptionSelected={openOptionSelected}
+        optionsModal={optionsModal}
+      />
+    </View>
+  );
+};
 
 ImagePicker.propTypes = imagePickerPropTypes;
 

package/lib/components/ImageRadio/index.js

@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { View, ViewPropTypes } from 'react-native';
-import { string, arrayOf, shape, func, number } from 'prop-types';
+import { string, arrayOf, shape, func, number, any } from 'prop-types';
 import _ from 'lodash';
 
 import Label from '../Label';
@@ -9,37 +9,53 @@ import Touchable from '../Touchable';
 
 import OwnStyles, { IMAGE_SIZE } from './styles';
 
-const ImageRadio = ({ options, title, onChange, value, style }) => {
+const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) => {
   const styles = _.merge({}, OwnStyles, style);
   const handleOnChange = option => {
     if (option) onChange(option.value);
   };
+  const { vertical, transparent_background: transparentBackground } = variant;
   const isSelected = option => option.value === value;
+
   return (
     <View style={styles.container}>
       <Label>{title}</Label>
-      {options.map(option => (
-        <Touchable
-          key={option.id}
-          onPress={() => handleOnChange(option)}
-          style={[styles.touchable, isSelected(option) && styles.selected]}
-        >
-          <Fragment>
-            <ImageIcon
-              size={IMAGE_SIZE}
-              image={isSelected(option) ? option.selectedImage : option.unselectedImage}
-            />
-            <View style={styles.labels}>
-              <Label white={isSelected(option)} style={styles.name} h4>
-                {option.name}
-              </Label>
-              <Label white={isSelected(option)} h5>
-                {option.description}
-              </Label>
+      <View style={[styles.innerContainer, vertical && styles.verticalInnerContainer]}>
+        {options.map(option => (
+          <Touchable
+            key={option.id}
+            onPress={() => handleOnChange(option)}
+            style={[
+              styles.touchable,
+              vertical && styles.verticalTouchable,
+              isSelected(option) && !vertical && styles.selected
+            ]}
+          >
+            <View style={vertical ? styles.touchableInnerContainerVertical : styles.touchableInnerContainer}>
+              <ImageIcon
+                size={IMAGE_SIZE}
+                image={isSelected(option) ? option.selectedImage : option.unselectedImage}
+              />
+              <View style={!vertical ? styles.labels : styles.verticalLabels}>
+                <Label
+                  white={!transparentBackground && isSelected(option)}
+                  style={!vertical ? styles.label : styles.verticalLabel}
+                  h4
+                >
+                  {option.name}
+                </Label>
+                <Label
+                  style={!vertical ? styles.label : styles.verticalLabel}
+                  white={!transparentBackground && isSelected(option)}
+                  h5
+                >
+                  {option.description}
+                </Label>
+              </View>
             </View>
-          </Fragment>
-        </Touchable>
-      ))}
+          </Touchable>
+        ))}
+      </View>
     </View>
   );
 };
@@ -58,7 +74,8 @@ ImageRadio.propTypes = {
   title: string,
   onChange: func,
   value: string,
-  style: ViewPropTypes.style
+  style: ViewPropTypes.style,
+  variant: shape(any)
 };
 
 export default ImageRadio;

package/lib/components/ImageRadio/styles.js

@@ -7,6 +7,16 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  innerContainer: {
+    alignItems: 'center',
+    width: '100%',
+    paddingVertical: 34,
+    paddingHorizontal: 34
+  },
+  verticalInnerContainer: {
+    flexDirection: 'row',
+    marginHorizontal: 50
+  },
   optionContainer: {
     marginTop: verticalScale(10)
   },
@@ -20,16 +30,39 @@ export default StyleSheet.create({
     marginTop: verticalScale(32),
     width: '100%'
   },
+  verticalTouchable: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginHorizontal: 5,
+    width: '50%',
+    borderWidth: 0.6
+  },
   selected: {
     backgroundColor: '#3FBFE7'
   },
+
+  touchableInnerContainerVertical: {
+    alignItems: 'center'
+  },
+  touchableInnerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
   labels: {
     margin: 15,
     marginLeft: horizontalScale(35),
     maxWidth: 150,
     textAlign: 'left'
   },
-  name: {
+  verticalLabels: {
+    paddingTop: 20,
+    maxWidth: 150
+  },
+  label: {
+    paddingBottom: verticalScale(5),
+    paddingLeft: horizontalScale(15)
+  },
+  verticalLabel: {
     paddingBottom: verticalScale(5)
   },
   iconBadge: {

package/lib/components/UTTextInput/flavors/FilledInput/index.js

@@ -37,6 +37,7 @@ const FilledInput = ({
   tooltipProps,
   multiline,
   captionLabel,
+  borderless,
   ...props
 }) => {
   const [initialHeight, setInitialHeight] = useState(inputHeight);
@@ -104,7 +105,7 @@ const FilledInput = ({
               </InputLabel>
             )}
           </View>
-          <InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />
+          {!borderless && (<InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />)}
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>

package/lib/components/UTTextInput/flavors/OutlinedInput/index.js

@@ -38,6 +38,7 @@ const OutlinedInput = ({
   tooltipProps,
   multiline,
   captionLabel,
+  borderless,
   ...props
 }) => {
   const focusedColor = themeStyles?.focused?.color || theme.colors.primary;
@@ -68,7 +69,7 @@ const OutlinedInput = ({
             disabled && themeStyles?.containerDisabled,
             // eslint-disable-next-line react-native/no-inline-styles
             {
-              borderWidth: focused ? 2 : disabled ? themeStyles?.inactive?.disabledBorderWidth ?? 1 : 1,
+              borderWidth: borderless ? 0 : focused ? 2 : disabled ? themeStyles?.inactive?.disabledBorderWidth ?? 1 : 1,
               borderColor: active ? activeColor : inactiveColor
             },
             styles?.inputContainer

package/lib/components/UTTextInput/flavors/StandardInput/index.js

@@ -36,6 +36,7 @@ const StandardInput = ({
   tooltipIconProps,
   tooltipProps,
   captionLabel,
+  borderless,
   ...props
 }) => (
   <View style={[ownStyles.container, themeStyles?.root, styles?.container]}>
@@ -92,7 +93,7 @@ const StandardInput = ({
             </InputLabel>
           )}
         </View>
-        <InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />
+        {!borderless && (<InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />)}
       </View>
       {!!tooltip && (
         <View style={ownStyles.tooltipContainer}>

package/package.json

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