fln-espranza 0.0.40 → 0.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.expo/README.md +15 -15
- package/.expo/settings.json +8 -8
- package/assets/images/icon-placeholder-schedule.png +0 -0
- package/components/Avatar.tsx +43 -43
- package/components/BaseLayout.tsx +174 -174
- package/components/Drawer.tsx +125 -125
- package/components/EBadge.tsx +24 -24
- package/components/EButton.tsx +70 -70
- package/components/EButtonIcon.tsx +3 -3
- package/components/EDateAndTimeCard.tsx +51 -51
- package/components/EDateInput.tsx +55 -55
- package/components/EEmptyPlaceholder.tsx +21 -21
- package/components/EErrorText.tsx +19 -19
- package/components/EInfoBox.tsx +41 -41
- package/components/EInput.tsx +54 -54
- package/components/ELabel.tsx +15 -15
- package/components/EListPerson.tsx +52 -52
- package/components/EListSchool.tsx +35 -35
- package/components/ENotFoundPlaceholder.tsx +43 -0
- package/components/EOption.tsx +98 -98
- package/components/EOtpInputBox.tsx +49 -49
- package/components/EPageDescription.tsx +19 -19
- package/components/EPillButton.tsx +33 -33
- package/components/EProfile.tsx +62 -62
- package/components/EProfileScreenLayout.tsx +111 -111
- package/components/EProgressBar.tsx +33 -33
- package/components/EQuestionSerialNumberLabel.tsx +17 -17
- package/components/EQuestionText.tsx +14 -14
- package/components/ESegment.tsx +36 -36
- package/components/EStat.tsx +24 -22
- package/components/EText.tsx +41 -41
- package/components/ETextArea.tsx +53 -53
- package/components/ETimeInput.tsx +54 -54
- package/components/ETimeLineCard.tsx +66 -66
- package/components/ListFormView.tsx +36 -36
- package/components/Loader.tsx +31 -31
- package/components/MenuItems.tsx +46 -46
- package/components/PageHeader.tsx +123 -123
- package/components/ProfileHeader.tsx +85 -85
- package/components/SecondaryBaseLayout.tsx +106 -106
- package/components/Timer.tsx +56 -56
- package/components/icons/EIconAdd.jsx +19 -19
- package/components/icons/EIconAddCircle.jsx +21 -21
- package/components/icons/EIconApplicationStatus.jsx +20 -20
- package/components/icons/EIconArrowDown.jsx +20 -20
- package/components/icons/EIconArrowLeft.jsx +21 -21
- package/components/icons/EIconArrowRight.jsx +21 -21
- package/components/icons/EIconArrowUp.jsx +20 -20
- package/components/icons/EIconBadge.jsx +20 -20
- package/components/icons/EIconBell.jsx +19 -19
- package/components/icons/EIconCalendar.jsx +21 -21
- package/components/icons/EIconCalendarCheck.jsx +24 -24
- package/components/icons/EIconCamera.jsx +20 -20
- package/components/icons/EIconCameraRotate.jsx +23 -23
- package/components/icons/EIconCheck.jsx +19 -19
- package/components/icons/EIconCheckCircle.jsx +20 -20
- package/components/icons/EIconCheckFill.jsx +19 -19
- package/components/icons/EIconChevronDown.jsx +19 -19
- package/components/icons/EIconChevronLeft.jsx +19 -19
- package/components/icons/EIconChevronRight.jsx +19 -19
- package/components/icons/EIconChevronUp.jsx +19 -19
- package/components/icons/EIconClock.jsx +19 -19
- package/components/icons/EIconClose.jsx +19 -19
- package/components/icons/EIconDashboard.jsx +20 -20
- package/components/icons/EIconDocumentCheck.jsx +14 -14
- package/components/icons/EIconEdit.jsx +19 -19
- package/components/icons/EIconFemale.jsx +20 -20
- package/components/icons/EIconFile.jsx +21 -21
- package/components/icons/EIconInfo.jsx +20 -20
- package/components/icons/EIconLogout.jsx +19 -19
- package/components/icons/EIconMale.jsx +21 -21
- package/components/icons/EIconMenu.jsx +19 -19
- package/components/icons/EIconMinus.jsx +19 -19
- package/components/icons/EIconPin.jsx +19 -19
- package/components/icons/EIconProfile.jsx +19 -19
- package/components/icons/EIconSchool.jsx +24 -24
- package/components/icons/EIconSearch.jsx +19 -19
- package/components/icons/EIconSettings.jsx +20 -20
- package/components/icons/EIconShare.jsx +21 -21
- package/components/icons/EIconStudent.jsx +23 -23
- package/components/icons/EIconSubject.jsx +21 -21
- package/components/icons/EIconTeach.jsx +21 -21
- package/components/icons/EIconTrash.jsx +19 -19
- package/components/icons/EIconUserCard.jsx +19 -19
- package/components/icons/EIconUserCheck.jsx +20 -20
- package/components/icons/EIconUsers.jsx +19 -19
- package/components/index.tsx +67 -67
- package/index.ts +184 -180
- package/package.json +26 -26
- package/utils/Color.ts +14 -14
package/components/Drawer.tsx
CHANGED
|
@@ -1,125 +1,125 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ScrollView, View, TouchableOpacity } from "react-native";
|
|
3
|
-
import tw from "../lib/tailwind";
|
|
4
|
-
import EText from "./EText";
|
|
5
|
-
import Spacer from "./Spacer";
|
|
6
|
-
import Avatar from "./Avatar";
|
|
7
|
-
import { Colors } from "../utils/Color";
|
|
8
|
-
import MenuItems from "./MenuItems";
|
|
9
|
-
import EIconLogout from "./icons/EIconLogout";
|
|
10
|
-
|
|
11
|
-
type menuItems = {
|
|
12
|
-
title: string;
|
|
13
|
-
icon: any;
|
|
14
|
-
screen: string;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
interface IProps {
|
|
18
|
-
name: string;
|
|
19
|
-
profile: string;
|
|
20
|
-
menuItems: menuItems[];
|
|
21
|
-
secondMenuItems?: menuItems[];
|
|
22
|
-
secondMenuItemsTitle?: string;
|
|
23
|
-
navigation: any;
|
|
24
|
-
logout?: () => void;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const Drawer = ({
|
|
28
|
-
name,
|
|
29
|
-
profile,
|
|
30
|
-
menuItems,
|
|
31
|
-
navigation,
|
|
32
|
-
secondMenuItemsTitle,
|
|
33
|
-
secondMenuItems,
|
|
34
|
-
logout,
|
|
35
|
-
}: IProps) => {
|
|
36
|
-
return (
|
|
37
|
-
<ScrollView
|
|
38
|
-
scrollEnabled={true}
|
|
39
|
-
showsVerticalScrollIndicator={false}
|
|
40
|
-
style={{
|
|
41
|
-
position: "relative",
|
|
42
|
-
backgroundColor: "#ffffff",
|
|
43
|
-
}}
|
|
44
|
-
>
|
|
45
|
-
<View style={tw`mx-4 pt-4`}>
|
|
46
|
-
<Spacer height={30} />
|
|
47
|
-
|
|
48
|
-
<View style={tw`flex w-full mt-5`}>
|
|
49
|
-
<View style={tw`flex-row items-center`}>
|
|
50
|
-
<Avatar
|
|
51
|
-
size="sm"
|
|
52
|
-
source={""}
|
|
53
|
-
nameFirstLetter={name?.split("")[0]}
|
|
54
|
-
/>
|
|
55
|
-
<View style={tw`ml-3`}>
|
|
56
|
-
<EText size={"xl"} style={tw`font-bold -mt-1`}>
|
|
57
|
-
{name}
|
|
58
|
-
</EText>
|
|
59
|
-
<EText
|
|
60
|
-
size="sm"
|
|
61
|
-
style={[
|
|
62
|
-
tw`font-normal`,
|
|
63
|
-
{
|
|
64
|
-
color: Colors["text-body"],
|
|
65
|
-
},
|
|
66
|
-
]}
|
|
67
|
-
>
|
|
68
|
-
{profile}
|
|
69
|
-
</EText>
|
|
70
|
-
</View>
|
|
71
|
-
</View>
|
|
72
|
-
</View>
|
|
73
|
-
|
|
74
|
-
<Spacer height={30} />
|
|
75
|
-
{menuItems.map((item, index) => {
|
|
76
|
-
return (
|
|
77
|
-
<MenuItems
|
|
78
|
-
key={index}
|
|
79
|
-
title={item.title}
|
|
80
|
-
icon={item.icon}
|
|
81
|
-
onPress={() => navigation.navigate(item.screen)}
|
|
82
|
-
/>
|
|
83
|
-
);
|
|
84
|
-
})}
|
|
85
|
-
|
|
86
|
-
{secondMenuItemsTitle ? (
|
|
87
|
-
<View style={tw`mt-8 mb-1`}>
|
|
88
|
-
<EText size="xs" style={tw`text-slate-400 font-semibold`}>
|
|
89
|
-
My Cluster
|
|
90
|
-
</EText>
|
|
91
|
-
</View>
|
|
92
|
-
) : (
|
|
93
|
-
<></>
|
|
94
|
-
)}
|
|
95
|
-
{secondMenuItems && secondMenuItems?.length > 0 ? (
|
|
96
|
-
secondMenuItems.map((item, index) => {
|
|
97
|
-
return (
|
|
98
|
-
<MenuItems
|
|
99
|
-
key={index}
|
|
100
|
-
title={item.title}
|
|
101
|
-
icon={item.icon}
|
|
102
|
-
onPress={() => navigation.navigate(item.screen)}
|
|
103
|
-
/>
|
|
104
|
-
);
|
|
105
|
-
})
|
|
106
|
-
) : (
|
|
107
|
-
<></>
|
|
108
|
-
)}
|
|
109
|
-
|
|
110
|
-
<MenuItems
|
|
111
|
-
title={"Logout"}
|
|
112
|
-
icon={
|
|
113
|
-
<EIconLogout
|
|
114
|
-
size={24}
|
|
115
|
-
style={tw`text-[${Colors["primary-base"]}]`}
|
|
116
|
-
/>
|
|
117
|
-
}
|
|
118
|
-
onPress={() => logout && logout()}
|
|
119
|
-
/>
|
|
120
|
-
</View>
|
|
121
|
-
</ScrollView>
|
|
122
|
-
);
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
export default Drawer;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ScrollView, View, TouchableOpacity } from "react-native";
|
|
3
|
+
import tw from "../lib/tailwind";
|
|
4
|
+
import EText from "./EText";
|
|
5
|
+
import Spacer from "./Spacer";
|
|
6
|
+
import Avatar from "./Avatar";
|
|
7
|
+
import { Colors } from "../utils/Color";
|
|
8
|
+
import MenuItems from "./MenuItems";
|
|
9
|
+
import EIconLogout from "./icons/EIconLogout";
|
|
10
|
+
|
|
11
|
+
type menuItems = {
|
|
12
|
+
title: string;
|
|
13
|
+
icon: any;
|
|
14
|
+
screen: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
interface IProps {
|
|
18
|
+
name: string;
|
|
19
|
+
profile: string;
|
|
20
|
+
menuItems: menuItems[];
|
|
21
|
+
secondMenuItems?: menuItems[];
|
|
22
|
+
secondMenuItemsTitle?: string;
|
|
23
|
+
navigation: any;
|
|
24
|
+
logout?: () => void;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const Drawer = ({
|
|
28
|
+
name,
|
|
29
|
+
profile,
|
|
30
|
+
menuItems,
|
|
31
|
+
navigation,
|
|
32
|
+
secondMenuItemsTitle,
|
|
33
|
+
secondMenuItems,
|
|
34
|
+
logout,
|
|
35
|
+
}: IProps) => {
|
|
36
|
+
return (
|
|
37
|
+
<ScrollView
|
|
38
|
+
scrollEnabled={true}
|
|
39
|
+
showsVerticalScrollIndicator={false}
|
|
40
|
+
style={{
|
|
41
|
+
position: "relative",
|
|
42
|
+
backgroundColor: "#ffffff",
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
<View style={tw`mx-4 pt-4`}>
|
|
46
|
+
<Spacer height={30} />
|
|
47
|
+
|
|
48
|
+
<View style={tw`flex w-full mt-5`}>
|
|
49
|
+
<View style={tw`flex-row items-center`}>
|
|
50
|
+
<Avatar
|
|
51
|
+
size="sm"
|
|
52
|
+
source={""}
|
|
53
|
+
nameFirstLetter={name?.split("")[0]}
|
|
54
|
+
/>
|
|
55
|
+
<View style={tw`ml-3`}>
|
|
56
|
+
<EText size={"xl"} style={tw`font-bold -mt-1`}>
|
|
57
|
+
{name}
|
|
58
|
+
</EText>
|
|
59
|
+
<EText
|
|
60
|
+
size="sm"
|
|
61
|
+
style={[
|
|
62
|
+
tw`font-normal`,
|
|
63
|
+
{
|
|
64
|
+
color: Colors["text-body"],
|
|
65
|
+
},
|
|
66
|
+
]}
|
|
67
|
+
>
|
|
68
|
+
{profile}
|
|
69
|
+
</EText>
|
|
70
|
+
</View>
|
|
71
|
+
</View>
|
|
72
|
+
</View>
|
|
73
|
+
|
|
74
|
+
<Spacer height={30} />
|
|
75
|
+
{menuItems.map((item, index) => {
|
|
76
|
+
return (
|
|
77
|
+
<MenuItems
|
|
78
|
+
key={index}
|
|
79
|
+
title={item.title}
|
|
80
|
+
icon={item.icon}
|
|
81
|
+
onPress={() => navigation.navigate(item.screen)}
|
|
82
|
+
/>
|
|
83
|
+
);
|
|
84
|
+
})}
|
|
85
|
+
|
|
86
|
+
{secondMenuItemsTitle ? (
|
|
87
|
+
<View style={tw`mt-8 mb-1`}>
|
|
88
|
+
<EText size="xs" style={tw`text-slate-400 font-semibold`}>
|
|
89
|
+
My Cluster
|
|
90
|
+
</EText>
|
|
91
|
+
</View>
|
|
92
|
+
) : (
|
|
93
|
+
<></>
|
|
94
|
+
)}
|
|
95
|
+
{secondMenuItems && secondMenuItems?.length > 0 ? (
|
|
96
|
+
secondMenuItems.map((item, index) => {
|
|
97
|
+
return (
|
|
98
|
+
<MenuItems
|
|
99
|
+
key={index}
|
|
100
|
+
title={item.title}
|
|
101
|
+
icon={item.icon}
|
|
102
|
+
onPress={() => navigation.navigate(item.screen)}
|
|
103
|
+
/>
|
|
104
|
+
);
|
|
105
|
+
})
|
|
106
|
+
) : (
|
|
107
|
+
<></>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
<MenuItems
|
|
111
|
+
title={"Logout"}
|
|
112
|
+
icon={
|
|
113
|
+
<EIconLogout
|
|
114
|
+
size={24}
|
|
115
|
+
style={tw`text-[${Colors["primary-base"]}]`}
|
|
116
|
+
/>
|
|
117
|
+
}
|
|
118
|
+
onPress={() => logout && logout()}
|
|
119
|
+
/>
|
|
120
|
+
</View>
|
|
121
|
+
</ScrollView>
|
|
122
|
+
);
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
export default Drawer;
|
package/components/EBadge.tsx
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { View } from 'react-native'
|
|
3
|
-
import tw from '../lib/tailwind';
|
|
4
|
-
import EText from './EText';
|
|
5
|
-
import { CheckCircleIcon } from 'react-native-heroicons/solid';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
interface IProps {
|
|
9
|
-
text: string;
|
|
10
|
-
bgColor: string;
|
|
11
|
-
textColor: string
|
|
12
|
-
completed?: boolean;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
|
|
16
|
-
return (
|
|
17
|
-
<View style={[tw`flex-row p-1 px-2 bg-[${bgColor}] rounded-full`,]}>
|
|
18
|
-
{completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
|
|
19
|
-
<EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
|
|
20
|
-
{text}
|
|
21
|
-
</EText>
|
|
22
|
-
</View>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { View } from 'react-native'
|
|
3
|
+
import tw from '../lib/tailwind';
|
|
4
|
+
import EText from './EText';
|
|
5
|
+
import { CheckCircleIcon } from 'react-native-heroicons/solid';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
interface IProps {
|
|
9
|
+
text: string;
|
|
10
|
+
bgColor: string;
|
|
11
|
+
textColor: string
|
|
12
|
+
completed?: boolean;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
|
|
16
|
+
return (
|
|
17
|
+
<View style={[tw`flex-row p-1 px-2 bg-[${bgColor}] rounded-full`,]}>
|
|
18
|
+
{completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
|
|
19
|
+
<EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
|
|
20
|
+
{text}
|
|
21
|
+
</EText>
|
|
22
|
+
</View>
|
|
23
|
+
)
|
|
24
|
+
}
|
package/components/EButton.tsx
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
import {
|
|
2
|
-
View,
|
|
3
|
-
TouchableOpacity,
|
|
4
|
-
TouchableOpacityProps,
|
|
5
|
-
} from "react-native";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import tw from "../lib/tailwind";
|
|
8
|
-
import EText from "./EText";
|
|
9
|
-
import { Colors } from "../utils/Color";
|
|
10
|
-
|
|
11
|
-
interface EButtonProps extends TouchableOpacityProps {
|
|
12
|
-
iconL?: JSX.Element;
|
|
13
|
-
iconR?: JSX.Element;
|
|
14
|
-
inline?: boolean;
|
|
15
|
-
small?: boolean;
|
|
16
|
-
type?: "secondary" | "clear" | "primary";
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
children: any;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default function EButton({
|
|
22
|
-
// label,
|
|
23
|
-
children,
|
|
24
|
-
iconL,
|
|
25
|
-
iconR,
|
|
26
|
-
inline,
|
|
27
|
-
small,
|
|
28
|
-
type,
|
|
29
|
-
disabled,
|
|
30
|
-
...props
|
|
31
|
-
}: EButtonProps) {
|
|
32
|
-
return (
|
|
33
|
-
<TouchableOpacity
|
|
34
|
-
activeOpacity={0.8}
|
|
35
|
-
disabled={disabled}
|
|
36
|
-
{...props}
|
|
37
|
-
style={[tw`${inline ? "items-start" : ""}`, {}]}
|
|
38
|
-
>
|
|
39
|
-
<View
|
|
40
|
-
style={[
|
|
41
|
-
tw`flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-11 px-6' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${
|
|
42
|
-
type === "clear"
|
|
43
|
-
? "bg-transparent "
|
|
44
|
-
: type === "secondary"
|
|
45
|
-
? `bg-[${Colors["secondary-base"]}] self-start px-6 h-11`
|
|
46
|
-
: `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
|
|
47
|
-
}`,
|
|
48
|
-
]}
|
|
49
|
-
>
|
|
50
|
-
{/* ICON LEFT */}
|
|
51
|
-
{iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
|
|
52
|
-
{/* LABEL */}
|
|
53
|
-
<EText
|
|
54
|
-
size={"sm"}
|
|
55
|
-
style={[
|
|
56
|
-
tw`font-semibold ${
|
|
57
|
-
type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
|
|
58
|
-
}`,
|
|
59
|
-
]}
|
|
60
|
-
>
|
|
61
|
-
{children }
|
|
62
|
-
</EText>
|
|
63
|
-
|
|
64
|
-
{/* ICON RIGHT */}
|
|
65
|
-
{iconR ? <View style={tw`ml-1 -mr-2`}>{iconR}</View> : null}
|
|
66
|
-
</View>
|
|
67
|
-
</TouchableOpacity>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
|
|
1
|
+
import {
|
|
2
|
+
View,
|
|
3
|
+
TouchableOpacity,
|
|
4
|
+
TouchableOpacityProps,
|
|
5
|
+
} from "react-native";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import tw from "../lib/tailwind";
|
|
8
|
+
import EText from "./EText";
|
|
9
|
+
import { Colors } from "../utils/Color";
|
|
10
|
+
|
|
11
|
+
interface EButtonProps extends TouchableOpacityProps {
|
|
12
|
+
iconL?: JSX.Element;
|
|
13
|
+
iconR?: JSX.Element;
|
|
14
|
+
inline?: boolean;
|
|
15
|
+
small?: boolean;
|
|
16
|
+
type?: "secondary" | "clear" | "primary";
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
children: any;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default function EButton({
|
|
22
|
+
// label,
|
|
23
|
+
children,
|
|
24
|
+
iconL,
|
|
25
|
+
iconR,
|
|
26
|
+
inline,
|
|
27
|
+
small,
|
|
28
|
+
type,
|
|
29
|
+
disabled,
|
|
30
|
+
...props
|
|
31
|
+
}: EButtonProps) {
|
|
32
|
+
return (
|
|
33
|
+
<TouchableOpacity
|
|
34
|
+
activeOpacity={0.8}
|
|
35
|
+
disabled={disabled}
|
|
36
|
+
{...props}
|
|
37
|
+
style={[tw`${inline ? "items-start" : ""}`, {}]}
|
|
38
|
+
>
|
|
39
|
+
<View
|
|
40
|
+
style={[
|
|
41
|
+
tw`flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-11 px-6' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${
|
|
42
|
+
type === "clear"
|
|
43
|
+
? "bg-transparent "
|
|
44
|
+
: type === "secondary"
|
|
45
|
+
? `bg-[${Colors["secondary-base"]}] self-start px-6 h-11`
|
|
46
|
+
: `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
|
|
47
|
+
}`,
|
|
48
|
+
]}
|
|
49
|
+
>
|
|
50
|
+
{/* ICON LEFT */}
|
|
51
|
+
{iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
|
|
52
|
+
{/* LABEL */}
|
|
53
|
+
<EText
|
|
54
|
+
size={"sm"}
|
|
55
|
+
style={[
|
|
56
|
+
tw`font-semibold ${
|
|
57
|
+
type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
|
|
58
|
+
}`,
|
|
59
|
+
]}
|
|
60
|
+
>
|
|
61
|
+
{children }
|
|
62
|
+
</EText>
|
|
63
|
+
|
|
64
|
+
{/* ICON RIGHT */}
|
|
65
|
+
{iconR ? <View style={tw`ml-1 -mr-2`}>{iconR}</View> : null}
|
|
66
|
+
</View>
|
|
67
|
+
</TouchableOpacity>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import tw from "../lib/tailwind";
|
|
4
|
-
import {
|
|
4
|
+
import { ArrowLeftIcon, XMarkIcon } from "react-native-heroicons/solid";
|
|
5
5
|
|
|
6
6
|
interface EButtonIconProps extends TouchableOpacityProps {
|
|
7
7
|
type?: "close";
|
|
@@ -27,9 +27,9 @@ export default function EButtonIcon({
|
|
|
27
27
|
}`}
|
|
28
28
|
>
|
|
29
29
|
{type === "close" ? (
|
|
30
|
-
<
|
|
30
|
+
<XMarkIcon size={20} style={tw`text-${iconColor? iconColor: ""}`} />
|
|
31
31
|
) : (
|
|
32
|
-
<
|
|
32
|
+
<ArrowLeftIcon size={20} style={tw`text-${iconColor? iconColor : ""}`} />
|
|
33
33
|
)}
|
|
34
34
|
</View>
|
|
35
35
|
</TouchableOpacity>
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import tw from "../lib/tailwind";
|
|
4
|
-
import { Colors } from "../utils/Color";
|
|
5
|
-
import EText from "./EText";
|
|
6
|
-
import EIconClock from "./icons/EIconClock";
|
|
7
|
-
|
|
8
|
-
interface IProps {
|
|
9
|
-
date: string;
|
|
10
|
-
month: string;
|
|
11
|
-
day?: string;
|
|
12
|
-
time?: string;
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export default function EDateAndTimeCard({ date, month, day, time }: IProps) {
|
|
17
|
-
return (
|
|
18
|
-
<View
|
|
19
|
-
style={[tw`flex-row pb-4`, { borderBottomColor: Colors.border }]}
|
|
20
|
-
>
|
|
21
|
-
<View
|
|
22
|
-
style={[
|
|
23
|
-
tw`rounded-lg px-3 py-1 items-center justify-center`,
|
|
24
|
-
{ backgroundColor: Colors["primary-base"] },
|
|
25
|
-
]}
|
|
26
|
-
>
|
|
27
|
-
<EText size="xl" style={tw`font-bold text-white -mb-1`}>
|
|
28
|
-
{date}
|
|
29
|
-
</EText>
|
|
30
|
-
<EText size="xs" style={tw`font-bold text-white uppercase opacity-80`}>
|
|
31
|
-
{month}
|
|
32
|
-
</EText>
|
|
33
|
-
</View>
|
|
34
|
-
<View style={tw`ml-3 justify-center`}>
|
|
35
|
-
{/* <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
|
|
36
|
-
{day}
|
|
37
|
-
</EText> */}
|
|
38
|
-
{
|
|
39
|
-
time ?<View style={tw`flex-row justify-center items-center mt-2`}>
|
|
40
|
-
<EIconClock size={16} style={tw`text-slate-500`} />
|
|
41
|
-
<EText
|
|
42
|
-
size="sm"
|
|
43
|
-
style={tw`ml-1 text-slate-500`}
|
|
44
|
-
>
|
|
45
|
-
{time}
|
|
46
|
-
</EText>
|
|
47
|
-
</View> : null}
|
|
48
|
-
</View>
|
|
49
|
-
</View>
|
|
50
|
-
);
|
|
51
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import tw from "../lib/tailwind";
|
|
4
|
+
import { Colors } from "../utils/Color";
|
|
5
|
+
import EText from "./EText";
|
|
6
|
+
import EIconClock from "./icons/EIconClock";
|
|
7
|
+
|
|
8
|
+
interface IProps {
|
|
9
|
+
date: string;
|
|
10
|
+
month: string;
|
|
11
|
+
day?: string;
|
|
12
|
+
time?: string;
|
|
13
|
+
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function EDateAndTimeCard({ date, month, day, time }: IProps) {
|
|
17
|
+
return (
|
|
18
|
+
<View
|
|
19
|
+
style={[tw`flex-row pb-4`, { borderBottomColor: Colors.border }]}
|
|
20
|
+
>
|
|
21
|
+
<View
|
|
22
|
+
style={[
|
|
23
|
+
tw`rounded-lg px-3 py-1 items-center justify-center`,
|
|
24
|
+
{ backgroundColor: Colors["primary-base"] },
|
|
25
|
+
]}
|
|
26
|
+
>
|
|
27
|
+
<EText size="xl" style={tw`font-bold text-white -mb-1`}>
|
|
28
|
+
{date}
|
|
29
|
+
</EText>
|
|
30
|
+
<EText size="xs" style={tw`font-bold text-white uppercase opacity-80`}>
|
|
31
|
+
{month}
|
|
32
|
+
</EText>
|
|
33
|
+
</View>
|
|
34
|
+
<View style={tw`ml-3 justify-center`}>
|
|
35
|
+
{/* <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
|
|
36
|
+
{day}
|
|
37
|
+
</EText> */}
|
|
38
|
+
{
|
|
39
|
+
time ?<View style={tw`flex-row justify-center items-center mt-2`}>
|
|
40
|
+
<EIconClock size={16} style={tw`text-slate-500`} />
|
|
41
|
+
<EText
|
|
42
|
+
size="sm"
|
|
43
|
+
style={tw`ml-1 text-slate-500`}
|
|
44
|
+
>
|
|
45
|
+
{time}
|
|
46
|
+
</EText>
|
|
47
|
+
</View> : null}
|
|
48
|
+
</View>
|
|
49
|
+
</View>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import moment from 'moment'
|
|
2
|
-
import React, { useState } from 'react'
|
|
3
|
-
import { View, TouchableOpacity } from 'react-native'
|
|
4
|
-
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
5
|
-
import tw from '../../../lib/tailwind'
|
|
6
|
-
import { CalendarIcon } from 'react-native-heroicons/outline';
|
|
7
|
-
import EText from './EText';
|
|
8
|
-
import ELabel from './ELabel';
|
|
9
|
-
import { Colors } from 'fln-espranza/utils/Color'
|
|
10
|
-
|
|
11
|
-
interface IProps {
|
|
12
|
-
label: string;
|
|
13
|
-
value: string;
|
|
14
|
-
onChange: (value: string) => void;
|
|
15
|
-
style?: any;
|
|
16
|
-
placeholder?: string;
|
|
17
|
-
maxDate?: Date;
|
|
18
|
-
minDate?: Date;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default function EDateInput({ label, value, style, placeholder, maxDate, minDate, onChange }: IProps) {
|
|
22
|
-
const [show, setShow] = useState(false);
|
|
23
|
-
|
|
24
|
-
const handleOnChange = (event: any, selectedDate: any) => {
|
|
25
|
-
const currentDate = selectedDate;
|
|
26
|
-
setShow(false);
|
|
27
|
-
onChange(currentDate)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
|
|
32
|
-
<View style={[tw`mb-4 `, style]}>
|
|
33
|
-
<ELabel label={label} />
|
|
34
|
-
<TouchableOpacity
|
|
35
|
-
style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
|
|
36
|
-
onPress={() => setShow(true)}
|
|
37
|
-
>
|
|
38
|
-
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
39
|
-
{
|
|
40
|
-
value ? moment(value).format("DD/MM/YYYY") : "Select Date"
|
|
41
|
-
}
|
|
42
|
-
</EText>
|
|
43
|
-
{show ? <DateTimePicker
|
|
44
|
-
testID="dateTimePicker"
|
|
45
|
-
value={value ? new Date(value) : new Date()}
|
|
46
|
-
mode={"date"}
|
|
47
|
-
onChange={handleOnChange}
|
|
48
|
-
minimumDate={minDate}
|
|
49
|
-
maximumDate={maxDate}
|
|
50
|
-
/> : <></>}
|
|
51
|
-
<CalendarIcon size={20} style={tw`text-[${Colors["primary-base"]}]`} />
|
|
52
|
-
</TouchableOpacity>
|
|
53
|
-
</View>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
1
|
+
import moment from 'moment'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import { View, TouchableOpacity } from 'react-native'
|
|
4
|
+
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
5
|
+
import tw from '../../../lib/tailwind'
|
|
6
|
+
import { CalendarIcon } from 'react-native-heroicons/outline';
|
|
7
|
+
import EText from './EText';
|
|
8
|
+
import ELabel from './ELabel';
|
|
9
|
+
import { Colors } from 'fln-espranza/utils/Color'
|
|
10
|
+
|
|
11
|
+
interface IProps {
|
|
12
|
+
label: string;
|
|
13
|
+
value: string;
|
|
14
|
+
onChange: (value: string) => void;
|
|
15
|
+
style?: any;
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
maxDate?: Date;
|
|
18
|
+
minDate?: Date;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default function EDateInput({ label, value, style, placeholder, maxDate, minDate, onChange }: IProps) {
|
|
22
|
+
const [show, setShow] = useState(false);
|
|
23
|
+
|
|
24
|
+
const handleOnChange = (event: any, selectedDate: any) => {
|
|
25
|
+
const currentDate = selectedDate;
|
|
26
|
+
setShow(false);
|
|
27
|
+
onChange(currentDate)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
|
|
32
|
+
<View style={[tw`mb-4 `, style]}>
|
|
33
|
+
<ELabel label={label} />
|
|
34
|
+
<TouchableOpacity
|
|
35
|
+
style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
|
|
36
|
+
onPress={() => setShow(true)}
|
|
37
|
+
>
|
|
38
|
+
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
39
|
+
{
|
|
40
|
+
value ? moment(value).format("DD/MM/YYYY") : "Select Date"
|
|
41
|
+
}
|
|
42
|
+
</EText>
|
|
43
|
+
{show ? <DateTimePicker
|
|
44
|
+
testID="dateTimePicker"
|
|
45
|
+
value={value ? new Date(value) : new Date()}
|
|
46
|
+
mode={"date"}
|
|
47
|
+
onChange={handleOnChange}
|
|
48
|
+
minimumDate={minDate}
|
|
49
|
+
maximumDate={maxDate}
|
|
50
|
+
/> : <></>}
|
|
51
|
+
<CalendarIcon size={20} style={tw`text-[${Colors["primary-base"]}]`} />
|
|
52
|
+
</TouchableOpacity>
|
|
53
|
+
</View>
|
|
54
|
+
)
|
|
55
|
+
}
|