ikualo-ui-kit-mobile 0.2.3 → 0.2.5

package/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1309.2409.26012.0

package/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -9,32 +9,32 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.2.1",
-    "@expo/vector-icons": "^14.0.3",
+    "@expo/metro-runtime": "^4.0.0",
+    "@expo/vector-icons": "^14.0.2",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
-    "expo": "~51.0.8",
-    "expo-application": "~5.9.1",
-    "expo-constants": "^16.0.1",
-    "expo-device": "~6.0.2",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-local-authentication": "^14.0.1",
-    "expo-localization": "^15.0.3",
-    "expo-location": "~17.0.1",
-    "expo-network": "~6.0.1",
-    "expo-secure-store": "~13.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-updates": "^0.25.14",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "^0.74.1",
+    "expo": "^52.0.8",
+    "expo-application": "~6.0.1",
+    "expo-constants": "~17.0.3",
+    "expo-device": "~7.0.1",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-local-authentication": "~15.0.1",
+    "expo-localization": "~16.0.0",
+    "expo-location": "~18.0.2",
+    "expo-network": "~7.0.0",
+    "expo-secure-store": "~14.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-updates": "^0.26.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "0.76.2",
     "react-native-asset": "^2.1.1",
     "react-native-country-flag": "^2.0.2",
-    "react-native-gesture-handler": "^2.16.2",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-paper": "^5.12.3",
-    "react-native-safe-area-context": "^4.10.1",
-    "react-native-screens": "^3.31.1",
+    "react-native-safe-area-context": "^4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {

package/src/elements/timer/Timer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { StyleProp, TextStyle, View } from 'react-native';
+import { AppState, StyleProp, TextStyle, View } from 'react-native';
 import { Text } from 'react-native-paper';
 interface IFTimer {
   onFinished?: () => void;
@@ -10,38 +10,92 @@ interface IFTimer {
 export const Timer = (props: IFTimer) => {
   const { onFinished, style, minutes, resetTimer } = props;
   const [minutesTemp, setMinutesTemp] = useState<number>(minutes);
-  const [seconds, setSeconds] = useState<number>(60);
+  const [seconds, setSeconds] = useState<number>(0);
+  const [appState, setAppState] = useState(AppState.currentState);
+  const [lastTimestamp, setLastTimestamp] = useState(Date.now());
+  const [updateTime, setUpdateTime] = useState(false);
 
   useEffect(() => {
-    let secondsInterval: number = 60;
-    let minutesInterval: number = minutes;
+    let secondsInterval: number = updateTime ? seconds : 0;
+    let minutesInterval: number = updateTime ? minutesTemp : minutes;
+    setUpdateTime(false);
+
     const intervalId = setInterval(() => {
-      if (secondsInterval > 0) {
+      if (minutesInterval > 0 && secondsInterval === 0) {
+        secondsInterval = 59;
+        minutesInterval = minutesInterval - 1;
+        setMinutesTemp(minutesInterval);
+        setSeconds(secondsInterval);
+      } else if (secondsInterval > 0) {
         secondsInterval = secondsInterval - 1;
         setSeconds(secondsInterval);
-      } else {
-        secondsInterval = 60;
-        minutesInterval = minutesInterval - 1 > 0 ? minutesInterval - 1 : 0;
-        setMinutesTemp(minutesInterval);
-        if (minutesInterval === 0) {
+      } else if (minutesInterval === 0 && secondsInterval === 0) {
+        clearInterval(intervalId);
+        onFinished && onFinished();
+        return;
+      }
+    }, 1000);
+
+    const subscription = AppState.addEventListener("change", nextAppState => {
+      if (appState === "active" && nextAppState.match(/inactive|background/)) {
+        setLastTimestamp(Date.now());
+      } else if (appState.match(/inactive|background/) && nextAppState === "active") {
+        setUpdateTime(true);
+        const now = Date.now();
+        const timeElapsed = Math.floor((now - lastTimestamp) / 1000);
+        let minElapsed = Math.floor(timeElapsed / 60)
+        let secElapsed = timeElapsed > 60 ? timeElapsed % 60 : timeElapsed
+        let secAux = 0
+        let newMin = 0
+        let newSec = 0
+
+        if (minElapsed > minutesTemp || (minElapsed === minutesTemp && secElapsed > seconds)) {
+          setSeconds(0);
+          setMinutesTemp(0);
           clearInterval(intervalId);
           onFinished && onFinished();
-          return;
+        } else if (minElapsed > 0 && secElapsed > seconds) {
+          secAux = seconds - secElapsed
+          newSec = secAux < 0 ? 60 - (secAux * -1) : secAux
+          newMin = (minutesTemp - minElapsed) - (secAux < 0 ? 1 : 0)
+          setSeconds(newSec);
+          setMinutesTemp(newMin);
+        } else if (minElapsed > 0 && secElapsed > 0) {
+          newSec = seconds - secElapsed
+          newMin = minutesTemp - minElapsed
+          setSeconds(newSec);
+          setMinutesTemp(newMin);
+        } else if (minElapsed > 0 && secElapsed === 0) {
+          newMin = minutesTemp - minElapsed
+          setMinutesTemp(newMin);
+        } else if (secElapsed > seconds) {
+          secAux = seconds - secElapsed
+          newSec = secAux < 0 ? 60 - (secAux * -1) : secAux
+          newMin = minutesTemp - (secAux < 0 ? 1 : 0)
+          setSeconds(newSec);
+          setMinutesTemp(newMin);
+        } else if (secElapsed > 0) {
+          newSec = seconds - secElapsed
+          setSeconds(newSec);
         }
       }
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [resetTimer]);
+      setAppState(nextAppState);
+      return
+    });
+
+    return () => {
+      subscription.remove();
+      clearInterval(intervalId);
+    }
+  }, [resetTimer, appState, lastTimestamp]);
+
+  useEffect(() => { }, [])
+
   return (
     <View>
       <Text style={style}>
-        {seconds === 60
-          ? `${minutesTemp < 10 ? `0${minutesTemp - 1}` : minutesTemp - 1}:60`
-          : `${minutesTemp < 10
-            ? `0${minutesTemp - 1 === -1 ? minutesTemp : minutesTemp - 1}`
-            : minutesTemp - 1
-          }:${seconds < 10 ? `0${seconds}` : seconds}`}
+        {`${minutesTemp < 10 ? `0${minutesTemp}` : minutesTemp}:${seconds < 10 ? `0${seconds}` : seconds}`}
       </Text>
     </View>
   );
-};
+};