Merge pull request #5984 from vector-im/t3chguy/datesep
fix&refactor DateSeparator and MessageTimestamp
This commit is contained in:
commit
f940dfdd79
2 changed files with 39 additions and 38 deletions
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
@ -15,8 +16,9 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from 'matrix-react-sdk/lib/languageHandler';
|
||||
import {formatFullDate} from 'matrix-react-sdk/lib/DateUtils';
|
||||
import {formatFullDateNoTime} from 'matrix-react-sdk/lib/DateUtils';
|
||||
|
||||
function getdaysArray() {
|
||||
return [
|
||||
|
@ -30,30 +32,30 @@ function getdaysArray() {
|
|||
];
|
||||
}
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'DateSeparator',
|
||||
render: function() {
|
||||
var date = new Date(this.props.ts);
|
||||
var today = new Date();
|
||||
var yesterday = new Date();
|
||||
var days = getdaysArray();
|
||||
export default class DateSeparator extends React.Component {
|
||||
static propTypes = {
|
||||
ts: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
getLabel() {
|
||||
const date = new Date(this.props.ts);
|
||||
const today = new Date();
|
||||
const yesterday = new Date();
|
||||
const days = getdaysArray();
|
||||
yesterday.setDate(today.getDate() - 1);
|
||||
var label;
|
||||
|
||||
if (date.toDateString() === today.toDateString()) {
|
||||
label = _t('Today');
|
||||
return _t('Today');
|
||||
} else if (date.toDateString() === yesterday.toDateString()) {
|
||||
return _t('Yesterday');
|
||||
} else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
|
||||
return days[date.getDay()];
|
||||
} else {
|
||||
return formatFullDateNoTime(date);
|
||||
}
|
||||
else if (date.toDateString() === yesterday.toDateString()) {
|
||||
label = _t('Yesterday');
|
||||
}
|
||||
else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
|
||||
label = days[date.getDay()];
|
||||
}
|
||||
else {
|
||||
label = formatFullDate(date, this.props.showTwelveHour);
|
||||
}
|
||||
|
||||
return (
|
||||
<h2 className="mx_DateSeparator">{ label }</h2>
|
||||
);
|
||||
render() {
|
||||
return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
@ -14,24 +15,22 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils';
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MessageTimestamp',
|
||||
export default class MessageTimestamp extends React.Component {
|
||||
static propTypes = {
|
||||
ts: PropTypes.number.isRequired,
|
||||
showTwelveHour: PropTypes.bool,
|
||||
};
|
||||
|
||||
propTypes: {
|
||||
showTwelveHour: React.PropTypes.bool,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const date = new Date(this.props.ts);
|
||||
return (
|
||||
<span className="mx_MessageTimestamp" title={ formatFullDate(date, this.props.showTwelveHour) }>
|
||||
<span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
|
||||
{ formatTime(date, this.props.showTwelveHour) }
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue