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

[MM-23514] Don't use state for rowsSliced/colsSliced (#4075)

Browse source 
* Don't use state for rowsSliced/colsSliced

* Update snapshot

* Also show moreBelow when contentHeight > MAX_HEIGHT
This commit is contained in:
Miguel Alatzar 2020-03-25 15:59:17 -07:00 committed by GitHub
parent 54c6d98683
commit 55cac2e062
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
View file

@ -250,67 +250,39 @@ exports[`MarkdownTable should match snapshot 1`] = `
]
}
/>
<TouchableWithFeedbackIOS
onPress={[Function]}
<LinearGradient
colors={
Array [
"rgba(61,60,64,0)",
"rgba(61,60,64,0.1)",
]
}
end={
Object {
"x": 0.5,
"y": 1,
}
}
start={
Object {
"x": 0.5,
"y": 0,
}
}
style={
Array [
Object {
"height": 34,
"width": 34,
"borderColor": "rgba(61,60,64,0.2)",
"bottom": 34,
"height": 20,
"left": 0,
"position": "absolute",
},
Object {
"left": -20,
"width": 0,
},
]
}
type="opacity"
>
<View
style={
Array [
Object {
"alignItems": "flex-end",
"maxWidth": "100%",
"paddingBottom": 4,
"paddingRight": 14,
"paddingTop": 8,
},
Object {
"width": 672,
},
]
}
>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderColor": "rgba(61,60,64,0.2)",
"borderRadius": 50,
"borderWidth": 1,
"display": "flex",
"height": 34,
"justifyContent": "center",
"marginRight": -6,
"marginTop": -32,
"width": 34,
}
}
>
<Icon
allowFontScaling={false}
name="expand"
size={12}
style={
Object {
"color": "#2389d7",
"fontSize": 13,
}
}
/>
</View>
</View>
</TouchableWithFeedbackIOS>
/>
</TouchableWithFeedbackIOS>
`;

51
app/components/markdown/markdown_table/markdown_table.js
View file

@ -41,7 +41,6 @@ export default class MarkdownTable extends React.PureComponent {
containerWidth: 0,
contentHeight: 0,
cellWidth: 0,
rowsSliced: false,
};
}
@ -161,9 +160,8 @@ export default class MarkdownTable extends React.PureComponent {
};
});
const rowsSliced = prevRowLength > rows.length;
const colsSliced = prevColLength > React.Children.toArray(rows[0].props.children).length;
this.setState({rowsSliced, colsSliced});
this.rowsSliced = prevRowLength > rows.length;
this.colsSliced = prevColLength > React.Children.toArray(rows[0].props.children).length;
}
// Add an extra prop to the last row of the table so that it knows not to render a bottom border
@ -190,6 +188,7 @@ export default class MarkdownTable extends React.PureComponent {
const style = getStyleSheet(theme);
const tableWidth = this.getTableWidth();
const renderAsFlex = this.shouldRenderAsFlex();
const previewRows = this.renderPreviewRows();
let leftOffset;
if (renderAsFlex || tableWidth > containerWidth) {
@ -205,7 +204,7 @@ export default class MarkdownTable extends React.PureComponent {
// Renders when the columns were sliced, or the table width exceeds the container,
// or if the columns exceed maximum allowed for previews
let moreRight = null;
if (this.state.colsSliced ||
if (this.colsSliced ||
(containerWidth && tableWidth > containerWidth && !renderAsFlex) ||
(this.props.numColumns > MAX_PREVIEW_COLUMNS)) {
moreRight = (
@ -222,7 +221,7 @@ export default class MarkdownTable extends React.PureComponent {
}
let moreBelow = null;
if (this.state.rowsSliced) {
if (this.rowsSliced || contentHeight > MAX_HEIGHT) {
const width = renderAsFlex ? '100%' : Math.min(tableWidth, containerWidth);
moreBelow = (
@ -236,22 +235,25 @@ export default class MarkdownTable extends React.PureComponent {
);
}
const expandButton = (
<TouchableWithFeedback
type={'opacity'}
onPress={this.handlePress}
style={[style.expandButton, {left: expandButtonOffset}]}
>
<View style={[style.iconContainer, {width: this.getTableWidth()}]}>
<View style={style.iconButton}>
<Icon
name={'expand'}
style={style.icon}
/>
let expandButton = null;
if (expandButtonOffset > 0 && (moreRight || moreBelow)) {
expandButton = (
<TouchableWithFeedback
type={'opacity'}
onPress={this.handlePress}
style={[style.expandButton, {left: expandButtonOffset}]}
>
<View style={[style.iconContainer, {width: this.getTableWidth()}]}>
<View style={style.iconButton}>
<Icon
name={'expand'}
style={style.icon}
/>
</View>
</View>
</View>
</TouchableWithFeedback>
);
</TouchableWithFeedback>
);
}
return (
<TouchableWithFeedback
@ -266,7 +268,7 @@ export default class MarkdownTable extends React.PureComponent {
showsVerticalScrollIndicator={false}
style={style.container}
>
{this.renderPreviewRows()}
{previewRows}
</ScrollView>
{moreRight}
{moreBelow}
@ -330,7 +332,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
paddingRight: 10,
},
moreBelow: {
bottom: 34,
bottom: Platform.select({
ios: 34,
android: 33.75,
}),
height: 20,
position: 'absolute',
left: 0,