diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-07-12 12:58:19 -0400 |
---|---|---|
committer | Saturnino Abril <saturnino.abril@gmail.com> | 2017-07-13 01:58:19 +0900 |
commit | 96d7783d36986a8300d173eef44976f2425f1a7d (patch) | |
tree | 19862de01bcd67edec053b1564792af4dcb61363 /webapp/components | |
parent | 62f925b059852a9b17ff8e972b1cb50834cdb481 (diff) | |
download | chat-96d7783d36986a8300d173eef44976f2425f1a7d.tar.gz chat-96d7783d36986a8300d173eef44976f2425f1a7d.tar.bz2 chat-96d7783d36986a8300d173eef44976f2425f1a7d.zip |
PLT-7048 Changed MarkdownImage to scroll post list as soon as it knows its height (#6916)
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/markdown_image.jsx | 64 |
1 files changed, 56 insertions, 8 deletions
diff --git a/webapp/components/markdown_image.jsx b/webapp/components/markdown_image.jsx index 75a6ce9ea..4d8635457 100644 --- a/webapp/components/markdown_image.jsx +++ b/webapp/components/markdown_image.jsx @@ -1,19 +1,67 @@ // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import React from 'react'; import {postListScrollChange} from 'actions/global_actions.jsx'; -export default class MarkdownImage extends PureComponent { - handleLoad = () => { - postListScrollChange(); +const WAIT_FOR_HEIGHT_TIMEOUT = 100; + +export default class MarkdownImage extends React.PureComponent { + static propTypes = { + + /* + * The href of the image to be loaded + */ + href: PropTypes.string } - render() { - const props = {...this.props}; - props.onLoad = this.handleLoad; + constructor(props) { + super(props); + + this.heightTimeout = 0; + } + + componentDidMount() { + this.waitForHeight(); + } + + componentDidUpdate(prevProps) { + if (this.props.href !== prevProps.href) { + this.waitForHeight(); + } + } - return <img {...props}/>; + componentWillUnmount() { + this.stopWaitingForHeight(); + } + + waitForHeight = () => { + if (this.refs.image.height) { + postListScrollChange(); + + this.heightTimeout = 0; + } else { + this.heightTimeout = setTimeout(this.waitForHeight, WAIT_FOR_HEIGHT_TIMEOUT); + } + } + + stopWaitingForHeight = () => { + if (this.heightTimeout !== 0) { + clearTimeout(this.heightTimeout); + this.heightTimeout = 0; + } + } + + render() { + return ( + <img + {...this.props} + ref='image' + onLoad={this.stopWaitingForHeight} + onError={this.stopWaitingForHeight} + /> + ); } } |