OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

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

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

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