@planningcenter/chat-react-native 2.2.0-rc.2 → 2.2.0-rc.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,aAAa,yBAoEzB,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useNavigation } from '@react-navigation/native';
|
|
2
|
+
import { FlashList } from '@shopify/flash-list';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
+
import { Pressable, StyleSheet, View } from 'react-native';
|
|
4
5
|
import { useTheme } from '../hooks';
|
|
5
6
|
import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events';
|
|
6
7
|
import { useConversations } from '../hooks/use_conversations';
|
|
@@ -13,32 +14,34 @@ export const Conversations = () => {
|
|
|
13
14
|
const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || [];
|
|
14
15
|
const navigation = useNavigation();
|
|
15
16
|
useConversationsJoltEvents();
|
|
16
|
-
return (<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
return (<View style={styles.container}>
|
|
18
|
+
<FlashList data={nonEmptyConversations} estimatedItemSize={97} contentContainerStyle={styles.contentContainer} onRefresh={refetch} refreshing={isRefetching} ListHeaderComponent={<View style={styles.header}>
|
|
19
|
+
<Heading numberOfLines={1} variant="h2">
|
|
20
|
+
Conversations
|
|
21
|
+
</Heading>
|
|
22
|
+
<TextButton>Mark all read</TextButton>
|
|
23
|
+
</View>} ListEmptyComponent={<Text>No conversations found</Text>} renderItem={({ item }) => (<Pressable style={styles.conversation} onPress={() => navigation.navigate('Conversation', {
|
|
22
24
|
conversation_id: item.id,
|
|
23
25
|
chat_group_graph_id: item.id,
|
|
24
26
|
})}>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
<AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []}/>
|
|
28
|
+
<View style={styles.conversationBody}>
|
|
29
|
+
<Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
|
|
30
|
+
{item.title}
|
|
31
|
+
</Heading>
|
|
32
|
+
<Text style={styles.listItem} numberOfLines={2}>
|
|
33
|
+
{item.lastMessageAuthorName}: {item.lastMessageTextPreview}
|
|
34
|
+
</Text>
|
|
35
|
+
<View style={styles.conversationBadges}>
|
|
36
|
+
{item.badges?.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
|
|
37
|
+
</View>
|
|
38
|
+
</View>
|
|
39
|
+
<View style={styles.conversationExtra}>
|
|
40
|
+
<Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
|
|
41
|
+
<UnreadCountBadge count={item.unreadCount}/>
|
|
35
42
|
</View>
|
|
36
|
-
</
|
|
37
|
-
|
|
38
|
-
<Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
|
|
39
|
-
<UnreadCountBadge count={item.unreadCount}/>
|
|
40
|
-
</View>
|
|
41
|
-
</Pressable>)} onEndReached={() => fetchNextPage()}/>);
|
|
43
|
+
</Pressable>)} onEndReached={() => fetchNextPage()}/>
|
|
44
|
+
</View>);
|
|
42
45
|
};
|
|
43
46
|
const UnreadCountBadge = ({ count }) => {
|
|
44
47
|
const styles = useStyles();
|
|
@@ -59,8 +62,8 @@ const useStyles = () => {
|
|
|
59
62
|
paddingBottom: 8,
|
|
60
63
|
paddingHorizontal: 16,
|
|
61
64
|
},
|
|
62
|
-
|
|
63
|
-
|
|
65
|
+
container: { flex: 1 },
|
|
66
|
+
contentContainer: { paddingVertical: 16 },
|
|
64
67
|
listItem: { color: colors.fillColorNeutral020 },
|
|
65
68
|
conversation: {
|
|
66
69
|
flexDirection: 'row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { FlashList } from '@shopify/flash-list'\nimport React from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'\nimport { useConversations } from '../hooks/use_conversations'\nimport { formatDatePreview } from '../utils/date'\nimport { AvatarGroup, Badge, Heading, Text, TextButton } from './display'\n\nexport const Conversations = () => {\n const styles = useStyles()\n\n const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()\n\n // TODO: Filter using the API\n const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []\n const navigation = useNavigation()\n\n useConversationsJoltEvents()\n\n return (\n <View style={styles.container}>\n <FlashList\n data={nonEmptyConversations}\n estimatedItemSize={97}\n contentContainerStyle={styles.contentContainer}\n onRefresh={refetch}\n refreshing={isRefetching}\n ListHeaderComponent={\n <View style={styles.header}>\n <Heading numberOfLines={1} variant=\"h2\">\n Conversations\n </Heading>\n <TextButton>Mark all read</TextButton>\n </View>\n }\n ListEmptyComponent={<Text>No conversations found</Text>}\n renderItem={({ item }) => (\n <Pressable\n style={styles.conversation}\n onPress={() =>\n navigation.navigate('Conversation', {\n conversation_id: item.id,\n chat_group_graph_id: item.id,\n })\n }\n >\n <AvatarGroup size=\"lg\" sourceUris={item.previewAvatarUrls || []} />\n <View style={styles.conversationBody}>\n <Heading numberOfLines={1} variant=\"h3\" style={styles.conversationTitle}>\n {item.title}\n </Heading>\n <Text style={styles.listItem} numberOfLines={2}>\n {item.lastMessageAuthorName}: {item.lastMessageTextPreview}\n </Text>\n <View style={styles.conversationBadges}>\n {item.badges?.map(badge => (\n <Badge\n key={badge.text}\n variant=\"meta\"\n productLogoName={badge.appName}\n label={badge.pcoResourceType}\n metaLabel={badge.text || ''}\n />\n ))}\n </View>\n </View>\n <View style={styles.conversationExtra}>\n <Text variant=\"secondary\">{formatDatePreview(item.lastMessageCreatedAt)}</Text>\n <UnreadCountBadge count={item.unreadCount} />\n </View>\n </Pressable>\n )}\n onEndReached={() => fetchNextPage()}\n />\n </View>\n )\n}\n\nconst UnreadCountBadge = ({ count }: { count: number }) => {\n const styles = useStyles()\n const displayCount = count > 99 ? '99+' : count\n\n if (count === 0) return null\n\n return (\n <Text variant=\"tertiary\" style={styles.unreadCountBadge}>\n {displayCount}\n </Text>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n header: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingTop: 8,\n paddingBottom: 8,\n paddingHorizontal: 16,\n },\n container: { flex: 1 },\n contentContainer: { paddingVertical: 16 },\n listItem: { color: colors.fillColorNeutral020 },\n conversation: {\n flexDirection: 'row',\n gap: 8,\n borderBottomWidth: 1,\n borderBottomColor: colors.fillColorNeutral060,\n paddingTop: 4,\n paddingBottom: 12,\n paddingHorizontal: 16,\n },\n conversationTitle: {},\n conversationBody: {\n flex: 1,\n rowGap: 2,\n },\n conversationExtra: {\n rowGap: 2,\n },\n conversationBadges: {\n marginTop: 4,\n alignItems: 'flex-start',\n },\n unreadCountBadge: {\n alignSelf: 'flex-end',\n backgroundColor: colors.interaction,\n paddingVertical: 0,\n paddingHorizontal: 10,\n borderRadius: 24,\n color: 'white',\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "2.2.0-rc.
|
|
3
|
+
"version": "2.2.0-rc.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"@react-navigation/elements": "*",
|
|
31
31
|
"@react-navigation/native": ">=7.0.0",
|
|
32
32
|
"@react-navigation/native-stack": ">=7.0.0",
|
|
33
|
+
"@shopify/flash-list": "*",
|
|
33
34
|
"@tanstack/react-query": "^5.0.0",
|
|
34
35
|
"color": "^3.1.2",
|
|
35
36
|
"lodash": "*",
|
|
@@ -51,5 +52,5 @@
|
|
|
51
52
|
"prettier": "^3.4.2",
|
|
52
53
|
"typescript": "<5.6.0"
|
|
53
54
|
},
|
|
54
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "7d3af0eba3806e4215c782bd9d48b9950c411a95"
|
|
55
56
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useNavigation } from '@react-navigation/native'
|
|
2
|
+
import { FlashList } from '@shopify/flash-list'
|
|
2
3
|
import React from 'react'
|
|
3
|
-
import {
|
|
4
|
+
import { Pressable, StyleSheet, View } from 'react-native'
|
|
4
5
|
import { useTheme } from '../hooks'
|
|
5
6
|
import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'
|
|
6
7
|
import { useConversations } from '../hooks/use_conversations'
|
|
@@ -19,59 +20,61 @@ export const Conversations = () => {
|
|
|
19
20
|
useConversationsJoltEvents()
|
|
20
21
|
|
|
21
22
|
return (
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<TextButton>Mark all read</TextButton>
|
|
34
|
-
</View>
|
|
35
|
-
}
|
|
36
|
-
ListEmptyComponent={<Text>No conversations found</Text>}
|
|
37
|
-
renderItem={({ item }) => (
|
|
38
|
-
<Pressable
|
|
39
|
-
style={styles.conversation}
|
|
40
|
-
onPress={() =>
|
|
41
|
-
navigation.navigate('Conversation', {
|
|
42
|
-
conversation_id: item.id,
|
|
43
|
-
chat_group_graph_id: item.id,
|
|
44
|
-
})
|
|
45
|
-
}
|
|
46
|
-
>
|
|
47
|
-
<AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []} />
|
|
48
|
-
<View style={styles.conversationBody}>
|
|
49
|
-
<Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
|
|
50
|
-
{item.title}
|
|
23
|
+
<View style={styles.container}>
|
|
24
|
+
<FlashList
|
|
25
|
+
data={nonEmptyConversations}
|
|
26
|
+
estimatedItemSize={97}
|
|
27
|
+
contentContainerStyle={styles.contentContainer}
|
|
28
|
+
onRefresh={refetch}
|
|
29
|
+
refreshing={isRefetching}
|
|
30
|
+
ListHeaderComponent={
|
|
31
|
+
<View style={styles.header}>
|
|
32
|
+
<Heading numberOfLines={1} variant="h2">
|
|
33
|
+
Conversations
|
|
51
34
|
</Heading>
|
|
52
|
-
<
|
|
53
|
-
{item.lastMessageAuthorName}: {item.lastMessageTextPreview}
|
|
54
|
-
</Text>
|
|
55
|
-
<View style={styles.conversationBadges}>
|
|
56
|
-
{item.badges?.map(badge => (
|
|
57
|
-
<Badge
|
|
58
|
-
key={badge.text}
|
|
59
|
-
variant="meta"
|
|
60
|
-
productLogoName={badge.appName}
|
|
61
|
-
label={badge.pcoResourceType}
|
|
62
|
-
metaLabel={badge.text || ''}
|
|
63
|
-
/>
|
|
64
|
-
))}
|
|
65
|
-
</View>
|
|
66
|
-
</View>
|
|
67
|
-
<View style={styles.conversationExtra}>
|
|
68
|
-
<Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
|
|
69
|
-
<UnreadCountBadge count={item.unreadCount} />
|
|
35
|
+
<TextButton>Mark all read</TextButton>
|
|
70
36
|
</View>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
37
|
+
}
|
|
38
|
+
ListEmptyComponent={<Text>No conversations found</Text>}
|
|
39
|
+
renderItem={({ item }) => (
|
|
40
|
+
<Pressable
|
|
41
|
+
style={styles.conversation}
|
|
42
|
+
onPress={() =>
|
|
43
|
+
navigation.navigate('Conversation', {
|
|
44
|
+
conversation_id: item.id,
|
|
45
|
+
chat_group_graph_id: item.id,
|
|
46
|
+
})
|
|
47
|
+
}
|
|
48
|
+
>
|
|
49
|
+
<AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []} />
|
|
50
|
+
<View style={styles.conversationBody}>
|
|
51
|
+
<Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
|
|
52
|
+
{item.title}
|
|
53
|
+
</Heading>
|
|
54
|
+
<Text style={styles.listItem} numberOfLines={2}>
|
|
55
|
+
{item.lastMessageAuthorName}: {item.lastMessageTextPreview}
|
|
56
|
+
</Text>
|
|
57
|
+
<View style={styles.conversationBadges}>
|
|
58
|
+
{item.badges?.map(badge => (
|
|
59
|
+
<Badge
|
|
60
|
+
key={badge.text}
|
|
61
|
+
variant="meta"
|
|
62
|
+
productLogoName={badge.appName}
|
|
63
|
+
label={badge.pcoResourceType}
|
|
64
|
+
metaLabel={badge.text || ''}
|
|
65
|
+
/>
|
|
66
|
+
))}
|
|
67
|
+
</View>
|
|
68
|
+
</View>
|
|
69
|
+
<View style={styles.conversationExtra}>
|
|
70
|
+
<Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
|
|
71
|
+
<UnreadCountBadge count={item.unreadCount} />
|
|
72
|
+
</View>
|
|
73
|
+
</Pressable>
|
|
74
|
+
)}
|
|
75
|
+
onEndReached={() => fetchNextPage()}
|
|
76
|
+
/>
|
|
77
|
+
</View>
|
|
75
78
|
)
|
|
76
79
|
}
|
|
77
80
|
|
|
@@ -99,8 +102,8 @@ const useStyles = () => {
|
|
|
99
102
|
paddingBottom: 8,
|
|
100
103
|
paddingHorizontal: 16,
|
|
101
104
|
},
|
|
102
|
-
|
|
103
|
-
|
|
105
|
+
container: { flex: 1 },
|
|
106
|
+
contentContainer: { paddingVertical: 16 },
|
|
104
107
|
listItem: { color: colors.fillColorNeutral020 },
|
|
105
108
|
conversation: {
|
|
106
109
|
flexDirection: 'row',
|