fln-espranza 1.1.15 → 1.1.16
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 -0
- package/.expo/settings.json +8 -0
- package/components/BaseLayout.tsx +174 -174
- package/components/Drawer.tsx +96 -96
- package/components/EBadge.tsx +23 -27
- package/components/EButton.tsx +73 -73
- package/components/EDateAndTimeCard.tsx +50 -50
- package/components/EDateInput.tsx +55 -55
- package/components/EErrorText.tsx +19 -19
- package/components/EInfoBox.tsx +41 -41
- package/components/EInput.tsx +1 -1
- package/components/ELabel.tsx +15 -15
- package/components/EOtpInputBox.tsx +49 -49
- package/components/EPageDescription.tsx +19 -19
- package/components/EPillButton.tsx +26 -26
- package/components/EProfile.tsx +43 -43
- package/components/ESegment.tsx +36 -36
- package/components/ETimeInput.tsx +55 -55
- package/components/ETimeLineCard.tsx +68 -68
- package/components/ListFormView.tsx +36 -36
- package/components/Loader.tsx +31 -31
- package/components/MenuItems.tsx +41 -41
- package/components/ProgressBar.tsx +33 -33
- package/components/SecondaryBaseLayout.tsx +120 -101
- package/components/Timer.tsx +56 -56
- package/package.json +1 -1
- package/utils/Color.ts +14 -14
package/components/EButton.tsx
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
import {
|
|
2
|
-
View,
|
|
3
|
-
Text,
|
|
4
|
-
TouchableOpacity,
|
|
5
|
-
TouchableOpacityProps,
|
|
6
|
-
} from "react-native";
|
|
7
|
-
import React from "react";
|
|
8
|
-
import tw from "../lib/tailwind";
|
|
9
|
-
import EText from "./EText";
|
|
10
|
-
import { Colors } from "../utils/Color";
|
|
11
|
-
|
|
12
|
-
interface EButtonProps extends TouchableOpacityProps {
|
|
13
|
-
iconL?: JSX.Element;
|
|
14
|
-
iconR?: JSX.Element;
|
|
15
|
-
secondary?: boolean;
|
|
16
|
-
inline?: boolean;
|
|
17
|
-
small?: boolean;
|
|
18
|
-
type?: "secondary" | "clear" | "primary";
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
children: any;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export default function EButton({
|
|
24
|
-
// label,
|
|
25
|
-
children,
|
|
26
|
-
iconL,
|
|
27
|
-
iconR,
|
|
28
|
-
secondary,
|
|
29
|
-
inline,
|
|
30
|
-
small,
|
|
31
|
-
type,
|
|
32
|
-
disabled,
|
|
33
|
-
...props
|
|
34
|
-
}: EButtonProps) {
|
|
35
|
-
return (
|
|
36
|
-
<TouchableOpacity
|
|
37
|
-
activeOpacity={0.8}
|
|
38
|
-
disabled={disabled}
|
|
39
|
-
{...props}
|
|
40
|
-
style={[tw`${inline ? "items-start" : ""}`, {}]}
|
|
41
|
-
>
|
|
42
|
-
<View
|
|
43
|
-
style={[
|
|
44
|
-
tw`h-14 flex-row justify-center items-center px-8 rounded-full ${disabled ? "opacity-60" : ""} ${
|
|
45
|
-
type === "clear"
|
|
46
|
-
? "bg-transparent"
|
|
47
|
-
: type === "secondary"
|
|
48
|
-
? `bg-[${Colors["secondary-base"]}] self-start px-5 h-11`
|
|
49
|
-
: `bg-[${Colors["primary-base"]}]`
|
|
50
|
-
}`,
|
|
51
|
-
]}
|
|
52
|
-
>
|
|
53
|
-
{/* ICON LEFT */}
|
|
54
|
-
{iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
|
|
55
|
-
{/* LABEL */}
|
|
56
|
-
<EText
|
|
57
|
-
size={"
|
|
58
|
-
style={[
|
|
59
|
-
tw`font-semibold ${
|
|
60
|
-
type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
|
|
61
|
-
}`,
|
|
62
|
-
]}
|
|
63
|
-
>
|
|
64
|
-
{children }
|
|
65
|
-
</EText>
|
|
66
|
-
|
|
67
|
-
{/* ICON RIGHT */}
|
|
68
|
-
{iconR ? <View style={tw`ml-1 -mr-2`}>{iconR}</View> : null}
|
|
69
|
-
</View>
|
|
70
|
-
</TouchableOpacity>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
1
|
+
import {
|
|
2
|
+
View,
|
|
3
|
+
Text,
|
|
4
|
+
TouchableOpacity,
|
|
5
|
+
TouchableOpacityProps,
|
|
6
|
+
} from "react-native";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import tw from "../lib/tailwind";
|
|
9
|
+
import EText from "./EText";
|
|
10
|
+
import { Colors } from "../utils/Color";
|
|
11
|
+
|
|
12
|
+
interface EButtonProps extends TouchableOpacityProps {
|
|
13
|
+
iconL?: JSX.Element;
|
|
14
|
+
iconR?: JSX.Element;
|
|
15
|
+
secondary?: boolean;
|
|
16
|
+
inline?: boolean;
|
|
17
|
+
small?: boolean;
|
|
18
|
+
type?: "secondary" | "clear" | "primary";
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
children: any;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default function EButton({
|
|
24
|
+
// label,
|
|
25
|
+
children,
|
|
26
|
+
iconL,
|
|
27
|
+
iconR,
|
|
28
|
+
secondary,
|
|
29
|
+
inline,
|
|
30
|
+
small,
|
|
31
|
+
type,
|
|
32
|
+
disabled,
|
|
33
|
+
...props
|
|
34
|
+
}: EButtonProps) {
|
|
35
|
+
return (
|
|
36
|
+
<TouchableOpacity
|
|
37
|
+
activeOpacity={0.8}
|
|
38
|
+
disabled={disabled}
|
|
39
|
+
{...props}
|
|
40
|
+
style={[tw`${inline ? "items-start" : ""}`, {}]}
|
|
41
|
+
>
|
|
42
|
+
<View
|
|
43
|
+
style={[
|
|
44
|
+
tw`h-14 flex-row justify-center items-center px-8 rounded-full ${disabled ? "opacity-60" : ""} ${
|
|
45
|
+
type === "clear"
|
|
46
|
+
? "bg-transparent"
|
|
47
|
+
: type === "secondary"
|
|
48
|
+
? `bg-[${Colors["secondary-base"]}] self-start px-5 h-11`
|
|
49
|
+
: `bg-[${Colors["primary-base"]}]`
|
|
50
|
+
}`,
|
|
51
|
+
]}
|
|
52
|
+
>
|
|
53
|
+
{/* ICON LEFT */}
|
|
54
|
+
{iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
|
|
55
|
+
{/* LABEL */}
|
|
56
|
+
<EText
|
|
57
|
+
size={"base"}
|
|
58
|
+
style={[
|
|
59
|
+
tw`font-semibold ${
|
|
60
|
+
type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
|
|
61
|
+
}`,
|
|
62
|
+
]}
|
|
63
|
+
>
|
|
64
|
+
{children }
|
|
65
|
+
</EText>
|
|
66
|
+
|
|
67
|
+
{/* ICON RIGHT */}
|
|
68
|
+
{iconR ? <View style={tw`ml-1 -mr-2`}>{iconR}</View> : null}
|
|
69
|
+
</View>
|
|
70
|
+
</TouchableOpacity>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import { ClockIcon } from "react-native-heroicons/solid";
|
|
4
|
-
import tw from "../lib/tailwind";
|
|
5
|
-
import { Colors } from "../utils/Color";
|
|
6
|
-
import EText from "./EText";
|
|
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 border-b`, { borderBottomColor: Colors.border }]}
|
|
20
|
-
>
|
|
21
|
-
<View
|
|
22
|
-
style={[
|
|
23
|
-
tw`rounded-xl mb-2 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`}>
|
|
31
|
-
{month}
|
|
32
|
-
</EText>
|
|
33
|
-
</View>
|
|
34
|
-
<View style={tw`ml-3`}>
|
|
35
|
-
<EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
|
|
36
|
-
{day}
|
|
37
|
-
</EText>
|
|
38
|
-
<View style={tw`flex-row justify-center items-center mt-2`}>
|
|
39
|
-
<ClockIcon size={14} style={tw`text-slate-400`} />
|
|
40
|
-
<EText
|
|
41
|
-
size="sm"
|
|
42
|
-
style={tw`ml-0.5 text-slate-400 font-medium`}
|
|
43
|
-
>
|
|
44
|
-
{time}
|
|
45
|
-
</EText>
|
|
46
|
-
</View>
|
|
47
|
-
</View>
|
|
48
|
-
</View>
|
|
49
|
-
);
|
|
50
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { ClockIcon } from "react-native-heroicons/solid";
|
|
4
|
+
import tw from "../lib/tailwind";
|
|
5
|
+
import { Colors } from "../utils/Color";
|
|
6
|
+
import EText from "./EText";
|
|
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 border-b`, { borderBottomColor: Colors.border }]}
|
|
20
|
+
>
|
|
21
|
+
<View
|
|
22
|
+
style={[
|
|
23
|
+
tw`rounded-xl mb-2 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`}>
|
|
31
|
+
{month}
|
|
32
|
+
</EText>
|
|
33
|
+
</View>
|
|
34
|
+
<View style={tw`ml-3`}>
|
|
35
|
+
<EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
|
|
36
|
+
{day}
|
|
37
|
+
</EText>
|
|
38
|
+
<View style={tw`flex-row justify-center items-center mt-2`}>
|
|
39
|
+
<ClockIcon size={14} style={tw`text-slate-400`} />
|
|
40
|
+
<EText
|
|
41
|
+
size="sm"
|
|
42
|
+
style={tw`ml-0.5 text-slate-400 font-medium`}
|
|
43
|
+
>
|
|
44
|
+
{time}
|
|
45
|
+
</EText>
|
|
46
|
+
</View>
|
|
47
|
+
</View>
|
|
48
|
+
</View>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
@@ -1,55 +1,55 @@
|
|
|
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/solid'
|
|
5
|
-
import { onChange } from 'react-native-reanimated'
|
|
6
|
-
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
7
|
-
import tw from '../../../lib/tailwind'
|
|
8
|
-
import { CalendarIcon } from 'react-native-heroicons/outline';
|
|
9
|
-
import EText from './EText';
|
|
10
|
-
import ELabel from './ELabel';
|
|
11
|
-
|
|
12
|
-
interface IProps {
|
|
13
|
-
label: string;
|
|
14
|
-
value: string;
|
|
15
|
-
onChange: (value: string) => void;
|
|
16
|
-
style?: string;
|
|
17
|
-
maxDate?: Date;
|
|
18
|
-
minDate?: Date;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default function EDateInput({ label, value, style, 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`flex-1 ${style ? 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`}>
|
|
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-slate-500`} />
|
|
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 { ClockIcon } from 'react-native-heroicons/solid'
|
|
5
|
+
import { onChange } from 'react-native-reanimated'
|
|
6
|
+
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
7
|
+
import tw from '../../../lib/tailwind'
|
|
8
|
+
import { CalendarIcon } from 'react-native-heroicons/outline';
|
|
9
|
+
import EText from './EText';
|
|
10
|
+
import ELabel from './ELabel';
|
|
11
|
+
|
|
12
|
+
interface IProps {
|
|
13
|
+
label: string;
|
|
14
|
+
value: string;
|
|
15
|
+
onChange: (value: string) => void;
|
|
16
|
+
style?: string;
|
|
17
|
+
maxDate?: Date;
|
|
18
|
+
minDate?: Date;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default function EDateInput({ label, value, style, 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`flex-1 ${style ? 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`}>
|
|
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-slate-500`} />
|
|
52
|
+
</TouchableOpacity>
|
|
53
|
+
</View>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import tw from '../lib/tailwind';
|
|
4
|
-
import EText from './EText';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
interface IProps {
|
|
8
|
-
error: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export default function EErrorText( { error }: IProps ) {
|
|
12
|
-
return (
|
|
13
|
-
<View>
|
|
14
|
-
<EText size={"xs"} style={tw`text-red-500`}>
|
|
15
|
-
{error}
|
|
16
|
-
</EText>
|
|
17
|
-
</View>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import tw from '../lib/tailwind';
|
|
4
|
+
import EText from './EText';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
interface IProps {
|
|
8
|
+
error: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default function EErrorText( { error }: IProps ) {
|
|
12
|
+
return (
|
|
13
|
+
<View>
|
|
14
|
+
<EText size={"xs"} style={tw`text-red-500`}>
|
|
15
|
+
{error}
|
|
16
|
+
</EText>
|
|
17
|
+
</View>
|
|
18
|
+
)
|
|
19
|
+
}
|
package/components/EInfoBox.tsx
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { View, Text } from "react-native";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import tw from "../lib/tailwind";
|
|
4
|
-
import EText from "./EText";
|
|
5
|
-
import { Style } from "twrnc/dist/esm/types";
|
|
6
|
-
|
|
7
|
-
interface InfoBoxProps {
|
|
8
|
-
title?: string;
|
|
9
|
-
icon: JSX.Element;
|
|
10
|
-
children: string;
|
|
11
|
-
color?: string;
|
|
12
|
-
style?: Style;
|
|
13
|
-
childTextColor?: string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export default function InfoBox({
|
|
17
|
-
title,
|
|
18
|
-
icon,
|
|
19
|
-
color,
|
|
20
|
-
children,
|
|
21
|
-
style,
|
|
22
|
-
childTextColor,
|
|
23
|
-
}: InfoBoxProps) {
|
|
24
|
-
return (
|
|
25
|
-
<View style={[tw.style("rounded-lg"), style]}>
|
|
26
|
-
<View style={tw`flex-row`}>
|
|
27
|
-
<View style={tw`w-5 h-5 mr-1`}>{icon}</View>
|
|
28
|
-
<View style={tw`flex-1`}>
|
|
29
|
-
{title ? (
|
|
30
|
-
<EText size="sm" style={tw`font-semibold mb-1 text-${color ? color : "white"}`}>
|
|
31
|
-
{title}
|
|
32
|
-
</EText>
|
|
33
|
-
) : null}
|
|
34
|
-
<EText size="xs" style={[tw`font-medium`, {color: childTextColor}]}>
|
|
35
|
-
{children}
|
|
36
|
-
</EText>
|
|
37
|
-
</View>
|
|
38
|
-
</View>
|
|
39
|
-
</View>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
1
|
+
import { View, Text } from "react-native";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import tw from "../lib/tailwind";
|
|
4
|
+
import EText from "./EText";
|
|
5
|
+
import { Style } from "twrnc/dist/esm/types";
|
|
6
|
+
|
|
7
|
+
interface InfoBoxProps {
|
|
8
|
+
title?: string;
|
|
9
|
+
icon: JSX.Element;
|
|
10
|
+
children: string;
|
|
11
|
+
color?: string;
|
|
12
|
+
style?: Style;
|
|
13
|
+
childTextColor?: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function InfoBox({
|
|
17
|
+
title,
|
|
18
|
+
icon,
|
|
19
|
+
color,
|
|
20
|
+
children,
|
|
21
|
+
style,
|
|
22
|
+
childTextColor,
|
|
23
|
+
}: InfoBoxProps) {
|
|
24
|
+
return (
|
|
25
|
+
<View style={[tw.style("rounded-lg"), style]}>
|
|
26
|
+
<View style={tw`flex-row`}>
|
|
27
|
+
<View style={tw`w-5 h-5 mr-1`}>{icon}</View>
|
|
28
|
+
<View style={tw`flex-1`}>
|
|
29
|
+
{title ? (
|
|
30
|
+
<EText size="sm" style={tw`font-semibold mb-1 text-${color ? color : "white"}`}>
|
|
31
|
+
{title}
|
|
32
|
+
</EText>
|
|
33
|
+
) : null}
|
|
34
|
+
<EText size="xs" style={[tw`font-medium`, {color: childTextColor}]}>
|
|
35
|
+
{children}
|
|
36
|
+
</EText>
|
|
37
|
+
</View>
|
|
38
|
+
</View>
|
|
39
|
+
</View>
|
|
40
|
+
);
|
|
41
|
+
}
|
package/components/EInput.tsx
CHANGED
package/components/ELabel.tsx
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import tw from '../lib/tailwind'
|
|
3
|
-
import EText from './EText';
|
|
4
|
-
|
|
5
|
-
interface IProps{
|
|
6
|
-
label: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export default function ELabel( {label }: IProps ) {
|
|
10
|
-
return (
|
|
11
|
-
<EText style={tw`text-sm font-semibold text-slate-500`}>
|
|
12
|
-
{label}
|
|
13
|
-
</EText>
|
|
14
|
-
)
|
|
15
|
-
}
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import tw from '../lib/tailwind'
|
|
3
|
+
import EText from './EText';
|
|
4
|
+
|
|
5
|
+
interface IProps{
|
|
6
|
+
label: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default function ELabel( {label }: IProps ) {
|
|
10
|
+
return (
|
|
11
|
+
<EText style={tw`text-sm font-semibold text-slate-500`}>
|
|
12
|
+
{label}
|
|
13
|
+
</EText>
|
|
14
|
+
)
|
|
15
|
+
}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { View, Image, TextInput, TextInputProps } from "react-native";
|
|
2
|
-
import React, { useState } from "react";
|
|
3
|
-
import EText from "./EText";
|
|
4
|
-
import tw from "../lib/tailwind";
|
|
5
|
-
import { AtSymbolIcon } from "react-native-heroicons/outline";
|
|
6
|
-
import { Colors } from "../utils/Color";
|
|
7
|
-
|
|
8
|
-
interface EInputProps extends TextInputProps {
|
|
9
|
-
label?: string;
|
|
10
|
-
icon?:string;
|
|
11
|
-
val?: string;
|
|
12
|
-
setVal?: any;
|
|
13
|
-
maxLength?: number;
|
|
14
|
-
reff?: any;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export default function EOtpInput({label, icon,val,setVal, maxLength, reff, ...props }:EInputProps) {
|
|
18
|
-
const [hasFocus, setHasFocus] = useState(false);
|
|
19
|
-
return (
|
|
20
|
-
<View>
|
|
21
|
-
<EText size="sm" style={tw`font-bold opacity-50`}>
|
|
22
|
-
{label}
|
|
23
|
-
</EText>
|
|
24
|
-
<View
|
|
25
|
-
style={tw`bg-[${Colors["primary-light"]}] h-12 rounded-lg px-4 flex-row items-center border border-blue-100 ${
|
|
26
|
-
hasFocus ? `border-black bg-white shadow-lg shadow-blue-400` : ""
|
|
27
|
-
}`}
|
|
28
|
-
>
|
|
29
|
-
{icon ? <Image
|
|
30
|
-
source={icon}
|
|
31
|
-
style={[
|
|
32
|
-
tw`mr-2 opacity-40 ${hasFocus ? "opacity-100 tint-blue-700" : ""}`,
|
|
33
|
-
{ width: 24, height: 24 },
|
|
34
|
-
]}
|
|
35
|
-
/> : null}
|
|
36
|
-
<TextInput
|
|
37
|
-
{...props}
|
|
38
|
-
style={[tw`flex-1 text-base`, { lineHeight: 20 }]}
|
|
39
|
-
onFocus={() => setHasFocus(!hasFocus)}
|
|
40
|
-
onBlur={() => setHasFocus(!hasFocus)}
|
|
41
|
-
placeholderTextColor={"#AEB3BC"}
|
|
42
|
-
onChangeText={(val) => setVal(val)}
|
|
43
|
-
maxLength={maxLength}
|
|
44
|
-
ref={reff}
|
|
45
|
-
/>
|
|
46
|
-
</View>
|
|
47
|
-
</View>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
1
|
+
import { View, Image, TextInput, TextInputProps } from "react-native";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import EText from "./EText";
|
|
4
|
+
import tw from "../lib/tailwind";
|
|
5
|
+
import { AtSymbolIcon } from "react-native-heroicons/outline";
|
|
6
|
+
import { Colors } from "../utils/Color";
|
|
7
|
+
|
|
8
|
+
interface EInputProps extends TextInputProps {
|
|
9
|
+
label?: string;
|
|
10
|
+
icon?:string;
|
|
11
|
+
val?: string;
|
|
12
|
+
setVal?: any;
|
|
13
|
+
maxLength?: number;
|
|
14
|
+
reff?: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default function EOtpInput({label, icon,val,setVal, maxLength, reff, ...props }:EInputProps) {
|
|
18
|
+
const [hasFocus, setHasFocus] = useState(false);
|
|
19
|
+
return (
|
|
20
|
+
<View>
|
|
21
|
+
<EText size="sm" style={tw`font-bold opacity-50`}>
|
|
22
|
+
{label}
|
|
23
|
+
</EText>
|
|
24
|
+
<View
|
|
25
|
+
style={tw`bg-[${Colors["primary-light"]}] h-12 rounded-lg px-4 flex-row items-center border border-blue-100 ${
|
|
26
|
+
hasFocus ? `border-black bg-white shadow-lg shadow-blue-400` : ""
|
|
27
|
+
}`}
|
|
28
|
+
>
|
|
29
|
+
{icon ? <Image
|
|
30
|
+
source={icon}
|
|
31
|
+
style={[
|
|
32
|
+
tw`mr-2 opacity-40 ${hasFocus ? "opacity-100 tint-blue-700" : ""}`,
|
|
33
|
+
{ width: 24, height: 24 },
|
|
34
|
+
]}
|
|
35
|
+
/> : null}
|
|
36
|
+
<TextInput
|
|
37
|
+
{...props}
|
|
38
|
+
style={[tw`flex-1 text-base`, { lineHeight: 20 }]}
|
|
39
|
+
onFocus={() => setHasFocus(!hasFocus)}
|
|
40
|
+
onBlur={() => setHasFocus(!hasFocus)}
|
|
41
|
+
placeholderTextColor={"#AEB3BC"}
|
|
42
|
+
onChangeText={(val) => setVal(val)}
|
|
43
|
+
maxLength={maxLength}
|
|
44
|
+
ref={reff}
|
|
45
|
+
/>
|
|
46
|
+
</View>
|
|
47
|
+
</View>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import tw from '../lib/tailwind'
|
|
3
|
-
import { Colors } from '../utils/Color';
|
|
4
|
-
import EText from './EText';
|
|
5
|
-
|
|
6
|
-
interface IProps{
|
|
7
|
-
text: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export default function EPageDescription({text}: IProps) {
|
|
11
|
-
return (
|
|
12
|
-
<EText
|
|
13
|
-
size='sm'
|
|
14
|
-
style={[tw`font-normal`, {color: Colors['text-body']}]}
|
|
15
|
-
>
|
|
16
|
-
{text}
|
|
17
|
-
</EText>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import tw from '../lib/tailwind'
|
|
3
|
+
import { Colors } from '../utils/Color';
|
|
4
|
+
import EText from './EText';
|
|
5
|
+
|
|
6
|
+
interface IProps{
|
|
7
|
+
text: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default function EPageDescription({text}: IProps) {
|
|
11
|
+
return (
|
|
12
|
+
<EText
|
|
13
|
+
size='sm'
|
|
14
|
+
style={[tw`font-normal`, {color: Colors['text-body']}]}
|
|
15
|
+
>
|
|
16
|
+
{text}
|
|
17
|
+
</EText>
|
|
18
|
+
)
|
|
19
|
+
}
|