66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
import moment from 'moment';
|
|
import LottieView from 'lottie-react-native';
|
|
import colors from '../../Constant/Color';
|
|
|
|
const AuctionTimer = ({ SelectedAuction, setAllBoolean }: any) => {
|
|
const [timeLeft, setTimeLeft] = useState('00:00:00');
|
|
|
|
useEffect(() => {
|
|
if (!SelectedAuction?.keyDates?.auctionBidding?.endDateTime) return;
|
|
|
|
const format = 'DD-MM-YYYY HH:mm:ss';
|
|
const endTime = moment(
|
|
SelectedAuction.keyDates.auctionBidding.endDateTime,
|
|
format
|
|
);
|
|
|
|
const timer = setInterval(() => {
|
|
const now = moment();
|
|
const diff = moment.duration(endTime.diff(now));
|
|
|
|
if (diff.asSeconds() <= 0) {
|
|
setTimeLeft('00:00:00');
|
|
clearInterval(timer);
|
|
|
|
setAllBoolean((prev: any) => ({
|
|
...prev,
|
|
timeEnd: true,
|
|
}));
|
|
|
|
return;
|
|
}
|
|
|
|
const hours = String(Math.floor(diff.asHours())).padStart(2, '0');
|
|
const minutes = String(diff.minutes()).padStart(2, '0');
|
|
const seconds = String(diff.seconds()).padStart(2, '0');
|
|
|
|
setTimeLeft(`${hours}:${minutes}:${seconds}`);
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [SelectedAuction]);
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
}}
|
|
>
|
|
<LottieView
|
|
source={require('../../lottie/clock.json')}
|
|
autoPlay
|
|
loop
|
|
style={{ width: 20, height: 20 }}
|
|
/>
|
|
<Text style={{ fontSize: 18, color: colors.black }}>{timeLeft}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default AuctionTimer;
|