fln-espranza 0.0.33 → 0.0.36
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/components/Drawer.tsx +26 -8
- package/components/EDateInput.tsx +7 -7
- package/components/EInput.tsx +4 -2
- package/components/EListPerson.tsx +20 -16
- package/components/EListSchool.tsx +1 -1
- package/components/ETextArea.tsx +2 -2
- package/components/ETimeInput.tsx +3 -4
- package/components/ETimeLineCard.tsx +1 -1
- package/components/PageHeader.tsx +32 -25
- package/components/SecondaryBaseLayout.tsx +8 -4
- package/components/icons/EIconDocumentCheck.jsx +14 -0
- package/index.ts +1 -0
- package/package.json +1 -1
package/components/Drawer.tsx
CHANGED
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ScrollView, View, TouchableOpacity } from "react-native";
|
|
3
|
-
import {
|
|
4
|
-
HomeIcon,
|
|
5
|
-
CalendarIcon,
|
|
6
|
-
TemplateIcon,
|
|
7
|
-
ViewBoardsIcon,
|
|
8
|
-
} from "react-native-heroicons/solid";
|
|
9
|
-
import { StyleSheet } from "react-native";
|
|
10
3
|
import tw from "../lib/tailwind";
|
|
11
4
|
import EText from "./EText";
|
|
12
5
|
import Spacer from "./Spacer";
|
|
@@ -25,11 +18,13 @@ interface IProps {
|
|
|
25
18
|
name: string;
|
|
26
19
|
profile: string;
|
|
27
20
|
menuItems: menuItems[];
|
|
21
|
+
secondMenuItems?: menuItems[];
|
|
22
|
+
secondMenuItemsTitle?: string;
|
|
28
23
|
navigation: any;
|
|
29
24
|
logout?: () => void;
|
|
30
25
|
}
|
|
31
26
|
|
|
32
|
-
const Drawer = ({ name, profile, menuItems, navigation, logout }: IProps) => {
|
|
27
|
+
const Drawer = ({ name, profile, menuItems, navigation, secondMenuItemsTitle, secondMenuItems, logout }: IProps) => {
|
|
33
28
|
return (
|
|
34
29
|
<ScrollView
|
|
35
30
|
scrollEnabled={true}
|
|
@@ -80,6 +75,29 @@ const Drawer = ({ name, profile, menuItems, navigation, logout }: IProps) => {
|
|
|
80
75
|
);
|
|
81
76
|
})}
|
|
82
77
|
|
|
78
|
+
{secondMenuItemsTitle
|
|
79
|
+
?
|
|
80
|
+
<EText size="base" style={tw`my-5 mr-2 pb-2 text-slate-500 border-b border-[${Colors.border}] font-normal`}>
|
|
81
|
+
My Cluster
|
|
82
|
+
</EText>
|
|
83
|
+
:
|
|
84
|
+
<></>
|
|
85
|
+
}
|
|
86
|
+
{
|
|
87
|
+
secondMenuItems && secondMenuItems?.length > 0
|
|
88
|
+
?
|
|
89
|
+
secondMenuItems.map((item, index) => {
|
|
90
|
+
return (
|
|
91
|
+
<MenuItems
|
|
92
|
+
key={index}
|
|
93
|
+
title={item.title}
|
|
94
|
+
icon={item.icon}
|
|
95
|
+
onPress={() => navigation.navigate(item.screen)}
|
|
96
|
+
/>)
|
|
97
|
+
})
|
|
98
|
+
: <></>
|
|
99
|
+
}
|
|
100
|
+
|
|
83
101
|
<MenuItems
|
|
84
102
|
title={"Logout"}
|
|
85
103
|
icon={
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import moment from 'moment'
|
|
2
2
|
import React, { useState } from 'react'
|
|
3
3
|
import { View, TouchableOpacity } from 'react-native'
|
|
4
|
-
import { ClockIcon } from 'react-native-heroicons/solid'
|
|
5
|
-
import { onChange } from 'react-native-reanimated'
|
|
6
4
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
7
5
|
import tw from '../../../lib/tailwind'
|
|
8
6
|
import { CalendarIcon } from 'react-native-heroicons/outline';
|
|
9
7
|
import EText from './EText';
|
|
10
8
|
import ELabel from './ELabel';
|
|
9
|
+
import { Colors } from 'fln-espranza/utils/Color'
|
|
11
10
|
|
|
12
11
|
interface IProps {
|
|
13
12
|
label: string;
|
|
14
13
|
value: string;
|
|
15
14
|
onChange: (value: string) => void;
|
|
16
|
-
style?:
|
|
15
|
+
style?: any;
|
|
16
|
+
placeholder?: string;
|
|
17
17
|
maxDate?: Date;
|
|
18
18
|
minDate?: Date;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export default function EDateInput({ label, value, style, maxDate, minDate, onChange }: IProps) {
|
|
21
|
+
export default function EDateInput({ label, value, style, placeholder, maxDate, minDate, onChange }: IProps) {
|
|
22
22
|
const [show, setShow] = useState(false);
|
|
23
23
|
|
|
24
24
|
const handleOnChange = (event: any, selectedDate: any) => {
|
|
@@ -29,13 +29,13 @@ export default function EDateInput({ label, value, style, maxDate, minDate, onCh
|
|
|
29
29
|
|
|
30
30
|
return (
|
|
31
31
|
|
|
32
|
-
<View style={tw`
|
|
32
|
+
<View style={[tw`mb-4 `, style]}>
|
|
33
33
|
<ELabel label={label} />
|
|
34
34
|
<TouchableOpacity
|
|
35
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
36
|
onPress={() => setShow(true)}
|
|
37
37
|
>
|
|
38
|
-
<EText size={"sm"} style={tw`font-normal`}>
|
|
38
|
+
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
39
39
|
{
|
|
40
40
|
value ? moment(value).format("DD/MM/YYYY") : "Select Date"
|
|
41
41
|
}
|
|
@@ -48,7 +48,7 @@ export default function EDateInput({ label, value, style, maxDate, minDate, onCh
|
|
|
48
48
|
minimumDate={minDate}
|
|
49
49
|
maximumDate={maxDate}
|
|
50
50
|
/> : <></>}
|
|
51
|
-
<CalendarIcon size={20} style={tw`text-
|
|
51
|
+
<CalendarIcon size={20} style={tw`text-[${Colors["primary-base"]}]`} />
|
|
52
52
|
</TouchableOpacity>
|
|
53
53
|
</View>
|
|
54
54
|
)
|
package/components/EInput.tsx
CHANGED
|
@@ -10,6 +10,7 @@ interface EInputProps extends TextInputProps {
|
|
|
10
10
|
size?: "lg";
|
|
11
11
|
hasBackground?: boolean;
|
|
12
12
|
icon?: JSX.Element;
|
|
13
|
+
style?: any;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export default function EInput({
|
|
@@ -17,11 +18,12 @@ export default function EInput({
|
|
|
17
18
|
size,
|
|
18
19
|
hasBackground,
|
|
19
20
|
icon,
|
|
21
|
+
style,
|
|
20
22
|
...props
|
|
21
23
|
}: EInputProps) {
|
|
22
24
|
const [hasFocus, setHasFocus] = useState(false);
|
|
23
25
|
return (
|
|
24
|
-
<View style={[tw`mb-4`, {}]}>
|
|
26
|
+
<View style={[tw`mb-4`, {style}]}>
|
|
25
27
|
{label ? (
|
|
26
28
|
<EText size="sm" style={[tw`font-semibold text-slate-800`, {
|
|
27
29
|
// color: Colors["text-primary"]
|
|
@@ -31,7 +33,7 @@ export default function EInput({
|
|
|
31
33
|
) : null}
|
|
32
34
|
|
|
33
35
|
<View
|
|
34
|
-
style={tw` mt-2
|
|
36
|
+
style={tw` mt-2`}
|
|
35
37
|
>
|
|
36
38
|
<TextInput
|
|
37
39
|
style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300 ${
|
|
@@ -10,6 +10,7 @@ interface IProps {
|
|
|
10
10
|
noBorder?: boolean;
|
|
11
11
|
firstLetter?: string;
|
|
12
12
|
itemsEnd?: JSX.Element;
|
|
13
|
+
subTitleIcon?: JSX.Element;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export default function EListPerson({
|
|
@@ -18,30 +19,33 @@ export default function EListPerson({
|
|
|
18
19
|
noBorder,
|
|
19
20
|
firstLetter,
|
|
20
21
|
itemsEnd,
|
|
22
|
+
subTitleIcon
|
|
21
23
|
}: IProps) {
|
|
22
24
|
return (
|
|
23
25
|
<View style={[tw`flex-row items-center justify-between`]}>
|
|
24
26
|
<Avatar size="sm" source={""} nameFirstLetter={name.split(" ")[0].charAt(0)} />
|
|
25
27
|
<View
|
|
26
|
-
style={tw` ml-3 py-3 flex-1 flex-row items-center justify-between ${
|
|
27
|
-
|
|
28
|
-
}`}
|
|
28
|
+
style={tw` ml-3 py-3 flex-1 flex-row items-center justify-between ${noBorder ? "" : "border-b border-slate-200"
|
|
29
|
+
}`}
|
|
29
30
|
>
|
|
30
31
|
<View>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</EText>
|
|
34
|
-
|
|
35
|
-
{subtitle
|
|
36
|
-
?
|
|
37
|
-
(
|
|
38
|
-
<EText size="sm" style={tw`text-slate-500`}>
|
|
39
|
-
{subtitle}
|
|
32
|
+
<EText style={tw`font-bold text-slate-800 mb-0.5 capitalize`} numberOfLines={1}>
|
|
33
|
+
{name}
|
|
40
34
|
</EText>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
35
|
+
|
|
36
|
+
<View style={tw`flex flex-row items-center`}>
|
|
37
|
+
{subTitleIcon ? subTitleIcon : <></>}
|
|
38
|
+
{subtitle
|
|
39
|
+
?
|
|
40
|
+
(
|
|
41
|
+
<EText size="sm" style={tw`text-slate-500`}>
|
|
42
|
+
{subtitle}
|
|
43
|
+
</EText>
|
|
44
|
+
)
|
|
45
|
+
: <></>}
|
|
46
|
+
</View>
|
|
47
|
+
</View>
|
|
48
|
+
{itemsEnd}
|
|
45
49
|
</View>
|
|
46
50
|
</View>
|
|
47
51
|
);
|
|
@@ -18,7 +18,7 @@ export default function EListSchool({
|
|
|
18
18
|
}: IProps) {
|
|
19
19
|
return (
|
|
20
20
|
<View style={tw`border-b border-slate-200 py-3`}>
|
|
21
|
-
<EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={
|
|
21
|
+
<EText style={tw`font-bold text-slate-800 mb-0.5 flex-1`} numberOfLines={2}>
|
|
22
22
|
{name}
|
|
23
23
|
</EText>
|
|
24
24
|
<View style={tw`flex-row items-center`}>
|
package/components/ETextArea.tsx
CHANGED
|
@@ -19,7 +19,7 @@ export default function ETextArea({
|
|
|
19
19
|
}: EInputProps) {
|
|
20
20
|
const [hasFocus, setHasFocus] = useState(false);
|
|
21
21
|
return (
|
|
22
|
-
<View style={[tw
|
|
22
|
+
<View style={[tw``, {}]}>
|
|
23
23
|
{label ? (
|
|
24
24
|
<EText size="sm" style={[tw`font-semibold text-slate-800`, {
|
|
25
25
|
// color: Colors["text-primary"]
|
|
@@ -32,7 +32,7 @@ export default function ETextArea({
|
|
|
32
32
|
style={tw` mt-2 `}
|
|
33
33
|
>
|
|
34
34
|
<TextInput
|
|
35
|
-
style={[tw`h-
|
|
35
|
+
style={[tw`h-24 rounded-lg p-4 border border-slate-300 ${
|
|
36
36
|
hasFocus ? "border-black " : ""
|
|
37
37
|
}`, {
|
|
38
38
|
textAlignVertical: 'top'
|
|
@@ -2,7 +2,6 @@ import moment from 'moment'
|
|
|
2
2
|
import React, { useState } from 'react'
|
|
3
3
|
import { View, TouchableOpacity } from 'react-native'
|
|
4
4
|
import { ClockIcon } from 'react-native-heroicons/outline'
|
|
5
|
-
import { onChange } from 'react-native-reanimated'
|
|
6
5
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
7
6
|
import tw from '../../../lib/tailwind'
|
|
8
7
|
import EText from './EText';
|
|
@@ -12,7 +11,7 @@ interface IProps {
|
|
|
12
11
|
label: string;
|
|
13
12
|
value: string;
|
|
14
13
|
onChange: (value: string) => void;
|
|
15
|
-
style?:
|
|
14
|
+
style?: any;
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
export default function ETimeInput( { label, value,style, onChange }: IProps ) {
|
|
@@ -28,13 +27,13 @@ export default function ETimeInput( { label, value,style, onChange }: IProps ) {
|
|
|
28
27
|
|
|
29
28
|
return (
|
|
30
29
|
|
|
31
|
-
<View style={tw`
|
|
30
|
+
<View style={[tw`mb-4 `, style]}>
|
|
32
31
|
<ELabel label={label} />
|
|
33
32
|
<TouchableOpacity
|
|
34
33
|
style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
|
|
35
34
|
onPress={() => setShow(true)}
|
|
36
35
|
>
|
|
37
|
-
<EText size={"sm"} style={tw`font-normal`}>
|
|
36
|
+
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
38
37
|
{
|
|
39
38
|
// value ? value : moment(date).format("hh:mm A")
|
|
40
39
|
value ? value : "Select Time"
|
|
@@ -45,7 +45,7 @@ export default function ETimeLineCard({ title, description, completed, disabled,
|
|
|
45
45
|
text={
|
|
46
46
|
badgeText ? badgeText : completed ? "Complete" : "Pending"}
|
|
47
47
|
bgColor={completed ? Colors['primary-base'] : Colors.warning}
|
|
48
|
-
textColor={"
|
|
48
|
+
textColor={"#ffff"}
|
|
49
49
|
/>
|
|
50
50
|
</View>
|
|
51
51
|
</View>
|
|
@@ -18,6 +18,7 @@ interface PageHeaderProps {
|
|
|
18
18
|
iconEnd?: JSX.Element;
|
|
19
19
|
border?: boolean;
|
|
20
20
|
menuButton?: boolean;
|
|
21
|
+
hideBackBtn?: boolean;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
export default function PageHeader({
|
|
@@ -28,6 +29,7 @@ export default function PageHeader({
|
|
|
28
29
|
iconEnd,
|
|
29
30
|
border,
|
|
30
31
|
menuButton,
|
|
32
|
+
hideBackBtn
|
|
31
33
|
}: PageHeaderProps) {
|
|
32
34
|
const navigation = useNavigation();
|
|
33
35
|
|
|
@@ -59,30 +61,35 @@ export default function PageHeader({
|
|
|
59
61
|
]}
|
|
60
62
|
>
|
|
61
63
|
{/* LEFT ICON */}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
64
|
+
{hideBackBtn
|
|
65
|
+
? <></>
|
|
66
|
+
:
|
|
67
|
+
<View
|
|
68
|
+
style={[tw``]}
|
|
69
|
+
>
|
|
70
|
+
{menuButton ?
|
|
71
|
+
<TouchableOpacity activeOpacity={0.6}
|
|
72
|
+
onPress={() => navigation?.openDrawer()}>
|
|
73
|
+
<EIconMenu
|
|
74
|
+
size={24}
|
|
75
|
+
style={tw`text-slate-800`}
|
|
76
|
+
/>
|
|
77
|
+
</TouchableOpacity>
|
|
78
|
+
|
|
79
|
+
:
|
|
80
|
+
<TouchableOpacity activeOpacity={0.6}
|
|
81
|
+
onPress={() => navigation.goBack()}>
|
|
82
|
+
<EIconArrowLeft
|
|
83
|
+
iconColor={curved ? "white" : "tint-slate-900"}
|
|
84
|
+
size={24}
|
|
85
|
+
// onPress={() => navigation.navigate("Dashboard")}
|
|
86
|
+
style={tw`text-slate-800`}
|
|
87
|
+
/>
|
|
88
|
+
</TouchableOpacity>
|
|
89
|
+
}
|
|
90
|
+
</View>
|
|
91
|
+
|
|
92
|
+
}
|
|
86
93
|
{/* TITLE */}
|
|
87
94
|
<View style={tw`flex-1 items-start px-3`}>
|
|
88
95
|
<EText
|
|
@@ -101,7 +108,7 @@ export default function PageHeader({
|
|
|
101
108
|
</EText>
|
|
102
109
|
) : null}
|
|
103
110
|
</View>
|
|
104
|
-
|
|
111
|
+
|
|
105
112
|
{/* RIGHT ICON */}
|
|
106
113
|
{iconEnd ? (
|
|
107
114
|
<View style={[tw``, {}]}>
|
|
@@ -23,6 +23,8 @@ interface BaseLayoutProps {
|
|
|
23
23
|
bottomButton?: JSX.Element;
|
|
24
24
|
border?: boolean;
|
|
25
25
|
menuButton?: boolean;
|
|
26
|
+
paddingTop?: number;
|
|
27
|
+
hideBackBtn?: boolean;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
export default function SecondaryBaseLayout({
|
|
@@ -36,6 +38,8 @@ export default function SecondaryBaseLayout({
|
|
|
36
38
|
bottomButton,
|
|
37
39
|
border,
|
|
38
40
|
menuButton,
|
|
41
|
+
paddingTop,
|
|
42
|
+
hideBackBtn
|
|
39
43
|
}: BaseLayoutProps) {
|
|
40
44
|
const insets = useSafeAreaInsets();
|
|
41
45
|
|
|
@@ -47,7 +51,7 @@ export default function SecondaryBaseLayout({
|
|
|
47
51
|
tw`flex-1 bg-white`,
|
|
48
52
|
{
|
|
49
53
|
paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
|
|
50
|
-
paddingTop: Platform.OS === "ios" ? 44 : 24,
|
|
54
|
+
paddingTop: Platform.OS === "ios" ? paddingTop ? paddingTop : 44 : paddingTop ? paddingTop : 24,
|
|
51
55
|
},
|
|
52
56
|
]}
|
|
53
57
|
>
|
|
@@ -56,9 +60,8 @@ export default function SecondaryBaseLayout({
|
|
|
56
60
|
{/* HEADER */}
|
|
57
61
|
<View
|
|
58
62
|
style={[
|
|
59
|
-
tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white ${
|
|
60
|
-
|
|
61
|
-
}`,
|
|
63
|
+
tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white ${title ? "mb-1" : "pb-0"
|
|
64
|
+
}`,
|
|
62
65
|
]}
|
|
63
66
|
>
|
|
64
67
|
<PageHeader
|
|
@@ -68,6 +71,7 @@ export default function SecondaryBaseLayout({
|
|
|
68
71
|
curved={curved}
|
|
69
72
|
iconEnd={iconEnd}
|
|
70
73
|
menuButton={menuButton}
|
|
74
|
+
hideBackBtn={hideBackBtn}
|
|
71
75
|
>
|
|
72
76
|
{headerContent}
|
|
73
77
|
</PageHeader>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import Svg, { G, Path } from "react-native-svg"
|
|
3
|
+
|
|
4
|
+
function EIconDocumentCheck(props) {
|
|
5
|
+
const size = props.size || '100%';
|
|
6
|
+
return (
|
|
7
|
+
<Svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" height={size} width={size} {...props}>
|
|
8
|
+
<Path strokeLinecap="round" strokeLinejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12" />
|
|
9
|
+
</Svg>
|
|
10
|
+
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default EIconDocumentCheck;
|
package/index.ts
CHANGED
|
@@ -86,6 +86,7 @@ import EEmptyPlaceholder from "./components/EEmptyPlaceholder";
|
|
|
86
86
|
import EProfileScreenLayout from "./components/EProfileScreenLayout";
|
|
87
87
|
import { EIconMale } from "./components/icons/EIconMale";
|
|
88
88
|
import { EIconFemale } from "./components/icons/EIconFemale";
|
|
89
|
+
import EIconDocumentCheck from "./components/icons/EIconDocumentCheck";
|
|
89
90
|
|
|
90
91
|
export {
|
|
91
92
|
Avatar,
|