@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
67 lines • 2.36 kB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from "react";
import { StyleSheet, Text, View } from "react-native";
import { useTheme } from "../../../theme";
export const Timer = ({ resetKey, paused }) => {
const theme = useTheme();
const [time, setTime] = useState(0);
// We'll store our interval here so we can clear it whenever "paused" changes
const intervalRef = useRef(null);
/**
* If you need to reset the timer to 0 whenever `resetKey` changes,
* for example when user starts a new recording, do it here.
*/
useEffect(() => {
// Whenever `resetKey` changes, reset the timer to 0
setTime(0);
}, [resetKey]);
/**
* Start an interval to increment `time` every second if NOT paused.
* If paused, clear the interval so time does not continue incrementing.
*/
useEffect(() => {
if (!paused) {
// Not paused -> start counting
intervalRef.current = setInterval(() => {
setTime((prev) => prev + 1);
}, 1000);
}
else {
// Paused -> clear interval, so time is frozen
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}
// Cleanup when unmounting or when effect re-runs
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
};
}, [paused]);
// Format HH:MM:SS
const formatTime = useCallback((timeInSeconds) => {
const hours = String(Math.floor(timeInSeconds / 3600)).padStart(2, "0");
const minutes = String(Math.floor((timeInSeconds % 3600) / 60)).padStart(2, "0");
const seconds = String(timeInSeconds % 60).padStart(2, "0");
return `${hours}:${minutes}:${seconds}`;
}, []);
return (<View style={styles.container}>
<Text style={[
theme.typography.heading4.regular,
{
color: theme.color.textPrimary,
},
]}>
{formatTime(time)}
</Text>
</View>);
};
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
},
});
//# sourceMappingURL=Timer.js.map