2018-10-10 07:22:06 +02:00
|
|
|
// @flow
|
2017-12-21 22:08:54 +01:00
|
|
|
import React from 'react';
|
2018-10-10 07:22:06 +02:00
|
|
|
import moment from 'moment';
|
2017-09-03 18:35:01 +02:00
|
|
|
|
2018-10-10 07:22:06 +02:00
|
|
|
type Props = {
|
2019-05-06 19:22:10 +02:00
|
|
|
date?: any,
|
2018-10-10 07:22:06 +02:00
|
|
|
timeAgo?: boolean,
|
|
|
|
formatOptions: {},
|
|
|
|
show?: string,
|
|
|
|
};
|
|
|
|
|
|
|
|
class DateTime extends React.PureComponent<Props> {
|
2017-12-21 22:08:54 +01:00
|
|
|
static SHOW_DATE = 'date';
|
|
|
|
static SHOW_TIME = 'time';
|
|
|
|
static SHOW_BOTH = 'both';
|
2017-09-18 02:52:57 +02:00
|
|
|
|
2017-10-08 22:43:56 +02:00
|
|
|
static defaultProps = {
|
|
|
|
formatOptions: {
|
2017-12-21 22:08:54 +01:00
|
|
|
month: 'long',
|
|
|
|
day: 'numeric',
|
|
|
|
year: 'numeric',
|
2017-10-08 22:43:56 +02:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2017-09-03 18:35:01 +02:00
|
|
|
render() {
|
2018-10-10 07:22:06 +02:00
|
|
|
const { date, formatOptions, timeAgo } = this.props;
|
2017-09-18 02:52:57 +02:00
|
|
|
const show = this.props.show || DateTime.SHOW_BOTH;
|
2017-09-03 18:35:01 +02:00
|
|
|
|
2018-10-10 07:22:06 +02:00
|
|
|
if (timeAgo) {
|
|
|
|
return date ? <span>{moment(date).from(moment())}</span> : <span />;
|
|
|
|
}
|
|
|
|
|
2017-09-18 02:52:57 +02:00
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{date &&
|
2018-10-10 07:22:06 +02:00
|
|
|
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
|
2019-09-04 23:43:37 +02:00
|
|
|
date.toLocaleDateString(undefined, formatOptions)}
|
2018-10-10 07:22:06 +02:00
|
|
|
{show === DateTime.SHOW_BOTH && ' '}
|
2019-05-07 23:38:29 +02:00
|
|
|
{date && (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) && date.toLocaleTimeString()}
|
2017-12-21 22:08:54 +01:00
|
|
|
{!date && '...'}
|
2017-09-18 02:52:57 +02:00
|
|
|
</span>
|
|
|
|
);
|
2017-09-03 18:35:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DateTime;
|