f7bed8dcdb
* Making markdown tables more responsive * Changing implementation of isTablet and isLandscape * Fixing variable names & added more table styles * Adding header backgrounds & iOS fixes * Changing cell padding to 8 * Fixing positioning of expand table buttons * Fixed android issues and flex render conditions - Centered icon in expand button instead of using fixed paddings (icon was slightly off center) - Fixed expand button rendering on android - Separated full table view into ios / android to allow for separate styling * Merging table back to single file * Resolving conflicts & improving full table view - Made the full table view scrollable through any part of the screen, as opposed to only the table area (only works on iOS) - Resolved conflicts with PR that limits tables to 5 columns visible on channel view - Made changes to keep behavior of tables consistent on table view - Added logic to render "moreRight" element if table was cut in channel view - Updated snapshot
69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import {
|
|
Platform,
|
|
ScrollView,
|
|
SafeAreaView,
|
|
} from 'react-native';
|
|
import {makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
|
|
export default class Table extends React.PureComponent {
|
|
static propTypes = {
|
|
renderRows: PropTypes.func.isRequired,
|
|
tableWidth: PropTypes.number.isRequired,
|
|
renderAsFlex: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
render() {
|
|
const style = getStyleSheet();
|
|
const content = this.props.renderRows(true);
|
|
const viewStyle = this.props.renderAsFlex ? style.displayFlex : {width: this.props.tableWidth};
|
|
|
|
let container;
|
|
if (Platform.OS === 'android') {
|
|
container = (
|
|
<ScrollView>
|
|
<ScrollView
|
|
contentContainerStyle={viewStyle}
|
|
horizontal={true}
|
|
>
|
|
{content}
|
|
</ScrollView>
|
|
</ScrollView>
|
|
);
|
|
} else {
|
|
container = (
|
|
<SafeAreaView>
|
|
<ScrollView
|
|
style={style.fullHeight}
|
|
contentContainerStyle={viewStyle}
|
|
>
|
|
{content}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
return container;
|
|
}
|
|
}
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme(() => {
|
|
return {
|
|
fullHeight: {
|
|
height: '100%',
|
|
},
|
|
displayFlex: {
|
|
...Platform.select({
|
|
android: {
|
|
flex: 1,
|
|
},
|
|
ios: {
|
|
flex: 0,
|
|
},
|
|
}),
|
|
},
|
|
};
|
|
});
|