|
|
@ -20,7 +20,7 @@ const dateFormatOptions = { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const shortDateFormatOptions = { |
|
|
|
const shortDateFormatOptions = { |
|
|
|
month: 'numeric', |
|
|
|
month: 'short', |
|
|
|
day: 'numeric', |
|
|
|
day: 'numeric', |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -66,12 +66,17 @@ export default class RelativeTimestamp extends React.Component { |
|
|
|
static propTypes = { |
|
|
|
static propTypes = { |
|
|
|
intl: PropTypes.object.isRequired, |
|
|
|
intl: PropTypes.object.isRequired, |
|
|
|
timestamp: PropTypes.string.isRequired, |
|
|
|
timestamp: PropTypes.string.isRequired, |
|
|
|
|
|
|
|
year: PropTypes.number.isRequired, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
state = { |
|
|
|
state = { |
|
|
|
now: this.props.intl.now(), |
|
|
|
now: this.props.intl.now(), |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
static defaultProps = { |
|
|
|
|
|
|
|
year: (new Date()).getFullYear(), |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
shouldComponentUpdate (nextProps, nextState) { |
|
|
|
shouldComponentUpdate (nextProps, nextState) { |
|
|
|
// As of right now the locale doesn't change without a new page load,
|
|
|
|
// As of right now the locale doesn't change without a new page load,
|
|
|
|
// but we might as well check in case that ever changes.
|
|
|
|
// but we might as well check in case that ever changes.
|
|
|
@ -114,7 +119,7 @@ export default class RelativeTimestamp extends React.Component { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
render () { |
|
|
|
const { timestamp, intl } = this.props; |
|
|
|
const { timestamp, intl, year } = this.props; |
|
|
|
|
|
|
|
|
|
|
|
const date = new Date(timestamp); |
|
|
|
const date = new Date(timestamp); |
|
|
|
const delta = this.state.now - date.getTime(); |
|
|
|
const delta = this.state.now - date.getTime(); |
|
|
@ -123,7 +128,7 @@ export default class RelativeTimestamp extends React.Component { |
|
|
|
|
|
|
|
|
|
|
|
if (delta < 10 * SECOND) { |
|
|
|
if (delta < 10 * SECOND) { |
|
|
|
relativeTime = intl.formatMessage(messages.just_now); |
|
|
|
relativeTime = intl.formatMessage(messages.just_now); |
|
|
|
} else if (delta < 3 * DAY) { |
|
|
|
} else if (delta < 7 * DAY) { |
|
|
|
if (delta < MINUTE) { |
|
|
|
if (delta < MINUTE) { |
|
|
|
relativeTime = intl.formatMessage(messages.seconds, { number: Math.floor(delta / SECOND) }); |
|
|
|
relativeTime = intl.formatMessage(messages.seconds, { number: Math.floor(delta / SECOND) }); |
|
|
|
} else if (delta < HOUR) { |
|
|
|
} else if (delta < HOUR) { |
|
|
@ -133,8 +138,10 @@ export default class RelativeTimestamp extends React.Component { |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
relativeTime = intl.formatMessage(messages.days, { number: Math.floor(delta / DAY) }); |
|
|
|
relativeTime = intl.formatMessage(messages.days, { number: Math.floor(delta / DAY) }); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else if (date.getFullYear() === year) { |
|
|
|
relativeTime = intl.formatDate(date, shortDateFormatOptions); |
|
|
|
relativeTime = intl.formatDate(date, shortDateFormatOptions); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|