moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ScrollableList: break up render function into smaller pieces

This commit is contained in:
Alex Gleason 2021-10-11 11:59:37 -05:00
parent b1e10f3db2
commit d41e3f96ee
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 68 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
app/soapbox/components/scrollable_list.js
View File

@ -221,67 +221,82 @@ export default class ScrollableList extends PureComponent {
this.node = c;
}
render() {
const { children, scrollKey, showLoading, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
renderLoading = () => {
const { prepend } = this.props;
return (
<div className='slist slist--flex'>
<div role='feed' className='item-list'>
{prepend}
</div>
<div className='slist__append'>
<LoadingIndicator />
</div>
</div>
);
}
renderEmptyMessage = () => {
const { prepend, alwaysPrepend, emptyMessage } = this.props;
return (
<div className='slist slist--flex' ref={this.setRef}>
{alwaysPrepend && prepend}
<div className='empty-column-indicator'>
<div>{emptyMessage}</div>
</div>
</div>
);
}
renderFeed = () => {
const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore } = this.props;
const childrenCount = React.Children.count(children);
const trackScroll = true; //placeholder
const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
let scrollableArea = null;
return (
<div className='slist' ref={this.setRef} onMouseMove={this.handleMouseMove}>
<div role='feed' className='item-list'>
{prepend}
{React.Children.map(children, (child, index) => (
<IntersectionObserverArticleContainer
key={child.key}
id={child.key}
index={index}
listLength={childrenCount}
intersectionObserverWrapper={this.intersectionObserverWrapper}
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
>
{React.cloneElement(child, {
getScrollPosition: this.getScrollPosition,
updateScrollBottom: this.updateScrollBottom,
cachedMediaWidth: this.state.cachedMediaWidth,
cacheMediaWidth: this.cacheMediaWidth,
})}
</IntersectionObserverArticleContainer>
))}
{this.getMoreFollows()}
{loadMore}
</div>
</div>
);
}
render() {
const { children, showLoading, isLoading, hasMore, emptyMessage } = this.props;
const childrenCount = React.Children.count(children);
if (showLoading) {
scrollableArea = (
<div className='slist slist--flex'>
<div role='feed' className='item-list'>
{prepend}
</div>
<div className='slist__append'>
<LoadingIndicator />
</div>
</div>
);
return this.renderLoading();
} else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
scrollableArea = (
<div className='slist' ref={this.setRef} onMouseMove={this.handleMouseMove}>
<div role='feed' className='item-list'>
{prepend}
{React.Children.map(this.props.children, (child, index) => (
<IntersectionObserverArticleContainer
key={child.key}
id={child.key}
index={index}
listLength={childrenCount}
intersectionObserverWrapper={this.intersectionObserverWrapper}
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
>
{React.cloneElement(child, {
getScrollPosition: this.getScrollPosition,
updateScrollBottom: this.updateScrollBottom,
cachedMediaWidth: this.state.cachedMediaWidth,
cacheMediaWidth: this.cacheMediaWidth,
})}
</IntersectionObserverArticleContainer>
))}
{this.getMoreFollows()}
{loadMore}
</div>
</div>
);
return this.renderFeed();
} else {
scrollableArea = (
<div className='slist slist--flex' ref={this.setRef}>
{alwaysPrepend && prepend}
<div className='empty-column-indicator'>
<div>{emptyMessage}</div>
</div>
</div>
);
return this.renderEmptyMessage();
}
return scrollableArea;
}
}