cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Use debounce for dispatch scrollTopNotification and expandNotifications (#3700)

This commit is contained in:
unarist 2017-06-24 09:43:26 +09:00 committed by Eugen Rochko
parent c0979381a4
commit 4e6b5e7879
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/mastodon/features/notifications/index.js
View File

@ -13,6 +13,7 @@ import ColumnSettingsContainer from './containers/column_settings_container';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import Immutable from 'immutable'; import Immutable from 'immutable';
import LoadMore from '../../components/load_more'; import LoadMore from '../../components/load_more';
import { debounce } from 'lodash';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' }, title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@ -50,19 +51,27 @@ export default class Notifications extends React.PureComponent {
trackScroll: true, trackScroll: true,
}; };
dispatchExpandNotifications = debounce(() => {
this.props.dispatch(expandNotifications());
}, 300, { leading: true });
dispatchScrollToTop = debounce((top) => {
this.props.dispatch(scrollTopNotifications(top));
}, 100);
handleScroll = (e) => { handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
const offset = scrollHeight - scrollTop - clientHeight; const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop; this._oldScrollPosition = scrollHeight - scrollTop;
if (250 > offset && !this.props.isLoading) { if (250 > offset && this.props.hasMore && !this.props.isLoading) {
if (this.props.hasMore) { this.dispatchExpandNotifications();
this.props.dispatch(expandNotifications()); }
}
} else if (scrollTop < 100) { if (scrollTop < 100) {
this.props.dispatch(scrollTopNotifications(true)); this.dispatchScrollToTop(true);
} else { } else {
this.props.dispatch(scrollTopNotifications(false)); this.dispatchScrollToTop(false);
} }
} }
@ -74,7 +83,7 @@ export default class Notifications extends React.PureComponent {
handleLoadMore = (e) => { handleLoadMore = (e) => {
e.preventDefault(); e.preventDefault();
this.props.dispatch(expandNotifications()); this.dispatchExpandNotifications();
} }
handlePin = () => { handlePin = () => {