logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: 0f52e42c2d075670b67e9f888ef65eca0e94684c
parent: 85af2405cfc0863af2ce0f1a6eabd167802e0f6e
Author: Sorin Davidoi <sorin.davidoi@gmail.com>
Date:   Tue, 13 Jun 2017 20:46:21 +0200

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


Diffstat:

Mapp/javascript/mastodon/components/status.js20++++++++++++++------
Mapp/javascript/mastodon/components/status_content.js20++++++++++++++++++--
2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js @@ -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} diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js @@ -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,7 +94,13 @@ class StatusContent extends React.PureComponent { handleSpoilerClick = (e) => { e.preventDefault(); - this.setState({ hidden: !this.state.hidden }); + + if (this.props.onExpandedToggle) { + // The parent manages the state + this.props.onExpandedToggle(); + } else { + this.setState({ hidden: !this.state.hidden }); + } } setRef = (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', ''))) };