mirror of
https://github.com/yingziwu/mastodon.git
synced 2026-02-22 10:13:18 +00:00
Highlight newly added replies in thread view (#36237)
This commit is contained in:
parent
23a69e3bd7
commit
059bf1e980
3 changed files with 28 additions and 1 deletions
|
|
@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
|
|||
import classNames from 'classnames';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { difference } from 'lodash';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
|
@ -150,6 +151,11 @@ class Status extends ImmutablePureComponent {
|
|||
fullscreen: false,
|
||||
showMedia: defaultMediaVisibility(this.props.status),
|
||||
loadedStatusId: undefined,
|
||||
/**
|
||||
* Holds the ids of newly added replies, excluding the initial load.
|
||||
* Used to highlight newly added replies in the UI
|
||||
*/
|
||||
newRepliesIds: [],
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount () {
|
||||
|
|
@ -462,6 +468,7 @@ class Status extends ImmutablePureComponent {
|
|||
previousId={i > 0 ? list[i - 1] : undefined}
|
||||
nextId={list[i + 1] || (ancestors && statusId)}
|
||||
rootId={statusId}
|
||||
shouldHighlightOnMount={this.state.newRepliesIds.includes(id)}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
|
@ -495,11 +502,20 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const { status, ancestorsIds } = this.props;
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (status && (ancestorsIds.length > prevProps.ancestorsIds.length || prevProps.status?.get('id') !== status.get('id'))) {
|
||||
this._scrollStatusIntoView();
|
||||
}
|
||||
|
||||
// Only highlight replies after the initial load
|
||||
if (prevProps.descendantsIds.length) {
|
||||
const newRepliesIds = difference(descendantsIds, prevProps.descendantsIds);
|
||||
|
||||
if (newRepliesIds.length) {
|
||||
this.setState({newRepliesIds});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue