sforkowany z mirror/soapbox
StatusList: convert to TSX
Alex Gleason
rodzic
697c028c4a
commit
d0d9c0b460
|
|
@ -9,8 +9,8 @@ const messages = defineMessages({
|
|||
|
||||
interface ILoadGap {
|
||||
disabled?: boolean,
|
||||
maxId: string,
|
||||
onClick: (id: string) => void,
|
||||
maxId: string | null,
|
||||
onClick: (id: string | null) => void,
|
||||
}
|
||||
|
||||
const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
|
||||
|
|
|
|||
|
|
@ -36,13 +36,13 @@ interface IScrollableList extends VirtuosoProps<any, any> {
|
|||
isLoading?: boolean,
|
||||
showLoading?: boolean,
|
||||
hasMore?: boolean,
|
||||
prepend?: React.ReactElement,
|
||||
prepend?: React.ReactNode,
|
||||
alwaysPrepend?: boolean,
|
||||
emptyMessage?: React.ReactNode,
|
||||
children: Iterable<React.ReactNode>,
|
||||
onScrollToTop?: () => void,
|
||||
onScroll?: () => void,
|
||||
placeholderComponent?: React.ComponentType,
|
||||
placeholderComponent?: React.ComponentType | React.NamedExoticComponent,
|
||||
placeholderCount?: number,
|
||||
onRefresh?: () => Promise<any>,
|
||||
className?: string,
|
||||
|
|
@ -184,7 +184,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
|
|||
itemClassName,
|
||||
}}
|
||||
components={{
|
||||
Header: () => prepend,
|
||||
Header: () => <>{prepend}</>,
|
||||
ScrollSeekPlaceholder: Placeholder as any,
|
||||
EmptyPlaceholder: () => renderEmpty(),
|
||||
List,
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ export const defaultMediaVisibility = (status: StatusEntity, displayMedia: strin
|
|||
};
|
||||
|
||||
interface IStatus extends RouteComponentProps {
|
||||
id?: string,
|
||||
contextType?: string,
|
||||
intl: IntlShape,
|
||||
status: StatusEntity,
|
||||
account: AccountEntity,
|
||||
|
|
@ -87,8 +89,8 @@ interface IStatus extends RouteComponentProps {
|
|||
muted: boolean,
|
||||
hidden: boolean,
|
||||
unread: boolean,
|
||||
onMoveUp: (statusId: string, featured?: string) => void,
|
||||
onMoveDown: (statusId: string, featured?: string) => void,
|
||||
onMoveUp: (statusId: string, featured?: boolean) => void,
|
||||
onMoveDown: (statusId: string, featured?: boolean) => void,
|
||||
getScrollPosition?: () => ScrollPosition | undefined,
|
||||
updateScrollBottom?: (bottom: number) => void,
|
||||
cacheMediaWidth: () => void,
|
||||
|
|
@ -98,7 +100,7 @@ interface IStatus extends RouteComponentProps {
|
|||
allowedEmoji: ImmutableList<string>,
|
||||
focusable: boolean,
|
||||
history: History,
|
||||
featured?: string,
|
||||
featured?: boolean,
|
||||
}
|
||||
|
||||
interface IStatusState {
|
||||
|
|
|
|||
|
|
@ -1,236 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import { debounce } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage, defineMessages } from 'react-intl';
|
||||
|
||||
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 LoadGap from './load_gap';
|
||||
import ScrollableList from './scrollable_list';
|
||||
import TimelineQueueButtonHeader from './timeline_queue_button_header';
|
||||
|
||||
const messages = defineMessages({
|
||||
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
||||
});
|
||||
|
||||
export default class StatusList extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
scrollKey: PropTypes.string.isRequired,
|
||||
statusIds: ImmutablePropTypes.orderedSet.isRequired,
|
||||
lastStatusId: PropTypes.string,
|
||||
featuredStatusIds: ImmutablePropTypes.orderedSet,
|
||||
onLoadMore: PropTypes.func,
|
||||
isLoading: PropTypes.bool,
|
||||
isPartial: PropTypes.bool,
|
||||
hasMore: PropTypes.bool,
|
||||
prepend: PropTypes.node,
|
||||
emptyMessage: PropTypes.node,
|
||||
alwaysPrepend: PropTypes.bool,
|
||||
timelineId: PropTypes.string,
|
||||
queuedItemSize: PropTypes.number,
|
||||
onDequeueTimeline: PropTypes.func,
|
||||
group: ImmutablePropTypes.map,
|
||||
withGroupAdmin: PropTypes.bool,
|
||||
onScrollToTop: PropTypes.func,
|
||||
onScroll: PropTypes.func,
|
||||
divideType: PropTypes.oneOf(['space', 'border']),
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
divideType: 'border',
|
||||
}
|
||||
|
||||
getFeaturedStatusCount = () => {
|
||||
return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
|
||||
}
|
||||
|
||||
getCurrentStatusIndex = (id, featured) => {
|
||||
if (featured) {
|
||||
return this.props.featuredStatusIds.keySeq().findIndex(key => key === id);
|
||||
} else {
|
||||
return this.props.statusIds.keySeq().findIndex(key => key === id) + this.getFeaturedStatusCount();
|
||||
}
|
||||
}
|
||||
|
||||
handleMoveUp = (id, featured) => {
|
||||
const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
|
||||
this._selectChild(elementIndex, true);
|
||||
}
|
||||
|
||||
handleMoveDown = (id, featured) => {
|
||||
const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
|
||||
this._selectChild(elementIndex, false);
|
||||
}
|
||||
|
||||
handleLoadOlder = debounce(() => {
|
||||
const loadMoreID = this.props.lastStatusId ? this.props.lastStatusId : this.props.statusIds.last();
|
||||
this.props.onLoadMore(loadMoreID);
|
||||
}, 300, { leading: true })
|
||||
|
||||
_selectChild(index) {
|
||||
this.node.scrollIntoView({
|
||||
index,
|
||||
behavior: 'smooth',
|
||||
done: () => {
|
||||
const element = document.querySelector(`#status-list [data-index="${index}"] .focusable`);
|
||||
|
||||
if (element) {
|
||||
element.focus();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
handleDequeueTimeline = () => {
|
||||
const { onDequeueTimeline, timelineId } = this.props;
|
||||
if (!onDequeueTimeline || !timelineId) return;
|
||||
onDequeueTimeline(timelineId);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
renderLoadGap(index) {
|
||||
const { statusIds, onLoadMore, isLoading } = this.props;
|
||||
|
||||
return (
|
||||
<LoadGap
|
||||
key={'gap:' + statusIds.get(index + 1)}
|
||||
disabled={isLoading}
|
||||
maxId={index > 0 ? statusIds.get(index - 1) : null}
|
||||
onClick={onLoadMore}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderStatus(statusId) {
|
||||
const { timelineId, withGroupAdmin, group } = this.props;
|
||||
|
||||
return (
|
||||
<StatusContainer
|
||||
key={statusId}
|
||||
id={statusId}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
group={group}
|
||||
withGroupAdmin={withGroupAdmin}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderPendingStatus(statusId) {
|
||||
const { timelineId, withGroupAdmin, group } = this.props;
|
||||
const idempotencyKey = statusId.replace(/^末pending-/, '');
|
||||
|
||||
return (
|
||||
<PendingStatus
|
||||
key={statusId}
|
||||
idempotencyKey={idempotencyKey}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
group={group}
|
||||
withGroupAdmin={withGroupAdmin}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderFeaturedStatuses() {
|
||||
const { featuredStatusIds, timelineId } = this.props;
|
||||
if (!featuredStatusIds) return null;
|
||||
|
||||
return featuredStatusIds.map(statusId => (
|
||||
<StatusContainer
|
||||
key={`f-${statusId}`}
|
||||
id={statusId}
|
||||
featured
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
renderStatuses() {
|
||||
const { statusIds, isLoading } = this.props;
|
||||
|
||||
if (isLoading || statusIds.size > 0) {
|
||||
return statusIds.map((statusId, index) => {
|
||||
if (statusId === null) {
|
||||
return this.renderLoadGap(index);
|
||||
} else if (statusId.startsWith('末pending-')) {
|
||||
return this.renderPendingStatus(statusId);
|
||||
} else {
|
||||
return this.renderStatus(statusId);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
renderScrollableContent() {
|
||||
const featuredStatuses = this.renderFeaturedStatuses();
|
||||
const statuses = this.renderStatuses();
|
||||
|
||||
if (featuredStatuses && statuses) {
|
||||
return featuredStatuses.concat(statuses);
|
||||
} else {
|
||||
return statuses;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { statusIds, divideType, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, ...other } = this.props;
|
||||
|
||||
if (isPartial) {
|
||||
return (
|
||||
<div className='regeneration-indicator'>
|
||||
<div>
|
||||
<div className='regeneration-indicator__label'>
|
||||
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
|
||||
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return [
|
||||
<TimelineQueueButtonHeader
|
||||
key='timeline-queue-button-header'
|
||||
onClick={this.handleDequeueTimeline}
|
||||
count={totalQueuedItemsCount}
|
||||
message={messages.queue}
|
||||
/>,
|
||||
<ScrollableList
|
||||
id='status-list'
|
||||
key='scrollable-list'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && statusIds.size === 0}
|
||||
onLoadMore={onLoadMore && this.handleLoadOlder}
|
||||
placeholderComponent={PlaceholderStatus}
|
||||
placeholderCount={20}
|
||||
ref={this.setRef}
|
||||
className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
|
||||
'divide-none': divideType !== 'border',
|
||||
})}
|
||||
itemClassName={classNames({
|
||||
'pb-3': divideType !== 'border',
|
||||
})}
|
||||
{...other}
|
||||
>
|
||||
{this.renderScrollableContent()}
|
||||
</ScrollableList>,
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
import classNames from 'classnames';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
import { FormattedMessage, defineMessages } from 'react-intl';
|
||||
|
||||
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 LoadGap from './load_gap';
|
||||
import ScrollableList from './scrollable_list';
|
||||
import TimelineQueueButtonHeader from './timeline_queue_button_header';
|
||||
|
||||
import type {
|
||||
Map as ImmutableMap,
|
||||
OrderedSet as ImmutableOrderedSet,
|
||||
} from 'immutable';
|
||||
import type { VirtuosoHandle } from 'react-virtuoso';
|
||||
|
||||
const messages = defineMessages({
|
||||
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
||||
});
|
||||
|
||||
interface IStatusList {
|
||||
scrollKey: string,
|
||||
statusIds: ImmutableOrderedSet<string>,
|
||||
lastStatusId: string,
|
||||
featuredStatusIds?: ImmutableOrderedSet<string>,
|
||||
onLoadMore: (lastStatusId: string | null) => void,
|
||||
isLoading: boolean,
|
||||
isPartial: boolean,
|
||||
hasMore: boolean,
|
||||
prepend: React.ReactNode,
|
||||
emptyMessage: React.ReactNode,
|
||||
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',
|
||||
}
|
||||
|
||||
const StatusList: React.FC<IStatusList> = ({
|
||||
statusIds,
|
||||
lastStatusId,
|
||||
featuredStatusIds,
|
||||
divideType = 'border',
|
||||
onLoadMore,
|
||||
timelineId,
|
||||
totalQueuedItemsCount,
|
||||
onDequeueTimeline,
|
||||
isLoading,
|
||||
isPartial,
|
||||
withGroupAdmin,
|
||||
group,
|
||||
...other
|
||||
}) => {
|
||||
const node = useRef<VirtuosoHandle>(null);
|
||||
|
||||
const getFeaturedStatusCount = () => {
|
||||
return featuredStatusIds?.size || 0;
|
||||
};
|
||||
|
||||
const getCurrentStatusIndex = (id: string, featured: boolean): number => {
|
||||
if (featured) {
|
||||
return featuredStatusIds?.keySeq().findIndex(key => key === id) || 0;
|
||||
} else {
|
||||
return statusIds.keySeq().findIndex(key => key === id) + getFeaturedStatusCount();
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveUp = (id: string, featured: boolean = false) => {
|
||||
const elementIndex = getCurrentStatusIndex(id, featured) - 1;
|
||||
selectChild(elementIndex);
|
||||
};
|
||||
|
||||
const handleMoveDown = (id: string, featured: boolean = false) => {
|
||||
const elementIndex = getCurrentStatusIndex(id, featured) + 1;
|
||||
selectChild(elementIndex);
|
||||
};
|
||||
|
||||
const handleLoadOlder = useCallback(debounce(() => {
|
||||
const loadMoreID = lastStatusId || statusIds.last();
|
||||
if (loadMoreID) {
|
||||
onLoadMore(loadMoreID);
|
||||
}
|
||||
}, 300, { leading: true }), []);
|
||||
|
||||
const selectChild = (index: number) => {
|
||||
node.current?.scrollIntoView({
|
||||
index,
|
||||
behavior: 'smooth',
|
||||
done: () => {
|
||||
const element: HTMLElement | null = document.querySelector(`#status-list [data-index="${index}"] .focusable`);
|
||||
element?.focus();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDequeueTimeline = () => {
|
||||
if (!onDequeueTimeline || !timelineId) return;
|
||||
onDequeueTimeline(timelineId);
|
||||
};
|
||||
|
||||
const renderLoadGap = (index: number) => {
|
||||
const ids = statusIds.toList();
|
||||
|
||||
return (
|
||||
<LoadGap
|
||||
key={'gap:' + ids.get(index + 1)}
|
||||
disabled={isLoading}
|
||||
maxId={index > 0 ? ids.get(index - 1) || null : null}
|
||||
onClick={onLoadMore}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderStatus = (statusId: string) => {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<StatusContainer
|
||||
key={statusId}
|
||||
id={statusId}
|
||||
onMoveUp={handleMoveUp}
|
||||
onMoveDown={handleMoveDown}
|
||||
contextType={timelineId}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderPendingStatus = (statusId: string) => {
|
||||
const idempotencyKey = statusId.replace(/^末pending-/, '');
|
||||
|
||||
return (
|
||||
<PendingStatus
|
||||
key={statusId}
|
||||
idempotencyKey={idempotencyKey}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFeaturedStatuses = (): JSX.Element[] => {
|
||||
if (!featuredStatusIds) return [];
|
||||
|
||||
return featuredStatusIds.toArray().map(statusId => (
|
||||
// @ts-ignore
|
||||
<StatusContainer
|
||||
key={`f-${statusId}`}
|
||||
id={statusId}
|
||||
featured
|
||||
onMoveUp={handleMoveUp}
|
||||
onMoveDown={handleMoveDown}
|
||||
contextType={timelineId}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
const renderStatuses = (): JSX.Element[] => {
|
||||
if (isLoading || statusIds.size > 0) {
|
||||
return statusIds.toArray().map((statusId, index) => {
|
||||
if (statusId === null) {
|
||||
return renderLoadGap(index);
|
||||
} else if (statusId.startsWith('末pending-')) {
|
||||
return renderPendingStatus(statusId);
|
||||
} else {
|
||||
return renderStatus(statusId);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const renderScrollableContent = () => {
|
||||
const featuredStatuses = renderFeaturedStatuses();
|
||||
const statuses = renderStatuses();
|
||||
|
||||
if (featuredStatuses && statuses) {
|
||||
return featuredStatuses.concat(statuses);
|
||||
} else {
|
||||
return statuses;
|
||||
}
|
||||
};
|
||||
|
||||
if (isPartial) {
|
||||
return (
|
||||
<div className='regeneration-indicator'>
|
||||
<div>
|
||||
<div className='regeneration-indicator__label'>
|
||||
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
|
||||
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>,
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusList;
|
||||
Ładowanie…
Reference in New Issue