fln-espranza 0.0.26 → 0.0.28

package/components/EOption.tsx

@@ -12,32 +12,34 @@ import { Colors } from "../utils/Color";
 
 const ImageWidth = Dimensions.get("window").width / 2 - 18;
 const ContentWidth = Dimensions.get("window").width - 32;
-const ImageHeight = 120;
+const ImageHeight = 140;
 const MediaContainerStyle = "rounded-md overflow-hidden";
 
 interface RadioButtonProps extends TouchableOpacityProps {
   text?: string;
   isActive: boolean;
   imageSource?: string;
+  optionLabel: string;
   onPress?: () => void;
 }
 const EOption = ({
   isActive,
   text,
   imageSource,
+  optionLabel,
   onPress,
   ...props
 }: RadioButtonProps) => {
   return (
     <TouchableOpacity
       style={[
-        tw`flex flex-row justify-start items-center mt-1 px-4 py-3 border rounded-lg ${
+        tw`flex flex-row justify-start items-center mt-2 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,
+          width: imageSource ? ImageWidth - 10 : ContentWidth,
         },
       ]}
       onPress={() => {
@@ -46,30 +48,41 @@ const EOption = ({
       activeOpacity={0.7}
       {...props}
     >
-      {imageSource !== "" && (
+      {imageSource ? (
         <View
           style={[
             tw`${MediaContainerStyle}`,
             {
-              height: ImageHeight,
-              width: ImageWidth - 2,
-              backgroundColor: Colors["secondary-base"],
+              height: ImageHeight - 20,
+              width: ImageWidth - 12,
+              backgroundColor: Colors.white
             },
           ]}
         >
+          <View
+            style={[
+              tw`h-8 w-8 bg-slate-300 rounded-full justify-center items-center m-2 absolute z-10`,
+            ]}
+          >
+          <EText size={"base"} style={tw`font-normal`}>
+            {optionLabel}
+          </EText>
+          </View>
           <Image
             style={[
-              tw`h-full w-full`,
+              tw`w-full mt-4`,
               {
                 opacity: isActive ? 0.5 : 1,
               },
+              {height: ImageHeight - 40}
             ]}
-            source={{
-              uri: imageSource ,
-            }}
+            source={{uri: imageSource}}
+            resizeMode="contain"
           />
         </View>
-      )}
+      )
+            : <></>
+    }
       {text ? (
         <EText
           size={"base"}

package/components/ETimeLineCard.tsx

@@ -1,34 +1,33 @@
-import { EIconAdd } from 'fln-espranza';
 import React from 'react'
 import { Dimensions, TouchableOpacity, View } from 'react-native'
-import { ChevronRightIcon } from 'react-native-heroicons/solid';
 import tw from '../lib/tailwind'
 import { Colors } from '../utils/Color';
 import EBadge from './EBadge'
-import EButton from './EButton';
-import EDateAndTimeCard from './EDateAndTimeCard'
-import EText from './EText'
+import EText from './EText';
+import EIconChevronRight from './icons/EIconChevronRight';
 
 interface IProps {
   title: string;
   description: string;
   completed: boolean;
-  anotherButton?: boolean;
   onPress?: () => void;
-  onAnotherButtonPress?: () => void;
+  buttonText?: string;
+  disabled: boolean;
+  badgeText?: string;
 }
 
-export default function ETimeLineCard({ title, description, completed, anotherButton, onPress, onAnotherButtonPress }: IProps) {
+export default function ETimeLineCard({ title, description, completed, disabled, onPress, buttonText, badgeText }: IProps) {
   return (
     <TouchableOpacity
-      onPress={() =>  onPress && onPress()}
+      onPress={() => onPress && onPress()}
       style={[
         tw` rounded-lg p-4 mb-3 w-full border border}`,
         {
-          backgroundColor: completed ? Colors['primary-light']  : Colors['white'],
+          backgroundColor: completed ? Colors['primary-light'] : Colors['white'],
           borderColor: completed ? Colors['primary-base'] : Colors['border'],
         }
       ]}
+      disabled={disabled}
     >
 
       <View style={tw`flex-row justify-between `}>
@@ -36,32 +35,40 @@ export default function ETimeLineCard({ title, description, completed, anotherBu
           <EText size="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
             {title}
           </EText>
-          <EText size='sm' style={[tw`font-normal mt-1`, {color: Colors['text-body']}]}>
+          <EText size='sm' style={[tw`font-normal mt-1`, { color: Colors['text-body'] }]}>
             {description}
           </EText>
         </View>
-        <View style={tw`ml-4`}>
-          <ChevronRightIcon style={[tw``,{ color: Colors['text-body']}]} size={16} />
+        {/* <View style={tw`ml-4`}>
+          <ChevronRightIcon style={[tw``, { color: Colors['text-body'] }]} size={16} />
+        </View> */}
+         <View style={tw`ml-4`}>
+        <EBadge
+          completed={completed}
+          text={
+            badgeText ? badgeText : completed ? "Complete" : "Pending"}
+          color={completed ? Colors['primary-base'] : Colors.warning}
+        />
         </View>
       </View>
 
       <View style={tw`mt-6 flex-row items-center justify-between`}>
-        <EBadge
+        {/* <EBadge
           completed={completed}
           text={completed ? "Complete" : "Pending"}
           color={completed ? Colors['primary-base'] : Colors.warning}
-        />
+        /> */}
 
         {
-          anotherButton ? (
-            <TouchableOpacity style={tw`flex-row`} onPress={onAnotherButtonPress}>
-              <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
-                Another Assessment
+          !disabled ? (
+            <TouchableOpacity style={tw`flex-row`} onPress={onPress}>
+              <EText size="sm" style={[tw`ml-2 font-semibold`, { color: Colors['primary-base'] }]}>
+                {buttonText}
               </EText>
-              <EIconAdd size={20} style={[tw`ml-2`, {color: Colors['primary-base']}]}/>
+              <EIconChevronRight size={20} style={[tw`ml-2`, { color: Colors['primary-base'] }]} />
             </TouchableOpacity>
-            
-            ) : <></>
+
+          ) : <></>
         }
       </View>
     </TouchableOpacity>

package/package.json

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