c5ea54c4c4
* Format duration depending on settingTimeTrackingHHMM * Fix formatDuation without second argument * Fix time format after updating bubble * Add tests for formatDuration
30 lines
826 B
JavaScript
30 lines
826 B
JavaScript
import React, { useState } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { useInterval } from "./hooks"
|
|
import { differenceInSeconds } from "date-fns"
|
|
import { formatDuration } from "utils"
|
|
|
|
Timer.propTypes = {
|
|
startedAt: PropTypes.instanceOf(Date).isRequired,
|
|
offset: PropTypes.number,
|
|
onTick: PropTypes.func,
|
|
}
|
|
|
|
function Timer({ startedAt, offset = 0, onTick, ...domProps }) {
|
|
const [timerLabel, setTimerLabel] = useState(formattedTimerLabel(startedAt, offset))
|
|
|
|
useInterval(() => {
|
|
setTimerLabel(formattedTimerLabel(startedAt, offset))
|
|
onTick && onTick()
|
|
}, 1000)
|
|
|
|
return <span {...domProps}>{timerLabel}</span>
|
|
}
|
|
|
|
function formattedTimerLabel(startedAt, offset) {
|
|
const seconds = differenceInSeconds(new Date(), startedAt) + offset
|
|
return formatDuration(seconds)
|
|
}
|
|
|
|
export default Timer
|