mirrors/nyastodon
1
0
Fork 0
mirror of https://git.bsd.gay/fef/nyastodon.git synced 2024-12-25 06:13:43 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

18
app/javascript/mastodon/components/status_content.js
View file

@ -15,6 +15,9 @@ class StatusContent extends React.PureComponent {
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
expanded: PropTypes.bool,
onExpandedToggle: PropTypes.func,
onHeightUpdate: PropTypes.func,
onClick: 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) => { onMentionClick = (mention, e) => {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
@ -85,8 +94,14 @@ class StatusContent extends React.PureComponent {
handleSpoilerClick = (e) => { handleSpoilerClick = (e) => {
e.preventDefault(); e.preventDefault();
if (this.props.onExpandedToggle) {
// The parent manages the state
this.props.onExpandedToggle();
} else {
this.setState({ hidden: !this.state.hidden }); this.setState({ hidden: !this.state.hidden });
} }
}
setRef = (c) => { setRef = (c) => {
this.node = c; this.node = c;
@ -94,7 +109,8 @@ class StatusContent extends React.PureComponent {
render () { render () {
const { status } = this.props; 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 content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) }; const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };