fln-espranza 0.0.36 → 0.0.38
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/components/Avatar.tsx +43 -43
- package/components/BaseLayout.tsx +174 -174
- package/components/Drawer.tsx +125 -116
- package/components/EBadge.tsx +24 -24
- package/components/EButton.tsx +70 -71
- 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/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/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 +65 -65
- package/index.ts +180 -180
- package/package.json +26 -26
- package/utils/Color.ts +14 -14
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import tw from '../lib/tailwind';
|
|
3
|
-
import EText from './EText';
|
|
4
|
-
interface IProps{
|
|
5
|
-
question: string;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export default function EQuestionText( { question } : IProps) {
|
|
9
|
-
return (
|
|
10
|
-
<EText size={"base"} style={ tw`font-medium mt-1`}>
|
|
11
|
-
{question}
|
|
12
|
-
</EText>
|
|
13
|
-
)
|
|
14
|
-
}
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import tw from '../lib/tailwind';
|
|
3
|
+
import EText from './EText';
|
|
4
|
+
interface IProps{
|
|
5
|
+
question: string;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export default function EQuestionText( { question } : IProps) {
|
|
9
|
+
return (
|
|
10
|
+
<EText size={"base"} style={ tw`font-medium mt-1`}>
|
|
11
|
+
{question}
|
|
12
|
+
</EText>
|
|
13
|
+
)
|
|
14
|
+
}
|
package/components/ESegment.tsx
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import { View, Text, Pressable, TouchableOpacity } from "react-native";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import tw from '../lib/tailwind'
|
|
4
|
-
import EText from "./EText";
|
|
5
|
-
import { Colors } from "../utils/Color";
|
|
6
|
-
|
|
7
|
-
export function ESegmentItem(props: any) {
|
|
8
|
-
const { onPress, label, isActive } = props;
|
|
9
|
-
return (
|
|
10
|
-
<TouchableOpacity
|
|
11
|
-
style={tw.style(
|
|
12
|
-
"py-1.5 px-4 rounded-full items-center w-1/2",
|
|
13
|
-
isActive && "bg-white shadow-lg shadow-slate-500 "
|
|
14
|
-
)}
|
|
15
|
-
onPress={onPress}
|
|
16
|
-
>
|
|
17
|
-
<View style={tw`items-center`}>
|
|
18
|
-
<EText size="sm" style={tw`font-bold ${!isActive ? "text-white": ""}`}>{label}</EText>
|
|
19
|
-
</View>
|
|
20
|
-
</TouchableOpacity>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export default function ESegment(props: any) {
|
|
25
|
-
return (
|
|
26
|
-
<View style={tw`justify-center items-center`}>
|
|
27
|
-
<View
|
|
28
|
-
style={[tw`flex-row rounded-full p-1 border border-slate-100 w-full`, {
|
|
29
|
-
backgroundColor: Colors["text-body"],
|
|
30
|
-
}]}
|
|
31
|
-
>
|
|
32
|
-
{props.children}
|
|
33
|
-
</View>
|
|
34
|
-
</View>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
1
|
+
import { View, Text, Pressable, TouchableOpacity } from "react-native";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import tw from '../lib/tailwind'
|
|
4
|
+
import EText from "./EText";
|
|
5
|
+
import { Colors } from "../utils/Color";
|
|
6
|
+
|
|
7
|
+
export function ESegmentItem(props: any) {
|
|
8
|
+
const { onPress, label, isActive } = props;
|
|
9
|
+
return (
|
|
10
|
+
<TouchableOpacity
|
|
11
|
+
style={tw.style(
|
|
12
|
+
"py-1.5 px-4 rounded-full items-center w-1/2",
|
|
13
|
+
isActive && "bg-white shadow-lg shadow-slate-500 "
|
|
14
|
+
)}
|
|
15
|
+
onPress={onPress}
|
|
16
|
+
>
|
|
17
|
+
<View style={tw`items-center`}>
|
|
18
|
+
<EText size="sm" style={tw`font-bold ${!isActive ? "text-white": ""}`}>{label}</EText>
|
|
19
|
+
</View>
|
|
20
|
+
</TouchableOpacity>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default function ESegment(props: any) {
|
|
25
|
+
return (
|
|
26
|
+
<View style={tw`justify-center items-center`}>
|
|
27
|
+
<View
|
|
28
|
+
style={[tw`flex-row rounded-full p-1 border border-slate-100 w-full`, {
|
|
29
|
+
backgroundColor: Colors["text-body"],
|
|
30
|
+
}]}
|
|
31
|
+
>
|
|
32
|
+
{props.children}
|
|
33
|
+
</View>
|
|
34
|
+
</View>
|
|
35
|
+
);
|
|
36
|
+
}
|
package/components/EText.tsx
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { Text, TextProps } from "react-native";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import tw from "../lib/tailwind";
|
|
4
|
-
|
|
5
|
-
interface ETextProps extends TextProps {
|
|
6
|
-
size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "title";
|
|
7
|
-
muted?: boolean;
|
|
8
|
-
style?: any;
|
|
9
|
-
children?: any;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export default function EText({
|
|
13
|
-
size,
|
|
14
|
-
muted,
|
|
15
|
-
style,
|
|
16
|
-
children,
|
|
17
|
-
...props
|
|
18
|
-
}: ETextProps) {
|
|
19
|
-
return (
|
|
20
|
-
<Text
|
|
21
|
-
{...props}
|
|
22
|
-
style={[
|
|
23
|
-
tw.style(
|
|
24
|
-
"text-base leading-6",
|
|
25
|
-
size === "xs" && "text-xs",
|
|
26
|
-
size === "sm" && "text-sm",
|
|
27
|
-
size === "base" && "text-base",
|
|
28
|
-
size == "lg" && "font-semibold text-lg",
|
|
29
|
-
size === "xl" && "font-bold text-xl",
|
|
30
|
-
size === "2xl" && "font-bold text-2xl",
|
|
31
|
-
size === "3xl" && "font-bold text-3xl",
|
|
32
|
-
size === "title" && "font-extrabold text-title text-2xl",
|
|
33
|
-
muted && "opacity-60"
|
|
34
|
-
),
|
|
35
|
-
style,
|
|
36
|
-
]}
|
|
37
|
-
>
|
|
38
|
-
{children}
|
|
39
|
-
</Text>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
1
|
+
import { Text, TextProps } from "react-native";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import tw from "../lib/tailwind";
|
|
4
|
+
|
|
5
|
+
interface ETextProps extends TextProps {
|
|
6
|
+
size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "title";
|
|
7
|
+
muted?: boolean;
|
|
8
|
+
style?: any;
|
|
9
|
+
children?: any;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default function EText({
|
|
13
|
+
size,
|
|
14
|
+
muted,
|
|
15
|
+
style,
|
|
16
|
+
children,
|
|
17
|
+
...props
|
|
18
|
+
}: ETextProps) {
|
|
19
|
+
return (
|
|
20
|
+
<Text
|
|
21
|
+
{...props}
|
|
22
|
+
style={[
|
|
23
|
+
tw.style(
|
|
24
|
+
"text-base leading-6",
|
|
25
|
+
size === "xs" && "text-xs",
|
|
26
|
+
size === "sm" && "text-sm",
|
|
27
|
+
size === "base" && "text-base",
|
|
28
|
+
size == "lg" && "font-semibold text-lg",
|
|
29
|
+
size === "xl" && "font-bold text-xl",
|
|
30
|
+
size === "2xl" && "font-bold text-2xl",
|
|
31
|
+
size === "3xl" && "font-bold text-3xl",
|
|
32
|
+
size === "title" && "font-extrabold text-title text-2xl",
|
|
33
|
+
muted && "opacity-60"
|
|
34
|
+
),
|
|
35
|
+
style,
|
|
36
|
+
]}
|
|
37
|
+
>
|
|
38
|
+
{children}
|
|
39
|
+
</Text>
|
|
40
|
+
);
|
|
41
|
+
}
|
package/components/ETextArea.tsx
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import { View, Text, TextInput, TextInputProps } from "react-native";
|
|
2
|
-
import React, { useState } from "react";
|
|
3
|
-
import EText from "./EText";
|
|
4
|
-
import tw from "../lib/tailwind";
|
|
5
|
-
|
|
6
|
-
interface EInputProps extends TextInputProps {
|
|
7
|
-
label?: string;
|
|
8
|
-
size?: "lg";
|
|
9
|
-
hasBackground?: boolean;
|
|
10
|
-
icon?: JSX.Element;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export default function ETextArea({
|
|
14
|
-
label,
|
|
15
|
-
size,
|
|
16
|
-
hasBackground,
|
|
17
|
-
icon,
|
|
18
|
-
...props
|
|
19
|
-
}: EInputProps) {
|
|
20
|
-
const [hasFocus, setHasFocus] = useState(false);
|
|
21
|
-
return (
|
|
22
|
-
<View style={[tw``, {}]}>
|
|
23
|
-
{label ? (
|
|
24
|
-
<EText size="sm" style={[tw`font-semibold text-slate-800`, {
|
|
25
|
-
// color: Colors["text-primary"]
|
|
26
|
-
}]}>
|
|
27
|
-
{label}
|
|
28
|
-
</EText>
|
|
29
|
-
) : null}
|
|
30
|
-
|
|
31
|
-
<View
|
|
32
|
-
style={tw` mt-2 `}
|
|
33
|
-
>
|
|
34
|
-
<TextInput
|
|
35
|
-
style={[tw`h-24 rounded-lg p-4 border border-slate-300 ${
|
|
36
|
-
hasFocus ? "border-black " : ""
|
|
37
|
-
}`, {
|
|
38
|
-
textAlignVertical: 'top'
|
|
39
|
-
}]}
|
|
40
|
-
{...props}
|
|
41
|
-
multiline = {true}
|
|
42
|
-
onFocus={() => setHasFocus(!hasFocus)}
|
|
43
|
-
onBlur={() => setHasFocus(!hasFocus)}
|
|
44
|
-
/>
|
|
45
|
-
{
|
|
46
|
-
icon ?
|
|
47
|
-
<>{icon}</>
|
|
48
|
-
: null
|
|
49
|
-
}
|
|
50
|
-
</View>
|
|
51
|
-
</View>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
1
|
+
import { View, Text, TextInput, TextInputProps } from "react-native";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import EText from "./EText";
|
|
4
|
+
import tw from "../lib/tailwind";
|
|
5
|
+
|
|
6
|
+
interface EInputProps extends TextInputProps {
|
|
7
|
+
label?: string;
|
|
8
|
+
size?: "lg";
|
|
9
|
+
hasBackground?: boolean;
|
|
10
|
+
icon?: JSX.Element;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default function ETextArea({
|
|
14
|
+
label,
|
|
15
|
+
size,
|
|
16
|
+
hasBackground,
|
|
17
|
+
icon,
|
|
18
|
+
...props
|
|
19
|
+
}: EInputProps) {
|
|
20
|
+
const [hasFocus, setHasFocus] = useState(false);
|
|
21
|
+
return (
|
|
22
|
+
<View style={[tw``, {}]}>
|
|
23
|
+
{label ? (
|
|
24
|
+
<EText size="sm" style={[tw`font-semibold text-slate-800`, {
|
|
25
|
+
// color: Colors["text-primary"]
|
|
26
|
+
}]}>
|
|
27
|
+
{label}
|
|
28
|
+
</EText>
|
|
29
|
+
) : null}
|
|
30
|
+
|
|
31
|
+
<View
|
|
32
|
+
style={tw` mt-2 `}
|
|
33
|
+
>
|
|
34
|
+
<TextInput
|
|
35
|
+
style={[tw`h-24 rounded-lg p-4 border border-slate-300 ${
|
|
36
|
+
hasFocus ? "border-black " : ""
|
|
37
|
+
}`, {
|
|
38
|
+
textAlignVertical: 'top'
|
|
39
|
+
}]}
|
|
40
|
+
{...props}
|
|
41
|
+
multiline = {true}
|
|
42
|
+
onFocus={() => setHasFocus(!hasFocus)}
|
|
43
|
+
onBlur={() => setHasFocus(!hasFocus)}
|
|
44
|
+
/>
|
|
45
|
+
{
|
|
46
|
+
icon ?
|
|
47
|
+
<>{icon}</>
|
|
48
|
+
: null
|
|
49
|
+
}
|
|
50
|
+
</View>
|
|
51
|
+
</View>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import moment from 'moment'
|
|
2
|
-
import React, { useState } from 'react'
|
|
3
|
-
import { View, TouchableOpacity } from 'react-native'
|
|
4
|
-
import { ClockIcon } from 'react-native-heroicons/outline'
|
|
5
|
-
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
6
|
-
import tw from '../../../lib/tailwind'
|
|
7
|
-
import EText from './EText';
|
|
8
|
-
import ELabel from './ELabel';
|
|
9
|
-
|
|
10
|
-
interface IProps {
|
|
11
|
-
label: string;
|
|
12
|
-
value: string;
|
|
13
|
-
onChange: (value: string) => void;
|
|
14
|
-
style?: any;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export default function ETimeInput( { label, value,style, onChange }: IProps ) {
|
|
18
|
-
const [date, setDate] = useState(new Date());
|
|
19
|
-
const [show, setShow] = useState(false);
|
|
20
|
-
|
|
21
|
-
const handleOnChange = (event: any, selectedDate: any) => {
|
|
22
|
-
const currentDate = selectedDate;
|
|
23
|
-
setShow(false);
|
|
24
|
-
setDate(currentDate);
|
|
25
|
-
onChange(moment(currentDate).format("hh:mm A"));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
|
|
30
|
-
<View style={[tw`mb-4 `, style]}>
|
|
31
|
-
<ELabel label={label} />
|
|
32
|
-
<TouchableOpacity
|
|
33
|
-
style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
|
|
34
|
-
onPress={() => setShow(true)}
|
|
35
|
-
>
|
|
36
|
-
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
37
|
-
{
|
|
38
|
-
// value ? value : moment(date).format("hh:mm A")
|
|
39
|
-
value ? value : "Select Time"
|
|
40
|
-
}
|
|
41
|
-
</EText>
|
|
42
|
-
{show ? <DateTimePicker
|
|
43
|
-
testID="dateTimePicker"
|
|
44
|
-
value={date}
|
|
45
|
-
mode={"time"}
|
|
46
|
-
is24Hour={false}
|
|
47
|
-
onChange={handleOnChange}
|
|
48
|
-
/> : <></>}
|
|
49
|
-
<ClockIcon size={20} style={tw`text-slate-500`} />
|
|
50
|
-
</TouchableOpacity>
|
|
51
|
-
</View>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
1
|
+
import moment from 'moment'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import { View, TouchableOpacity } from 'react-native'
|
|
4
|
+
import { ClockIcon } from 'react-native-heroicons/outline'
|
|
5
|
+
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
6
|
+
import tw from '../../../lib/tailwind'
|
|
7
|
+
import EText from './EText';
|
|
8
|
+
import ELabel from './ELabel';
|
|
9
|
+
|
|
10
|
+
interface IProps {
|
|
11
|
+
label: string;
|
|
12
|
+
value: string;
|
|
13
|
+
onChange: (value: string) => void;
|
|
14
|
+
style?: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default function ETimeInput( { label, value,style, onChange }: IProps ) {
|
|
18
|
+
const [date, setDate] = useState(new Date());
|
|
19
|
+
const [show, setShow] = useState(false);
|
|
20
|
+
|
|
21
|
+
const handleOnChange = (event: any, selectedDate: any) => {
|
|
22
|
+
const currentDate = selectedDate;
|
|
23
|
+
setShow(false);
|
|
24
|
+
setDate(currentDate);
|
|
25
|
+
onChange(moment(currentDate).format("hh:mm A"));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
|
|
30
|
+
<View style={[tw`mb-4 `, style]}>
|
|
31
|
+
<ELabel label={label} />
|
|
32
|
+
<TouchableOpacity
|
|
33
|
+
style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
|
|
34
|
+
onPress={() => setShow(true)}
|
|
35
|
+
>
|
|
36
|
+
<EText size={"sm"} style={tw`font-normal text-slate-400`}>
|
|
37
|
+
{
|
|
38
|
+
// value ? value : moment(date).format("hh:mm A")
|
|
39
|
+
value ? value : "Select Time"
|
|
40
|
+
}
|
|
41
|
+
</EText>
|
|
42
|
+
{show ? <DateTimePicker
|
|
43
|
+
testID="dateTimePicker"
|
|
44
|
+
value={date}
|
|
45
|
+
mode={"time"}
|
|
46
|
+
is24Hour={false}
|
|
47
|
+
onChange={handleOnChange}
|
|
48
|
+
/> : <></>}
|
|
49
|
+
<ClockIcon size={20} style={tw`text-slate-500`} />
|
|
50
|
+
</TouchableOpacity>
|
|
51
|
+
</View>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { Dimensions, TouchableOpacity, View } from 'react-native'
|
|
3
|
-
import tw from '../lib/tailwind'
|
|
4
|
-
import { Colors } from '../utils/Color';
|
|
5
|
-
import EBadge from './EBadge'
|
|
6
|
-
import EText from './EText';
|
|
7
|
-
import EIconChevronRight from './icons/EIconChevronRight';
|
|
8
|
-
|
|
9
|
-
interface IProps {
|
|
10
|
-
title: string;
|
|
11
|
-
description: string;
|
|
12
|
-
completed: boolean;
|
|
13
|
-
onPress?: () => void;
|
|
14
|
-
buttonText?: string;
|
|
15
|
-
disabled: boolean;
|
|
16
|
-
badgeText?: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default function ETimeLineCard({ title, description, completed, disabled, onPress, buttonText, badgeText }: IProps) {
|
|
20
|
-
return (
|
|
21
|
-
<TouchableOpacity
|
|
22
|
-
onPress={() => onPress && onPress()}
|
|
23
|
-
style={[
|
|
24
|
-
tw` rounded-lg p-4 mb-3 w-full border border}`,
|
|
25
|
-
{
|
|
26
|
-
backgroundColor: completed ? Colors['primary-light'] : Colors['white'],
|
|
27
|
-
borderColor: completed ? Colors['primary-base'] : Colors['border'],
|
|
28
|
-
}
|
|
29
|
-
]}
|
|
30
|
-
disabled={disabled}
|
|
31
|
-
>
|
|
32
|
-
|
|
33
|
-
<View style={tw`flex-row justify-between `}>
|
|
34
|
-
<View style={tw`flex-1`}>
|
|
35
|
-
<EText size="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
|
|
36
|
-
{title}
|
|
37
|
-
</EText>
|
|
38
|
-
<EText size='sm' style={[tw`font-normal mt-1`, { color: Colors['text-body'] }]}>
|
|
39
|
-
{description}
|
|
40
|
-
</EText>
|
|
41
|
-
</View>
|
|
42
|
-
<View style={tw`ml-4`}>
|
|
43
|
-
<EBadge
|
|
44
|
-
completed={completed}
|
|
45
|
-
text={
|
|
46
|
-
badgeText ? badgeText : completed ? "Complete" : "Pending"}
|
|
47
|
-
bgColor={completed ? Colors['primary-base'] : Colors.warning}
|
|
48
|
-
textColor={"#ffff"}
|
|
49
|
-
/>
|
|
50
|
-
</View>
|
|
51
|
-
</View>
|
|
52
|
-
|
|
53
|
-
{
|
|
54
|
-
!disabled ? (
|
|
55
|
-
<View style={tw`mt-6 flex-row items-center justify-between`}>
|
|
56
|
-
<TouchableOpacity style={tw`flex-row`} onPress={onPress}>
|
|
57
|
-
<EText size="sm" style={[tw`ml-2 font-semibold`, { color: Colors['primary-base'] }]}>
|
|
58
|
-
{buttonText}
|
|
59
|
-
</EText>
|
|
60
|
-
<EIconChevronRight size={20} style={[tw`ml-2`, { color: Colors['primary-base'] }]} />
|
|
61
|
-
</TouchableOpacity>
|
|
62
|
-
</View>) : <></>
|
|
63
|
-
}
|
|
64
|
-
</TouchableOpacity>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Dimensions, TouchableOpacity, View } from 'react-native'
|
|
3
|
+
import tw from '../lib/tailwind'
|
|
4
|
+
import { Colors } from '../utils/Color';
|
|
5
|
+
import EBadge from './EBadge'
|
|
6
|
+
import EText from './EText';
|
|
7
|
+
import EIconChevronRight from './icons/EIconChevronRight';
|
|
8
|
+
|
|
9
|
+
interface IProps {
|
|
10
|
+
title: string;
|
|
11
|
+
description: string;
|
|
12
|
+
completed: boolean;
|
|
13
|
+
onPress?: () => void;
|
|
14
|
+
buttonText?: string;
|
|
15
|
+
disabled: boolean;
|
|
16
|
+
badgeText?: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default function ETimeLineCard({ title, description, completed, disabled, onPress, buttonText, badgeText }: IProps) {
|
|
20
|
+
return (
|
|
21
|
+
<TouchableOpacity
|
|
22
|
+
onPress={() => onPress && onPress()}
|
|
23
|
+
style={[
|
|
24
|
+
tw` rounded-lg p-4 mb-3 w-full border border}`,
|
|
25
|
+
{
|
|
26
|
+
backgroundColor: completed ? Colors['primary-light'] : Colors['white'],
|
|
27
|
+
borderColor: completed ? Colors['primary-base'] : Colors['border'],
|
|
28
|
+
}
|
|
29
|
+
]}
|
|
30
|
+
disabled={disabled}
|
|
31
|
+
>
|
|
32
|
+
|
|
33
|
+
<View style={tw`flex-row justify-between `}>
|
|
34
|
+
<View style={tw`flex-1`}>
|
|
35
|
+
<EText size="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
|
|
36
|
+
{title}
|
|
37
|
+
</EText>
|
|
38
|
+
<EText size='sm' style={[tw`font-normal mt-1`, { color: Colors['text-body'] }]}>
|
|
39
|
+
{description}
|
|
40
|
+
</EText>
|
|
41
|
+
</View>
|
|
42
|
+
<View style={tw`ml-4`}>
|
|
43
|
+
<EBadge
|
|
44
|
+
completed={completed}
|
|
45
|
+
text={
|
|
46
|
+
badgeText ? badgeText : completed ? "Complete" : "Pending"}
|
|
47
|
+
bgColor={completed ? Colors['primary-base'] : Colors.warning}
|
|
48
|
+
textColor={"#ffff"}
|
|
49
|
+
/>
|
|
50
|
+
</View>
|
|
51
|
+
</View>
|
|
52
|
+
|
|
53
|
+
{
|
|
54
|
+
!disabled ? (
|
|
55
|
+
<View style={tw`mt-6 flex-row items-center justify-between`}>
|
|
56
|
+
<TouchableOpacity style={tw`flex-row`} onPress={onPress}>
|
|
57
|
+
<EText size="sm" style={[tw`ml-2 font-semibold`, { color: Colors['primary-base'] }]}>
|
|
58
|
+
{buttonText}
|
|
59
|
+
</EText>
|
|
60
|
+
<EIconChevronRight size={20} style={[tw`ml-2`, { color: Colors['primary-base'] }]} />
|
|
61
|
+
</TouchableOpacity>
|
|
62
|
+
</View>) : <></>
|
|
63
|
+
}
|
|
64
|
+
</TouchableOpacity>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
View,
|
|
3
|
-
Text,
|
|
4
|
-
TouchableOpacity,
|
|
5
|
-
Image,
|
|
6
|
-
TouchableOpacityProps,
|
|
7
|
-
} from "react-native";
|
|
8
|
-
import React from "react";
|
|
9
|
-
import tw from "../lib/tailwind";
|
|
10
|
-
import EText from "./EText";
|
|
11
|
-
import { Colors } from "../utils/Color";
|
|
12
|
-
// import { Tag } from "..";
|
|
13
|
-
|
|
14
|
-
interface ListFormViewProps {
|
|
15
|
-
label: string;
|
|
16
|
-
description: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default function ListFormView({
|
|
20
|
-
label,
|
|
21
|
-
description,
|
|
22
|
-
}: ListFormViewProps) {
|
|
23
|
-
return (
|
|
24
|
-
<View style={tw`flex-row items-center justify-between py-3 border-b border-[${Colors.border}]`}>
|
|
25
|
-
<View style={tw``}>
|
|
26
|
-
<EText size="sm" style={tw`font-normal text-[${Colors["text-secondary"]}]`}>
|
|
27
|
-
{label}
|
|
28
|
-
</EText>
|
|
29
|
-
</View>
|
|
30
|
-
<View style={tw`flex-1 ml-4 items-end`}>
|
|
31
|
-
<EText size="sm" style={tw`font-normal text-[${Colors["text-primary"]}]`}>
|
|
32
|
-
{description}
|
|
33
|
-
</EText>
|
|
34
|
-
</View>
|
|
35
|
-
</View>
|
|
36
|
-
);
|
|
1
|
+
import {
|
|
2
|
+
View,
|
|
3
|
+
Text,
|
|
4
|
+
TouchableOpacity,
|
|
5
|
+
Image,
|
|
6
|
+
TouchableOpacityProps,
|
|
7
|
+
} from "react-native";
|
|
8
|
+
import React from "react";
|
|
9
|
+
import tw from "../lib/tailwind";
|
|
10
|
+
import EText from "./EText";
|
|
11
|
+
import { Colors } from "../utils/Color";
|
|
12
|
+
// import { Tag } from "..";
|
|
13
|
+
|
|
14
|
+
interface ListFormViewProps {
|
|
15
|
+
label: string;
|
|
16
|
+
description: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default function ListFormView({
|
|
20
|
+
label,
|
|
21
|
+
description,
|
|
22
|
+
}: ListFormViewProps) {
|
|
23
|
+
return (
|
|
24
|
+
<View style={tw`flex-row items-center justify-between py-3 border-b border-[${Colors.border}]`}>
|
|
25
|
+
<View style={tw``}>
|
|
26
|
+
<EText size="sm" style={tw`font-normal text-[${Colors["text-secondary"]}]`}>
|
|
27
|
+
{label}
|
|
28
|
+
</EText>
|
|
29
|
+
</View>
|
|
30
|
+
<View style={tw`flex-1 ml-4 items-end`}>
|
|
31
|
+
<EText size="sm" style={tw`font-normal text-[${Colors["text-primary"]}]`}>
|
|
32
|
+
{description}
|
|
33
|
+
</EText>
|
|
34
|
+
</View>
|
|
35
|
+
</View>
|
|
36
|
+
);
|
|
37
37
|
}
|