mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Implement sticky date separators

Browse source 
Codep https://github.com/matrix-org/matrix-react-sdk/pull/1353
This commit is contained in:
Luke Barnard 2017-08-30 14:06:50 +01:00
parent 3664a86722
commit 88228a5a3f
3 changed files with 34 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,45 +15,26 @@ limitations under the License.
*/
import React from 'react';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import DateUtils from 'matrix-react-sdk/lib/DateUtils';
function getdaysArray() {
return [
_t('Sunday'),
_t('Monday'),
_t('Tuesday'),
_t('Wednesday'),
_t('Thursday'),
_t('Friday'),
_t('Saturday'),
];
}
import { Sticky } from 'react-sticky';
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();
yesterday.setDate(today.getDate() - 1);
var label;
if (date.toDateString() === today.toDateString()) {
label = _t('Today');
}
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 = DateUtils.formatFullDate(date, this.props.showTwelveHour);
}
const date = new Date(this.props.ts);
const label = DateUtils.formatDateSeparator(date);
return (
<h2 className="mx_DateSeparator">{ label }</h2>
<Sticky relative={true} disableCompensation={true}>
{({style, isSticky, wasSticky, distanceFromTop}) => {
return (
<div className={"mx_DateSeparator_container mx_DateSeparator_container" + (isSticky ? '_sticky' : '')}
style={{top: isSticky ? -distanceFromTop + "px" : 0}}
>
<h2 className="mx_DateSeparator">{ label }</h2>
</div>
);
}}
</Sticky>
);
}
},
});