Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add mode prop #6

Merged
merged 3 commits into from
Oct 7, 2023
Merged

feat: add mode prop #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d46bd7a
feat: mode prop
rgommezz Oct 7, 2023
df47043
Merge branch 'main' into feat/mode_prop
rgommezz Oct 7, 2023
1f05c30
Update README.md
rgommezz Oct 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ If you are installing reanimated on a bare React Native app, you should also fol
You can use this component in two different modes:

- **Stopwatch**: The timer starts counting up from 0 (default).
- **Timer**: The timer starts counting down from a given time. Use the `initialTimeInMs` prop to activate this mode.
- **Timer**: The timer starts counting down from a given time. Use the `mode` prop and set it to `"timer"`.

## Usage

Expand Down Expand Up @@ -88,18 +88,19 @@ const App = () => {

| Name | Required | Type | Description |
| -------------------- | -------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode` | no | `stopwatch` or `timer` | Whether the component should work as a **stopwatch or as a timer**. Defaults to `stopwatch` |
| `initialTimeInMs` | no | `number` | Initial time in miliseconds |
| `onFinish` | no | `() => void` | Callback executed when the timer reaches 0 (only when working in **timer mode** and `initialTimeInMs` prop is provided) |
| `trailingZeros` | no | `0`, `1` or `2` | If `0`, the component will only display seconds and minutes. If `1`, the component will display seconds, minutes, and a hundredth of ms. If `2`, the component will display seconds, minutes, and tens of ms. Defaults to `1` |
| `animationDuration` | no | `number` | The enter/exit animation duration in milliseconds of a digit. Defaults to `80` |
| `animationDelay` | no | `number` | The enter/exit animation delay in milliseconds of a digit. Defaults to `0` |
| `animationDistance` | no | `number` | The enter/exit animation vertical distance in dp of a digit. Defaults to `120` |
| `containerStyle` | no | `StyleProp<ViewStyle>` | The style of the stopwatch/timer `View` container |
| `digitStyle` | no | `StyleProp<TextStyle>` | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue. |
| `initialTimeInMs` | no | `number` | If you want to **use it as a timer**, set this value |
| `digitStyle` | no | `StyleProp<TextStyle>` | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue.|
| `leadingZeros` | no | `1` or `2` | The number of zeros for the minutes. Defaults to 1 |
| `enterAnimationType` | no | `'slide-in-up' or 'slide-in-down'` | Whether the new digit should enter from the top or the bottom |
| `separatorStyle` | no | `StyleProp<TextStyle>` | Extra style applied only to separators. In this case, the colon (`:`) and the comma (`,`) |
| `onFinish` | no | `() => void` | Callback executed when the timer reaches 0 (only when working in **timer mode** and `initialTimeInMs` prop is provided) |
| `textCharStyle` | no | `StyleProp<TextStyle>` | The style applied to each individual character of the stopwatch/timer |
| `trailingZeros` | no | `0`, `1` or `2` | If `0`, the component will only display seconds and minutes. If `1`, the component will display seconds, minutes, and a hundredth of ms. If `2`, the component will display seconds, minutes, and tens of ms. Defaults to `1` |

## Methods

Expand Down
8 changes: 6 additions & 2 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { IconButton, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, View } from 'react-native';
import { Alert, StyleSheet, View } from 'react-native';
import StopwatchTimer, {
StopwatchTimerMethods,
} from 'react-native-animated-stopwatch-timer';
Expand All @@ -17,8 +17,12 @@ export default function App() {
containerStyle={styles.stopWatchContainer}
textCharStyle={styles.stopWatchChar}
trailingZeros={2}
// Uncomment the below line to use it in timer mode
// Uncomment the below 2 lines to use it in timer mode
// mode="timer"
// initialTimeInMs={30 * 1000}
onFinish={() => {
Alert.alert('Timer Finished!');
}}
/>
<View style={styles.buttonsContainer}>
{/** @ts-ignore */}
Expand Down
13 changes: 11 additions & 2 deletions src/StopwatchTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ export interface StopwatchTimerProps {
*/
digitStyle?: StyleProp<TextStyle>;
/**
* If you want to use it as a timer, set this value
* Whether the component should work as a stopwatch or as a timer.
*/
mode?: 'stopwatch' | 'timer';
/**
* Initial time in milliseconds
*/
initialTimeInMs?: number;
/**
Expand Down Expand Up @@ -93,6 +97,7 @@ function Stopwatch(
animationDuration = DEFAULT_ANIMATION_DURATION,
containerStyle,
enterAnimationType = 'slide-in-up',
mode = 'stopwatch',
digitStyle,
initialTimeInMs,
leadingZeros = 1,
Expand All @@ -112,7 +117,11 @@ function Stopwatch(
reset,
pause,
getSnapshot,
} = useTimer(initialTimeInMs, onFinish);
} = useTimer({
initialTimeInMs,
onFinish,
mode,
});

useImperativeHandle(ref, () => ({
play,
Expand Down
22 changes: 14 additions & 8 deletions src/useTimer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ import throttle from 'lodash.throttle';
/**
* A custom hook that handles the state for the timer
*/
const useTimer = (
initialTimeInMs: number = 0,
onFinish: () => void = () => null
) => {
const useTimer = ({
initialTimeInMs = 0,
onFinish = () => null,
mode = 'stopwatch',
}: {
initialTimeInMs?: number;
onFinish?: () => void;
mode?: 'timer' | 'stopwatch';
}) => {
const direction = mode === 'timer' ? -1 : 1;
const [elapsedInMs, setElapsedInMs] = useState(0);
const startTime = useRef<number | null>(null);
const pausedTime = useRef<number | null>(null);
Expand All @@ -26,15 +32,15 @@ const useTimer = (

useEffect(() => {
// Checking if it's a timer and it reached 0
if (initialTimeInMs > 0 && elapsedInMs >= initialTimeInMs) {
if (mode === 'timer' && elapsedInMs >= initialTimeInMs) {
removeInterval();
setElapsedInMs(initialTimeInMs);
throttledOnFinish();
}
}, [elapsedInMs, initialTimeInMs, throttledOnFinish]);
}, [elapsedInMs, initialTimeInMs, mode, throttledOnFinish]);

function getSnapshot() {
return Math.abs(initialTimeInMs - elapsedInMs);
return Math.abs(initialTimeInMs + elapsedInMs * direction);
}

function play() {
Expand All @@ -43,7 +49,7 @@ const useTimer = (
return;
}
// Timer mode and it reached 0, returning early
if (elapsedInMs === initialTimeInMs && initialTimeInMs > 0) {
if (elapsedInMs === initialTimeInMs && mode === 'timer') {
return;
}
// First time playing, recording the start time
Expand Down