ikualo-ui-kit-mobile 0.0.3 → 0.0.4

package/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/assets/images/_images.ts

@@ -45,4 +45,9 @@ export const images = {
   },
   validateIdentity: require('./validateIdentity.png'),
   validationFailed: require('./validationFailed.png'),
+  header:{
+    back: require('./headerBack.png'),
+    close: require('./headerClose.png'),
+    help: require('./headerInfo.png'),
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/cards/CardList.tsx

@@ -2,9 +2,10 @@ import { Card } from 'react-native-paper';
 import { stylesCards } from '../../../assets/styles/elements/cards';
 import { View, Text, TouchableHighlight } from 'react-native';
 import { useState } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
 
 interface IfCardList {
-  options: { value: string }[];
+  options: { value: string | JSX.Element, id: string }[];
   children?: React.ReactNode;
   onSelectOption: (value: string) => void;
 }
@@ -14,13 +15,13 @@ export const CardList = (props: IfCardList) => {
   const [selectedOption, setSelectOption] = useState(0);
 
   return (
-    <View>
+    <ScrollView>
       {options.map((option, index) => (
         <TouchableHighlight
           key={index}
           onPress={() => {
             setSelectOption(index);
-            onSelectOption(option.value);
+            onSelectOption(option.id);
           }}
           style={stylesCards['card-list-item']}
         >
@@ -34,6 +35,6 @@ export const CardList = (props: IfCardList) => {
           </Card>
         </TouchableHighlight>
       ))}
-    </View>
+    </ScrollView>
   );
 };

package/src/elements/headers/HeaderPage.tsx

@@ -2,32 +2,52 @@ import { Text } from 'react-native-paper';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { stylesHeader } from '../../../assets/styles/elements/header';
-import { icons } from '../../../assets/icons/_icons';
 import { images } from '../../../assets/images/_images';
 
 interface IFHeaderPage {
   title: string;
-  navigateTo: string;
-  onPress?: () => void;
+  navigateTo: 'Back' | string;
+  onPressBack?: () => void;
+  onPressRight?: () => void;
+  right: 'icon' | 'close' | 'help' | ''
 }
 export const HeaderPage = (props: IFHeaderPage) => {
-  const { navigateTo, title, onPress } = props;
-  const navigation = useNavigation();
+  const { navigateTo, title, onPressBack, onPressRight, right } = props;
+  const { navigate, goBack } = useNavigation();
   const navigateToScreen = () => {
-    onPress && onPress();
-    navigateTo === 'Back' ? navigation.goBack() : navigation.navigate(navigateTo as never);
+    onPressBack && onPressBack();
+    navigateTo === 'Back' ? goBack() : navigate(navigateTo as never);
   };
+  const actionsRight = [
+    {
+      name: 'icon',
+      component: <Image source={images.logoSmallBlack} style={stylesHeader['header-logo']} />
+    },
+    {
+      name: 'close',
+      component: <TouchableOpacity onPress={()=>onPressRight && onPressRight()}>
+        <Image source={images.header.close} style={stylesHeader['header-logo']} />
+      </TouchableOpacity>
+
+    },
+    {
+      name: 'help',
+      component: <TouchableOpacity onPress={()=>onPressRight && onPressRight()}>
+        <Image source={images.header.help} style={stylesHeader['header-logo']} />
+      </TouchableOpacity>
+    },
+  ]
   return (
     <View style={stylesHeader['header']}>
-      <TouchableOpacity onPress={navigateToScreen} style={stylesHeader['header-back']}>
-        <Image source={icons.arrowBack} style={stylesHeader['header-back-icon']} />
+      <TouchableOpacity onPress={navigateToScreen}>
+        <Image source={images.header.back} style={stylesHeader['header-logo']} />
       </TouchableOpacity>
-
-      <Text variant="bodyMedium" style={stylesHeader['header-title']}>
-        {title}
-      </Text>
-
-      <Image source={images.logoSmallBlack} style={stylesHeader['header-logo']} />
+      <View style={{ flex: 1, alignItems: 'center' }}>
+        <Text variant="bodyMedium" style={stylesHeader['header-title']}>
+          {title}
+        </Text>
+      </View>
+      {actionsRight.find(x => x.name === right)?.component ?? ""}
     </View>
   );
 };