-
Notifications
You must be signed in to change notification settings - Fork 2.6k
/
ImageRenderer.js
71 lines (65 loc) · 2.62 KB
/
ImageRenderer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React from 'react';
import htmlRendererPropTypes from './htmlRendererPropTypes';
import Config from '../../../CONFIG';
import AttachmentModal from '../../AttachmentModal';
import styles from '../../../styles/styles';
import ThumbnailImage from '../../ThumbnailImage';
import TouchableWithoutFocus from '../../TouchableWithoutFocus';
const ImageRenderer = (props) => {
const htmlAttribs = props.tnode.attributes;
// There are two kinds of images that need to be displayed:
//
// - Chat Attachment images
//
// Images uploaded by the user via the app or email.
// These have a full-sized image `htmlAttribs['data-expensify-source']`
// and a thumbnail `htmlAttribs.src`. Both of these URLs need to have
// an authToken added to them in order to control who
// can see the images.
//
// - Non-Attachment Images
//
// These could be hosted from anywhere (Expensify or another source)
// and are not protected by any kind of access control e.g. certain
// Concierge responder attachments are uploaded to S3 without any access
// control and thus require no authToken to verify access.
//
const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
const originalFileName = htmlAttribs['data-name'];
let previewSource = htmlAttribs.src;
let source = isAttachment
? htmlAttribs['data-expensify-source']
: htmlAttribs.src;
// Update the image URL so the images can be accessed depending on the config environment
previewSource = previewSource.replace(
Config.EXPENSIFY.URL_EXPENSIFY_COM,
Config.EXPENSIFY.URL_API_ROOT,
);
source = source.replace(
Config.EXPENSIFY.URL_EXPENSIFY_COM,
Config.EXPENSIFY.URL_API_ROOT,
);
return (
<AttachmentModal
sourceURL={source}
isAuthTokenRequired={isAttachment}
originalFileName={originalFileName}
>
{({show}) => (
<TouchableWithoutFocus
style={styles.noOutline}
onPress={show}
>
<ThumbnailImage
previewSourceURL={previewSource}
style={styles.webViewStyles.tagStyles.img}
isAuthTokenRequired={isAttachment}
/>
</TouchableWithoutFocus>
)}
</AttachmentModal>
);
};
ImageRenderer.propTypes = htmlRendererPropTypes;
ImageRenderer.displayName = 'ImageRenderer';
export default ImageRenderer;