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

Select text in the code/text preview screens (#1561)

Browse source 
* Make code and plain text previews selectable

* Support more file formats in text preview

* Fix selection in android
This commit is contained in:
Elias Nahum 2018-04-04 16:15:23 +03:00 committed by Harrison Healey
parent e20b84c6d8
commit 683ebc3faa
4 changed files with 88 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/file_attachment_list/file_attachment.js
View file

@ -66,13 +66,13 @@ export default class FileAttachment extends PureComponent {
const {deviceWidth, file, onInfoPress, theme, navigator} = this.props;
const style = getStyleSheet(theme);
let mime = file.mime_type;
let mime = file.mime_type || file.type;
if (mime && mime.includes(';')) {
mime = mime.split(';')[0];
}
let fileAttachmentComponent;
if (file.has_preview_image || file.loading || file.mime_type === 'image/gif') {
if (file.has_preview_image || file.loading || mime === 'image/gif') {
fileAttachmentComponent = (
<TouchableOpacity onPress={this.handlePreviewPress}>
<FileAttachmentImage

12
app/components/file_attachment_list/file_attachment_document.js
View file

@ -24,19 +24,27 @@ import FileAttachmentIcon from './file_attachment_icon';
const {DOCUMENTS_PATH} = DeviceTypes;
export const SUPPORTED_DOCS_FORMAT = [
'application/pdf',
'application/json',
'application/msword',
'application/pdf',
'application/rtf',
'application/vnd.ms-excel',
'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/x-x509-ca-cert',
'application/xml',
'text/csv',
'text/plain',
];
const TEXT_PREVIEW_FORMATS = [
'application/json',
'application/x-x509-ca-cert',
'text/plain',
];
export default class FileAttachmentDocument extends PureComponent {
static propTypes = {
iconHeight: PropTypes.number,
@ -109,7 +117,7 @@ export default class FileAttachmentDocument extends PureComponent {
const mime = file.mime_type.split(';')[0];
let openDocument = this.openDocument;
if (mime === 'text/plain') {
if (TEXT_PREVIEW_FORMATS.includes(mime)) {
openDocument = this.previewTextFile;
}

42
app/screens/code/code.js
View file

@ -4,9 +4,11 @@
import PropTypes from 'prop-types';
import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
@ -48,6 +50,27 @@ export default class Code extends React.PureComponent {
lineNumbersStyle = style.lineNumbers;
}
let textComponent;
if (Platform.OS === 'ios') {
textComponent = (
<TextInput
editable={false}
multiline={true}
value={this.props.content}
style={[style.codeText]}
/>
);
} else {
textComponent = (
<Text
selectable={true}
style={style.codeText}
>
{this.props.content}
</Text>
);
}
return (
<ScrollView
style={style.scrollContainer}
@ -63,9 +86,7 @@ export default class Code extends React.PureComponent {
contentContainerStyle={style.code}
horizontal={true}
>
<Text style={style.codeText}>
{this.props.content}
</Text>
{textComponent}
</ScrollView>
</ScrollView>
);
@ -106,13 +127,26 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
code: {
paddingHorizontal: 6,
paddingVertical: 4,
...Platform.select({
android: {
paddingVertical: 4,
},
ios: {
top: -4,
},
}),
},
codeText: {
color: changeOpacity(theme.centerChannelColor, 0.65),
fontFamily: getCodeFont(),
fontSize: 12,
lineHeight: 18,
...Platform.select({
ios: {
margin: 0,
padding: 0,
},
}),
},
};
});

45
app/screens/text_preview/text_preview.js
View file

@ -4,9 +4,11 @@
import PropTypes from 'prop-types';
import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
@ -48,6 +50,27 @@ export default class TextPreview extends React.PureComponent {
lineNumbersStyle = style.lineNumbers;
}
let textComponent;
if (Platform.OS === 'ios') {
textComponent = (
<TextInput
editable={false}
multiline={true}
value={this.props.content}
style={[style.codeText]}
/>
);
} else {
textComponent = (
<Text
selectable={true}
style={style.codeText}
>
{this.props.content}
</Text>
);
}
return (
<ScrollView
style={style.scrollContainer}
@ -63,12 +86,7 @@ export default class TextPreview extends React.PureComponent {
horizontal={true}
contentContainerStyle={style.code}
>
<Text
style={style.codeText}
selectable={true}
>
{this.props.content}
</Text>
{textComponent}
</ScrollView>
</ScrollView>
);
@ -110,13 +128,26 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
code: {
paddingHorizontal: 6,
paddingVertical: 4,
...Platform.select({
android: {
paddingVertical: 4,
},
ios: {
top: -4,
},
}),
},
codeText: {
color: changeOpacity(theme.centerChannelColor, 0.65),
fontFamily: getCodeFont(),
fontSize: 12,
lineHeight: 18,
...Platform.select({
ios: {
margin: 0,
padding: 0,
},
}),
},
};
});