fln-espranza 0.0.19 → 0.0.21

package/components/EListPerson.tsx

@@ -9,6 +9,7 @@ interface IProps {
   subtitle?: string;
   noBorder?: boolean;
   firstLetter?: string;
+  itemsEnd?: JSX.Element;
 }
 
 export default function EListPerson({
@@ -16,24 +17,31 @@ export default function EListPerson({
   subtitle,
   noBorder,
   firstLetter,
+  itemsEnd,
 }: IProps) {
   return (
     <View style={[tw`flex-row items-center justify-between`]}>
       <Avatar size="sm" source={""} nameFirstLetter={name.split(" ")[0].charAt(0)} />
       <View
-        style={tw` ml-3 py-3 flex-1 ${
+        style={tw` ml-3 py-3 flex-1 flex-row items-center justify-between ${
           noBorder ? "" : "border-b border-slate-200"
         }`}
       >
+        <View>
         <EText style={tw`font-bold text-slate-800 mb-0.5 capitalize`} numberOfLines={1}>
           {name}
         </EText>
 
-        {subtitle ? (
+        {subtitle 
+        ? 
+        (
           <EText size="sm" style={tw`text-slate-500`}>
             {subtitle}
           </EText>
-        ) : null}
+        )
+         : <></>}
+        </View>        
+      {itemsEnd}
       </View>
     </View>
   );

package/components/EOption.tsx

@@ -1,34 +1,85 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View, TouchableOpacityProps } from 'react-native';
-import tw from '../../../lib/tailwind';
-import EText from './EText';
+import React, { useState } from "react";
+import {
+  TouchableOpacity,
+  View,
+  TouchableOpacityProps,
+  Dimensions,
+  Image,
+} from "react-native";
+import tw from "../../../lib/tailwind";
+import EText from "./EText";
 import { Colors } from "../utils/Color";
 
+const ImageWidth = Dimensions.get("window").width / 2 - 18;
+const ContentWidth = Dimensions.get("window").width - 32;
+const ImageHeight = 120;
+const MediaContainerStyle = "rounded-md overflow-hidden";
 
 interface RadioButtonProps extends TouchableOpacityProps {
-    text?: string;
-    isActive: boolean;
-    onPress?: () => void;
+  text?: string;
+  isActive: boolean;
+  imageSource?: string;
+  onPress?: () => void;
 }
-const EOption = ({ isActive, text, onPress, ...props }: RadioButtonProps) => {
-
-    return (
-        <TouchableOpacity
-            style={[tw`flex flex-row justify-start items-center mt-2 px-4 py-3 border rounded-lg`, {
-                borderColor: isActive ? Colors['secondary-base'] : Colors.border,
-                backgroundColor: isActive ? Colors['secondary-light'] : Colors.white
-            }]
-            }
-            onPress={() => {
-                onPress && onPress();
+const EOption = ({
+  isActive,
+  text,
+  imageSource,
+  onPress,
+  ...props
+}: RadioButtonProps) => {
+  return (
+    <TouchableOpacity
+      style={[
+        tw`flex flex-row justify-start items-center mt-1 px-4 py-3 border rounded-lg ${
+          imageSource ? "flex-col p-0 items-start" : ""
+        }`,
+        {
+          borderColor: isActive ? Colors["secondary-base"] : Colors.border,
+          backgroundColor: isActive ? Colors["secondary-light"] : Colors.white,
+          width: imageSource ? ImageWidth : ContentWidth,
+        },
+      ]}
+      onPress={() => {
+        onPress && onPress();
+      }}
+      activeOpacity={0.7}
+      {...props}
+    >
+      {imageSource !== "" && (
+        <View
+          style={[
+            tw`${MediaContainerStyle}`,
+            {
+              height: ImageHeight,
+              width: ImageWidth - 2,
+              backgroundColor: Colors["secondary-base"],
+            },
+          ]}
+        >
+          <Image
+            style={[
+              tw`h-full w-full`,
+              {
+                opacity: isActive ? 0.5 : 1,
+              },
+            ]}
+            source={{
+              uri: imageSource ,
             }}
-            {...props}
+          />
+        </View>
+      )}
+      {text ? (
+        <EText
+          size={"base"}
+          style={tw`font-normal ${imageSource ? "py-2 px-4" : ""}`}
         >
-            <EText size={"base"} style={tw`font-normal`}>
-                {text}
-            </EText>
-        </TouchableOpacity>
-    );
+          {text}
+        </EText>
+      ) : null}
+    </TouchableOpacity>
+  ); 
 };
 
 export default EOption;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {