@planningcenter/chat-react-native 3.24.0-rc.9 → 3.24.0
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/screens/message_report/components/message_preview.d.ts.map +1 -1
- package/build/screens/message_report/components/message_preview.js +12 -19
- package/build/screens/message_report/components/message_preview.js.map +1 -1
- package/package.json +2 -2
- package/src/screens/message_report/components/message_preview.tsx +15 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message_preview.d.ts","sourceRoot":"","sources":["../../../../src/screens/message_report/components/message_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"message_preview.d.ts","sourceRoot":"","sources":["../../../../src/screens/message_report/components/message_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBAiCrE"}
|
|
@@ -3,31 +3,30 @@ import { View, StyleSheet } from 'react-native';
|
|
|
3
3
|
import { Avatar, Text, Icon } from '../../../components';
|
|
4
4
|
import { useTheme } from '../../../hooks';
|
|
5
5
|
export function MessagePreview({ message, style }) {
|
|
6
|
-
const styles = useStyles();
|
|
7
6
|
const hasImages = message.attachments.some(att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/'));
|
|
7
|
+
const imageOnly = hasImages && !message.text;
|
|
8
|
+
const styles = useStyles({ imageOnly });
|
|
8
9
|
return (<View style={[styles.previewContainer, style]}>
|
|
9
10
|
<View style={styles.previewHeader}>
|
|
10
11
|
<Avatar sourceUri={message.author.avatar} size="md"/>
|
|
11
12
|
<Text style={styles.authorName}>{message.author.name}</Text>
|
|
12
13
|
</View>
|
|
13
14
|
|
|
14
|
-
<View style={styles.
|
|
15
|
-
{message.text && (<View style={styles.messageBubble}>
|
|
16
|
-
<Text style={styles.messageText} numberOfLines={5}>
|
|
17
|
-
{message.text}
|
|
18
|
-
</Text>
|
|
19
|
-
</View>)}
|
|
20
|
-
|
|
15
|
+
<View style={styles.messageBubble}>
|
|
21
16
|
{hasImages && (<View style={styles.imagePlaceholder}>
|
|
22
17
|
<Icon name="general.image" style={styles.placeholderIcon}/>
|
|
23
18
|
<Text variant="secondary" style={styles.placeholderText}>
|
|
24
19
|
Image hidden
|
|
25
20
|
</Text>
|
|
26
21
|
</View>)}
|
|
22
|
+
|
|
23
|
+
{message.text && (<Text style={styles.messageText} numberOfLines={5}>
|
|
24
|
+
{message.text}
|
|
25
|
+
</Text>)}
|
|
27
26
|
</View>
|
|
28
27
|
</View>);
|
|
29
28
|
}
|
|
30
|
-
const useStyles = () => {
|
|
29
|
+
const useStyles = ({ imageOnly }) => {
|
|
31
30
|
const { colors } = useTheme();
|
|
32
31
|
return StyleSheet.create({
|
|
33
32
|
previewContainer: {
|
|
@@ -43,31 +42,25 @@ const useStyles = () => {
|
|
|
43
42
|
fontWeight: '600',
|
|
44
43
|
color: colors.textColorDefaultPrimary,
|
|
45
44
|
},
|
|
46
|
-
messageBubbleContainer: {
|
|
47
|
-
gap: 8,
|
|
48
|
-
},
|
|
49
45
|
messageBubble: {
|
|
50
46
|
backgroundColor: colors.fillColorNeutral060,
|
|
51
47
|
borderRadius: 16,
|
|
52
|
-
|
|
53
|
-
paddingVertical: 12,
|
|
48
|
+
overflow: 'hidden',
|
|
54
49
|
alignSelf: 'flex-start',
|
|
55
|
-
maxWidth: '80%',
|
|
50
|
+
maxWidth: imageOnly ? '40%' : '80%',
|
|
56
51
|
},
|
|
57
52
|
messageText: {
|
|
58
53
|
fontSize: 14,
|
|
59
54
|
color: colors.textColorDefaultPrimary,
|
|
60
55
|
lineHeight: 20,
|
|
56
|
+
paddingHorizontal: 16,
|
|
57
|
+
paddingVertical: 12,
|
|
61
58
|
},
|
|
62
59
|
imagePlaceholder: {
|
|
63
60
|
height: 120,
|
|
64
|
-
backgroundColor: colors.fillColorNeutral060,
|
|
65
|
-
borderRadius: 16,
|
|
66
61
|
justifyContent: 'center',
|
|
67
62
|
alignItems: 'center',
|
|
68
63
|
gap: 8,
|
|
69
|
-
maxWidth: '80%',
|
|
70
|
-
alignSelf: 'flex-start',
|
|
71
64
|
},
|
|
72
65
|
placeholderIcon: {
|
|
73
66
|
fontSize: 32,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message_preview.js","sourceRoot":"","sources":["../../../../src/screens/message_report/components/message_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAa,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAQzC,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAuB;IACpE,MAAM,
|
|
1
|
+
{"version":3,"file":"message_preview.js","sourceRoot":"","sources":["../../../../src/screens/message_report/components/message_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { View, StyleSheet, ViewStyle } from 'react-native'\nimport { Avatar, Text, Icon } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { MessageResource } from '../../../types'\n\ninterface MessagePreviewProps {\n message: MessageResource\n style?: ViewStyle\n}\n\nexport function MessagePreview({ message, style }: MessagePreviewProps) {\n const hasImages = message.attachments.some(\n att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')\n )\n\n const imageOnly = hasImages && !message.text\n const styles = useStyles({ imageOnly })\n\n return (\n <View style={[styles.previewContainer, style]}>\n <View style={styles.previewHeader}>\n <Avatar sourceUri={message.author.avatar} size=\"md\" />\n <Text style={styles.authorName}>{message.author.name}</Text>\n </View>\n\n <View style={styles.messageBubble}>\n {hasImages && (\n <View style={styles.imagePlaceholder}>\n <Icon name=\"general.image\" style={styles.placeholderIcon} />\n <Text variant=\"secondary\" style={styles.placeholderText}>\n Image hidden\n </Text>\n </View>\n )}\n\n {message.text && (\n <Text style={styles.messageText} numberOfLines={5}>\n {message.text}\n </Text>\n )}\n </View>\n </View>\n )\n}\n\nconst useStyles = ({ imageOnly }: { imageOnly: boolean }) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n previewContainer: {\n gap: 12,\n },\n previewHeader: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n },\n authorName: {\n fontSize: 14,\n fontWeight: '600',\n color: colors.textColorDefaultPrimary,\n },\n messageBubble: {\n backgroundColor: colors.fillColorNeutral060,\n borderRadius: 16,\n overflow: 'hidden',\n alignSelf: 'flex-start',\n maxWidth: imageOnly ? '40%' : '80%',\n },\n messageText: {\n fontSize: 14,\n color: colors.textColorDefaultPrimary,\n lineHeight: 20,\n paddingHorizontal: 16,\n paddingVertical: 12,\n },\n imagePlaceholder: {\n height: 120,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 8,\n },\n placeholderIcon: {\n fontSize: 32,\n color: colors.iconColorDefaultSecondary,\n },\n placeholderText: {\n fontSize: 14,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.24.0
|
|
3
|
+
"version": "3.24.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react-native-url-polyfill": "^2.0.0",
|
|
59
59
|
"typescript": "<5.6.0"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "766e0c2895aed482fffb467e07439de8cc6d2253"
|
|
62
62
|
}
|
|
@@ -10,12 +10,13 @@ interface MessagePreviewProps {
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
export function MessagePreview({ message, style }: MessagePreviewProps) {
|
|
13
|
-
const styles = useStyles()
|
|
14
|
-
|
|
15
13
|
const hasImages = message.attachments.some(
|
|
16
14
|
att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')
|
|
17
15
|
)
|
|
18
16
|
|
|
17
|
+
const imageOnly = hasImages && !message.text
|
|
18
|
+
const styles = useStyles({ imageOnly })
|
|
19
|
+
|
|
19
20
|
return (
|
|
20
21
|
<View style={[styles.previewContainer, style]}>
|
|
21
22
|
<View style={styles.previewHeader}>
|
|
@@ -23,15 +24,7 @@ export function MessagePreview({ message, style }: MessagePreviewProps) {
|
|
|
23
24
|
<Text style={styles.authorName}>{message.author.name}</Text>
|
|
24
25
|
</View>
|
|
25
26
|
|
|
26
|
-
<View style={styles.
|
|
27
|
-
{message.text && (
|
|
28
|
-
<View style={styles.messageBubble}>
|
|
29
|
-
<Text style={styles.messageText} numberOfLines={5}>
|
|
30
|
-
{message.text}
|
|
31
|
-
</Text>
|
|
32
|
-
</View>
|
|
33
|
-
)}
|
|
34
|
-
|
|
27
|
+
<View style={styles.messageBubble}>
|
|
35
28
|
{hasImages && (
|
|
36
29
|
<View style={styles.imagePlaceholder}>
|
|
37
30
|
<Icon name="general.image" style={styles.placeholderIcon} />
|
|
@@ -40,12 +33,18 @@ export function MessagePreview({ message, style }: MessagePreviewProps) {
|
|
|
40
33
|
</Text>
|
|
41
34
|
</View>
|
|
42
35
|
)}
|
|
36
|
+
|
|
37
|
+
{message.text && (
|
|
38
|
+
<Text style={styles.messageText} numberOfLines={5}>
|
|
39
|
+
{message.text}
|
|
40
|
+
</Text>
|
|
41
|
+
)}
|
|
43
42
|
</View>
|
|
44
43
|
</View>
|
|
45
44
|
)
|
|
46
45
|
}
|
|
47
46
|
|
|
48
|
-
const useStyles = () => {
|
|
47
|
+
const useStyles = ({ imageOnly }: { imageOnly: boolean }) => {
|
|
49
48
|
const { colors } = useTheme()
|
|
50
49
|
|
|
51
50
|
return StyleSheet.create({
|
|
@@ -62,31 +61,25 @@ const useStyles = () => {
|
|
|
62
61
|
fontWeight: '600',
|
|
63
62
|
color: colors.textColorDefaultPrimary,
|
|
64
63
|
},
|
|
65
|
-
messageBubbleContainer: {
|
|
66
|
-
gap: 8,
|
|
67
|
-
},
|
|
68
64
|
messageBubble: {
|
|
69
65
|
backgroundColor: colors.fillColorNeutral060,
|
|
70
66
|
borderRadius: 16,
|
|
71
|
-
|
|
72
|
-
paddingVertical: 12,
|
|
67
|
+
overflow: 'hidden',
|
|
73
68
|
alignSelf: 'flex-start',
|
|
74
|
-
maxWidth: '80%',
|
|
69
|
+
maxWidth: imageOnly ? '40%' : '80%',
|
|
75
70
|
},
|
|
76
71
|
messageText: {
|
|
77
72
|
fontSize: 14,
|
|
78
73
|
color: colors.textColorDefaultPrimary,
|
|
79
74
|
lineHeight: 20,
|
|
75
|
+
paddingHorizontal: 16,
|
|
76
|
+
paddingVertical: 12,
|
|
80
77
|
},
|
|
81
78
|
imagePlaceholder: {
|
|
82
79
|
height: 120,
|
|
83
|
-
backgroundColor: colors.fillColorNeutral060,
|
|
84
|
-
borderRadius: 16,
|
|
85
80
|
justifyContent: 'center',
|
|
86
81
|
alignItems: 'center',
|
|
87
82
|
gap: 8,
|
|
88
|
-
maxWidth: '80%',
|
|
89
|
-
alignSelf: 'flex-start',
|
|
90
83
|
},
|
|
91
84
|
placeholderIcon: {
|
|
92
85
|
fontSize: 32,
|