forked from M3-Academy/m3-academy-template-vtexio
feat: aulas 7.5 e 7.6 treinando
This commit is contained in:
parent
86667eb6ff
commit
060e02956e
3
custom/react/Countdown.tsx
Normal file
3
custom/react/Countdown.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
import Countdown from "./components/Countdown";
|
||||||
|
export default Countdown;
|
78
custom/react/components/Countdown/index.tsx
Normal file
78
custom/react/components/Countdown/index.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
interface CountdownProps {
|
||||||
|
// Fortmato: dd/mm/aaaa/hr:min
|
||||||
|
endDate:string
|
||||||
|
}
|
||||||
|
interface time {
|
||||||
|
hour: number,
|
||||||
|
minute: number,
|
||||||
|
second : number
|
||||||
|
}
|
||||||
|
const Countdown = ({endDate}:CountdownProps) => {
|
||||||
|
|
||||||
|
const [time, setTime] = useState <time> ({
|
||||||
|
hour:0,
|
||||||
|
minute:0,
|
||||||
|
second:0
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const [day, month, year, hourMinute] = endDate.split("/");
|
||||||
|
const [hour, minute] = hourMinute.split(":");
|
||||||
|
|
||||||
|
const updateTimer = () =>{
|
||||||
|
const finalDate = new Date(
|
||||||
|
parseInt(year),
|
||||||
|
parseInt(month) - 1,
|
||||||
|
parseInt(day),
|
||||||
|
parseInt(hour),
|
||||||
|
parseInt(minute)
|
||||||
|
).getTime();
|
||||||
|
|
||||||
|
const atualDate = new Date().getTime();
|
||||||
|
|
||||||
|
let difference = finalDate -atualDate;
|
||||||
|
|
||||||
|
const hours = Math.floor(difference / (1000 * 60 * 60));
|
||||||
|
|
||||||
|
difference = difference - (hours * 60 * 60 * 1000);
|
||||||
|
|
||||||
|
const minutes = Math.floor(difference / (1000 * 60));
|
||||||
|
|
||||||
|
difference = difference - (minutes * 60 * 1000);
|
||||||
|
|
||||||
|
const seconds = Math.floor(difference / 1000);
|
||||||
|
|
||||||
|
if(hours <= 0 ){
|
||||||
|
setTime({
|
||||||
|
hour: 0,
|
||||||
|
minute: 0,
|
||||||
|
second: 0,
|
||||||
|
});
|
||||||
|
} else{
|
||||||
|
setTime({
|
||||||
|
hour: hours,
|
||||||
|
minute: minutes,
|
||||||
|
second: seconds
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
setInterval(updateTimer,1000);
|
||||||
|
},[]);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{`
|
||||||
|
${time.hour.toString().padStart(2, "0")}:
|
||||||
|
${time.minute.toString().padStart(2, "0")}:
|
||||||
|
${time.second.toString().padStart(2, "0")}
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Countdown;
|
@ -23,5 +23,8 @@
|
|||||||
"content": {
|
"content": {
|
||||||
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
|
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Countdown-academy":{
|
||||||
|
"component": "Countdown"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
"flex-layout.row#deals",
|
"flex-layout.row#deals",
|
||||||
"__fold__",
|
"__fold__",
|
||||||
"flex-layout.row#faixa-de-imagens",
|
"flex-layout.row#faixa-de-imagens",
|
||||||
|
"Countdown-academy",
|
||||||
"rich-text#m3-shelf-title",
|
"rich-text#m3-shelf-title",
|
||||||
"flex-layout.row#m3-shelf",
|
"flex-layout.row#m3-shelf",
|
||||||
"info-card#m3-middle-card",
|
"info-card#m3-middle-card",
|
||||||
@ -17,6 +18,12 @@
|
|||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"Countdown-academy":{
|
||||||
|
"props":{
|
||||||
|
"endDate": "20/01/2023/16:00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"flex-layout.row#faixa-de-imagens":{
|
"flex-layout.row#faixa-de-imagens":{
|
||||||
"props":{
|
"props":{
|
||||||
"blockClass":"faixa-de-imagens"
|
"blockClass":"faixa-de-imagens"
|
||||||
|
@ -5,4 +5,5 @@
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 25%;
|
border-radius: 25%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user