PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #5984 from vector-im/t3chguy/datesep

Browse source 
fix&refactor DateSeparator and MessageTimestamp
This commit is contained in:
David Baker 2018-01-15 13:45:14 +00:00 committed by GitHub
commit f940dfdd79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/views/messages/DateSeparator.js
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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 React from 'react';
import PropTypes from 'prop-types';
import { _t } from 'matrix-react-sdk/lib/languageHandler'; 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() { function getdaysArray() {
return [ return [
@ -30,30 +32,30 @@ function getdaysArray() {
]; ];
} }
module.exports = React.createClass({ export default class DateSeparator extends React.Component {
displayName: 'DateSeparator', static propTypes = {
render: function() { ts: PropTypes.number.isRequired,
var date = new Date(this.props.ts); };
var today = new Date();
var yesterday = new Date(); getLabel() {
var days = getdaysArray(); const date = new Date(this.props.ts);
const today = new Date();
const yesterday = new Date();
const days = getdaysArray();
yesterday.setDate(today.getDate() - 1); yesterday.setDate(today.getDate() - 1);
var label;
if (date.toDateString() === today.toDateString()) { 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 ( render() {
<h2 className="mx_DateSeparator">{ label }</h2> return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
);
} }
}); }

23
src/components/views/messages/MessageTimestamp.js
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. limitations under the License.
*/ */
'use strict';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils'; import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils';
module.exports = React.createClass({ export default class MessageTimestamp extends React.Component {
displayName: 'MessageTimestamp', static propTypes = {
ts: PropTypes.number.isRequired,
showTwelveHour: PropTypes.bool,
};
propTypes: { render() {
showTwelveHour: React.PropTypes.bool,
},
render: function() {
const date = new Date(this.props.ts); const date = new Date(this.props.ts);
return ( 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) } { formatTime(date, this.props.showTwelveHour) }
</span> </span>
); );
}, }
}); }