Use toString.padStart instead of toLocaleString for dual digit display.
parent
392cda25ea
commit
d7a42d03f7
|
@ -62,34 +62,22 @@ export default class Countdown extends React.Component {
|
|||
<div className={style.countdown}>
|
||||
<ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)">
|
||||
<DigitBlock suffix="d">
|
||||
{Math.floor(days).toLocaleString(locale, {
|
||||
minimumIntegerDigits,
|
||||
useGrouping,
|
||||
})}
|
||||
{Math.floor(days).toString().padStart(2, '0')}
|
||||
</DigitBlock>
|
||||
</ProgressCircle>
|
||||
<ProgressCircle size={size} max={24} progress={hours} stroke="rgb(60, 144, 60)">
|
||||
<DigitBlock suffix="h">
|
||||
{Math.floor(hours).toLocaleString(locale, {
|
||||
minimumIntegerDigits,
|
||||
useGrouping,
|
||||
})}
|
||||
{Math.floor(hours).toString().padStart(2, '0')}
|
||||
</DigitBlock>
|
||||
</ProgressCircle>
|
||||
<ProgressCircle size={size} max={60} progress={minutes} stroke="rgb(160, 154, 40)">
|
||||
<DigitBlock suffix="m">
|
||||
{Math.floor(minutes).toLocaleString(locale, {
|
||||
minimumIntegerDigits,
|
||||
useGrouping,
|
||||
})}
|
||||
{Math.floor(minutes).toString().padStart(2, '0')}
|
||||
</DigitBlock>
|
||||
</ProgressCircle>
|
||||
<ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)">
|
||||
<DigitBlock suffix="s">
|
||||
{Math.floor(seconds).toLocaleString(locale, {
|
||||
minimumIntegerDigits,
|
||||
useGrouping,
|
||||
})}
|
||||
{Math.floor(seconds).toString().padStart(2, '0')}
|
||||
</DigitBlock>
|
||||
</ProgressCircle>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue