support timer component (#943)

Author: sieu-db

example/src/App.tsx

@@ -74,8 +74,10 @@ import PinInputExample from "./PinInputExample";
 import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample";
 import ThemeExample from "./ThemeExample";
 import LoadingIndicatorExample from "./LoadingIndicatorExample";
+import TimerExample from "./TimerExample";
 
 const ROUTES = {
+  Timer: TimerExample,
   LoadingIndicator: LoadingIndicatorExample,
   Theme: ThemeExample,
   AudioPlayer: AudioPlayerExample,

example/src/TimerExample.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { View, StyleSheet, Text } from "react-native";
+import { withTheme } from "@draftbit/ui";
+import Section, { Container } from "./Section";
+import { Button, Timer } from "@draftbit/core";
+
+const TimerExample: React.FC = () => {
+  const timerRef = React.useRef<any>(null);
+  const [countDirection, setCountDirection] = React.useState<"up" | "down">(
+    "up"
+  );
+
+  const handleStart = () => timerRef.current?.start();
+  const handleStop = () => timerRef.current?.stop();
+  const handleReset = () => timerRef.current?.reset();
+  const handleResetToCustomTime = () => timerRef.current?.reset(5000);
+
+  const handleDirectionToggle = () =>
+    setCountDirection((prev) => (prev === "up" ? "down" : "up"));
+  return (
+    <Container style={{}}>
+      <Section style={{}} title="Default">
+        <View
+          style={{
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <Timer
+            ref={timerRef}
+            initialTime={60000}
+            timerEndTime={70000}
+            updateInterval={1000}
+            format="mm:ss"
+            countDirection={countDirection}
+            onTimerChange={(value: number) => {
+              console.log("onTimerChange : ", value);
+            }}
+            onTimerEnd={() => {
+              console.log("onTimerEnd");
+              // eslint-disable-next-line no-alert
+              alert("onTimerEnd");
+            }}
+            style={{
+              fontSize: 50,
+              fontWeight: "bold",
+            }}
+          />
+          <Text style={styles.directionText}>
+            Count direction : {countDirection}
+          </Text>
+          <View style={styles.buttonsContainer}>
+            <Button title="Start Timer" onPress={handleStart} />
+            <Button title="Stop Timer" onPress={handleStop} />
+            <Button title="Reset Timer" onPress={handleReset} />
+            <Button title="Reset to 5s" onPress={handleResetToCustomTime} />
+            <Button
+              title={`Toggle Direction`}
+              onPress={handleDirectionToggle}
+            />
+          </View>
+        </View>
+      </Section>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  buttonsContainer: {
+    marginTop: 20,
+    gap: 10,
+  },
+  directionText: {
+    textAlign: "center",
+    fontSize: 20,
+    marginVertical: 15,
+  },
+});
+
+export default withTheme(TimerExample);

packages/core/src/components/Timer.tsx

@@ -0,0 +1,138 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import { Text, StyleSheet, TextStyle, StyleProp } from "react-native";
+
+interface TimerProps {
+  style?: StyleProp<TextStyle>;
+  initialTime?: number;
+  updateInterval?: number;
+  format?: "ss" | "mm:ss" | "hh:mm:ss" | "ss:ms" | "mm:ss:ms" | "hh:mm:ss:ms";
+  onTimerChange?: (time: number) => void;
+  onTimerEnd?: () => void;
+  countDirection?: "up" | "down";
+  timerEndTime?: number;
+}
+
+export interface TimerHandle {
+  start: () => void;
+  stop: () => void;
+  reset: (newTime?: number) => void;
+}
+
+const Timer = forwardRef<TimerHandle, TimerProps>(
+  (
+    {
+      style,
+      initialTime,
+      updateInterval = 1000,
+      format = "mm:ss",
+      onTimerChange,
+      onTimerEnd,
+      countDirection = "up",
+      timerEndTime,
+    },
+    ref
+  ) => {
+    const defaultInitialTime = countDirection === "up" ? 0 : 100000;
+    const [time, setTime] = useState(initialTime ?? defaultInitialTime);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+      onTimerChange?.(time);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [time]);
+
+    useImperativeHandle(ref, () => ({
+      start: startTimer,
+      stop: stopTimer,
+      reset: resetTimer,
+    }));
+
+    const startTimer = () => {
+      if (timerRef.current) return;
+      timerRef.current = setInterval(() => {
+        setTime((prevTime) => {
+          const newTime =
+            countDirection === "up"
+              ? prevTime + updateInterval
+              : prevTime - updateInterval;
+          // Count down
+          if (newTime <= 0 && countDirection === "down") {
+            clearTimer();
+            onTimerEnd?.();
+            return 0;
+          }
+          // Count up
+          if (
+            countDirection === "up" &&
+            timerEndTime !== undefined &&
+            newTime >= timerEndTime
+          ) {
+            clearTimer();
+            onTimerEnd?.();
+            return timerEndTime;
+          }
+
+          return newTime;
+        });
+      }, updateInterval);
+    };
+
+    const stopTimer = () => clearTimer();
+
+    const resetTimer = (
+      newTime: number = initialTime ?? defaultInitialTime
+    ) => {
+      clearTimer();
+      setTime(newTime);
+    };
+
+    const clearTimer = () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+
+    useEffect(() => {
+      return () => clearTimer();
+    }, []);
+
+    const formatTime = (milliseconds: number): string => {
+      const totalSeconds = Math.floor(milliseconds / 1000);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor((totalSeconds - hours * 3600) / 60);
+      const seconds = totalSeconds - hours * 3600 - minutes * 60;
+      const ms = milliseconds % 1000;
+
+      const formattedHours = String(hours).padStart(2, "0");
+      const formattedMinutes = String(minutes).padStart(2, "0");
+      const formattedSeconds = String(seconds).padStart(2, "0");
+      const formattedMs = String(ms).padStart(3, "0");
+
+      return format
+        .replace("hh", formattedHours)
+        .replace("mm", formattedMinutes)
+        .replace("ss", formattedSeconds)
+        .replace("ms", formattedMs);
+    };
+
+    return (
+      <Text style={[styles.defaultTimerStyle, style]}>{formatTime(time)}</Text>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  defaultTimerStyle: {
+    fontSize: 24,
+    textAlign: "center",
+  },
+});
+
+export default Timer;

packages/core/src/index.tsx

@@ -76,6 +76,7 @@ export { default as SimpleStyleScrollView } from "./components/SimpleStyleScroll
 export { default as SimpleStyleSectionList } from "./components/SimpleStyleScrollables/SimpleStyleSectionList";
 export { default as SimpleStyleSwipeableList } from "./components/SimpleStyleScrollables/SimpleStyleSwipeableList";
 export { default as LoadingIndicator } from "./components/LoadingIndicator";
+export { default as Timer } from "./components/Timer";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";

packages/ui/src/index.tsx

@@ -74,6 +74,7 @@ export {
   SimpleStyleSectionList,
   SimpleStyleSwipeableList,
   LoadingIndicator,
+  Timer,
 } from "@draftbit/core";
 
 export {