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

Automated cherry pick of #3924 (#3983)

Browse source 
* Ensure isFirstRow prop is set on first row

* Determine maxPreviewColumns on mount

* Fix expand button offset on Android

* Fix moreBelow gradient

* Show right gradient when columns are sliced

* Fix moreRight conditions

Co-authored-by: Miguel Alatzar <migbot@users.noreply.github.com>
This commit is contained in:
Mattermost Build 2020-03-01 13:32:04 +01:00 committed by GitHub
parent 6a2a99b0d6
commit e059d7ea3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 181 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,13 +30,14 @@ exports[`MarkdownTable should match snapshot 1`] = `
"width": "100%",
},
Object {
"width": 480,
"width": 672,
},
]
}
>
<
className="row"
isFirstRow={true}
>
<
className="col"
@ -53,6 +54,12 @@ exports[`MarkdownTable should match snapshot 1`] = `
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
@ -72,6 +79,12 @@ exports[`MarkdownTable should match snapshot 1`] = `
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
@ -91,6 +104,12 @@ exports[`MarkdownTable should match snapshot 1`] = `
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
@ -110,6 +129,62 @@ exports[`MarkdownTable should match snapshot 1`] = `
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
<
className="row"
@ -130,6 +205,12 @@ exports[`MarkdownTable should match snapshot 1`] = `
<
className="col"
/>
<
className="col"
/>
<
className="col"
/>
</>
</View>
</ScrollView>
@ -195,7 +276,7 @@ exports[`MarkdownTable should match snapshot 1`] = `
"paddingTop": 8,
},
Object {
"width": 480,
"width": 672,
},
]
}

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

@ -40,14 +40,16 @@ export default class MarkdownTable extends React.PureComponent {
this.state = {
containerWidth: 0,
contentHeight: 0,
contentWidth: 0,
maxPreviewColumns: MAX_PREVIEW_COLUMNS,
cellWidth: 0,
rowsSliced: false,
};
}
componentDidMount() {
Dimensions.addEventListener('change', this.setMaxPreviewColumns);
const window = Dimensions.get('window');
this.setMaxPreviewColumns({window});
}
componentWillUnmount() {
@ -60,13 +62,10 @@ export default class MarkdownTable extends React.PureComponent {
}
getTableWidth = (isFullView = false) => {
let columns = this.props.numColumns;
const maxPreviewColumns = this.state.maxPreviewColumns || MAX_PREVIEW_COLUMNS;
const columns = Math.min(this.props.numColumns, maxPreviewColumns);
if (columns > MAX_PREVIEW_COLUMNS) {
columns = MAX_PREVIEW_COLUMNS;
}
return isFullView || columns === 1 ? columns * CELL_MAX_WIDTH : columns * CELL_MIN_WIDTH;
return (isFullView || columns === 1) ? columns * CELL_MAX_WIDTH : columns * CELL_MIN_WIDTH;
};
handlePress = preventDoubleTap(() => {
@ -98,30 +97,7 @@ export default class MarkdownTable extends React.PureComponent {
};
renderPreviewRows = (isFullView = false) => {
const {maxPreviewColumns} = this.state;
const tableStyle = this.getTableStyle(isFullView);
// Add an extra prop to the last row of the table so that it knows not to render a bottom border
// since the container should be rendering that
const rows = React.Children.toArray(this.props.children).slice(0, maxPreviewColumns).map((row) => {
const children = React.Children.toArray(row.props.children).slice(0, maxPreviewColumns);
return {
...row,
props: {
...row.props,
children,
},
};
});
rows[rows.length - 1] = React.cloneElement(rows[rows.length - 1], {
isLastRow: true,
});
return (
<View style={tableStyle}>
{rows}
</View>
);
return this.renderRows(isFullView, true);
}
shouldRenderAsFlex = (isFullView = false) => {
@ -165,12 +141,33 @@ export default class MarkdownTable extends React.PureComponent {
return tableStyle;
}
renderRows = (isFullView = false) => {
renderRows = (isFullView = false, isPreview = false) => {
const tableStyle = this.getTableStyle(isFullView);
let rows = React.Children.toArray(this.props.children);
if (isPreview) {
const {maxPreviewColumns} = this.state;
const prevRowLength = rows.length;
const prevColLength = React.Children.toArray(rows[0].props.children).length;
rows = rows.slice(0, maxPreviewColumns).map((row) => {
const children = React.Children.toArray(row.props.children).slice(0, maxPreviewColumns);
return {
...row,
props: {
...row.props,
children,
},
};
});
const rowsSliced = prevRowLength > rows.length;
const colsSliced = prevColLength > React.Children.toArray(rows[0].props.children).length;
this.setState({rowsSliced, colsSliced});
}
// Add an extra prop to the last row of the table so that it knows not to render a bottom border
// since the container should be rendering that
const rows = React.Children.toArray(this.props.children);
rows[rows.length - 1] = React.cloneElement(rows[rows.length - 1], {
isLastRow: true,
});
@ -188,43 +185,53 @@ export default class MarkdownTable extends React.PureComponent {
}
render() {
const style = getStyleSheet(this.props.theme);
let moreRight = null;
const {containerWidth, contentHeight} = this.state;
const {theme} = this.props;
const style = getStyleSheet(theme);
const tableWidth = this.getTableWidth();
const renderAsFlex = this.shouldRenderAsFlex();
let leftOffset;
if (renderAsFlex || tableWidth > this.state.containerWidth) {
leftOffset = this.state.containerWidth - 20;
if (renderAsFlex || tableWidth > containerWidth) {
leftOffset = containerWidth - 20;
} else {
leftOffset = tableWidth - 20;
}
let expandButtonOffset = leftOffset;
if (Platform.OS === 'android') {
expandButtonOffset -= 10;
}
// Renders when table width exceeds the container, or if the columns exceed maximum allowed for previews
if ((this.state.containerWidth && tableWidth > this.state.containerWidth && !renderAsFlex) ||
// 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 ||
(containerWidth && tableWidth > containerWidth && !renderAsFlex) ||
(this.props.numColumns > MAX_PREVIEW_COLUMNS)) {
moreRight = (
<LinearGradient
colors={[
changeOpacity(this.props.theme.centerChannelColor, 0.0),
changeOpacity(this.props.theme.centerChannelColor, 0.1),
changeOpacity(theme.centerChannelColor, 0.0),
changeOpacity(theme.centerChannelColor, 0.1),
]}
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
style={[style.moreRight, {height: this.state.contentHeight, left: leftOffset}]}
style={[style.moreRight, {height: contentHeight, left: leftOffset}]}
/>
);
}
let moreBelow = null;
if (this.state.contentHeight > MAX_HEIGHT) {
if (this.state.rowsSliced) {
const width = renderAsFlex ? '100%' : Math.min(tableWidth, containerWidth);
moreBelow = (
<LinearGradient
colors={[
changeOpacity(this.props.theme.centerChannelColor, 0.0),
changeOpacity(this.props.theme.centerChannelColor, 0.1),
changeOpacity(theme.centerChannelColor, 0.0),
changeOpacity(theme.centerChannelColor, 0.1),
]}
style={[style.moreBelow, renderAsFlex ? style.fullWidth : {width: tableWidth}]}
style={[style.moreBelow, {width}]}
/>
);
}
@ -233,7 +240,7 @@ export default class MarkdownTable extends React.PureComponent {
<TouchableWithFeedback
type={'opacity'}
onPress={this.handlePress}
style={[style.expandButton, {left: leftOffset}]}
style={[style.expandButton, {left: expandButtonOffset}]}
>
<View style={[style.iconContainer, {width: this.getTableWidth()}]}>
<View style={style.iconButton}>
@ -314,9 +321,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
displayFlex: {
flex: 1,
},
fullWidth: {
width: '100%',
},
table: {
width: '100%',
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
@ -326,12 +330,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
paddingRight: 10,
},
moreBelow: {
bottom: 30,
bottom: 34,
height: 20,
position: 'absolute',
left: 0,
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
borderBottomWidth: 1,
},
moreRight: {
maxHeight: MAX_HEIGHT,

42
app/components/markdown/markdown_table/markdown_table.test.js
View file

@ -38,6 +38,18 @@ describe('MarkdownTable', () => {
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should call setMaxPreviewColumns on mount', () => {
const wrapper = shallowWithIntl(
<MarkdownTable {...baseProps}/>,
);
const instance = wrapper.instance();
const setMaxPreviewColumns = jest.spyOn(instance, 'setMaxPreviewColumns');
instance.componentDidMount();
expect(setMaxPreviewColumns).toHaveBeenCalled();
expect(instance.state.maxPreviewColumns).toBeDefined();
});
test('should slice rows and columns', () => {
const wrapper = shallowWithIntl(
<MarkdownTable {...baseProps}/>,
@ -52,4 +64,34 @@ describe('MarkdownTable', () => {
expect(wrapper.find('.row')).toHaveLength(newMaxPreviewColumns);
expect(wrapper.find('.col')).toHaveLength(Math.pow(newMaxPreviewColumns, 2));
});
test('should add the isFirstRow prop to the first row', () => {
const wrapper = shallowWithIntl(
<MarkdownTable {...baseProps}/>,
);
const instance = wrapper.instance();
const fullRows = instance.renderRows();
const previewRows = instance.renderPreviewRows();
[fullRows, previewRows].forEach((rows) => {
const firstRows = rows.props.children.filter((child) => child.props.isFirstRow);
expect(firstRows.length).toEqual(1);
expect(firstRows[0]).toEqual(rows.props.children[0]);
});
});
test('should add the isLastRow prop to the last row', () => {
const wrapper = shallowWithIntl(
<MarkdownTable {...baseProps}/>,
);
const instance = wrapper.instance();
const fullRows = instance.renderRows();
const previewRows = instance.renderPreviewRows();
[fullRows, previewRows].forEach((rows) => {
const lastRows = rows.props.children.filter((child) => child.props.isLastRow);
expect(lastRows.length).toEqual(1);
expect(lastRows[0]).toEqual(rows.props.children[rows.props.children.length - 1]);
});
});
});