sforkowany z mirror/soapbox
StatusList: break out TimelineQueueButtonHeader into StatusListContainer
rodzic
878d26cb4b
commit
47e43b6540
|
@ -1,26 +1,18 @@
|
|||
import classNames from 'classnames';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
import { FormattedMessage, defineMessages } from 'react-intl';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import LoadGap from 'soapbox/components/load_gap';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import TimelineQueueButtonHeader from 'soapbox/components/timeline_queue_button_header';
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import PendingStatus from 'soapbox/features/ui/components/pending_status';
|
||||
|
||||
import type {
|
||||
Map as ImmutableMap,
|
||||
OrderedSet as ImmutableOrderedSet,
|
||||
} from 'immutable';
|
||||
import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import type { VirtuosoHandle } from 'react-virtuoso';
|
||||
import type { IScrollableList } from 'soapbox/components/scrollable_list';
|
||||
|
||||
const messages = defineMessages({
|
||||
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
||||
});
|
||||
|
||||
interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
|
||||
scrollKey: string,
|
||||
statusIds: ImmutableOrderedSet<string>,
|
||||
|
@ -35,10 +27,6 @@ interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
|
|||
alwaysPrepend?: boolean,
|
||||
timelineId?: string,
|
||||
queuedItemSize?: number,
|
||||
onDequeueTimeline?: (timelineId: string) => void,
|
||||
totalQueuedItemsCount?: number,
|
||||
group?: ImmutableMap<string, any>,
|
||||
withGroupAdmin?: boolean,
|
||||
onScrollToTop?: () => void,
|
||||
onScroll?: () => void,
|
||||
divideType: 'space' | 'border',
|
||||
|
@ -51,12 +39,8 @@ const StatusList: React.FC<IStatusList> = ({
|
|||
divideType = 'border',
|
||||
onLoadMore,
|
||||
timelineId,
|
||||
totalQueuedItemsCount,
|
||||
onDequeueTimeline,
|
||||
isLoading,
|
||||
isPartial,
|
||||
withGroupAdmin,
|
||||
group,
|
||||
...other
|
||||
}) => {
|
||||
const node = useRef<VirtuosoHandle>(null);
|
||||
|
@ -101,11 +85,6 @@ const StatusList: React.FC<IStatusList> = ({
|
|||
});
|
||||
};
|
||||
|
||||
const handleDequeueTimeline = () => {
|
||||
if (!onDequeueTimeline || !timelineId) return;
|
||||
onDequeueTimeline(timelineId);
|
||||
};
|
||||
|
||||
const renderLoadGap = (index: number) => {
|
||||
const ids = statusIds.toList();
|
||||
const nextId = ids.get(index + 1);
|
||||
|
@ -204,33 +183,25 @@ const StatusList: React.FC<IStatusList> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TimelineQueueButtonHeader
|
||||
key='timeline-queue-button-header'
|
||||
onClick={handleDequeueTimeline}
|
||||
count={totalQueuedItemsCount}
|
||||
message={messages.queue}
|
||||
/>
|
||||
<ScrollableList
|
||||
id='status-list'
|
||||
key='scrollable-list'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && statusIds.size === 0}
|
||||
onLoadMore={handleLoadOlder}
|
||||
placeholderComponent={PlaceholderStatus}
|
||||
placeholderCount={20}
|
||||
ref={node}
|
||||
className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
|
||||
'divide-none': divideType !== 'border',
|
||||
})}
|
||||
itemClassName={classNames({
|
||||
'pb-3': divideType !== 'border',
|
||||
})}
|
||||
{...other}
|
||||
>
|
||||
{renderScrollableContent()}
|
||||
</ScrollableList>,
|
||||
</>
|
||||
<ScrollableList
|
||||
id='status-list'
|
||||
key='scrollable-list'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && statusIds.size === 0}
|
||||
onLoadMore={handleLoadOlder}
|
||||
placeholderComponent={PlaceholderStatus}
|
||||
placeholderCount={20}
|
||||
ref={node}
|
||||
className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
|
||||
'divide-none': divideType !== 'border',
|
||||
})}
|
||||
itemClassName={classNames({
|
||||
'pb-3': divideType !== 'border',
|
||||
})}
|
||||
{...other}
|
||||
>
|
||||
{renderScrollableContent()}
|
||||
</ScrollableList>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -5,11 +5,11 @@ import { useIntl, MessageDescriptor } from 'react-intl';
|
|||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import { useSettings } from 'soapbox/hooks';
|
||||
import { useAppSelector, useSettings } from 'soapbox/hooks';
|
||||
|
||||
interface ITimelineQueueButtonHeader {
|
||||
onClick: () => void,
|
||||
count?: number,
|
||||
timelineId: string,
|
||||
message: MessageDescriptor,
|
||||
threshold?: number,
|
||||
autoloadThreshold?: number,
|
||||
|
@ -17,13 +17,14 @@ interface ITimelineQueueButtonHeader {
|
|||
|
||||
const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
|
||||
onClick,
|
||||
count = 0,
|
||||
timelineId,
|
||||
message,
|
||||
threshold = 400,
|
||||
autoloadThreshold = 50,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const settings = useSettings();
|
||||
const count = useAppSelector(state => state.timelines.getIn([timelineId, 'totalQueuedItemsCount']));
|
||||
|
||||
const [scrolled, setScrolled] = useState<boolean>(false);
|
||||
const autoload = settings.get('autoloadTimelines') === true;
|
||||
|
|
|
@ -1,13 +1,19 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useCallback } from 'react';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { dequeueTimeline } from 'soapbox/actions/timelines';
|
||||
import { scrollTopTimeline } from 'soapbox/actions/timelines';
|
||||
import StatusList, { IStatusList } from 'soapbox/components/status_list';
|
||||
import TimelineQueueButtonHeader from 'soapbox/components/timeline_queue_button_header';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { makeGetStatusIds } from 'soapbox/selectors';
|
||||
|
||||
const messages = defineMessages({
|
||||
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
||||
});
|
||||
|
||||
interface IStatusListContainer extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
|
||||
timelineId: string,
|
||||
}
|
||||
|
@ -25,9 +31,8 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
|
|||
const isLoading = useAppSelector(state => state.timelines.getIn([timelineId, 'isLoading'], true) === true);
|
||||
const isPartial = useAppSelector(state => state.timelines.getIn([timelineId, 'isPartial'], false) === true);
|
||||
const hasMore = useAppSelector(state => state.timelines.getIn([timelineId, 'hasMore']) === true);
|
||||
const totalQueuedItemsCount = useAppSelector(state => state.timelines.getIn([timelineId, 'totalQueuedItemsCount']));
|
||||
|
||||
const handleDequeueTimeline = (timelineId: string) => {
|
||||
const handleDequeueTimeline = () => {
|
||||
dispatch(dequeueTimeline(timelineId, onLoadMore));
|
||||
};
|
||||
|
||||
|
@ -40,19 +45,26 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
|
|||
}, 100), []);
|
||||
|
||||
return (
|
||||
<StatusList
|
||||
onDequeueTimeline={handleDequeueTimeline}
|
||||
onScrollToTop={handleScrollToTop}
|
||||
onScroll={handleScroll}
|
||||
lastStatusId={lastStatusId}
|
||||
statusIds={statusIds}
|
||||
isLoading={isLoading}
|
||||
isPartial={isPartial}
|
||||
hasMore={hasMore}
|
||||
totalQueuedItemsCount={totalQueuedItemsCount}
|
||||
onLoadMore={onLoadMore}
|
||||
{...rest}
|
||||
/>
|
||||
<>
|
||||
<TimelineQueueButtonHeader
|
||||
key='timeline-queue-button-header'
|
||||
onClick={handleDequeueTimeline}
|
||||
timelineId={timelineId}
|
||||
message={messages.queue}
|
||||
/>
|
||||
|
||||
<StatusList
|
||||
onScrollToTop={handleScrollToTop}
|
||||
onScroll={handleScroll}
|
||||
lastStatusId={lastStatusId}
|
||||
statusIds={statusIds}
|
||||
isLoading={isLoading}
|
||||
isPartial={isPartial}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={onLoadMore}
|
||||
{...rest}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue