forked from cybrespace/mastodon
fix(status): Content jump due to height changes (#3734)
This commit is contained in:
parent
85af2405cf
commit
0f52e42c2d
|
@ -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}
|
||||
|
||||
|
|
|
@ -15,6 +15,9 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
expanded: PropTypes.bool,
|
||||
onExpandedToggle: PropTypes.func,
|
||||
onHeightUpdate: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
|
@ -44,6 +47,12 @@ class StatusContent extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (this.props.onHeightUpdate) {
|
||||
this.props.onHeightUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
onMentionClick = (mention, e) => {
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
|
@ -85,8 +94,14 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
handleSpoilerClick = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.props.onExpandedToggle) {
|
||||
// The parent manages the state
|
||||
this.props.onExpandedToggle();
|
||||
} else {
|
||||
this.setState({ hidden: !this.state.hidden });
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c;
|
||||
|
@ -94,7 +109,8 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
render () {
|
||||
const { status } = this.props;
|
||||
const { hidden } = this.state;
|
||||
|
||||
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
|
||||
|
||||
const content = { __html: emojify(status.get('content')) };
|
||||
const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
|
||||
|
|
Loading…
Reference in New Issue