89 lines
2.0 KiB
JavaScript
89 lines
2.0 KiB
JavaScript
// PrinterSelect.js
|
|
import React, { useState, useEffect } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Flex, Typography, Tag } from 'antd'
|
|
import moment from 'moment'
|
|
|
|
const { Text } = Typography
|
|
|
|
const formatTimeDifference = (dateTime) => {
|
|
const now = moment()
|
|
const diff = moment(dateTime)
|
|
const duration = moment.duration(now.diff(diff))
|
|
|
|
const years = Math.floor(duration.asYears())
|
|
const months = Math.floor(duration.asMonths()) % 12
|
|
const weeks = Math.floor(duration.asWeeks()) % 4
|
|
const days = Math.floor(duration.asDays()) % 7
|
|
const hours = duration.hours()
|
|
const minutes = duration.minutes()
|
|
const seconds = duration.seconds()
|
|
|
|
if (years > 0) {
|
|
return `${years}y`
|
|
} else if (months > 0) {
|
|
return `${months}mo`
|
|
} else if (weeks > 0) {
|
|
return `${weeks}w`
|
|
} else if (days > 0) {
|
|
return `${days}d`
|
|
} else if (hours > 0) {
|
|
return `${hours}h`
|
|
} else if (minutes > 0) {
|
|
return `${minutes}m`
|
|
} else {
|
|
return `${seconds}s`
|
|
}
|
|
}
|
|
|
|
const TimeDisplay = ({
|
|
dateTime,
|
|
showDate = true,
|
|
showTime = true,
|
|
showSince = false,
|
|
type = 'primary'
|
|
}) => {
|
|
const [timeAgo, setTimeAgo] = useState(formatTimeDifference(dateTime))
|
|
|
|
useEffect(() => {
|
|
if (showSince) {
|
|
const timer = setInterval(() => {
|
|
setTimeAgo(formatTimeDifference(dateTime))
|
|
}, 1000)
|
|
|
|
return () => clearInterval(timer)
|
|
}
|
|
}, [dateTime, showSince])
|
|
|
|
if (!dateTime) {
|
|
return <Text type='secondary'>n/a</Text>
|
|
}
|
|
|
|
var dateFormat = ''
|
|
if (showDate == true) {
|
|
dateFormat += 'YYYY-MM-DD '
|
|
}
|
|
if (showTime == true) {
|
|
dateFormat += 'HH:mm:ss '
|
|
}
|
|
|
|
const formattedDate = moment(dateTime).format(dateFormat)
|
|
|
|
return (
|
|
<Flex align={'center'} gap={'small'}>
|
|
<Text type={type}>{formattedDate}</Text>
|
|
{showSince ? <Tag style={{ margin: 0 }}>{timeAgo + ' ago'}</Tag> : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
TimeDisplay.propTypes = {
|
|
dateTime: PropTypes.string,
|
|
showDate: PropTypes.bool,
|
|
showTime: PropTypes.bool,
|
|
showSince: PropTypes.bool,
|
|
type: PropTypes.string
|
|
}
|
|
|
|
export default TimeDisplay
|