toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-13374 Fix collapse posts with long message attachments (#2436)

Browse source
This commit is contained in:
Elias Nahum 2018-12-07 12:27:01 -03:00 committed by GitHub
parent ceb1a5a94b
commit 993228b666
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/components/message_attachments/attachment_text.js
View file

@ -2,13 +2,15 @@
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import {StyleSheet, View} from 'react-native';
import {ScrollView, StyleSheet, View} from 'react-native';
import PropTypes from 'prop-types';
import Markdown from 'app/components/markdown';
import ShowMoreButton from 'app/components/show_more_button';
import CustomPropTypes from 'app/constants/custom_prop_types';
const SHOW_MORE_HEIGHT = 60;
export default class AttachmentText extends PureComponent {
static propTypes = {
baseTextStyle: CustomPropTypes.Style.isRequired,
@ -24,7 +26,7 @@ export default class AttachmentText extends PureComponent {
static getDerivedStateFromProps(nextProps, prevState) {
const {deviceHeight} = nextProps;
const maxHeight = deviceHeight * 0.4;
const maxHeight = Math.round((deviceHeight * 0.4) + SHOW_MORE_HEIGHT);
if (maxHeight !== prevState.maxHeight) {
return {
@ -46,9 +48,9 @@ export default class AttachmentText extends PureComponent {
handleLayout = (event) => {
const {height} = event.nativeEvent.layout;
const {deviceHeight} = this.props;
const {maxHeight} = this.state;
if (height >= (deviceHeight * 0.6)) {
if (height >= maxHeight) {
this.setState({
isLongText: true,
});
@ -79,20 +81,27 @@ export default class AttachmentText extends PureComponent {
return (
<View style={hasThumbnail && style.container}>
<View
style={[(isLongText && collapsed && {maxHeight, overflow: 'hidden'})]}
removeClippedSubviews={isLongText && collapsed}
<ScrollView
style={{maxHeight: (collapsed ? maxHeight : null), overflow: 'hidden'}}
scrollEnabled={false}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<Markdown
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
imageMetadata={metadata?.images}
value={value}
navigator={navigator}
onPermalinkPress={onPermalinkPress}
/>
</View>
<View
onLayout={this.handleLayout}
removeClippedSubviews={isLongText && collapsed}
>
<Markdown
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
imageMetadata={metadata?.images}
value={value}
navigator={navigator}
onPermalinkPress={onPermalinkPress}
/>
</View>
</ScrollView>
{isLongText &&
<ShowMoreButton
onPress={this.toggleCollapseState}