etendo-ui-library 1.0.74 → 1.0.75

package/SecondaryComponents/CustomImage.tsx

@@ -0,0 +1,19 @@
+import React, {FC} from 'react';
+import {Image, Platform, ViewStyle} from 'react-native';
+
+interface CustomImageProps {
+  src?: string;
+  alt?: string;
+  source?: {uri: string};
+  style?: ViewStyle;
+}
+
+const CustomImage: FC<CustomImageProps> = ({src, alt, source, style}) => {
+  return Platform.OS === 'web' ? (
+    <img src={src} alt={alt} style={style} />
+  ) : (
+    <Image source={source} style={style} />
+  );
+};
+
+export default CustomImage;

package/components/dropdown/Dropdown.tsx

@@ -1,17 +1,11 @@
 import React, {useState, useRef, useEffect} from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Image,
-  ScrollView,
-  Platform,
-} from 'react-native';
+import {View, Text, TouchableOpacity, ScrollView, Platform} from 'react-native';
 
 import DropdownItem from './DropdownItem';
 import {DropdownStyleVariant} from './Dropdown.styles';
 import {DropdownProps, Info} from './Dropdown.types';
 import {arrowPickerVerticalIcon} from '../../assets/images/icons';
+import CustomImage from '../../SecondaryComponents/CustomImage';
 
 const Dropdown = ({
   data,
@@ -40,10 +34,9 @@ const Dropdown = ({
     }
   };
 
-  const showOptionsIcon = (isWeb: boolean) => {
-    return isWeb ? (
-      <img
-        src={arrowPickerVerticalIcon}
+  const showOptionsIcon = () => {
+    return (
+      <CustomImage
         style={{
           width: 10,
           height: 7,
@@ -51,43 +44,28 @@ const Dropdown = ({
           right: 15,
           rotate: '180deg',
         }}
-      />
-    ) : (
-      <Image
+        src={arrowPickerVerticalIcon}
         source={{uri: arrowPickerVerticalIcon}}
-        style={{
-          width: 11,
-          height: 9,
-          resizeMode: 'stretch',
-          position: 'absolute',
-          right: 15,
-          transform: [{rotate: '180deg'}],
-        }}
       />
     );
   };
 
-  const notShowOptionsIcon = (isWeb: boolean) => {
-    return isWeb ? (
-      <img
-        src={arrowPickerVerticalIcon}
-        style={{width: 10, height: 7, position: 'absolute', right: 15}}
-      />
-    ) : (
-      <Image
-        source={{uri: arrowPickerVerticalIcon}}
+  const notShowOptionsIcon = () => {
+    return (
+      <CustomImage
         style={{
-          width: 11,
-          height: 9,
-          resizeMode: 'stretch',
+          width: 10,
+          height: 7,
           position: 'absolute',
           right: 15,
         }}
+        src={arrowPickerVerticalIcon}
+        source={{uri: arrowPickerVerticalIcon}}
       />
     );
   };
 
-  if (Platform.OS === 'web') {
+  if (PLATFORM_IS_WEB) {
     document.addEventListener('mousedown', closeOpenMenus);
   }
 
@@ -103,14 +81,12 @@ const Dropdown = ({
         <Text style={DropdownStyleVariant.primary.dropDownButtonText}>
           {chooseOption}
         </Text>
-        {showOptions
-          ? showOptionsIcon(PLATFORM_IS_WEB)
-          : notShowOptionsIcon(PLATFORM_IS_WEB)}
+        {showOptions ? showOptionsIcon() : notShowOptionsIcon()}
       </TouchableOpacity>
 
       {showOptions && (
         <ScrollView style={DropdownStyleVariant.primary.containerOptions}>
-          {data.map((item: Info, index: number) => {
+          {data?.map((item: Info, index: number) => {
             return (
               <DropdownItem
                 item={item}

package/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -50,11 +50,10 @@ exports[`Running Test for Pagination Check Pagination Disabled 1`] = `
       }
       style={
         Object {
-          "height": 9,
+          "height": 7,
           "position": "absolute",
-          "resizeMode": "stretch",
           "right": 15,
-          "width": 11,
+          "width": 10,
         }
       }
     />

package/components/input/components/InputField.tsx

@@ -7,7 +7,6 @@ import {
   TouchableOpacity,
   KeyboardType,
   View,
-  Platform,
 } from 'react-native';
 import addImageStyle from '../../../helpers/image_utils';
 import {styles} from '../Input.style';
@@ -17,6 +16,7 @@ import {
   disabledPasswordIcon,
 } from '../../../assets/images/icons';
 import {BLACK} from '../../../styles/colors';
+import CustomImage from '../../../SecondaryComponents/CustomImage';
 
 const InputField = ({
   configField,
@@ -37,7 +37,6 @@ const InputField = ({
 }: InputFieldProps) => {
   const [showImg, setShowImg] = useState<boolean>(false);
   const regex = /^[0-9.,]+$/g;
-  const PLATFORM_IS_WEB = Platform.OS === 'web';
 
   const getStyleText = (text: string | undefined, password?: boolean) => {
     let style: Array<TextStyle | TextStyle[]> = [];
@@ -97,7 +96,8 @@ const InputField = ({
     <TouchableOpacity
       style={styleField.field}
       onPress={onPress}
-      disabled={disabled || configField.disabledField}>
+      disabled={disabled || configField.disabledField}
+    >
       {(() => {
         if (configField?.type === 'textInput') {
           return (
@@ -105,7 +105,8 @@ const InputField = ({
               style={{
                 flexDirection: 'row',
                 width: '100%',
-              }}>
+              }}
+            >
               <TextInput
                 editable={!disabled || !configField.disabledField}
                 focusable={!disabled || !configField.disabledField}
@@ -122,26 +123,22 @@ const InputField = ({
               {password && (
                 <TouchableOpacity
                   onPress={() => setShowPassword(!showPassword)}
-                  style={styles.passwordContainer}>
-                  {PLATFORM_IS_WEB ? (
-                    <img
-                      src={
-                        !showPassword
-                          ? disabledPasswordIcon
-                          : activePasswordIcon
-                      }
-                      style={{width: 22, height: 22}}
-                    />
-                  ) : (
-                    <Image
-                      source={
-                        !showPassword
-                          ? {uri: disabledPasswordIcon}
-                          : {uri: activePasswordIcon}
-                      }
-                      style={styles.passwordImage}
-                    />
-                  )}
+                  style={styles.passwordContainer}
+                >
+                  <CustomImage
+                    style={{
+                      width: 22,
+                      height: 22,
+                    }}
+                    src={
+                      !showPassword ? disabledPasswordIcon : activePasswordIcon
+                    }
+                    source={
+                      !showPassword
+                        ? {uri: disabledPasswordIcon}
+                        : {uri: activePasswordIcon}
+                    }
+                  />
                 </TouchableOpacity>
               )}
             </View>
@@ -162,7 +159,8 @@ const InputField = ({
               <TouchableOpacity
                 onPress={onSubmit}
                 style={styles.buttonContainerInputField}
-                disabled={configField?.disabledSubmit || disabled}>
+                disabled={configField?.disabledSubmit || disabled}
+              >
                 {configField?.image?.imgRoute && (
                   <Image
                     source={{uri: configField.image.imgRoute}}

package/components/pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 /* Imports */
 import React, {useState} from 'react';
 
-import {Text, View, Image, TouchableOpacity, Platform} from 'react-native';
+import {Text, View, TouchableOpacity} from 'react-native';
 import {PaginationStyleVariant} from './Pagination.styles';
 import {PaginationProps} from './Pagination.types';
 import {
@@ -9,6 +9,7 @@ import {
   arrowLast,
   arrowPickerHorizontalIcon,
 } from '../../assets/images/icons';
+import CustomImage from '../../SecondaryComponents/CustomImage';
 
 /* Pagination component */
 export const Pagination = ({
@@ -17,7 +18,6 @@ export const Pagination = ({
   totalData,
   amountDataPerPage,
   pagination,
-  isWeb,
 }: PaginationProps) => {
   // Will serve to set the page number where the user is
   const [page, setPage] = useState<number>(currentPage);
@@ -57,26 +57,16 @@ export const Pagination = ({
             onChangeSelected(1, 0);
           }}
         >
-          {Platform.OS === 'web' && isWeb ? (
-            <img
-              src={arrowFirst}
-              alt="back-double-button"
-              style={{
-                width: 10,
-                height: 10,
-                marginRight: 10,
-              }}
-            />
-          ) : (
-            <Image
-              source={{uri: arrowFirst}}
-              style={{
-                width: 10,
-                height: 10,
-                marginRight: 10,
-              }}
-            />
-          )}
+          <CustomImage
+            src={arrowFirst}
+            alt="back-double-button"
+            source={{uri: arrowFirst}}
+            style={{
+              width: 10,
+              height: 10,
+              marginRight: 10,
+            }}
+          />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -88,23 +78,17 @@ export const Pagination = ({
             }
           }}
         >
-          {Platform.OS === 'web' && isWeb ? (
-            <img
-              src={arrowPickerHorizontalIcon}
-              alt="back-button"
-              style={{width: 10, height: 10, marginRight: 10, rotate: '180deg'}}
-            />
-          ) : (
-            <Image
-              source={{uri: arrowPickerHorizontalIcon}}
-              style={{
-                width: 10,
-                height: 10,
-                marginRight: 10,
-                transform: [{rotate: '180deg'}],
-              }}
-            />
-          )}
+          <CustomImage
+            src={arrowPickerHorizontalIcon}
+            alt="back-button"
+            source={{uri: arrowPickerHorizontalIcon}}
+            style={{
+              width: 10,
+              height: 10,
+              marginRight: 10,
+              rotate: '180deg',
+            }}
+          />
         </TouchableOpacity>
 
         {/* Text with layout to display the page number the user is on */}
@@ -123,20 +107,16 @@ export const Pagination = ({
             }
           }}
         >
-          {Platform.OS === 'web' && isWeb ? (
-            <div>
-              <img
-                src={arrowPickerHorizontalIcon}
-                alt="next-button"
-                style={{width: 10, height: 10, marginRight: 10}}
-              />
-            </div>
-          ) : (
-            <Image
-              source={{uri: arrowPickerHorizontalIcon}}
-              style={{width: 10, height: 10, marginRight: 10}}
-            />
-          )}
+          <CustomImage
+            style={{
+              width: 10,
+              height: 10,
+              marginRight: 10,
+            }}
+            src={arrowPickerHorizontalIcon}
+            alt="next-button"
+            source={{uri: arrowPickerHorizontalIcon}}
+          />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -151,18 +131,16 @@ export const Pagination = ({
             }
           }}
         >
-          {Platform.OS === 'web' && isWeb ? (
-            <img
-              src={arrowLast}
-              alt="next-double-button"
-              style={{width: 10, height: 10, marginRight: 10}}
-            />
-          ) : (
-            <Image
-              source={{uri: arrowLast}}
-              style={{width: 10, height: 10, marginRight: 10}}
-            />
-          )}
+          <CustomImage
+            style={{
+              width: 10,
+              height: 10,
+              marginRight: 10,
+            }}
+            src={arrowLast}
+            alt="next-double-button"
+            source={{uri: arrowLast}}
+          />
         </TouchableOpacity>
       </View>
     </View>

package/components/pagination/__snapshots__/Pagination.test.tsx.snap

@@ -98,11 +98,7 @@ exports[`Running Test for Pagination Check Pagination Disabled 1`] = `
           Object {
             "height": 10,
             "marginRight": 10,
-            "transform": Array [
-              Object {
-                "rotate": "180deg",
-              },
-            ],
+            "rotate": "180deg",
             "width": 10,
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.0.74",
+  "version": "1.0.75",
   "private": false,
   "scripts": {
     "android": "react-native run-android",