Commit a3410410 authored by Harrison Healey's avatar Harrison Healey Committed by Joram Wilander
Browse files

MM-10706 Recalculate post height for collapsed post after images load (#1282)

* MM-10706 Recalculate post height for collapsed post after images load

* Updated snapshots
parent abf8b857
......@@ -65,6 +65,11 @@ export default class Markdown extends React.PureComponent {
* Whether or not to proxy image URLs
*/
proxyImages: PropTypes.bool,
/**
* Any extra props that should be passed into the MarkdownImage component
*/
imageProps: PropTypes.object,
};
static defaultProps = {
......@@ -89,6 +94,8 @@ export default class Markdown extends React.PureComponent {
}, this.props.options);
const htmlFormattedText = TextFormatting.formatText(this.props.message, options);
return messageHtmlToComponent(htmlFormattedText, this.props.isRHS);
return messageHtmlToComponent(htmlFormattedText, this.props.isRHS, {
imageProps: this.props.imageProps,
});
}
}
......@@ -4,8 +4,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import {postListScrollChange} from 'actions/global_actions.jsx';
const WAIT_FOR_HEIGHT_TIMEOUT = 100;
export default class MarkdownImage extends React.PureComponent {
......@@ -15,6 +13,11 @@ export default class MarkdownImage extends React.PureComponent {
* The href of the image to be loaded
*/
href: PropTypes.string,
/*
* A callback that is called as soon as the image component has a height value
*/
onHeightReceived: PropTypes.func,
}
constructor(props) {
......@@ -39,7 +42,7 @@ export default class MarkdownImage extends React.PureComponent {
waitForHeight = () => {
if (this.refs.image.height) {
setTimeout(postListScrollChange, 0);
this.props.onHeightReceived(this.refs.image.height);
this.heightTimeout = 0;
} else {
......@@ -55,10 +58,13 @@ export default class MarkdownImage extends React.PureComponent {
}
render() {
const props = {...this.props};
Reflect.deleteProperty(props, 'onHeightReceived');
return (
<img
{...this.props}
ref='image'
{...props}
onLoad={this.stopWaitingForHeight}
onError={this.stopWaitingForHeight}
/>
......
......@@ -11,6 +11,11 @@ import {renderSystemMessage} from './system_message_helpers.jsx';
export default class PostMarkdown extends React.PureComponent {
static propTypes = {
/*
* Any extra props that should be passed into the MarkdownImage component
*/
imageProps: PropTypes.object,
/*
* Whether or not this text is part of the RHS
*/
......@@ -44,6 +49,7 @@ export default class PostMarkdown extends React.PureComponent {
return (
<Markdown
imageProps={this.props.imageProps}
isRHS={this.props.isRHS}
message={this.props.message}
proxyImages={proxyImages}
......
......@@ -6,9 +6,10 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import {Posts} from 'mattermost-redux/constants';
import * as GlobalActions from 'actions/global_actions';
import PostMarkdown from 'components/post_markdown';
import * as PostUtils from 'utils/post_utils.jsx';
import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils';
import * as Utils from 'utils/utils';
// This must match the max-height defined in CSS for the collapsed content div
const MAX_POST_HEIGHT = 600;
......@@ -80,6 +81,10 @@ export default class PostMessageView extends React.PureComponent {
collapse: true,
hasOverflow: false,
};
this.imageProps = {
onHeightReceived: this.handleImageHeightReceived,
};
}
componentDidMount() {
......@@ -108,6 +113,12 @@ export default class PostMessageView extends React.PureComponent {
window.removeEventListener('resize', this.handleResize);
}
handleImageHeightReceived = () => {
GlobalActions.postListScrollChange();
this.checkOverflow();
};
handleResize = () => {
this.checkOverflow();
};
......@@ -257,6 +268,7 @@ export default class PostMessageView extends React.PureComponent {
>
<PostMarkdown
message={message}
imageProps={this.imageProps}
isRHS={isRHS}
options={options}
post={post}
......
......@@ -75,6 +75,11 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
onClick={[Function]}
>
<PostMarkdown
imageProps={
Object {
"onHeightReceived": [Function],
}
}
isRHS={false}
message="this is some text"
options={Object {}}
......
......@@ -15,6 +15,7 @@ import PostEmoji from 'components/post_emoji';
* - mentions - If specified, mentions are replaced with the AtMention component. Defaults to true.
* - emoji - If specified, emoji text is replaced with the PostEmoji component. Defaults to true.
* - images - If specified, markdown images are replaced with the MarkdownImage component. Defaults to true.
* - imageProps - If specified, any extra props that should be passed into the MarkdownImage component.
* - latex - If specified, latex is replaced with the LatexBlock component. Defaults to true.
*/
export function messageHtmlToComponent(html, isRHS, options = {}) {
......@@ -76,10 +77,12 @@ export function messageHtmlToComponent(html, isRHS, options = {}) {
class: className,
...attribs
} = node.attribs;
const callMarkdownImage = (
<MarkdownImage
className={className}
{...attribs}
{...options.imageProps}
/>
);
return callMarkdownImage;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment