fln-espranza 0.0.20 → 0.0.21

package/components/PageHeader.tsx

@@ -1,115 +1,115 @@
-import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
-import React, { useEffect, useRef } from "react";
-import tw from "../lib/tailwind";
-import { useNavigation } from "@react-navigation/native";
-import EText from "./EText";
-import Constants from "expo-constants";
-import { EIconArrowLeft, EIconMenu } from "fln-espranza";
-
-const SCREEN_WIDTH = Dimensions.get("window").width;
-const HEADER_HEIGHT = 90;
-
-interface PageHeaderProps {
-  title: string;
-  subtitle?: string;
-  curved?: boolean;
-  children?: JSX.Element;
-  iconEnd?: JSX.Element;
-  border?: boolean;
-  menuButton?: boolean;
-}
-
-export default function PageHeader({
-  title,
-  subtitle,
-  curved,
-  children,
-  iconEnd,
-  border,
-  menuButton,
-}: PageHeaderProps) {
-  const navigation = useNavigation();
-
-  const translateX = useRef(new Animated.Value(60)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.spring(translateX, {
-      toValue: 0,
-      stiffness: 40,
-      damping: 10,
-      useNativeDriver: true,
-    }).start();
-    Animated.spring(opacity, {
-      toValue: 1,
-      delay: 250,
-      useNativeDriver: true,
-    }).start();
-  });
-  return (
-    <View style={[tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `, {}]}>
-      <View style={tw`overflow-hidden`}>
-        <View
-          style={[
-            tw`flex-row items-center px-3`,
-            {
-              paddingTop: Constants.statusBarHeight + 8,
-            },
-          ]}
-        >
-          {/* LEFT ICON */}
-          <View
-            style={[tw`` ]}
-          >
-            {menuButton ?
-            <TouchableOpacity activeOpacity={0.6} 
-            onPress={() => navigation?.openDrawer()}>
-              <EIconMenu
-                size={24}
-                style={tw`text-slate-800`}
-              />
-            </TouchableOpacity>
-              
-              :
-              <TouchableOpacity  activeOpacity={0.6}
-              onPress={() => navigation.goBack()}>
-              <EIconArrowLeft
-                iconColor={curved ? "white" : "tint-slate-900"}
-                size={24}
-                // onPress={() => navigation.navigate("Dashboard")}
-                style={tw`text-slate-800`}
-              />
-              </TouchableOpacity>
-            }
-          </View>
-          {/* TITLE */}
-          <View style={tw`flex-1 items-start px-3`}>
-            <EText
-              size="lg"
-              style={tw.style("text-slate-800 font-bold")}
-            >
-              {title}
-            </EText>
-            {subtitle ? (
-              <EText
-                style={tw.style(
-                  "text-slate-800 opacity-40 font-semibold mt-0.25"
-                )}
-              >
-                {subtitle}
-              </EText>
-            ) : null}
-          </View>
-          
-          {/* RIGHT ICON */}
-          {iconEnd ? (
-            <View style={[tw``, {}]}>
-              {iconEnd}
-            </View>
-          ) : null}
-        </View>
-        {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
-      </View>
-    </View>
-  );
-}
+import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
+import React, { useEffect, useRef } from "react";
+import tw from "../lib/tailwind";
+import { useNavigation } from "@react-navigation/native";
+import EText from "./EText";
+import Constants from "expo-constants";
+import { EIconArrowLeft, EIconMenu } from "fln-espranza";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const HEADER_HEIGHT = 90;
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  curved?: boolean;
+  children?: JSX.Element;
+  iconEnd?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function PageHeader({
+  title,
+  subtitle,
+  curved,
+  children,
+  iconEnd,
+  border,
+  menuButton,
+}: PageHeaderProps) {
+  const navigation = useNavigation();
+
+  const translateX = useRef(new Animated.Value(60)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.spring(translateX, {
+      toValue: 0,
+      stiffness: 40,
+      damping: 10,
+      useNativeDriver: true,
+    }).start();
+    Animated.spring(opacity, {
+      toValue: 1,
+      delay: 250,
+      useNativeDriver: true,
+    }).start();
+  });
+  return (
+    <View style={[tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `, {}]}>
+      <View style={tw`overflow-hidden`}>
+        <View
+          style={[
+            tw`flex-row items-center px-3`,
+            {
+              paddingTop: Constants.statusBarHeight + 8,
+            },
+          ]}
+        >
+          {/* LEFT ICON */}
+          <View
+            style={[tw`` ]}
+          >
+            {menuButton ?
+            <TouchableOpacity activeOpacity={0.6} 
+            onPress={() => navigation?.openDrawer()}>
+              <EIconMenu
+                size={24}
+                style={tw`text-slate-800`}
+              />
+            </TouchableOpacity>
+              
+              :
+              <TouchableOpacity  activeOpacity={0.6}
+              onPress={() => navigation.goBack()}>
+              <EIconArrowLeft
+                iconColor={curved ? "white" : "tint-slate-900"}
+                size={24}
+                // onPress={() => navigation.navigate("Dashboard")}
+                style={tw`text-slate-800`}
+              />
+              </TouchableOpacity>
+            }
+          </View>
+          {/* TITLE */}
+          <View style={tw`flex-1 items-start px-3`}>
+            <EText
+              size="lg"
+              style={tw.style("text-slate-800 font-bold")}
+            >
+              {title}
+            </EText>
+            {subtitle ? (
+              <EText
+                style={tw.style(
+                  "text-slate-800 opacity-40 font-semibold mt-0.25"
+                )}
+              >
+                {subtitle}
+              </EText>
+            ) : null}
+          </View>
+          
+          {/* RIGHT ICON */}
+          {iconEnd ? (
+            <View style={[tw``, {}]}>
+              {iconEnd}
+            </View>
+          ) : null}
+        </View>
+        {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
+      </View>
+    </View>
+  );
+}

package/components/SecondaryBaseLayout.tsx

@@ -1,102 +1,102 @@
-import { View, Dimensions, ScrollView, Platform } from "react-native";
-import React from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import tw from "../lib/tailwind";
-import { StatusBar } from "expo-status-bar";
-import { PageHeader } from ".";
-import Constants from "expo-constants";
-import { useNavigation } from "@react-navigation/native";
-
-const SCREEN_WIDTH = Dimensions.get("window").width;
-const SCREEN_HEIGHT = Dimensions.get("window").height;
-const HEADER_HEIGHT = Constants.statusBarHeight + 60;
-const SCROLL_PADDING_BOTTOM = 100;
-
-interface BaseLayoutProps {
-  title: string;
-  subtitle?: string;
-  curved?: boolean;
-  headerContent?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-  iconEnd?: JSX.Element;
-  noScroll?: boolean;
-  bottomButton?: JSX.Element;
-  border?: boolean;
-  menuButton?: boolean;
-}
-
-export default function SecondaryBaseLayout({
-  title,
-  subtitle,
-  curved,
-  headerContent,
-  children,
-  noScroll,
-  iconEnd,
-  bottomButton,
-  border,
-  menuButton,
-}: BaseLayoutProps) {
-  const insets = useSafeAreaInsets();
-
-  const navigation = useNavigation();
-
-  return (
-    <View
-      style={[
-        tw`flex-1 bg-white`,
-        {
-          paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
-          paddingTop: Platform.OS === "ios" ? 44 : 24,
-        },
-      ]}
-    >
-      <StatusBar style="dark" animated />
-
-      {/* HEADER */}
-      <View
-        style={[
-          tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white  ${
-            title ? "mb-1" : "pb-0"
-          }`,
-        ]}
-      >
-        <PageHeader
-          border={border}
-          title={title}
-          subtitle={subtitle}
-          curved={curved}
-          iconEnd={iconEnd}
-          menuButton={menuButton}
-        >
-          {headerContent}
-        </PageHeader>
-      </View>
-      <ScrollView
-        style={[
-          tw`flex-1`,
-          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 80 },
-        ]}
-        showsVerticalScrollIndicator={false}
-        decelerationRate={"fast"}
-        contentContainerStyle={{
-          paddingBottom: SCROLL_PADDING_BOTTOM,
-        }}
-      >
-        {children}
-      </ScrollView>
-      {bottomButton ? (
-        <View
-          style={[
-            tw` px-4 `,
-            { paddingBottom: Platform.OS === "android" ? 8 : 0 },
-          ]}
-        >
-          {bottomButton}
-        </View>
-      ) : (
-        <></>
-      )}
-    </View>
-  );
-}
+import { View, Dimensions, ScrollView, Platform } from "react-native";
+import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import tw from "../lib/tailwind";
+import { StatusBar } from "expo-status-bar";
+import { PageHeader } from ".";
+import Constants from "expo-constants";
+import { useNavigation } from "@react-navigation/native";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const SCREEN_HEIGHT = Dimensions.get("window").height;
+const HEADER_HEIGHT = Constants.statusBarHeight + 60;
+const SCROLL_PADDING_BOTTOM = 100;
+
+interface BaseLayoutProps {
+  title: string;
+  subtitle?: string;
+  curved?: boolean;
+  headerContent?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+  iconEnd?: JSX.Element;
+  noScroll?: boolean;
+  bottomButton?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function SecondaryBaseLayout({
+  title,
+  subtitle,
+  curved,
+  headerContent,
+  children,
+  noScroll,
+  iconEnd,
+  bottomButton,
+  border,
+  menuButton,
+}: BaseLayoutProps) {
+  const insets = useSafeAreaInsets();
+
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={[
+        tw`flex-1 bg-white`,
+        {
+          paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
+          paddingTop: Platform.OS === "ios" ? 44 : 24,
+        },
+      ]}
+    >
+      <StatusBar style="dark" animated />
+
+      {/* HEADER */}
+      <View
+        style={[
+          tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white  ${
+            title ? "mb-1" : "pb-0"
+          }`,
+        ]}
+      >
+        <PageHeader
+          border={border}
+          title={title}
+          subtitle={subtitle}
+          curved={curved}
+          iconEnd={iconEnd}
+          menuButton={menuButton}
+        >
+          {headerContent}
+        </PageHeader>
+      </View>
+      <ScrollView
+        style={[
+          tw`flex-1`,
+          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 80 },
+        ]}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: SCROLL_PADDING_BOTTOM,
+        }}
+      >
+        {children}
+      </ScrollView>
+      {bottomButton ? (
+        <View
+          style={[
+            tw` px-4 `,
+            { paddingBottom: Platform.OS === "android" ? 8 : 0 },
+          ]}
+        >
+          {bottomButton}
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}

package/components/Timer.tsx

@@ -1,57 +1,57 @@
-import React from "react";
-import { useState } from "react";
-import { TouchableOpacity } from "react-native";
-import tw from "../lib/tailwind";
-import { Colors } from "../utils/Color";
-import EText from "./EText";
-
-interface IProps {
-    time: number;
-    text: string;
-    subtext: string;
-    handleGetOTP: () => void;
-    sendOtp: boolean;
-    email: string;
-  }
-
-export default function Timer({ time, text, subtext, sendOtp, handleGetOTP,email }: IProps) {
-
-    const [timer, setTimer] = useState(time);
-    React.useEffect(() => {
-      setTimer(30);
-      return () => {
-        setTimer(0);
-      }
-    }, [sendOtp]);
-  
-    React.useEffect(() => {
-      timer > 0 &&
-        setTimeout(() => {
-          setTimer(timer - 1);
-        }, 1000);
-
-        return () => {
-          clearTimeout();
-        }
-    }, [timer]);
-
-    return(
-
-        <>
-       {timer > 0 ? <TouchableOpacity style={[tw`mt-2`, {}]}>
-            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
-            {timer > 0 && `${text}${timer >= 10 ? timer : "0" + timer}`}
-            </EText>
-        </TouchableOpacity> : 
-        <TouchableOpacity style={[tw`mt-2`, {}]} 
-            onPress={() =>  handleGetOTP()}
-        >
-            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
-            {subtext}
-            </EText>
-        </TouchableOpacity>
-        }
-        </>
-        
-    )
+import React from "react";
+import { useState } from "react";
+import { TouchableOpacity } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
+
+interface IProps {
+    time: number;
+    text: string;
+    subtext: string;
+    handleGetOTP: () => void;
+    sendOtp: boolean;
+    email: string;
+  }
+
+export default function Timer({ time, text, subtext, sendOtp, handleGetOTP,email }: IProps) {
+
+    const [timer, setTimer] = useState(time);
+    React.useEffect(() => {
+      setTimer(30);
+      return () => {
+        setTimer(0);
+      }
+    }, [sendOtp]);
+  
+    React.useEffect(() => {
+      timer > 0 &&
+        setTimeout(() => {
+          setTimer(timer - 1);
+        }, 1000);
+
+        return () => {
+          clearTimeout();
+        }
+    }, [timer]);
+
+    return(
+
+        <>
+       {timer > 0 ? <TouchableOpacity style={[tw`mt-2`, {}]}>
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {timer > 0 && `${text}${timer >= 10 ? timer : "0" + timer}`}
+            </EText>
+        </TouchableOpacity> : 
+        <TouchableOpacity style={[tw`mt-2`, {}]} 
+            onPress={() =>  handleGetOTP()}
+        >
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {subtext}
+            </EText>
+        </TouchableOpacity>
+        }
+        </>
+        
+    )
 }

package/components/icons/EIconAdd.jsx

@@ -1,19 +1,19 @@
-import * as React from "react"
-import Svg, { G, Path } from "react-native-svg"
-
-function EIconAdd(props) {
-	const size = props.size || '100%';
-	return (
-		<Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-			<Path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M12 5.25a.75.75 0 01.75.75v5.25H18a.75.75 0 010 1.5h-5.25V18a.75.75 0 01-1.5 0v-5.25H6a.75.75 0 010-1.5h5.25V6a.75.75 0 01.75-.75z"
-				fill="currentColor"
-				className=""
-			/>
-		</Svg>
-	)
-}
-
-export default EIconAdd;
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+
+function EIconAdd(props) {
+	const size = props.size || '100%';
+	return (
+		<Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M12 5.25a.75.75 0 01.75.75v5.25H18a.75.75 0 010 1.5h-5.25V18a.75.75 0 01-1.5 0v-5.25H6a.75.75 0 010-1.5h5.25V6a.75.75 0 01.75-.75z"
+				fill="currentColor"
+				className=""
+			/>
+		</Svg>
+	)
+}
+
+export default EIconAdd;

package/components/icons/EIconAddCircle.jsx

@@ -1,21 +1,21 @@
-import * as React from "react"
-import Svg, { G, Path } from "react-native-svg"
-
-function EIconAddCircle(props) {
-	const size = props.size || '100%';
-	return (
-		<Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-			<G
-				fill="currentColor"
-				fillRule="evenodd"
-				clipRule="evenodd"
-			>
-				<Path d="M12 7.25a.75.75 0 01.75.75v8a.75.75 0 01-1.5 0V8a.75.75 0 01.75-.75z" />
-				<Path d="M7.25 12a.75.75 0 01.75-.75h8a.75.75 0 010 1.5H8a.75.75 0 01-.75-.75z" />
-				<Path d="M12 3.75A8.25 8.25 0 003.75 12 8.25 8.25 0 0012 20.25 8.25 8.25 0 0020.25 12 8.25 8.25 0 0012 3.75zM2.25 12A9.75 9.75 0 0112 2.25 9.75 9.75 0 0121.75 12 9.75 9.75 0 0112 21.75 9.75 9.75 0 012.25 12z" />
-			</G>
-		</Svg>
-	)
-}
-
-export default EIconAddCircle;
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+
+function EIconAddCircle(props) {
+	const size = props.size || '100%';
+	return (
+		<Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<G
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			>
+				<Path d="M12 7.25a.75.75 0 01.75.75v8a.75.75 0 01-1.5 0V8a.75.75 0 01.75-.75z" />
+				<Path d="M7.25 12a.75.75 0 01.75-.75h8a.75.75 0 010 1.5H8a.75.75 0 01-.75-.75z" />
+				<Path d="M12 3.75A8.25 8.25 0 003.75 12 8.25 8.25 0 0012 20.25 8.25 8.25 0 0020.25 12 8.25 8.25 0 0012 3.75zM2.25 12A9.75 9.75 0 0112 2.25 9.75 9.75 0 0121.75 12 9.75 9.75 0 0112 21.75 9.75 9.75 0 012.25 12z" />
+			</G>
+		</Svg>
+	)
+}
+
+export default EIconAddCircle;

package/components/icons/EIconApplicationStatus.jsx

@@ -1,20 +1,20 @@
-import * as React from "react"
-import Svg, { G, Path } from "react-native-svg"
-
-function EIconApplicationStatus(props) {
-  const size = props.size || '100%';
-  return (
-    <Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <G
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-      >
-       <Path d="M5.5 3.75a.75.75 0 00-.75.75v15c0 .414.336.75.75.75h13a.75.75 0 00.75-.75v-15a.75.75 0 00-.75-.75h-13zm-2.25.75A2.25 2.25 0 015.5 2.25h13a2.25 2.25 0 012.25 2.25v15a2.25 2.25 0 01-2.25 2.25h-13a2.25 2.25 0 01-2.25-2.25v-15z" />
-        <Path d="M11.882 16.5a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM10.058 15.15a.75.75 0 01-.057 1.06l-1.336 1.2a.75.75 0 01-1.002 0l-.664-.597a.75.75 0 011.002-1.116l.163.147.835-.75a.75.75 0 011.06.057zM11.882 12.5a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM8.25 7A.75.75 0 019 6.25h6a.75.75 0 010 1.5H9A.75.75 0 018.25 7zM10.058 11.15a.75.75 0 01-.057 1.06l-1.336 1.2a.75.75 0 01-1.002 0l-.664-.597a.75.75 0 011.002-1.116l.163.147.835-.75a.75.75 0 011.06.057z" />
-      </G>
-    </Svg>
-  )
-}
-
-export default EIconApplicationStatus;
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+
+function EIconApplicationStatus(props) {
+  const size = props.size || '100%';
+  return (
+    <Svg height={size} width={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <G
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      >
+       <Path d="M5.5 3.75a.75.75 0 00-.75.75v15c0 .414.336.75.75.75h13a.75.75 0 00.75-.75v-15a.75.75 0 00-.75-.75h-13zm-2.25.75A2.25 2.25 0 015.5 2.25h13a2.25 2.25 0 012.25 2.25v15a2.25 2.25 0 01-2.25 2.25h-13a2.25 2.25 0 01-2.25-2.25v-15z" />
+        <Path d="M11.882 16.5a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM10.058 15.15a.75.75 0 01-.057 1.06l-1.336 1.2a.75.75 0 01-1.002 0l-.664-.597a.75.75 0 011.002-1.116l.163.147.835-.75a.75.75 0 011.06.057zM11.882 12.5a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM8.25 7A.75.75 0 019 6.25h6a.75.75 0 010 1.5H9A.75.75 0 018.25 7zM10.058 11.15a.75.75 0 01-.057 1.06l-1.336 1.2a.75.75 0 01-1.002 0l-.664-.597a.75.75 0 011.002-1.116l.163.147.835-.75a.75.75 0 011.06.057z" />
+      </G>
+    </Svg>
+  )
+}
+
+export default EIconApplicationStatus;