diff options
Diffstat (limited to 'webapp/components/markdown_image.jsx')
-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..2634ef3f6 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) { + setTimeout(postListScrollChange, 0); + + 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} + /> + ); } } |