@widergy/mobile-ui 0.40.1 → 1.1.0

package/lib/components/Button/index.js

@@ -41,8 +41,8 @@ const Button = ({
           disabled || mode === TEXT
             ? NO_ELEVATION
             : mode === OUTLINED
-            ? NO_ELEVATION
-            : elevation || themeStyles.buttonElevation
+              ? NO_ELEVATION
+              : elevation || themeStyles.buttonElevation
         }
         style={[
           styles.container,
@@ -64,13 +64,17 @@ const Button = ({
                 color={textColor}
                 name={icon.name}
                 type={icon.type}
-                style={[styles.leftIcon, iconStyle]}
+                style={[title && styles.leftIcon, iconStyle]}
                 size={icon.size || themeStyles.fontSize}
+                width={icon.width}
+                height={icon.height}
               />
             )}
-            <Label base color={textColor} {...labelProps}>
-              {lowerCase ? title : title.toUpperCase()}
-            </Label>
+            {title && (
+              <Label base color={textColor} {...labelProps}>
+                {lowerCase ? title : title.toUpperCase()}
+              </Label>
+            )}
           </View>
         </Touchable>
       </Surface>

package/lib/components/Button/styles.js

@@ -8,12 +8,12 @@ import { OUTLINED, TEXT, CONTAINED } from './constants';
 export const getThemeStyles = theme => {
   const { colors, fonts, button } = theme;
   return {
-    primaryColor: colors.primary,
-    secondaryColor: colors.secondary,
-    disabledColor: colors.disabled,
-    buttonOutlineWidth: button.borderWidth,
     buttonElevation: button.elevation,
-    fontSize: fonts.fontSizes.base
+    buttonOutlineWidth: button.borderWidth,
+    disabledColor: colors.disabled,
+    fontSize: fonts.fontSizes.base,
+    primaryColor: colors.primary,
+    secondaryColor: colors.secondary
   };
 };
 

package/lib/components/Capture/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import Label from '../Label';
 import PhotoAlbum from '../PhotoAlbum';
@@ -27,7 +27,7 @@ const Capture = ({
   const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
 
   return (
-    <Fragment>
+    <>
       {!!label && (
         <Label semiBold big style={styles.paddingText}>
           {label}
@@ -51,7 +51,7 @@ const Capture = ({
         onError={onError}
       />
       {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
-    </Fragment>
+    </>
   );
 };
 Capture.propTypes = propTypes;

package/lib/components/Carousel/components/CarouselComponent/index.js

@@ -135,9 +135,11 @@ class CarouselComponent extends Component {
           : { y: indexToScrollTo * (contentHeight - visibleEdge * 2 - spacing) };
         this.ref.current.scrollTo({ ...scrollConfig, animated });
       }
+      // eslint-disable-next-line no-console
     } else console.warn('The index specified is not in the item list!');
   };
 
+  // eslint-disable-next-line react/no-unused-class-component-methods
   scrollToDirection = (forward, animated = true) => {
     const { currentIndex } = this.state;
     this.scrollToIndex(currentIndex + (forward ? 1 : -1), animated, true);

package/lib/components/Carousel/components/CarouselContainer/index.js

@@ -7,16 +7,8 @@ import styles, { getCarouselContainerForcedStyle } from '../../styles';
 import propTypes from '../../propTypes';
 
 const CarouselContainer = ({ style, ...props }, ref) => {
-  const {
-    contentHeight,
-    contentWidth,
-    horizontal,
-    items,
-    itemStyle,
-    renderItem,
-    spacing,
-    visibleEdge
-  } = props;
+  const { contentHeight, contentWidth, horizontal, items, itemStyle, renderItem, spacing, visibleEdge } =
+    props;
   const single = items.length === 1;
   const itemProps = { contentHeight, contentWidth, horizontal, itemStyle, spacing, visibleEdge };
   return (

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 import React, { memo } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { bool, string, func, number, shape, any } from 'prop-types';

package/lib/components/CheckList/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/sort-comp */
+/* eslint-disable class-methods-use-this */
 import React, { PureComponent } from 'react';
 import { View, FlatList } from 'react-native';
 import { isEmpty } from '@widergy/web-utils/lib/array';
@@ -14,6 +16,9 @@ import { keyExtractor, isChecked, areAllSelected, handleCheckAll } from './utils
 import CheckBoxRenderer from './components/CheckBoxRenderer';
 
 class CheckList extends PureComponent {
+  convertIfIsString = value =>
+    isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
+
   componentDidMount() {
     const { input } = this.props;
     input.onChange(this.convertIfIsString(input.value));
@@ -29,9 +34,6 @@ class CheckList extends PureComponent {
     if (onChange) onChange(isEmpty(newValues) ? [] : newValues);
   };
 
-  convertIfIsString = value =>
-    isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
-
   itemRenderer = ({ index, item }) => {
     const {
       labelsContainerStyle,

package/lib/components/CheckList/proptypes.js

@@ -1,5 +1,5 @@
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { bool, number, shape, oneOfType, string, arrayOf, elementType, any, object } from 'prop-types';
+import { bool, number, shape, oneOfType, string, arrayOf, elementType, object } from 'prop-types';
 
 export default {
   style: ViewPropTypes.style,
@@ -17,7 +17,7 @@ export default {
       subLabel: oneOfType([number, string]),
       required: bool,
       disable: bool,
-      value: any,
+      value: oneOfType([number, string]),
       component: elementType
     })
   ),

package/lib/components/Checkbox/styles.js

@@ -17,10 +17,10 @@ export default StyleSheet.create({
   containerReversed: {
     flexDirection: 'row-reverse',
     justifyContent: 'space-between',
-    width: '100%',
-    paddingHorizontal: moderateHorizontalScale(10)
+    paddingHorizontal: moderateHorizontalScale(10),
+    width: '100%'
   },
   icon: {
-    paddingRight: moderateHorizontalScale(10)
+    marginRight: moderateHorizontalScale(10)
   }
 });

package/lib/components/Dropdown/index.js

@@ -1,5 +1,7 @@
+/* eslint-disable react/sort-comp */
+/* eslint-disable class-methods-use-this */
 // TODO implement horizontal repositioning.
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef } from 'react';
 import { Animated, ScrollView, View } from 'react-native';
 
 import Overlay from '../Overlay';
@@ -23,6 +25,13 @@ import {
 const { TransformOrigins } = TransformView;
 
 class Dropdown extends Component {
+  measureInWindow = ref =>
+    new Promise((resolve, reject) =>
+      ref && ref.current
+        ? ref.current.measureInWindow((...args) => resolve(generateLayoutMeasuresObject(...args)))
+        : reject(new Error("Ref wasn't instantiated"))
+    );
+
   constructor(props) {
     super(props);
     this.state = {
@@ -57,13 +66,6 @@ class Dropdown extends Component {
     clearTimeout(this.timeout);
   }
 
-  measureInWindow = ref =>
-    new Promise((resolve, reject) =>
-      ref && ref.current
-        ? ref.current.measureInWindow((...args) => resolve(generateLayoutMeasuresObject(...args)))
-        : reject(new Error("Ref wasn't instantiated"))
-    );
-
   show = async () => {
     const { boundary, origin } = this.props;
     const { repositionOrigin, positioned } = this.state;
@@ -244,7 +246,7 @@ class Dropdown extends Component {
     });
 
     return (
-      <Fragment>
+      <>
         <View collapsable={false} ref={this.anchor}>
           {anchor}
         </View>
@@ -293,7 +295,7 @@ class Dropdown extends Component {
             </TransformView>
           </View>
         </Overlay>
-      </Fragment>
+      </>
     );
   }
 }

package/lib/components/FilePicker/utils.js

@@ -19,11 +19,11 @@ const pageMatches = (pageSize, allowedPDFUploadSizes) =>
 const blobToBase64 = blob =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onload = function() {
+    reader.onload = function () {
       const result = reader.result.replace(/^data:.+;base64,/, '');
       resolve(result);
     };
-    reader.onerror = function() {
+    reader.onerror = function () {
       reject(new Error('No es posible leer el archivo.'));
     };
     reader.readAsDataURL(blob);

package/lib/components/Icon/constants.js

@@ -10,6 +10,7 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import AntIcon from 'react-native-vector-icons/AntDesign';
+
 import VisibilityOff from './assets/eye-off.svg';
 import Visibility from './assets/eye.svg';
 

package/lib/components/Icon/index.js

@@ -5,7 +5,17 @@ import { getIconComponent, DEFAULT_ICON_TYPE, DEFAULT_ICON_SIZE } from './consta
 
 const Icon = ({ color, height, name, size, style, type, width }) => {
   const IconComponent = getIconComponent(type);
-  return <IconComponent color={color} height={height} name={name} size={size} style={style} type={type} width={width}/>;
+  return (
+    <IconComponent
+      color={color}
+      height={height}
+      name={name}
+      size={size}
+      style={style}
+      type={type}
+      width={width}
+    />
+  );
 };
 
 Icon.propTypes = propTypes;

package/lib/components/ImageIcon/index.js

@@ -7,7 +7,14 @@ import { DEFAULT_IMAGE_ICON_SIZE } from './constants';
 
 const ImageIcon = ({ containerStyle, image, size, style, theme, withUri = false, ...props }) => {
   const imageStyles = getImageStyles(size);
-  return <Image resizeMode="contain" {...props} source={withUri ? {uri: image} : image} style={[imageStyles, style]} />;
+  return (
+    <Image
+      resizeMode="contain"
+      {...props}
+      source={withUri ? { uri: image } : image}
+      style={[imageStyles, style]}
+    />
+  );
 };
 
 ImageIcon.defaultProps = {

package/lib/components/ImageRadio/index.js

@@ -33,19 +33,27 @@ const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) =>
             ]}
           >
             <View style={vertical ? styles.touchableInnerContainerVertical : styles.touchableInnerContainer}>
-              {
-                !!option.configuration.selected_image_url && <ImageIcon
-                size={IMAGE_SIZE}
-                image={isSelected(option) ? option.configuration.selected_image_url : option.configuration.image_url}
-                withUri={true}
-              />
-              }
-              {
-                !!option?.configuration?.SelectedImageComponent && <ImageIcon
-                size={IMAGE_SIZE}
-                image={isSelected(option) ? option.configuration.SelectedImageComponent :  option.configuration.UnselectedImageComponent}
+              {!!option.configuration.selected_image_url && (
+                <ImageIcon
+                  size={IMAGE_SIZE}
+                  image={
+                    isSelected(option)
+                      ? option.configuration.selected_image_url
+                      : option.configuration.image_url
+                  }
+                  withUri
                 />
-              }
+              )}
+              {!!option?.configuration?.SelectedImageComponent && (
+                <ImageIcon
+                  size={IMAGE_SIZE}
+                  image={
+                    isSelected(option)
+                      ? option.configuration.SelectedImageComponent
+                      : option.configuration.UnselectedImageComponent
+                  }
+                />
+              )}
               <View style={!vertical ? styles.labels : styles.verticalLabels}>
                 <Label
                   white={!transparentBackground && isSelected(option)}
@@ -85,6 +93,7 @@ ImageRadio.propTypes = {
   onChange: func,
   value: string,
   style: ViewPropTypes.style,
+  // eslint-disable-next-line react/forbid-prop-types
   variant: shape(any)
 };
 

package/lib/components/Loading/index.js

@@ -50,6 +50,7 @@ class Loading extends Component {
     }
   };
 
+  // eslint-disable-next-line react/no-unused-class-component-methods
   stopRotation = () => {
     if (this.rotation) {
       this.rotation.stop();

package/lib/components/Overlay/index.js

@@ -98,16 +98,8 @@ class Overlay extends Component {
   }
 
   render() {
-    const {
-      children,
-      dismissable,
-      global,
-      overlayColor,
-      style,
-      theme,
-      visible,
-      transparentBackground
-    } = this.props;
+    const { children, dismissable, global, overlayColor, style, theme, visible, transparentBackground } =
+      this.props;
     const { opacity, backgroundOpacity } = this.state;
     return (
       <Portal global={global}>

package/lib/components/PhotoAlbum/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // eslint-disable-next-line react-native/split-platform-components
 import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
@@ -6,6 +6,7 @@ import { launchCamera } from 'react-native-image-picker';
 
 import Label from '../Label';
 import Portal from '../Portal';
+import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
 import AddAnotherPhotoButton from './components/AddAnotherPhotoButton';
 import DeleteView from './components/DeleteView';
@@ -35,13 +36,10 @@ const PhotoAlbum = ({
 }) => {
   const requestPermission = async () => {
     const permissionsResponse = await PermissionsAndroid.requestMultiple([
-      PermissionsAndroid.PERMISSIONS.CAMERA,
-      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+      PermissionsAndroid.PERMISSIONS.CAMERA
     ]);
 
-    const granted =
-      permissionsResponse[PermissionsAndroid.PERMISSIONS.CAMERA] === 'granted' &&
-      permissionsResponse[PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE] === 'granted';
+    const granted = permissionsResponse[PermissionsAndroid.PERMISSIONS.CAMERA] === 'granted';
 
     if (!granted) {
       throw messageErrorPermissionCamera;
@@ -61,8 +59,9 @@ const PhotoAlbum = ({
   };
 
   const openCamera = async () => {
+    // eslint-disable-next-line no-useless-catch
     try {
-      await requestPermission();
+      if (IS_ANDROID) await requestPermission();
 
       const response = await launchCamera({});
       const { didCancel, errorCode, errorMessage, assets } = response;
@@ -109,7 +108,7 @@ const PhotoAlbum = ({
   }, [selectedImages]);
 
   return (
-    <Fragment>
+    <>
       {title && (
         <Label big semiBold color="#666666" style={styles.title}>
           {title}
@@ -164,7 +163,7 @@ const PhotoAlbum = ({
           </Portal>
         )}
       </View>
-    </Fragment>
+    </>
   );
 };
 

package/lib/components/Picker/index.js

@@ -24,7 +24,7 @@ const Picker = ({
   markdownStyles,
   disabled = false
 }) => (
-  <Fragment>
+  <>
     {!!title && (
       <Label
         useMarkdown={withMarkdownTitle}
@@ -55,7 +55,7 @@ const Picker = ({
         />
       </Touchable>
     </View>
-  </Fragment>
+  </>
 );
 
 Picker.propTypes = {

package/lib/components/Portal/components/Manager/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable react/no-unused-class-component-methods */
+/* eslint-disable react/sort-comp */
 import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -9,10 +12,6 @@ import { StyleSheet, View } from 'react-native';
  * View https://github.com/callstack/react-native-paper/blob/master/src/components/Portal/PortalManager.tsx
  * */
 class Manager extends PureComponent {
-  state = {
-    portals: []
-  };
-
   mount = (key, children) => this.setState(({ portals }) => ({ portals: [...portals, { key, children }] }));
 
   update = (key, children) =>
@@ -25,6 +24,10 @@ class Manager extends PureComponent {
       portals: [...portals].filter(portal => portal.key !== key)
     }));
 
+  state = {
+    portals: []
+  };
+
   renderPortal = ({ key, children }) => (
     <View
       key={key}

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
@@ -33,7 +33,7 @@ class RadioButton extends Component {
       disabled
     } = this.props;
     return (
-      <Fragment>
+      <>
         <Touchable onPress={this.handlePress} disabled={disabled}>
           <View style={[styles.container, style]}>
             {descriptionComponent ? (
@@ -47,7 +47,7 @@ class RadioButton extends Component {
                 />
               </View>
             ) : (
-              <Fragment>
+              <>
                 <Icon
                   name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
                   color={status ? theme.colors.primary : theme.colors.disabled}
@@ -73,12 +73,12 @@ class RadioButton extends Component {
                     {labelValue}
                   </Label>
                 )}
-              </Fragment>
+              </>
             )}
           </View>
         </Touchable>
         {showSeparatorBar && <SeparatorBar />}
-      </Fragment>
+      </>
     );
   }
 }

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { number, string, arrayOf, shape, any } from 'prop-types';
 import { View } from 'react-native';
 
@@ -80,7 +80,7 @@ const Indicator = ({
       </View>
 
       {consumptionLimit && (
-        <Fragment>
+        <>
           <View
             style={[styles.limitLabel, { left: limitTextPosition, top: -limitDimensions.height - 33 - 15 }]}
             onLayout={handleLimitDimensions}
@@ -98,7 +98,7 @@ const Indicator = ({
             </Label>
           </View>
           <IndicatorIcon position={limitIndicatorPosition} inverted />
-        </Fragment>
+        </>
       )}
     </View>
   );

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/utils.js

@@ -30,7 +30,7 @@ export const getTotalRange = rateStages =>
     (total, curr) =>
       total +
       (curr?.range[MAX_VALUE]
-        ? curr?.range[MAX_VALUE] - curr.range[MIN_VALUE]
+        ? (curr?.range[MAX_VALUE] || 0) - curr.range[MIN_VALUE]
         : curr.range[MIN_VALUE] + 100 - curr.range[MIN_VALUE]),
     0
   );

package/lib/components/TransformView/constants.js

@@ -1,5 +1,5 @@
 // TODO replace all mutability
-import MatrixMath from 'react-native/Libraries/Utilities/MatrixMath';
+import MatrixMath from './utils';
 
 export const TRANSFORM_ORIGINS = {
   center: {