sforkowany z mirror/soapbox
Notifications: use a ScrollableList again
rodzic
c729f30efa
commit
40c3793d20
|
@ -1,3 +1,4 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
import { List as ImmutableList } from 'immutable';
|
import { List as ImmutableList } from 'immutable';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
@ -5,11 +6,9 @@ import React from 'react';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { Virtuoso } from 'react-virtuoso';
|
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
import { getSettings } from 'soapbox/actions/settings';
|
||||||
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
|
||||||
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -17,8 +16,9 @@ import {
|
||||||
scrollTopNotifications,
|
scrollTopNotifications,
|
||||||
dequeueNotifications,
|
dequeueNotifications,
|
||||||
} from '../../actions/notifications';
|
} from '../../actions/notifications';
|
||||||
|
import ScrollableList from '../../components/scrollable_list';
|
||||||
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header';
|
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header';
|
||||||
import { Column, Text } from '../../components/ui';
|
import { Column } from '../../components/ui';
|
||||||
|
|
||||||
import FilterBarContainer from './containers/filter_bar_container';
|
import FilterBarContainer from './containers/filter_bar_container';
|
||||||
import NotificationContainer from './containers/notification_container';
|
import NotificationContainer from './containers/notification_container';
|
||||||
|
@ -28,16 +28,6 @@ const messages = defineMessages({
|
||||||
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const Footer = ({ context }) => (
|
|
||||||
context.hasMore ? (
|
|
||||||
<PlaceholderNotification />
|
|
||||||
) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const Item = ({ context, ...rest }) => (
|
|
||||||
<div className='border-solid border-b border-gray-200 dark:border-slate-700' {...rest} />
|
|
||||||
);
|
|
||||||
|
|
||||||
const getNotifications = createSelector([
|
const getNotifications = createSelector([
|
||||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
|
state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
|
||||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
|
state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
|
||||||
|
@ -157,44 +147,49 @@ class Notifications extends React.PureComponent {
|
||||||
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
|
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
|
||||||
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
|
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
|
||||||
|
|
||||||
|
let scrollableContent = null;
|
||||||
|
|
||||||
const filterBarContainer = showFilterBar
|
const filterBarContainer = showFilterBar
|
||||||
? (<FilterBarContainer />)
|
? (<FilterBarContainer />)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
const showLoading = isLoading && !notifications || notifications.isEmpty();
|
if (isLoading && this.scrollableContent) {
|
||||||
|
scrollableContent = this.scrollableContent;
|
||||||
const scrollContainer = (
|
} else if (notifications.size > 0 || hasMore) {
|
||||||
<PullToRefresh onRefresh={this.handleRefresh}>
|
scrollableContent = notifications.map((item, index) => (
|
||||||
<Virtuoso
|
<NotificationContainer
|
||||||
ref={this.setRef}
|
key={item.get('id')}
|
||||||
useWindowScroll
|
notification={item}
|
||||||
data={showLoading ? Array(20).fill() : notifications.toArray()}
|
onMoveUp={this.handleMoveUp}
|
||||||
startReached={this.handleScrollToTop}
|
onMoveDown={this.handleMoveDown}
|
||||||
endReached={this.handleLoadOlder}
|
|
||||||
isScrolling={isScrolling => isScrolling && this.handleScroll()}
|
|
||||||
itemContent={(_index, notification) => (
|
|
||||||
showLoading ? (
|
|
||||||
<PlaceholderNotification />
|
|
||||||
) : (
|
|
||||||
<NotificationContainer
|
|
||||||
key={notification.id}
|
|
||||||
notification={notification}
|
|
||||||
onMoveUp={this.handleMoveUp}
|
|
||||||
onMoveDown={this.handleMoveDown}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
context={{
|
|
||||||
hasMore,
|
|
||||||
}}
|
|
||||||
components={{
|
|
||||||
ScrollSeekPlaceholder: PlaceholderNotification,
|
|
||||||
Footer,
|
|
||||||
EmptyPlaceholder: () => <Text>{emptyMessage}</Text>,
|
|
||||||
Item,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</PullToRefresh>
|
));
|
||||||
|
} else {
|
||||||
|
scrollableContent = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollableContent = scrollableContent;
|
||||||
|
|
||||||
|
const scrollContainer = (
|
||||||
|
<ScrollableList
|
||||||
|
scrollKey='notifications'
|
||||||
|
isLoading={isLoading}
|
||||||
|
showLoading={isLoading && notifications.size === 0}
|
||||||
|
hasMore={hasMore}
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
placeholderComponent={PlaceholderNotification}
|
||||||
|
placeholderCount={20}
|
||||||
|
onLoadMore={this.handleLoadOlder}
|
||||||
|
onRefresh={this.handleRefresh}
|
||||||
|
onScrollToTop={this.handleScrollToTop}
|
||||||
|
onScroll={this.handleScroll}
|
||||||
|
className={classNames({
|
||||||
|
'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
|
||||||
|
'space-y-2': notifications.size === 0,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{scrollableContent}
|
||||||
|
</ScrollableList>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
Ładowanie…
Reference in New Issue