@planningcenter/chat-react-native 3.2.0-rc.12 → 3.2.0-rc.13

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":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,KAAK,uCAAuC,GAAG,iBAAiB,CAAC;IAC/D,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAMF,eAAO,MAAM,kCAAkC,OAAQ,uCAAuC,sBAiE7F,CAAA"}
1
+ {"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,KAAK,uCAAuC,GAAG,iBAAiB,CAAC;IAC/D,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAMF,eAAO,MAAM,kCAAkC,OAAQ,uCAAuC,sBA0E7F,CAAA"}
@@ -6,6 +6,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
6
6
  import { Button, Heading, Icon, Image, Text } from '../../components';
7
7
  import { useTheme } from '../../hooks';
8
8
  import { useGroupsGroups } from '../../hooks/use_groups_groups';
9
+ import { platformFontWeightMedium, pluralize } from '../../utils';
9
10
  const ASPECT_RATIO = 16 / 9;
10
11
  const THUMBNAIL_WIDTH = 80;
11
12
  const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
@@ -26,22 +27,27 @@ export const ConversationSelectRecipientsScreen = ({}) => {
26
27
  return (<ScrollView style={styles.container}>
27
28
  <View style={styles.section}>
28
29
  <View style={styles.sectionHeader}>
29
- <Heading>My groups</Heading>
30
+ <Heading variant="h3">My groups</Heading>
30
31
  </View>
31
32
  <View>
32
- {groupsWithCreatePermission.map(group => (<PlatformPressable key={group.id} style={styles.row} onPress={() => handleNavigateToConversationNew(group)}>
33
- <Image source={{ uri: group.headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt={`Image for ${group.name}`}/>
34
- <View>
35
- <Heading variant="h3">{group.name}</Heading>
36
- <Text>{group.membershipsCount} members</Text>
37
- </View>
38
- <Icon name="general.rightChevron" size={16} style={styles.rowIconRight}/>
39
- </PlatformPressable>))}
33
+ {groupsWithCreatePermission.map(group => {
34
+ const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
35
+ return (<PlatformPressable key={group.id} style={styles.row} onPress={() => handleNavigateToConversationNew(group)} accessibilityRole="link" accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}>
36
+ <Image source={{ uri: group.headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt=""/>
37
+ <View style={styles.rowContent}>
38
+ <Text style={styles.rowName} numberOfLines={2}>
39
+ {group.name}
40
+ </Text>
41
+ <Text variant="tertiary">{group.membershipsCount} members</Text>
42
+ </View>
43
+ <Icon name="general.rightChevron" size={16} style={styles.rowIconRight}/>
44
+ </PlatformPressable>);
45
+ })}
40
46
  </View>
41
47
  </View>
42
48
  <View style={styles.section}>
43
49
  <View style={styles.sectionHeader}>
44
- <Heading>Teams I lead</Heading>
50
+ <Heading variant="h3">Teams I lead</Heading>
45
51
  <Button style={styles.selectTeamsButton} onPress={() => navigation.navigate('New', {
46
52
  screen: 'ConversationFilterRecipients',
47
53
  params: {
@@ -82,6 +88,13 @@ const useStyles = () => {
82
88
  height: THUMBNAIL_HEIGHT,
83
89
  borderRadius: 4,
84
90
  },
91
+ rowName: {
92
+ fontWeight: platformFontWeightMedium,
93
+ flexShrink: 1,
94
+ },
95
+ rowContent: {
96
+ flexShrink: 1,
97
+ },
85
98
  rowIconRight: {
86
99
  marginLeft: 'auto',
87
100
  color: theme.colors.fillColorNeutral030,
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, Heading, Icon, Image, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\n\ntype ConversationSelectRecipientsScreenProps = StaticScreenProps<{\n chat_group_graph_id?: string\n}>\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nexport const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {\n const styles = useStyles()\n const navigation = useNavigation()\n const { data: groups = [] } = useGroupsGroups()\n const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n\n const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n group_id: group.id,\n source_app_name: 'Groups',\n },\n })\n }\n\n return (\n <ScrollView style={styles.container}>\n <View style={styles.section}>\n <View style={styles.sectionHeader}>\n <Heading>My groups</Heading>\n </View>\n <View>\n {groupsWithCreatePermission.map(group => (\n <PlatformPressable\n key={group.id}\n style={styles.row}\n onPress={() => handleNavigateToConversationNew(group)}\n >\n <Image\n source={{ uri: group.headerImage?.thumbnail }}\n resizeMode=\"cover\"\n style={styles.rowImage}\n alt={`Image for ${group.name}`}\n />\n <View>\n <Heading variant=\"h3\">{group.name}</Heading>\n <Text>{group.membershipsCount} members</Text>\n </View>\n <Icon name=\"general.rightChevron\" size={16} style={styles.rowIconRight} />\n </PlatformPressable>\n ))}\n </View>\n </View>\n <View style={styles.section}>\n <View style={styles.sectionHeader}>\n <Heading>Teams I lead</Heading>\n <Button\n style={styles.selectTeamsButton}\n onPress={() =>\n navigation.navigate('New', {\n screen: 'ConversationFilterRecipients',\n params: {\n conversation_id: '2196252',\n },\n })\n }\n title=\"Select teams\"\n variant=\"outline\"\n iconNameLeft=\"general.search\"\n />\n </View>\n </View>\n </ScrollView>\n )\n}\n\nconst useStyles = () => {\n const { bottom } = useSafeAreaInsets()\n const theme = useTheme()\n\n return StyleSheet.create({\n container: {\n flex: 1,\n gap: 8,\n },\n section: {\n padding: 16,\n flex: 1,\n },\n sectionHeader: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n selectTeamsButton: {},\n row: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n paddingVertical: 16,\n borderBottomWidth: 1,\n borderColor: theme.colors.fillColorNeutral050Base,\n },\n rowImage: {\n width: THUMBNAIL_WIDTH,\n height: THUMBNAIL_HEIGHT,\n borderRadius: 4,\n },\n rowIconRight: {\n marginLeft: 'auto',\n color: theme.colors.fillColorNeutral030,\n },\n routeDebug: {\n alignContent: 'center',\n padding: 16,\n paddingBottom: bottom,\n borderTopWidth: 1,\n borderTopColor: theme.colors.fillColorNeutral050Base,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, Heading, Icon, Image, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { platformFontWeightMedium, pluralize } from '../../utils'\n\ntype ConversationSelectRecipientsScreenProps = StaticScreenProps<{\n chat_group_graph_id?: string\n}>\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nexport const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {\n const styles = useStyles()\n const navigation = useNavigation()\n const { data: groups = [] } = useGroupsGroups()\n const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n\n const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n group_id: group.id,\n source_app_name: 'Groups',\n },\n })\n }\n\n return (\n <ScrollView style={styles.container}>\n <View style={styles.section}>\n <View style={styles.sectionHeader}>\n <Heading variant=\"h3\">My groups</Heading>\n </View>\n <View>\n {groupsWithCreatePermission.map(group => {\n const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n return (\n <PlatformPressable\n key={group.id}\n style={styles.row}\n onPress={() => handleNavigateToConversationNew(group)}\n accessibilityRole=\"link\"\n accessibilityLabel={groupAccessibilityLabel}\n accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}\n >\n <Image\n source={{ uri: group.headerImage?.thumbnail }}\n resizeMode=\"cover\"\n style={styles.rowImage}\n alt=\"\"\n />\n <View style={styles.rowContent}>\n <Text style={styles.rowName} numberOfLines={2}>\n {group.name}\n </Text>\n <Text variant=\"tertiary\">{group.membershipsCount} members</Text>\n </View>\n <Icon name=\"general.rightChevron\" size={16} style={styles.rowIconRight} />\n </PlatformPressable>\n )\n })}\n </View>\n </View>\n <View style={styles.section}>\n <View style={styles.sectionHeader}>\n <Heading variant=\"h3\">Teams I lead</Heading>\n <Button\n style={styles.selectTeamsButton}\n onPress={() =>\n navigation.navigate('New', {\n screen: 'ConversationFilterRecipients',\n params: {\n conversation_id: '2196252',\n },\n })\n }\n title=\"Select teams\"\n variant=\"outline\"\n iconNameLeft=\"general.search\"\n />\n </View>\n </View>\n </ScrollView>\n )\n}\n\nconst useStyles = () => {\n const { bottom } = useSafeAreaInsets()\n const theme = useTheme()\n\n return StyleSheet.create({\n container: {\n flex: 1,\n gap: 8,\n },\n section: {\n padding: 16,\n flex: 1,\n },\n sectionHeader: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n selectTeamsButton: {},\n row: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n paddingVertical: 16,\n borderBottomWidth: 1,\n borderColor: theme.colors.fillColorNeutral050Base,\n },\n rowImage: {\n width: THUMBNAIL_WIDTH,\n height: THUMBNAIL_HEIGHT,\n borderRadius: 4,\n },\n rowName: {\n fontWeight: platformFontWeightMedium,\n flexShrink: 1,\n },\n rowContent: {\n flexShrink: 1,\n },\n rowIconRight: {\n marginLeft: 'auto',\n color: theme.colors.fillColorNeutral030,\n },\n routeDebug: {\n alignContent: 'center',\n padding: 16,\n paddingBottom: bottom,\n borderTopWidth: 1,\n borderTopColor: theme.colors.fillColorNeutral050Base,\n },\n })\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "3.2.0-rc.12",
3
+ "version": "3.2.0-rc.13",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
55
55
  "prettier": "^3.4.2",
56
56
  "typescript": "<5.6.0"
57
57
  },
58
- "gitHead": "b374cd9a0b9a3faf657784f6813d0b2c932b2a23"
58
+ "gitHead": "f92738159a8bae777137447de7cc6df609e65a98"
59
59
  }
@@ -7,6 +7,7 @@ import { Button, Heading, Icon, Image, Text } from '../../components'
7
7
  import { useTheme } from '../../hooks'
8
8
  import { GroupsGroupResource } from '../../types'
9
9
  import { useGroupsGroups } from '../../hooks/use_groups_groups'
10
+ import { platformFontWeightMedium, pluralize } from '../../utils'
10
11
 
11
12
  type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
12
13
  chat_group_graph_id?: string
@@ -36,33 +37,42 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
36
37
  <ScrollView style={styles.container}>
37
38
  <View style={styles.section}>
38
39
  <View style={styles.sectionHeader}>
39
- <Heading>My groups</Heading>
40
+ <Heading variant="h3">My groups</Heading>
40
41
  </View>
41
42
  <View>
42
- {groupsWithCreatePermission.map(group => (
43
- <PlatformPressable
44
- key={group.id}
45
- style={styles.row}
46
- onPress={() => handleNavigateToConversationNew(group)}
47
- >
48
- <Image
49
- source={{ uri: group.headerImage?.thumbnail }}
50
- resizeMode="cover"
51
- style={styles.rowImage}
52
- alt={`Image for ${group.name}`}
53
- />
54
- <View>
55
- <Heading variant="h3">{group.name}</Heading>
56
- <Text>{group.membershipsCount} members</Text>
57
- </View>
58
- <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
59
- </PlatformPressable>
60
- ))}
43
+ {groupsWithCreatePermission.map(group => {
44
+ const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
45
+
46
+ return (
47
+ <PlatformPressable
48
+ key={group.id}
49
+ style={styles.row}
50
+ onPress={() => handleNavigateToConversationNew(group)}
51
+ accessibilityRole="link"
52
+ accessibilityLabel={groupAccessibilityLabel}
53
+ accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}
54
+ >
55
+ <Image
56
+ source={{ uri: group.headerImage?.thumbnail }}
57
+ resizeMode="cover"
58
+ style={styles.rowImage}
59
+ alt=""
60
+ />
61
+ <View style={styles.rowContent}>
62
+ <Text style={styles.rowName} numberOfLines={2}>
63
+ {group.name}
64
+ </Text>
65
+ <Text variant="tertiary">{group.membershipsCount} members</Text>
66
+ </View>
67
+ <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
68
+ </PlatformPressable>
69
+ )
70
+ })}
61
71
  </View>
62
72
  </View>
63
73
  <View style={styles.section}>
64
74
  <View style={styles.sectionHeader}>
65
- <Heading>Teams I lead</Heading>
75
+ <Heading variant="h3">Teams I lead</Heading>
66
76
  <Button
67
77
  style={styles.selectTeamsButton}
68
78
  onPress={() =>
@@ -114,6 +124,13 @@ const useStyles = () => {
114
124
  height: THUMBNAIL_HEIGHT,
115
125
  borderRadius: 4,
116
126
  },
127
+ rowName: {
128
+ fontWeight: platformFontWeightMedium,
129
+ flexShrink: 1,
130
+ },
131
+ rowContent: {
132
+ flexShrink: 1,
133
+ },
117
134
  rowIconRight: {
118
135
  marginLeft: 'auto',
119
136
  color: theme.colors.fillColorNeutral030,