Simplify isIntersecting in status_list.js (#3371)
This commit is contained in:
parent
189a06d2a2
commit
28cbfb9f10
|
@ -27,7 +27,8 @@ class StatusList extends ImmutablePureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
isIntersecting: [{ }],
|
isIntersecting: {},
|
||||||
|
intersectionCount: 0,
|
||||||
}
|
}
|
||||||
|
|
||||||
statusRefQueue = []
|
statusRefQueue = []
|
||||||
|
@ -65,15 +66,31 @@ class StatusList extends ImmutablePureComponent {
|
||||||
attachIntersectionObserver () {
|
attachIntersectionObserver () {
|
||||||
const onIntersection = (entries) => {
|
const onIntersection = (entries) => {
|
||||||
this.setState(state => {
|
this.setState(state => {
|
||||||
const isIntersecting = { };
|
|
||||||
|
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
const statusId = entry.target.getAttribute('data-id');
|
const statusId = entry.target.getAttribute('data-id');
|
||||||
|
|
||||||
state.isIntersecting[0][statusId] = entry.isIntersecting;
|
state.isIntersecting[statusId] = entry.isIntersecting;
|
||||||
});
|
});
|
||||||
|
|
||||||
return { isIntersecting: [state.isIntersecting[0]] };
|
// isIntersecting is a map of DOM data-id's to booleans (true for
|
||||||
|
// intersecting, false for non-intersecting).
|
||||||
|
//
|
||||||
|
// We always want to return true in shouldComponentUpdate() if
|
||||||
|
// this object changes, because onIntersection() is only called if
|
||||||
|
// something has changed.
|
||||||
|
//
|
||||||
|
// Now, we *could* use an immutable map or some other structure to
|
||||||
|
// diff the full map, but that would be pointless because the browser
|
||||||
|
// has already informed us that something has changed. So we can just
|
||||||
|
// use a regular object, which will be diffed by ImmutablePureComponent
|
||||||
|
// based on reference equality (i.e. it's always "unchanged") and
|
||||||
|
// then we just increment intersectionCount to force a change.
|
||||||
|
|
||||||
|
return {
|
||||||
|
isIntersecting: state.isIntersecting,
|
||||||
|
intersectionCount: state.intersectionCount + 1,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -122,7 +139,7 @@ class StatusList extends ImmutablePureComponent {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { statusIds, onScrollToBottom, scrollKey, shouldUpdateScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
|
const { statusIds, onScrollToBottom, scrollKey, shouldUpdateScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
|
||||||
const isIntersecting = this.state.isIntersecting[0];
|
const { isIntersecting } = this.state;
|
||||||
|
|
||||||
let loadMore = null;
|
let loadMore = null;
|
||||||
let scrollableArea = null;
|
let scrollableArea = null;
|
||||||
|
|
Reference in New Issue