68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import {StyleSheet, View} from 'react-native';
|
|
|
|
import CompassIcon from '@components/compass_icon';
|
|
import {Preferences} from '@mm-redux/constants';
|
|
import {changeOpacity} from '@utils/theme';
|
|
|
|
interface OtherFileProps {
|
|
extension?: string;
|
|
}
|
|
|
|
const theme = Preferences.THEMES.default;
|
|
const iconForExtension: Record<string, string> = {
|
|
csv: 'jumbo-attachment-excel',
|
|
pdf: 'jumbo-attachment-pdf',
|
|
ppt: 'jumbo-attachment-powerpoint',
|
|
pptx: 'jumbo-attachment-powerpoint',
|
|
xls: 'jumbo-attachment-excel',
|
|
xlsx: 'jumbo-attachment-excel',
|
|
zip: 'jumbo-attachment-zip',
|
|
generic: 'jumbo-attachment-generic',
|
|
};
|
|
|
|
const OtherFile = ({extension}: OtherFileProps) => {
|
|
let iconName = iconForExtension.generic;
|
|
if (extension && iconForExtension[extension]) {
|
|
iconName = iconForExtension[extension];
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.wrapper}>
|
|
<View style={styles.icon}>
|
|
<CompassIcon
|
|
name={iconName}
|
|
size={32}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderBottomLeftRadius: 4,
|
|
borderTopLeftRadius: 4,
|
|
height: 48,
|
|
marginRight: 10,
|
|
paddingVertical: 10,
|
|
width: 48,
|
|
},
|
|
icon: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flex: 1,
|
|
},
|
|
wrapper: {
|
|
borderRightWidth: 1,
|
|
borderRightColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
flex: 1,
|
|
},
|
|
});
|
|
|
|
export default OtherFile;
|