diff options
-rw-r--r-- | app/javascript/mastodon/components/status.js | 22 | ||||
-rw-r--r-- | app/javascript/mastodon/features/notifications/components/notification.js | 4 |
2 files changed, 16 insertions, 10 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index d2ede6b2a..199f1b8af 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -41,6 +41,7 @@ class StatusUnextended extends ImmutablePureComponent { boostModal: PropTypes.bool, autoPlayGif: PropTypes.bool, muted: PropTypes.bool, + collapse: PropTypes.bool, intersectionObserverWrapper: PropTypes.object, intl: PropTypes.object.isRequired, }; @@ -62,16 +63,20 @@ class StatusUnextended extends ImmutablePureComponent { 'boostModal', 'autoPlayGif', 'muted', + 'collapse', ] - updateOnStates = ['isExpanded'] + updateOnStates = [ + 'isExpanded', + 'isCollapsed', + ] + + componentWillReceiveProps (nextProps) { + if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.setState({ isCollapsed: !!nextProps.collapse }); + } shouldComponentUpdate (nextProps, nextState) { - if (nextState.isCollapsed !== this.state.isCollapsed) { - // If the collapsed state of the element has changed then we definitely - // need to re-update. - return true; - } else if (!nextState.isIntersecting && nextState.isHidden) { + if (!nextState.isIntersecting && nextState.isHidden) { // It's only if we're not intersecting (i.e. offscreen) and isHidden is true // that either "isIntersecting" or "isHidden" matter, and then they're // the only things that matter. @@ -92,6 +97,9 @@ class StatusUnextended extends ImmutablePureComponent { componentDidMount () { const node = this.node; + if (this.props.collapse !== undefined) this.setState({ isCollapsed: !!this.props.collapse }); + else if (node.clientHeight > 400 && !(this.props.status.get('reblog', null) !== null && typeof this.props.status.get('reblog') === 'object')) this.setState({ isCollapsed: true }); + if (!this.props.intersectionObserverWrapper) { // TODO: enable IntersectionObserver optimization for notification statuses. // These are managed in notifications/index.js rather than status_list.js @@ -103,8 +111,6 @@ class StatusUnextended extends ImmutablePureComponent { this.handleIntersection ); - if (node.clientHeight > 400 && !(this.props.status.get('reblog', null) !== null && typeof this.props.status.get('reblog') === 'object')) this.setState({ isCollapsed: true }); - this.componentMounted = true; } diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js index 9d631644a..bf580794d 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.js +++ b/app/javascript/mastodon/features/notifications/components/notification.js @@ -44,7 +44,7 @@ export default class Notification extends ImmutablePureComponent { <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> </div> - <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> + <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse withDismiss /> </div> ); } @@ -59,7 +59,7 @@ export default class Notification extends ImmutablePureComponent { <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> </div> - <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> + <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse withDismiss /> </div> ); } |