2017-09-03 18:35:01 +02:00
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
class DateTime extends React.PureComponent {
|
2017-09-18 02:52:57 +02:00
|
|
|
static SHOW_DATE = "date";
|
|
|
|
static SHOW_TIME = "time";
|
|
|
|
static SHOW_BOTH = "both";
|
|
|
|
|
2017-10-08 22:43:56 +02:00
|
|
|
static defaultProps = {
|
|
|
|
formatOptions: {
|
|
|
|
month: "long",
|
|
|
|
day: "numeric",
|
|
|
|
year: "numeric",
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2017-09-03 18:35:01 +02:00
|
|
|
componentWillMount() {
|
|
|
|
this.refreshDate(this.props);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(props) {
|
|
|
|
this.refreshDate(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
refreshDate(props) {
|
|
|
|
const { block, date, fetchBlock } = props;
|
|
|
|
if (block && date === undefined) {
|
|
|
|
fetchBlock(block);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-09-18 02:52:57 +02:00
|
|
|
const { date, formatOptions } = this.props;
|
|
|
|
const show = this.props.show || DateTime.SHOW_BOTH;
|
2017-10-08 22:43:56 +02:00
|
|
|
const locale = app.i18n.getLocale();
|
2017-09-03 18:35:01 +02:00
|
|
|
|
2017-09-18 02:52:57 +02:00
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{date &&
|
|
|
|
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
|
2017-10-08 22:43:56 +02:00
|
|
|
date.toLocaleDateString([locale, "en-US"], formatOptions)}
|
2017-09-18 02:52:57 +02:00
|
|
|
{show == DateTime.SHOW_BOTH && " "}
|
|
|
|
{date &&
|
|
|
|
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
|
|
|
|
date.toLocaleTimeString()}
|
2017-10-08 22:43:56 +02:00
|
|
|
{!date && "..."}
|
2017-09-18 02:52:57 +02:00
|
|
|
</span>
|
|
|
|
);
|
2017-09-03 18:35:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DateTime;
|