+import { debounce } from 'lodash';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import { ScrollContainer } from 'react-router-scroll';
import PropTypes from 'prop-types';
import StatusContainer from '../containers/status_container';
-import LoadMore from './load_more';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
-import { debounce } from 'lodash';
+import LoadGap from './load_gap';
+import ScrollableList from './scrollable_list';
+import RegenerationIndicator from 'mastodon/components/regeneration_indicator';
export default class StatusList extends ImmutablePureComponent {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
- onScrollToBottom: PropTypes.func,
+ featuredStatusIds: ImmutablePropTypes.list,
+ onLoadMore: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,
shouldUpdateScroll: PropTypes.func,
isLoading: PropTypes.bool,
+ isPartial: PropTypes.bool,
hasMore: PropTypes.bool,
prepend: PropTypes.node,
emptyMessage: PropTypes.node,
+ alwaysPrepend: PropTypes.bool,
+ timelineId: PropTypes.string,
};
static defaultProps = {
trackScroll: true,
};
- intersectionObserverWrapper = new IntersectionObserverWrapper();
-
- handleScroll = debounce(() => {
- if (this.node) {
- const { scrollTop, scrollHeight, clientHeight } = this.node;
- const offset = scrollHeight - scrollTop - clientHeight;
- this._oldScrollPosition = scrollHeight - scrollTop;
-
- if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
- this.props.onScrollToBottom();
- } else if (scrollTop < 100 && this.props.onScrollToTop) {
- this.props.onScrollToTop();
- } else if (this.props.onScroll) {
- this.props.onScroll();
- }
- }
- }, 200, {
- trailing: true,
- });
-
- componentDidMount () {
- this.attachScrollListener();
- this.attachIntersectionObserver();
-
- // Handle initial scroll posiiton
- this.handleScroll();
+ getFeaturedStatusCount = () => {
+ return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
}
- componentDidUpdate (prevProps) {
- // Reset the scroll position when a new toot comes in in order not to
- // jerk the scrollbar around if you're already scrolled down the page.
- if (prevProps.statusIds.size < this.props.statusIds.size && this._oldScrollPosition && this.node.scrollTop > 0) {
- if (prevProps.statusIds.first() !== this.props.statusIds.first()) {
- let newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
- if (this.node.scrollTop !== newScrollTop) {
- this.node.scrollTop = newScrollTop;
- }
- } else {
- this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
- }
+ getCurrentStatusIndex = (id, featured) => {
+ if (featured) {
+ return this.props.featuredStatusIds.indexOf(id);
+ } else {
+ return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount();
}
}
- componentWillUnmount () {
- this.detachScrollListener();
- this.detachIntersectionObserver();
+ handleMoveUp = (id, featured) => {
+ const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
+ this._selectChild(elementIndex, true);
}
- attachIntersectionObserver () {
- this.intersectionObserverWrapper.connect({
- root: this.node,
- rootMargin: '300% 0px',
- });
+ handleMoveDown = (id, featured) => {
+ const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
+ this._selectChild(elementIndex, false);
}
- detachIntersectionObserver () {
- this.intersectionObserverWrapper.disconnect();
- }
+ handleLoadOlder = debounce(() => {
+ this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
+ }, 300, { leading: true })
- attachScrollListener () {
- this.node.addEventListener('scroll', this.handleScroll);
- }
+ _selectChild (index, align_top) {
+ const container = this.node.node;
+ const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
- detachScrollListener () {
- this.node.removeEventListener('scroll', this.handleScroll);
+ if (element) {
+ if (align_top && container.scrollTop > element.offsetTop) {
+ element.scrollIntoView(true);
+ } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
+ element.scrollIntoView(false);
+ }
+ element.focus();
+ }
}
- setRef = (c) => {
+ setRef = c => {
this.node = c;
}
- handleLoadMore = (e) => {
- e.preventDefault();
- this.props.onScrollToBottom();
- }
-
render () {
- const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
-
- const loadMore = <LoadMore visible={!isLoading && statusIds.size > 0 && hasMore} onClick={this.handleLoadMore} />;
- let scrollableArea = null;
+ const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other } = this.props;
+ const { isLoading, isPartial } = other;
- if (isLoading || statusIds.size > 0 || !emptyMessage) {
- scrollableArea = (
- <div className='scrollable' ref={this.setRef}>
- <div className='status-list'>
- {prepend}
-
- {statusIds.map((statusId) => {
- return <StatusContainer key={statusId} id={statusId} intersectionObserverWrapper={this.intersectionObserverWrapper} />;
- })}
-
- {loadMore}
- </div>
- </div>
- );
- } else {
- scrollableArea = (
- <div className='empty-column-indicator' ref={this.setRef}>
- {emptyMessage}
- </div>
- );
+ if (isPartial) {
+ return <RegenerationIndicator />;
}
- if (trackScroll) {
- return (
- <ScrollContainer scrollKey={scrollKey} shouldUpdateScroll={shouldUpdateScroll}>
- {scrollableArea}
- </ScrollContainer>
- );
- } else {
- return scrollableArea;
+ let scrollableContent = (isLoading || statusIds.size > 0) ? (
+ statusIds.map((statusId, index) => statusId === null ? (
+ <LoadGap
+ key={'gap:' + statusIds.get(index + 1)}
+ disabled={isLoading}
+ maxId={index > 0 ? statusIds.get(index - 1) : null}
+ onClick={onLoadMore}
+ />
+ ) : (
+ <StatusContainer
+ key={statusId}
+ id={statusId}
+ onMoveUp={this.handleMoveUp}
+ onMoveDown={this.handleMoveDown}
+ contextType={timelineId}
+ showThread
+ />
+ ))
+ ) : null;
+
+ if (scrollableContent && featuredStatusIds) {
+ scrollableContent = featuredStatusIds.map(statusId => (
+ <StatusContainer
+ key={`f-${statusId}`}
+ id={statusId}
+ featured
+ onMoveUp={this.handleMoveUp}
+ onMoveDown={this.handleMoveDown}
+ contextType={timelineId}
+ showThread
+ />
+ )).concat(scrollableContent);
}
+
+ return (
+ <ScrollableList {...other} showLoading={isLoading && statusIds.size === 0} onLoadMore={onLoadMore && this.handleLoadOlder} shouldUpdateScroll={shouldUpdateScroll} ref={this.setRef}>
+ {scrollableContent}
+ </ScrollableList>
+ );
}
}
git-æsc / mastodon.git / blobdiff