toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix onLayoutCalled issue and improve accuracy (#1401)

Browse source
This commit is contained in:
Chris Duarte 2018-02-07 08:03:58 -08:00 committed by Harrison Healey
parent 2051e8a086
commit c4e7a622d2
2 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/components/post_list/post_list.js
View file

@ -26,6 +26,8 @@ const NewMessagesDividerWithLayout = withLayout(NewMessagesDivider);
const PostWithLayout = withLayout(Post);
const INITAL_BATCH_TO_RENDER = 15;
const NEW_MESSAGES_HEIGHT = 28;
const DATE_HEADER_HEIGHT = 28;
export default class PostList extends PureComponent {
static propTypes = {
@ -80,14 +82,12 @@ export default class PostList extends PureComponent {
if (this.props.channelId !== nextProps.channelId) {
this.itemMeasurements = {};
this.newMessageScrolledTo = false;
this.scrollToBottomOffset();
}
}
componentDidUpdate(prevProps) {
const initialPosts = !prevProps.postIds.length && prevProps.postIds !== this.props.postIds;
if ((prevProps.channelId !== this.props.channelId || initialPosts) && this.refs.list) {
this.scrollToBottomOffset();
} else if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
componentDidUpdate() {
if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
this.scrollListToMessageOffset();
}
}
@ -110,17 +110,13 @@ export default class PostList extends PureComponent {
}
scrollListToMessageOffset = () => {
const index = this.moreNewMessages ? this.props.postIds.length : this.newMessagesIndex;
const index = this.moreNewMessages ? this.props.postIds.length - 1 : this.newMessagesIndex;
if (index !== -1) {
let offset = this.getMeasurementOffset(index);
const offset = this.getMeasurementOffset(index);
const windowHeight = this.state.postListHeight;
if (index !== this.props.postIds.length - 1) {
if (offset < windowHeight) {
return; // no need to scroll since item is in view
} else if (offset > windowHeight) {
offset = (offset - (windowHeight / 2)) + this.itemMeasurements[index];
}
if (index !== this.props.postIds.length - 1 && offset < windowHeight) {
return; // post is already in view, no need to scroll.
}
InteractionManager.runAfterInteractions(() => {
@ -191,13 +187,12 @@ export default class PostList extends PureComponent {
// needs to be added to the index for the length check to be correct.
this.moreNewMessages = this.props.postIds.length === index + 2;
this.itemMeasurements[index] = NEW_MESSAGES_HEIGHT;
return (
<NewMessagesDividerWithLayout
index={index}
onLayoutCalled={this.measureItem}
theme={this.props.theme}
moreMessages={this.moreNewMessages}
shouldCallOnLayout={this.props.measureCellLayout && !this.newMessageScrolledTo}
/>
);
} else if (item.indexOf(DATE_LINE) === 0) {
@ -216,12 +211,11 @@ export default class PostList extends PureComponent {
};
renderDateHeader = (date, index) => {
this.itemMeasurements[index] = DATE_HEADER_HEIGHT;
return (
<DateHeaderWithLayout
date={date}
index={index}
onLayoutCalled={this.measureItem}
shouldCallOnLayout={this.props.measureCellLayout && !this.newMessageScrolledTo}
/>
);
};

8
app/components/post_list/with_layout.js
View file

@ -5,14 +5,20 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import {emptyFunction} from 'app/utils/general';
function withLayout(WrappedComponent) {
return class WithLayoutComponent extends PureComponent {
static propTypes = {
index: PropTypes.number.isRequired,
onLayoutCalled: PropTypes.func.isRequired,
onLayoutCalled: PropTypes.func,
shouldCallOnLayout: PropTypes.bool
};
static defaultProps = {
onLayoutCalled: emptyFunction
}
onLayout = (event) => {
const {height} = event.nativeEvent.layout;
this.props.onLayoutCalled(this.props.index, height);