@planningcenter/chat-react-native 3.5.1-rc.1 → 3.5.1-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/conversation/attachments/generic_file_attachment.d.ts.map +1 -1
- package/build/components/conversation/attachments/generic_file_attachment.js +8 -4
- package/build/components/conversation/attachments/generic_file_attachment.js.map +1 -1
- package/build/components/conversation/attachments/video_attachment.d.ts.map +1 -1
- package/build/components/conversation/attachments/video_attachment.js +13 -8
- package/build/components/conversation/attachments/video_attachment.js.map +1 -1
- package/package.json +2 -2
- package/src/components/conversation/attachments/generic_file_attachment.tsx +11 -8
- package/src/components/conversation/attachments/video_attachment.tsx +19 -14
- package/build/components/conversation/attachments/download_attachment_button.d.ts +0 -9
- package/build/components/conversation/attachments/download_attachment_button.d.ts.map +0 -1
- package/build/components/conversation/attachments/download_attachment_button.js +0 -29
- package/build/components/conversation/attachments/download_attachment_button.js.map +0 -1
- package/src/components/conversation/attachments/download_attachment_button.tsx +0 -46
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generic_file_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;
|
|
1
|
+
{"version":3,"file":"generic_file_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAMjH,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,qBAiCA;AA4BD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,uJAWjD"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { StyleSheet, View } from 'react-native';
|
|
2
|
+
import { Linking, StyleSheet, View } from 'react-native';
|
|
3
3
|
import { AttachmentCard, AttachmentCardTitle } from './attachment_card';
|
|
4
4
|
import { Icon } from '../../display';
|
|
5
|
-
import { DownloadAttachmentButton } from './download_attachment_button';
|
|
6
5
|
import { useTheme } from '../../../hooks';
|
|
7
6
|
import { PlatformPressable } from '@react-navigation/elements';
|
|
8
7
|
export function GenericFileAttachment({ attachment, onMessageAttachmentLongPress, }) {
|
|
@@ -11,14 +10,19 @@ export function GenericFileAttachment({ attachment, onMessageAttachmentLongPress
|
|
|
11
10
|
const { url, filename, contentType } = attachment.attributes;
|
|
12
11
|
const iconName = getAttachmentIconName(contentType);
|
|
13
12
|
const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file';
|
|
14
|
-
|
|
13
|
+
async function handleDownload() {
|
|
14
|
+
if (url) {
|
|
15
|
+
// Open link in the default web browser
|
|
16
|
+
Linking.openURL(url);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return (<PlatformPressable onPress={handleDownload} onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityRole="link" accessibilityHint={`Press to open ${fileTypeLabel} in a browser. Long press for more options`}>
|
|
15
20
|
<AttachmentCard>
|
|
16
21
|
<View style={styles.container}>
|
|
17
22
|
<View style={styles.stack}>
|
|
18
23
|
<Icon name={iconName}/>
|
|
19
24
|
<AttachmentCardTitle>{filename}</AttachmentCardTitle>
|
|
20
25
|
</View>
|
|
21
|
-
<DownloadAttachmentButton to={url} filename={filename} title={`Download ${fileTypeLabel}`}/>
|
|
22
26
|
</View>
|
|
23
27
|
</AttachmentCard>
|
|
24
28
|
</PlatformPressable>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generic_file_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"generic_file_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/generic_file_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Linking, StyleSheet, View } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { Icon } from '../../display'\nimport { useTheme } from '../../../hooks'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function GenericFileAttachment({\n attachment,\n onMessageAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n const { url, filename, contentType } = attachment.attributes\n const iconName = getAttachmentIconName(contentType)\n const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'\n\n async function handleDownload() {\n if (url) {\n // Open link in the default web browser\n Linking.openURL(url)\n }\n }\n\n return (\n <PlatformPressable\n onPress={handleDownload}\n onLongPress={() => onMessageAttachmentLongPress(attachment)}\n android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}\n accessibilityRole=\"link\"\n accessibilityHint={`Press to open ${fileTypeLabel} in a browser. Long press for more options`}\n >\n <AttachmentCard>\n <View style={styles.container}>\n <View style={styles.stack}>\n <Icon name={iconName} />\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n </View>\n </View>\n </AttachmentCard>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n padding: 8,\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n minHeight: 48,\n },\n stack: {\n gap: 4,\n flexDirection: 'row',\n alignItems: 'center',\n maxWidth: '70%',\n },\n icon: {\n color: colors.textColorDefaultPrimary,\n width: 24,\n height: 24,\n },\n })\n}\n\nexport function getAttachmentIconName(type: string) {\n const isImage = type.startsWith('image/')\n const isVideo = type.startsWith('video/')\n const isAudio = type.startsWith('audio/')\n const isPdf = type === 'application/pdf'\n\n if (isImage) return 'general.outlinedImageFile'\n if (isVideo) return 'general.outlinedVideoFile'\n if (isAudio) return 'general.outlinedMusicFile'\n if (isPdf) return 'general.outlinedPdfFile'\n return 'general.outlinedGenericFile'\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAOjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,
|
|
1
|
+
{"version":3,"file":"video_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAOjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,qBAwDA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useRef, useState } from 'react';
|
|
2
2
|
import { View, StyleSheet } from 'react-native';
|
|
3
3
|
import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants';
|
|
4
|
-
import {
|
|
4
|
+
import { Icon } from '../../display';
|
|
5
5
|
import { Video } from '../../../utils/native_adapters';
|
|
6
6
|
import { PlatformPressable } from '@react-navigation/elements';
|
|
7
7
|
import { useTheme } from '../../../hooks';
|
|
@@ -25,10 +25,12 @@ export function VideoAttachment({ attachment, onMessageAttachmentLongPress, }) {
|
|
|
25
25
|
}
|
|
26
26
|
const viewRef = useRef(null);
|
|
27
27
|
return (<View style={styles.container} ref={viewRef}>
|
|
28
|
-
<PlatformPressable onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityHint="Long press for more options">
|
|
28
|
+
<PlatformPressable onPress={openVideo} onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityLabel="Play Video" accessibilityHint="Press to play video. Long press for more options">
|
|
29
29
|
<Video.Player ref={videoRef} source={{ uri: url }} aspectRatio={width / height} style={styles.video} onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}/>
|
|
30
|
-
{!isOpen && (<View style={styles.
|
|
31
|
-
<
|
|
30
|
+
{!isOpen && (<View style={styles.playContainer}>
|
|
31
|
+
<View style={styles.playCircle}>
|
|
32
|
+
<Icon name="services.play" style={styles.playIcon} accessibilityElementsHidden={true}/>
|
|
33
|
+
</View>
|
|
32
34
|
</View>)}
|
|
33
35
|
</PlatformPressable>
|
|
34
36
|
</View>);
|
|
@@ -44,7 +46,7 @@ const styles = StyleSheet.create({
|
|
|
44
46
|
backgroundColor: 'black',
|
|
45
47
|
borderRadius: 8,
|
|
46
48
|
},
|
|
47
|
-
|
|
49
|
+
playContainer: {
|
|
48
50
|
position: 'absolute',
|
|
49
51
|
top: 0,
|
|
50
52
|
left: 0,
|
|
@@ -53,15 +55,18 @@ const styles = StyleSheet.create({
|
|
|
53
55
|
justifyContent: 'center',
|
|
54
56
|
alignItems: 'center',
|
|
55
57
|
},
|
|
56
|
-
|
|
57
|
-
width: 42,
|
|
58
|
-
height: 42,
|
|
58
|
+
playCircle: {
|
|
59
59
|
justifyContent: 'center',
|
|
60
60
|
alignItems: 'center',
|
|
61
|
+
width: 42,
|
|
62
|
+
height: 42,
|
|
61
63
|
borderRadius: 25,
|
|
62
64
|
backgroundColor: '#eee',
|
|
63
65
|
borderColor: '#aaa',
|
|
64
66
|
borderWidth: 1,
|
|
65
67
|
},
|
|
68
|
+
playIcon: {
|
|
69
|
+
fontSize: 20,
|
|
70
|
+
},
|
|
66
71
|
});
|
|
67
72
|
//# sourceMappingURL=video_attachment.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"video_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/video_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef, useState } from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'\nimport { Icon } from '../../display'\nimport { Video, VideoPlayerHandle } from '../../../utils/native_adapters'\nimport { PlatformPressable } from '@react-navigation/elements'\nimport { useTheme } from '../../../hooks'\n\nexport function VideoAttachment({\n attachment,\n onMessageAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const { colors } = useTheme()\n\n const { attributes } = attachment\n const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =\n attributes.metadata || {}\n const { url } = attributes\n\n const videoRef = useRef<VideoPlayerHandle>(null)\n const [isOpen, setIsOpen] = useState(false)\n\n function openVideo() {\n if (!isOpen && videoRef.current) {\n videoRef.current.presentFullscreenPlayer()\n videoRef.current.play()\n setIsOpen(true)\n }\n }\n\n function onFullscreenPlayerWillDismiss() {\n videoRef.current?.pause()\n setIsOpen(false)\n }\n\n const viewRef = useRef<View>(null)\n\n return (\n <View style={styles.container} ref={viewRef}>\n <PlatformPressable\n onPress={openVideo}\n onLongPress={() => onMessageAttachmentLongPress(attachment)}\n android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}\n accessibilityLabel=\"Play Video\"\n accessibilityHint=\"Press to play video. Long press for more options\"\n >\n <Video.Player\n ref={videoRef}\n source={{ uri: url }}\n aspectRatio={width / height}\n style={styles.video}\n onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}\n />\n {!isOpen && (\n <View style={styles.playContainer}>\n <View style={styles.playCircle}>\n <Icon\n name=\"services.play\"\n style={styles.playIcon}\n accessibilityElementsHidden={true}\n />\n </View>\n </View>\n )}\n </PlatformPressable>\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n maxWidth: 320,\n maxHeight: 320,\n },\n video: {\n width: '100%',\n height: 'auto',\n backgroundColor: 'black',\n borderRadius: 8,\n },\n playContainer: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n justifyContent: 'center',\n alignItems: 'center',\n },\n playCircle: {\n justifyContent: 'center',\n alignItems: 'center',\n width: 42,\n height: 42,\n borderRadius: 25,\n backgroundColor: '#eee',\n borderColor: '#aaa',\n borderWidth: 1,\n },\n playIcon: {\n fontSize: 20,\n },\n})\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.5.1-rc.
|
|
3
|
+
"version": "3.5.1-rc.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"prettier": "^3.4.2",
|
|
55
55
|
"typescript": "<5.6.0"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "f19addea1eb5c01a6b870e045488124cbc01f420"
|
|
58
58
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { StyleSheet, View } from 'react-native'
|
|
2
|
+
import { Linking, StyleSheet, View } from 'react-native'
|
|
3
3
|
import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
|
|
4
4
|
import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
|
|
5
5
|
import { Icon } from '../../display'
|
|
6
|
-
import { DownloadAttachmentButton } from './download_attachment_button'
|
|
7
6
|
import { useTheme } from '../../../hooks'
|
|
8
7
|
import { PlatformPressable } from '@react-navigation/elements'
|
|
9
8
|
|
|
@@ -21,11 +20,20 @@ export function GenericFileAttachment({
|
|
|
21
20
|
const iconName = getAttachmentIconName(contentType)
|
|
22
21
|
const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'
|
|
23
22
|
|
|
23
|
+
async function handleDownload() {
|
|
24
|
+
if (url) {
|
|
25
|
+
// Open link in the default web browser
|
|
26
|
+
Linking.openURL(url)
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
24
30
|
return (
|
|
25
31
|
<PlatformPressable
|
|
32
|
+
onPress={handleDownload}
|
|
26
33
|
onLongPress={() => onMessageAttachmentLongPress(attachment)}
|
|
27
34
|
android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
|
|
28
|
-
|
|
35
|
+
accessibilityRole="link"
|
|
36
|
+
accessibilityHint={`Press to open ${fileTypeLabel} in a browser. Long press for more options`}
|
|
29
37
|
>
|
|
30
38
|
<AttachmentCard>
|
|
31
39
|
<View style={styles.container}>
|
|
@@ -33,11 +41,6 @@ export function GenericFileAttachment({
|
|
|
33
41
|
<Icon name={iconName} />
|
|
34
42
|
<AttachmentCardTitle>{filename}</AttachmentCardTitle>
|
|
35
43
|
</View>
|
|
36
|
-
<DownloadAttachmentButton
|
|
37
|
-
to={url}
|
|
38
|
-
filename={filename}
|
|
39
|
-
title={`Download ${fileTypeLabel}`}
|
|
40
|
-
/>
|
|
41
44
|
</View>
|
|
42
45
|
</AttachmentCard>
|
|
43
46
|
</PlatformPressable>
|
|
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
|
|
|
2
2
|
import { View, StyleSheet } from 'react-native'
|
|
3
3
|
import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
|
|
4
4
|
import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'
|
|
5
|
-
import {
|
|
5
|
+
import { Icon } from '../../display'
|
|
6
6
|
import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
|
|
7
7
|
import { PlatformPressable } from '@react-navigation/elements'
|
|
8
8
|
import { useTheme } from '../../../hooks'
|
|
@@ -42,9 +42,11 @@ export function VideoAttachment({
|
|
|
42
42
|
return (
|
|
43
43
|
<View style={styles.container} ref={viewRef}>
|
|
44
44
|
<PlatformPressable
|
|
45
|
+
onPress={openVideo}
|
|
45
46
|
onLongPress={() => onMessageAttachmentLongPress(attachment)}
|
|
46
47
|
android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
|
|
47
|
-
|
|
48
|
+
accessibilityLabel="Play Video"
|
|
49
|
+
accessibilityHint="Press to play video. Long press for more options"
|
|
48
50
|
>
|
|
49
51
|
<Video.Player
|
|
50
52
|
ref={videoRef}
|
|
@@ -54,14 +56,14 @@ export function VideoAttachment({
|
|
|
54
56
|
onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
|
|
55
57
|
/>
|
|
56
58
|
{!isOpen && (
|
|
57
|
-
<View style={styles.
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
<View style={styles.playContainer}>
|
|
60
|
+
<View style={styles.playCircle}>
|
|
61
|
+
<Icon
|
|
62
|
+
name="services.play"
|
|
63
|
+
style={styles.playIcon}
|
|
64
|
+
accessibilityElementsHidden={true}
|
|
65
|
+
/>
|
|
66
|
+
</View>
|
|
65
67
|
</View>
|
|
66
68
|
)}
|
|
67
69
|
</PlatformPressable>
|
|
@@ -80,7 +82,7 @@ const styles = StyleSheet.create({
|
|
|
80
82
|
backgroundColor: 'black',
|
|
81
83
|
borderRadius: 8,
|
|
82
84
|
},
|
|
83
|
-
|
|
85
|
+
playContainer: {
|
|
84
86
|
position: 'absolute',
|
|
85
87
|
top: 0,
|
|
86
88
|
left: 0,
|
|
@@ -89,14 +91,17 @@ const styles = StyleSheet.create({
|
|
|
89
91
|
justifyContent: 'center',
|
|
90
92
|
alignItems: 'center',
|
|
91
93
|
},
|
|
92
|
-
|
|
93
|
-
width: 42,
|
|
94
|
-
height: 42,
|
|
94
|
+
playCircle: {
|
|
95
95
|
justifyContent: 'center',
|
|
96
96
|
alignItems: 'center',
|
|
97
|
+
width: 42,
|
|
98
|
+
height: 42,
|
|
97
99
|
borderRadius: 25,
|
|
98
100
|
backgroundColor: '#eee',
|
|
99
101
|
borderColor: '#aaa',
|
|
100
102
|
borderWidth: 1,
|
|
101
103
|
},
|
|
104
|
+
playIcon: {
|
|
105
|
+
fontSize: 20,
|
|
106
|
+
},
|
|
102
107
|
})
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface DownloadAttachmentButtonProps {
|
|
3
|
-
to: string;
|
|
4
|
-
filename: string;
|
|
5
|
-
title: string;
|
|
6
|
-
}
|
|
7
|
-
export declare function DownloadAttachmentButton({ to, title }: DownloadAttachmentButtonProps): React.JSX.Element;
|
|
8
|
-
export {};
|
|
9
|
-
//# sourceMappingURL=download_attachment_button.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"download_attachment_button.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/download_attachment_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,6BAA6B;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,6BAA6B,qBAkBpF"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IconButton } from '../../display';
|
|
3
|
-
import { useTheme } from '../../../hooks';
|
|
4
|
-
import { Linking, StyleSheet } from 'react-native';
|
|
5
|
-
export function DownloadAttachmentButton({ to, title }) {
|
|
6
|
-
const styles = useStyles();
|
|
7
|
-
async function handleDownload() {
|
|
8
|
-
if (to) {
|
|
9
|
-
// Open link in the default web browser
|
|
10
|
-
Linking.openURL(to);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
return (<IconButton name="general.fromCloudArrow" size="md" accessibilityLabel={title} onPress={handleDownload} style={styles.iconButton}/>);
|
|
14
|
-
}
|
|
15
|
-
const useStyles = () => {
|
|
16
|
-
const { colors } = useTheme();
|
|
17
|
-
return StyleSheet.create({
|
|
18
|
-
iconButton: {
|
|
19
|
-
color: colors.fillColorInteractionDefault,
|
|
20
|
-
backgroundColor: colors.fillColorNeutral070,
|
|
21
|
-
borderWidth: 1,
|
|
22
|
-
borderColor: colors.fillColorNeutral060,
|
|
23
|
-
borderRadius: 4,
|
|
24
|
-
width: 24,
|
|
25
|
-
height: 24,
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=download_attachment_button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"download_attachment_button.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/download_attachment_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAQlD,MAAM,UAAU,wBAAwB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAiC;IACnF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,KAAK,UAAU,cAAc;QAC3B,IAAI,EAAE,EAAE,CAAC;YACP,uCAAuC;YACvC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACrB,CAAC;IACH,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,wBAAwB,CAC7B,IAAI,CAAC,IAAI,CACT,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,EACzB,CACH,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC,2BAA2B;YACzC,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,mBAAmB;YACvC,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { IconButton } from '../../display'\nimport { useTheme } from '../../../hooks'\nimport { Linking, StyleSheet } from 'react-native'\n\ninterface DownloadAttachmentButtonProps {\n to: string\n filename: string\n title: string\n}\n\nexport function DownloadAttachmentButton({ to, title }: DownloadAttachmentButtonProps) {\n const styles = useStyles()\n async function handleDownload() {\n if (to) {\n // Open link in the default web browser\n Linking.openURL(to)\n }\n }\n\n return (\n <IconButton\n name=\"general.fromCloudArrow\"\n size=\"md\"\n accessibilityLabel={title}\n onPress={handleDownload}\n style={styles.iconButton}\n />\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n iconButton: {\n color: colors.fillColorInteractionDefault,\n backgroundColor: colors.fillColorNeutral070,\n borderWidth: 1,\n borderColor: colors.fillColorNeutral060,\n borderRadius: 4,\n width: 24,\n height: 24,\n },\n })\n}\n"]}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { IconButton } from '../../display'
|
|
3
|
-
import { useTheme } from '../../../hooks'
|
|
4
|
-
import { Linking, StyleSheet } from 'react-native'
|
|
5
|
-
|
|
6
|
-
interface DownloadAttachmentButtonProps {
|
|
7
|
-
to: string
|
|
8
|
-
filename: string
|
|
9
|
-
title: string
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export function DownloadAttachmentButton({ to, title }: DownloadAttachmentButtonProps) {
|
|
13
|
-
const styles = useStyles()
|
|
14
|
-
async function handleDownload() {
|
|
15
|
-
if (to) {
|
|
16
|
-
// Open link in the default web browser
|
|
17
|
-
Linking.openURL(to)
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<IconButton
|
|
23
|
-
name="general.fromCloudArrow"
|
|
24
|
-
size="md"
|
|
25
|
-
accessibilityLabel={title}
|
|
26
|
-
onPress={handleDownload}
|
|
27
|
-
style={styles.iconButton}
|
|
28
|
-
/>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const useStyles = () => {
|
|
33
|
-
const { colors } = useTheme()
|
|
34
|
-
|
|
35
|
-
return StyleSheet.create({
|
|
36
|
-
iconButton: {
|
|
37
|
-
color: colors.fillColorInteractionDefault,
|
|
38
|
-
backgroundColor: colors.fillColorNeutral070,
|
|
39
|
-
borderWidth: 1,
|
|
40
|
-
borderColor: colors.fillColorNeutral060,
|
|
41
|
-
borderRadius: 4,
|
|
42
|
-
width: 24,
|
|
43
|
-
height: 24,
|
|
44
|
-
},
|
|
45
|
-
})
|
|
46
|
-
}
|