You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { getIncrement, getTimerBucket } from '../../util/timer';
|
|
import { useInterval } from '../../hooks/useInterval';
|
|
|
|
type Props = {
|
|
withImageNoCaption: boolean;
|
|
expirationLength: number;
|
|
expirationTimestamp: number;
|
|
direction: 'incoming' | 'outgoing';
|
|
};
|
|
|
|
export const ExpireTimer = (props: Props) => {
|
|
const {
|
|
direction,
|
|
expirationLength,
|
|
expirationTimestamp,
|
|
withImageNoCaption,
|
|
} = props;
|
|
|
|
const initialTimeLeft = Math.max(
|
|
Math.round((expirationTimestamp - Date.now()) / 1000),
|
|
0
|
|
);
|
|
const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
|
|
|
|
const update = () => {
|
|
const newTimeLeft = Math.max(
|
|
Math.round((expirationTimestamp - Date.now()) / 1000),
|
|
0
|
|
);
|
|
if (newTimeLeft !== timeLeft) {
|
|
setTimeLeft(newTimeLeft);
|
|
}
|
|
};
|
|
|
|
const increment = getIncrement(expirationLength);
|
|
const updateFrequency = Math.max(increment, 500);
|
|
|
|
useInterval(update, updateFrequency);
|
|
|
|
if (timeLeft <= 60) {
|
|
return (
|
|
<span
|
|
className={classNames(
|
|
'module-expire-timer-margin',
|
|
'module-message__metadata__date',
|
|
`module-message__metadata__date--${direction}`
|
|
)}
|
|
>
|
|
{timeLeft}
|
|
</span>
|
|
);
|
|
}
|
|
const bucket = getTimerBucket(expirationTimestamp, expirationLength);
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'module-expire-timer',
|
|
'module-expire-timer-margin',
|
|
`module-expire-timer--${bucket}`,
|
|
`module-expire-timer--${direction}`,
|
|
withImageNoCaption ? 'module-expire-timer--with-image-no-caption' : null
|
|
)}
|
|
/>
|
|
);
|
|
};
|