Unfloyded/Legamunt
0
0
Fork 0
Code Activity

fix(status): Content jump due to height changes (#3734)

Browse source
This commit is contained in:
Sorin Davidoi 2017-06-13 20:46:21 +02:00 • committed by Eugen Rochko
parent 85af2405cf
commit 0f52e42c2d
2 changed files with 32 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/mastodon/components/status.js
View file

@ -41,6 +41,7 @@ class Status extends ImmutablePureComponent {
};
state = {
isExpanded: false,
isIntersecting: true, // assume intersecting until told otherwise
isHidden: false, // set to true in requestIdleCallback to trigger un-render
}
@ -57,7 +58,7 @@ class Status extends ImmutablePureComponent {
'muted',
]
updateOnStates = []
updateOnStates = ['isExpanded']
shouldComponentUpdate (nextProps, nextState) {
if (!nextState.isIntersecting && nextState.isHidden) {
@ -112,12 +113,15 @@ class Status extends ImmutablePureComponent {
this.setState((prevState) => ({ isHidden: !prevState.isIntersecting }));
}
saveHeight = () => {
if (this.node && this.node.children.length !== 0) {
this.height = this.node.clientHeight;
}
}
handleRef = (node) => {
this.node = node;
if (node && node.children.length !== 0) {
this.height = node.clientHeight;
}
this.saveHeight();
}
handleClick = () => {
@ -133,11 +137,15 @@ class Status extends ImmutablePureComponent {
}
}
handleExpandedToggle = () => {
this.setState({ isExpanded: !this.state.isExpanded });
};
render () {
let media = null;
let statusAvatar;
const { status, account, ...other } = this.props;
const { isIntersecting, isHidden } = this.state;
const { isExpanded, isIntersecting, isHidden } = this.state;
if (status === null) {
return null;
@ -203,7 +211,7 @@ class Status extends ImmutablePureComponent {
</a>
</div>
<StatusContent status={status} onClick={this.handleClick} />
<StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} />
{media}