51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { type ReactNode, useState } from 'react';
|
|
|
|
import { ButtonAction, ButtonState } from '@/constants/buttons';
|
|
import { STRING_KEYS } from '@/constants/localization';
|
|
import { useNow, useStringGetter } from '@/hooks';
|
|
|
|
import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/Button';
|
|
|
|
type ElementProps = {
|
|
timeoutInSeconds: number;
|
|
} & ButtonProps;
|
|
|
|
export type TimeoutButtonProps = ElementProps;
|
|
|
|
export const TimeoutButton = ({
|
|
children,
|
|
timeoutInSeconds,
|
|
...otherProps
|
|
}: TimeoutButtonProps) => {
|
|
const [timeoutDeadline] = useState(Date.now() + timeoutInSeconds * 1000);
|
|
const now = useNow();
|
|
const stringGetter = useStringGetter();
|
|
|
|
const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);
|
|
|
|
return (
|
|
<Button
|
|
{...otherProps}
|
|
action={ButtonAction.Primary}
|
|
state={{
|
|
isDisabled:
|
|
secondsLeft > 0 ||
|
|
otherProps?.state === ButtonState.Disabled ||
|
|
(otherProps?.state as ButtonStateConfig)?.isDisabled,
|
|
}}
|
|
>
|
|
{secondsLeft
|
|
? stringGetter({
|
|
key:
|
|
Math.ceil(secondsLeft) === 1
|
|
? STRING_KEYS.WAIT_SECONDS_SINGULAR
|
|
: STRING_KEYS.WAIT_SECONDS,
|
|
params: {
|
|
SECONDS: String(Math.ceil(secondsLeft)),
|
|
},
|
|
})
|
|
: children}
|
|
</Button>
|
|
);
|
|
};
|