fln-espranza 0.0.46 → 0.0.48

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.
Files changed (8) hide show
  1. package/components/Drawer.tsx +2 -1
  2. package/components/EButton.tsx +0 -1
  3. package/components/EDateInput.tsx +8 -7
  4. package/components/EInput.tsx +4 -4
  5. package/components/ENotFoundPlaceholder.tsx +2 -2
  6. package/components/EProgressBar.tsx +24 -10
  7. package/components/EStat.tsx +19 -34
  8. package/package.json +1 -1
package/components/Drawer.tsx CHANGED
@@ -53,7 +53,8 @@ const Drawer = ({
53
53
  nameFirstLetter={name?.split("")[0]}
54
54
  />
55
55
  <View style={tw`ml-3`}>
56
- <EText size={"xl"} style={tw`font-bold -mt-1`}>
56
+
57
+ <EText size={"xl"} style={tw`font-bold -mt-1 lowercase capitalize`}>
57
58
  {name}
58
59
  </EText>
59
60
  <EText
package/components/EButton.tsx CHANGED
@@ -51,7 +51,6 @@ export default function EButton({
51
51
  {iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
52
52
  {/* LABEL */}
53
53
  <EText
54
- size={"sm"}
55
54
  style={[
56
55
  tw`font-semibold ${
57
56
  type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
package/components/EDateInput.tsx CHANGED
@@ -7,6 +7,7 @@ import { CalendarIcon } from 'react-native-heroicons/outline';
7
7
  import EText from './EText';
8
8
  import ELabel from './ELabel';
9
9
  import { Colors } from 'fln-espranza/utils/Color'
10
+ import DateTimePickerModal from "react-native-modal-datetime-picker";
10
11
 
11
12
  interface IProps {
12
13
  label: string;
@@ -21,7 +22,7 @@ interface IProps {
21
22
  export default function EDateInput({ label, value, style, placeholder, maxDate, minDate, onChange }: IProps) {
22
23
  const [show, setShow] = useState(false);
23
24
 
24
- const handleOnChange = (event: any, selectedDate: any) => {
25
+ const handleOnChange = (selectedDate: any) => {
25
26
  const currentDate = selectedDate;
26
27
  setShow(false);
27
28
  onChange(currentDate)
@@ -40,14 +41,14 @@ export default function EDateInput({ label, value, style, placeholder, maxDate,
40
41
  value ? moment(value).format("DD/MM/YYYY") : "Select Date"
41
42
  }
42
43
  </EText>
43
- {show ? <DateTimePicker
44
- testID="dateTimePicker"
45
- value={value ? new Date(value) : new Date()}
46
- mode={"date"}
47
- onChange={handleOnChange}
44
+ <DateTimePickerModal
45
+ isVisible={show}
46
+ mode="date"
47
+ onConfirm={handleOnChange}
48
+ onCancel={() => setShow(false)}
48
49
  minimumDate={minDate}
49
50
  maximumDate={maxDate}
50
- /> : <></>}
51
+ />
51
52
  <CalendarIcon size={20} style={tw`text-[${Colors["primary-base"]}]`} />
52
53
  </TouchableOpacity>
53
54
  </View>
package/components/EInput.tsx CHANGED
@@ -25,7 +25,7 @@ export default function EInput({
25
25
  return (
26
26
  <View style={[tw`mb-4`, {style}]}>
27
27
  {label ? (
28
- <EText size="sm" style={[tw`font-semibold text-slate-800`, {
28
+ <EText style={[tw`font-semibold ${hasFocus ? '' : 'text-slate-800'}`, {
29
29
  // color: Colors["text-primary"]
30
30
  }]}>
31
31
  {label}
@@ -33,11 +33,11 @@ export default function EInput({
33
33
  ) : null}
34
34
 
35
35
  <View
36
- style={tw` mt-2`}
36
+ style={tw` mt-1`}
37
37
  >
38
38
  <TextInput
39
- style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300 ${
40
- hasFocus ? "border-black " : ""
39
+ style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300 text-base ${
40
+ hasFocus ? "border-black bg-teal-50/10" : ""
41
41
  }`}
42
42
  {...props}
43
43
  onFocus={() => setHasFocus(!hasFocus)}
package/components/ENotFoundPlaceholder.tsx CHANGED
@@ -19,7 +19,7 @@ export default function ENotFoundPlaceholder(
19
19
  <View style={tw`items-center px-16 py-2`}>
20
20
  <Image
21
21
  source={require("../assets/images/icon-placeholder-schedule.png")}
22
- style={[tw`mb-2`, { height: 64 }]}
22
+ style={[tw``, { height: 44 }]}
23
23
  resizeMode="contain"
24
24
  />
25
25
 
@@ -35,7 +35,7 @@ export default function ENotFoundPlaceholder(
35
35
  >
36
36
  {subtitle}
37
37
  </EText>
38
- <View style={tw`mt-6`}>
38
+ <View style={tw`mt-4`}>
39
39
  {button}
40
40
  </View>
41
41
  </View>
package/components/EProgressBar.tsx CHANGED
@@ -1,13 +1,14 @@
1
1
  import React, { useEffect, useRef, useState } from 'react'
2
- import { Animated,StyleSheet, View } from 'react-native';
2
+ import { Animated, StyleSheet, View } from 'react-native';
3
3
  import tw from "fln-espranza/lib/tailwind";
4
4
  import { Colors } from "fln-espranza/utils/Color";
5
5
 
6
- interface IProps{
6
+ interface IProps {
7
7
  progress: number;
8
+ type: "stepper" | "bar";
8
9
  }
9
10
 
10
- export default function EProgressBar( {progress}: IProps) {
11
+ export default function EProgressBar({ progress, type }: IProps) {
11
12
 
12
13
 
13
14
  const barWidth = useRef(new Animated.Value(0)).current;
@@ -21,13 +22,26 @@ export default function EProgressBar( {progress}: IProps) {
21
22
  }).start();
22
23
  }, [progress]);
23
24
  return (
24
- <View style={[tw`h-2 w-14 bg-slate-200 overflow-hidden mr-2`, {
25
- borderRadius: 40,
26
- }]}>
27
- <Animated.View
28
- style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
25
+ <>
26
+ {type === "stepper" ? <View style={[tw`h-2 w-14 bg-slate-200 overflow-hidden mr-2`, {
27
+ borderRadius: 40,
28
+ }]}>
29
+ <Animated.View
30
+ style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
29
31
 
30
- />
31
- </View>
32
+ />
33
+ </View>
34
+ :
35
+
36
+ <View style={[tw`h-1 w-full bg-white/10 overflow-hidden mt-1`, {
37
+ borderRadius: 40,
38
+ }]}>
39
+ <View
40
+ style={[tw`h-1 w-[${progress}%] bg-[${Colors['primary-base']}]`]}
41
+
42
+ />
43
+ </View>
44
+ }
45
+ </>
32
46
  )
33
47
  }
package/components/EStat.tsx CHANGED
@@ -8,7 +8,7 @@ interface IProps {
8
8
  stat: string;
9
9
  target: string;
10
10
  label: string;
11
- bgColor?: string;
11
+ statColor?: string;
12
12
  iconR?: JSX.Element;
13
13
  }
14
14
 
@@ -17,48 +17,33 @@ export default function EStat({
17
17
  target,
18
18
  label,
19
19
  iconR,
20
- bgColor
20
+ statColor
21
21
  }: IProps) {
22
22
 
23
23
  const percentage = Math.round((parseFloat(stat) / parseFloat(target)) * 100);
24
- // const textColor = 'text-slate-800';
25
- const textColor = 'text-white';
24
+ const pending = parseFloat(target) - parseFloat(stat);
26
25
 
27
26
  return (
28
27
  <TouchableOpacity
29
- style={[tw`p-4 bg-white rounded-2xl flex-1 `, {
30
- shadowColor: '#155e75',
31
- shadowOffset: { width: 0, height: 6 },
32
- shadowOpacity: 0.25,
33
- shadowRadius: 8,
28
+ style={[tw`bg-slate-00 flex-1 overflow-hidden items-center py-3`, {
29
+ // shadowColor: '#155e75',
30
+ // shadowOffset: { width: 0, height: 8 },
31
+ // shadowOpacity: .1,
32
+ // shadowRadius: 16,
34
33
  }]}
35
34
  activeOpacity={0.8}
36
35
  >
37
- <ImageBackground
38
- source={require('../assets/images/bg-stat.png')}
39
- resizeMode="cover"
40
- >
41
- <View style={tw`flex-row mb-1`}>
42
- <EText style={tw`text-3xl font-extrabold ${textColor} -tracking-0.25 -mt-1`}>
43
- {stat}
44
- </EText>
45
- <EText size="sm" style={tw`ml-1 pt-1 ${textColor} opacity-50 flex-1 font-medium`}>
46
- / {target}
47
- </EText>
48
- {iconR}
49
- </View>
50
- {/* PROGRESSBAR */}
51
- <View style={tw`flex-row`}>
52
- <View style={tw`bg-slate-200 h-1 rounded-full mb-1 mt-2 overflow-hidden flex-1 mr-3`}>
53
- <View style={[tw`h-1 w-32 bg-teal-400`, { width: percentage }]}></View>
54
- </View>
55
- <EText size="xs" style={tw`text-teal-400 font-bold`}>
56
- {percentage}%
57
- </EText>
58
- </View>
59
- <EText style={tw`font-bold mt-2 ${textColor}`}>{label}</EText>
60
- <EText size="xs" style={tw` ${textColor} opacity-60 font-medium`}>This month</EText>
61
- </ImageBackground>
36
+ <View style={tw` mb-2 flex-row flex-1 justify-center`}>
37
+ <EText style={tw`text-3xl font-bold ${statColor} -tracking-0.25 `}>
38
+ {stat}
39
+ </EText>
40
+ <EText style={tw`ml-0.5 pt-1 text-slate-800 opacity-50 font-semibold -tracking-0.25`}>
41
+ / {target}
42
+ </EText>
43
+ {iconR}
44
+ </View>
45
+ <EText size="lg" style={tw`font-bold text-slate-700 mb-0.5`}>{label}</EText>
46
+ <EText size="sm" style={tw` text-slate-800 opacity-60`}>{pending} remaining</EText>
62
47
  </TouchableOpacity>
63
48
  );
64
49
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fln-espranza",
3
- "version": "0.0.46",
3
+ "version": "0.0.48",
4
4
  "description": "All components used inside FLN Project of Espranza Innovations",
5
5
  "main": "index.ts",
6
6
  "scripts": {