73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import './Highlight.css';
|
|
|
|
function Highlight(props) {
|
|
const countString = () => {
|
|
switch (true) {
|
|
case props.value <= 0:
|
|
return '-';
|
|
case props.value < 1000:
|
|
return props.value;
|
|
case props.value < 1000000:
|
|
return (props.value / 1000).toFixed(3).slice(0, -2) + 'K';
|
|
case props.value < 1000000000:
|
|
return (props.value / 1000000).toFixed(6).slice(0, -5) + 'M';
|
|
default:
|
|
return 'Inf';
|
|
}
|
|
};
|
|
|
|
const stopwatchString = () => {
|
|
if (isNaN(Date.parse(props.value))) {
|
|
return '--:--';
|
|
}
|
|
let now = new Date();
|
|
let date = new Date(props.value);
|
|
let diff = now - date;
|
|
|
|
let msMinute = 1000 * 60;
|
|
let msHour = msMinute * 60;
|
|
let msDay = msHour * 24;
|
|
|
|
let days = Math.floor(diff / msDay);
|
|
let hours = Math.floor((diff - days * msDay) / msHour);
|
|
let minutes = Math.floor((diff - days * msDay - hours * msHour) / msMinute);
|
|
|
|
if (diff >= 100 * msDay) {
|
|
return days + 'd';
|
|
}
|
|
if (diff >= msDay) {
|
|
return days + 'd ' + hours + 'h';
|
|
}
|
|
|
|
if (hours < 10) {
|
|
hours = '0' + hours;
|
|
}
|
|
|
|
if (minutes < 10) {
|
|
minutes = '0' + minutes;
|
|
}
|
|
|
|
return hours + ':' + minutes;
|
|
};
|
|
|
|
const valueString = () => {
|
|
switch (props.type) {
|
|
case 'count':
|
|
return countString();
|
|
case 'stopwatch':
|
|
return stopwatchString();
|
|
default:
|
|
return props.value;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='highlight'>
|
|
<span className='highlight-value'>{valueString()}</span>
|
|
<span className='highlight-description'>{props.description}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Highlight;
|