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

MELS: check scroll on load + use mels-1,-2,... key

Browse source 
To fix https://github.com/vector-im/riot-web/issues/2916, force the checking of scroll position by calling _onWidgetLoad (might need renaming...) when a MELS is expanded/contracted.

Also use an keying scheme for MELS that doesn't depend on the events contained, but rather a simple incrementing index based on the order of the MELS as it appears amongst all MELS.
This commit is contained in:
Luke Barnard 2017-02-20 10:59:11 +00:00
parent 7d07e7f958
commit 6fead66f89
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/structures/MessagePanel.js
View file

@ -237,6 +237,7 @@ module.exports = React.createClass({
this.eventNodes = {};
var i;
let melsIndex = 0;
// first figure out which is the last event in the list which we're
// actually going to show; this allows us to behave slightly
@ -302,10 +303,10 @@ module.exports = React.createClass({
// instead will allow new props to be provided. In turn, the shouldComponentUpdate
// method on MELS can be used to prevent unnecessary renderings.
//
// Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
// so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
// membership event, which will not change during forward pagination.
const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
// melsIndex is deliberately unrelated to the contained events so that pagination
// will not cause it to be recreated.
const key = "membereventlistsummary-" + melsIndex;
melsIndex++;
if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
@ -349,7 +350,9 @@ module.exports = React.createClass({
<MemberEventListSummary
key={key}
events={summarisedEvents}
data-scroll-token={eventId}>
data-scroll-token={eventId}
onToggle={this._onWidgetLoad} // Update scroll state
>
{eventTiles}
</MemberEventListSummary>
);

3
src/components/views/elements/MemberEventListSummary.js
View file

@ -30,6 +30,8 @@ module.exports = React.createClass({
avatarsMaxLength: React.PropTypes.number,
// The minimum number of events needed to trigger summarisation
threshold: React.PropTypes.number,
// Called when the MELS expansion is toggled
onToggle: React.PropTypes.func,
},
getInitialState: function() {
@ -63,6 +65,7 @@ module.exports = React.createClass({
this.setState({
expanded: !this.state.expanded,
});
this.props.onToggle();
},
/**