fln-espranza 1.1.12 → 1.1.14

package/components/EDateInput.tsx

@@ -0,0 +1,57 @@
+import moment from 'moment'
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { ClockIcon } from 'react-native-heroicons/solid'
+import { onChange } from 'react-native-reanimated'
+import DateTimePicker from '@react-native-community/datetimepicker';
+import tw from '../../../lib/tailwind'
+import { CalendarIcon } from 'react-native-heroicons/outline';
+import  EText  from './EText';
+import ELabel from './ELabel';
+
+interface IProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    style?: string;
+    maxDate?: Date;
+    minDate?: Date;
+}
+
+export default function EDateInput({ label, value, style, maxDate, minDate, onChange }: IProps) {
+    // const [date, setDate] = useState(new Date());
+    const [show, setShow] = useState(false);
+
+    const handleOnChange = (event: any, selectedDate: any) => {
+        const currentDate = selectedDate;
+        setShow(false);
+        // setDate(currentDate);
+        onChange(moment(currentDate).format(" MMM DD, YYYY"));
+    }
+
+    return (
+
+        <View style={tw`flex-1 ${style ? style : ""}`}>
+            <ELabel label={label} />
+            <TouchableOpacity
+                style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
+                onPress={() => setShow(true)}
+            >
+                <EText size={"sm"} style={tw`font-normal`}>
+                    {
+                        value ? value : "Select Date"
+                    }
+                </EText>
+                {show ? <DateTimePicker
+                    testID="dateTimePicker"
+                    value={value ? new Date(value) : new Date()}
+                    mode={"date"}
+                    onChange={handleOnChange}
+                    minimumDate={minDate}
+                    maximumDate={maxDate}
+                /> : <></>}
+                <CalendarIcon size={20} style={tw`text-slate-500`} />
+            </TouchableOpacity>
+        </View>
+    )
+}

package/components/EErrorText.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import tw from '../lib/tailwind';
+import EText from './EText';
+
+
+interface IProps {
+    error: string;
+}
+
+export default function EErrorText( { error }: IProps ) {
+  return (
+    <View>
+        <EText size={"xs"} style={tw`text-red-500`}>
+            {error}
+        </EText>
+    </View>
+  )
+}

package/components/EPillButton.tsx

@@ -7,14 +7,17 @@ import EText from './EText';
 interface IProps {
     title: string;
     active?: boolean;
+    onPress?: () => void;
 }
 
-export default function EPillButton( { title, active }: IProps) {
+export default function EPillButton( { title, active, onPress }: IProps) {
   return (
       <TouchableOpacity style={[tw`px-4 py-3 mr-2 border rounded-lg border-slate-300`, {
         backgroundColor: active ? Colors['secondary-base'] : "transparent",
         borderColor: active ? Colors['secondary-base'] : Colors['border'],
-      }]}>
+      }]}
+      onPress={onPress}
+      >
         <EText size={"sm"} style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}>
        {title}
         </EText>

package/components/EProfile.tsx

@@ -7,7 +7,7 @@ import EText from './EText';
 
 interface IProps {
   name: string;
-  subjectName: string;
+  subjectName?: string;
   border?: boolean;
   children?: JSX.Element;
   titleSize: string;

package/components/ETimeInput.tsx

@@ -0,0 +1,55 @@
+import moment from 'moment'
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { ClockIcon } from 'react-native-heroicons/outline'
+import { onChange } from 'react-native-reanimated'
+import DateTimePicker from '@react-native-community/datetimepicker';
+import tw from '../../../lib/tailwind'
+import EText from './EText';
+import ELabel from './ELabel';
+
+interface IProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    style?: string;
+}
+
+export default function ETimeInput( { label, value,style, onChange }: IProps ) {
+    const [date, setDate] = useState(new Date());
+    const [show, setShow] = useState(false);
+
+    const handleOnChange = (event: any, selectedDate: any) => {
+        const currentDate = selectedDate;
+        setShow(false);
+        setDate(currentDate);
+        onChange(moment(currentDate).format("hh:mm A"));
+    }
+
+  return (
+
+    <View style={tw`flex-1 ${ style ? style : ""}`}>
+        <ELabel label={label} />
+        <TouchableOpacity
+            style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
+            onPress={() => setShow(true)}
+        >
+            <EText size={"sm"} style={tw`font-normal`}>
+                {
+                //  value ? value :   moment(date).format("hh:mm A")
+                value ? value : "Select Time"
+                }
+            </EText>
+            {show ? <DateTimePicker
+                testID="dateTimePicker"
+                value={date}
+                mode={"time"}
+                is24Hour={false}
+                onChange={handleOnChange}
+            /> : <></>}
+            <ClockIcon size={20} style={tw`text-slate-500`} />
+        </TouchableOpacity>
+    </View>
+  )
+}
+

package/index.ts

@@ -29,6 +29,9 @@ import Spacer from "./components/Spacer";
 import { Colors } from "./utils/Color";
 import ProgressBar from "./components/ProgressBar";
 import Loader from "./components/Loader";
+import ETimeInput from "./components/ETimeInput";
+import EDateInput from "./components/EDateInput";
+import EErrorText from "./components/EErrorText";
 
 export {
   Avatar,
@@ -61,6 +64,9 @@ export {
   Timer,
   ProgressBar,
   Loader,
+  ETimeInput,
+  EDateInput,
+  EErrorText,
   Colors
 
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {
@@ -18,6 +18,9 @@
     "@react-navigation/drawer": "^6.5.0",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
-    "react-native-heroicons": "^2.2.0"
+    "react-native-heroicons": "^2.2.0",
+    "moment": "^2.29.4",
+    "@react-native-community/datetimepicker": "6.1.2",
+    "react-native-reanimated": "~2.8.0"
   }
 }