2016-04-21 01:03:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const React = require('react');
|
|
|
|
const ReactDOM = require('react-dom');
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const sdk = require('../../../index');
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const Velociraptor = require('../../../Velociraptor');
|
2016-04-21 01:03:05 +03:00
|
|
|
require('../../../VelocityBounce');
|
2017-06-08 16:08:51 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2018-01-10 15:00:11 +03:00
|
|
|
import {formatDate} from '../../../DateUtils';
|
2017-05-15 04:55:07 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let bounce = false;
|
2016-04-21 01:03:05 +03:00
|
|
|
try {
|
|
|
|
if (global.localStorage) {
|
|
|
|
bounce = global.localStorage.getItem('avatar_bounce') == 'true';
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'ReadReceiptMarker',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// the RoomMember to show the RR for
|
2017-12-26 04:03:18 +03:00
|
|
|
member: PropTypes.object.isRequired,
|
2016-04-21 01:03:05 +03:00
|
|
|
|
|
|
|
// number of pixels to offset the avatar from the right of its parent;
|
|
|
|
// typically a negative value.
|
2017-12-26 04:03:18 +03:00
|
|
|
leftOffset: PropTypes.number,
|
2016-04-21 01:03:05 +03:00
|
|
|
|
|
|
|
// true to hide the avatar (it will still be animated)
|
2017-12-26 04:03:18 +03:00
|
|
|
hidden: PropTypes.bool,
|
2016-04-21 01:03:05 +03:00
|
|
|
|
|
|
|
// don't animate this RR into position
|
2017-12-26 04:03:18 +03:00
|
|
|
suppressAnimation: PropTypes.bool,
|
2016-04-21 01:03:05 +03:00
|
|
|
|
|
|
|
// an opaque object for storing information about this user's RR in
|
|
|
|
// this room
|
2017-12-26 04:03:18 +03:00
|
|
|
readReceiptInfo: PropTypes.object,
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2016-04-22 19:03:15 +03:00
|
|
|
// A function which is used to check if the parent panel is being
|
|
|
|
// unmounted, to avoid unnecessary work. Should return true if we
|
|
|
|
// are being unmounted.
|
2017-12-26 04:03:18 +03:00
|
|
|
checkUnmounting: PropTypes.func,
|
2016-04-22 19:03:15 +03:00
|
|
|
|
2016-04-21 01:03:05 +03:00
|
|
|
// callback for clicks on this RR
|
2017-12-26 04:03:18 +03:00
|
|
|
onClick: PropTypes.func,
|
2016-12-08 19:23:20 +03:00
|
|
|
|
|
|
|
// Timestamp when the receipt was read
|
2017-12-26 04:03:18 +03:00
|
|
|
timestamp: PropTypes.number,
|
2017-06-22 17:53:58 +03:00
|
|
|
|
|
|
|
// True to show twelve hour format, false otherwise
|
2017-12-26 04:03:18 +03:00
|
|
|
showTwelveHour: PropTypes.bool,
|
2016-04-21 01:03:05 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
leftOffset: 0,
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2016-04-21 01:03:05 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
// if we are going to animate the RR, we don't show it on first render,
|
|
|
|
// and instead just add a placeholder to the DOM; once we've been
|
|
|
|
// mounted, we start an animation which moves the RR from its old
|
|
|
|
// position.
|
|
|
|
return {
|
|
|
|
suppressDisplay: !this.props.suppressAnimation,
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2016-04-21 01:03:05 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
// before we remove the rr, store its location in the map, so that if
|
|
|
|
// it reappears, it can be animated from the right place.
|
2017-10-11 19:56:17 +03:00
|
|
|
const rrInfo = this.props.readReceiptInfo;
|
2016-04-21 01:03:05 +03:00
|
|
|
if (!rrInfo) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-04-22 19:03:15 +03:00
|
|
|
// checking the DOM properties can force a re-layout, which can be
|
|
|
|
// quite expensive; so if the parent messagepanel is being unmounted,
|
|
|
|
// then don't bother with this.
|
|
|
|
if (this.props.checkUnmounting && this.props.checkUnmounting()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const avatarNode = ReactDOM.findDOMNode(this);
|
2016-04-21 01:03:05 +03:00
|
|
|
rrInfo.top = avatarNode.offsetTop;
|
|
|
|
rrInfo.left = avatarNode.offsetLeft;
|
|
|
|
rrInfo.parent = avatarNode.offsetParent;
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount: function() {
|
|
|
|
if (!this.state.suppressDisplay) {
|
|
|
|
// we've already done our display - nothing more to do.
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// treat new RRs as though they were off the top of the screen
|
2017-10-11 19:56:17 +03:00
|
|
|
let oldTop = -15;
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const oldInfo = this.props.readReceiptInfo;
|
2016-04-21 01:03:05 +03:00
|
|
|
if (oldInfo && oldInfo.parent) {
|
|
|
|
oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const newElement = ReactDOM.findDOMNode(this);
|
2017-08-30 11:59:02 +03:00
|
|
|
let startTopOffset;
|
|
|
|
if (!newElement.offsetParent) {
|
|
|
|
// this seems to happen sometimes for reasons I don't understand
|
|
|
|
// the docs for `offsetParent` say it may be null if `display` is
|
|
|
|
// `none`, but I can't see why that would happen.
|
|
|
|
console.warn(
|
|
|
|
`ReadReceiptMarker for ${this.props.member.userId} in ` +
|
|
|
|
`${this.props.member.roomId} has no offsetParent`,
|
|
|
|
);
|
|
|
|
startTopOffset = 0;
|
|
|
|
} else {
|
|
|
|
startTopOffset = oldTop - newElement.offsetParent.getBoundingClientRect().top;
|
|
|
|
}
|
2016-04-21 01:03:05 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const startStyles = [];
|
|
|
|
const enterTransitionOpts = [];
|
2016-04-21 01:03:05 +03:00
|
|
|
|
|
|
|
if (oldInfo && oldInfo.left) {
|
|
|
|
// start at the old height and in the old h pos
|
|
|
|
|
|
|
|
startStyles.push({ top: startTopOffset+"px",
|
|
|
|
left: oldInfo.left+"px" });
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const reorderTransitionOpts = {
|
2016-04-21 01:03:05 +03:00
|
|
|
duration: 100,
|
2017-08-30 11:59:02 +03:00
|
|
|
easing: 'easeOut',
|
2016-04-21 01:03:05 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
enterTransitionOpts.push(reorderTransitionOpts);
|
|
|
|
}
|
|
|
|
|
|
|
|
// then shift to the rightmost column,
|
|
|
|
// and then it will drop down to its resting position
|
|
|
|
startStyles.push({ top: startTopOffset+'px', left: '0px' });
|
|
|
|
enterTransitionOpts.push({
|
|
|
|
duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
|
|
|
|
easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
suppressDisplay: false,
|
|
|
|
startStyles: startStyles,
|
|
|
|
enterTransitionOpts: enterTransitionOpts,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
render: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
2016-04-21 01:03:05 +03:00
|
|
|
if (this.state.suppressDisplay) {
|
2017-10-11 19:56:17 +03:00
|
|
|
return <div />;
|
2016-04-21 01:03:05 +03:00
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const style = {
|
2016-04-21 01:03:05 +03:00
|
|
|
left: this.props.leftOffset+'px',
|
|
|
|
top: '0px',
|
|
|
|
visibility: this.props.hidden ? 'hidden' : 'visible',
|
|
|
|
};
|
|
|
|
|
2016-12-09 14:43:23 +03:00
|
|
|
let title;
|
2016-12-08 19:23:20 +03:00
|
|
|
if (this.props.timestamp) {
|
2017-06-08 16:08:51 +03:00
|
|
|
title = _t(
|
|
|
|
"Seen by %(userName)s at %(dateTime)s",
|
2018-01-10 15:00:11 +03:00
|
|
|
{userName: this.props.member.userId, dateTime: formatDate(new Date(this.props.timestamp), this.props.showTwelveHour)},
|
2017-06-08 16:08:51 +03:00
|
|
|
);
|
2016-12-08 19:23:20 +03:00
|
|
|
}
|
|
|
|
|
2016-04-21 01:03:05 +03:00
|
|
|
return (
|
2016-08-01 18:56:25 +03:00
|
|
|
<Velociraptor
|
|
|
|
startStyles={this.state.startStyles}
|
|
|
|
enterTransitionOpts={this.state.enterTransitionOpts} >
|
2016-04-21 01:03:05 +03:00
|
|
|
<MemberAvatar
|
|
|
|
member={this.props.member}
|
2016-12-20 05:26:23 +03:00
|
|
|
aria-hidden="true"
|
2016-04-21 01:03:05 +03:00
|
|
|
width={14} height={14} resizeMethod="crop"
|
|
|
|
style={style}
|
2016-12-08 19:23:20 +03:00
|
|
|
title={title}
|
2017-02-02 20:36:26 +03:00
|
|
|
onClick={this.props.onClick}
|
2016-04-21 01:03:05 +03:00
|
|
|
/>
|
|
|
|
</Velociraptor>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|