@planningcenter/chat-react-native 3.7.1-rc.0 → 3.7.1-rc.2

package/src/screens/reactions_screen.tsx

@@ -1,24 +1,26 @@
 import { StaticScreenProps } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import React from 'react'
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import React, { memo } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Avatar, Text } from '../components'
-import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
+import { REACTION_EMOJIS } from '../components/conversation/message_reaction'
 import { Tabs } from '../components/display/tabs'
 import { useSuspenseGet, useTheme } from '../hooks'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { MemberResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
-import { FlashList } from '@shopify/flash-list'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { platformFontWeightMedium } from '../utils'
+import { useFontScale } from '../hooks/use_font_scale'
 
-export const ReactionsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.5],
-  sheetGrabberVisible: true,
-  sheetCornerRadius: 16,
-}
+export const ReactionsScreenOptions = getFormSheetScreenOptions({
+  sheetAllowedDetents: Platform.select({
+    android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+    default: [0.5, 1],
+  }),
+  headerTitle: 'Reactions',
+})
 
 export type ReactionScreenProps = StaticScreenProps<{
   message_id: string
@@ -60,7 +62,7 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
   const authors = members.filter(member => authorIds.includes(member.id))
 
   return (
-    <View style={styles.container}>
+    <FormSheet.Root contentStyle={styles.formSheetContent}>
       <Tabs
         data={reactionCounts}
         activeTab={reactionCount}
@@ -76,17 +78,13 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
         )}
         style={styles.actions}
       />
-      <FlashList
+      <FlatList
         data={authors}
+        contentContainerStyle={styles.contentContainer}
         keyExtractor={item => item.id.toString()}
-        renderItem={({ item: author }) => (
-          <View style={styles.authorList}>
-            <Avatar size={'md'} sourceUri={author.avatar} />
-            <Text key={author.id}>{author.name}</Text>
-          </View>
-        )}
+        renderItem={({ item: author }) => <Author author={author} key={author.id} />}
       />
-    </View>
+    </FormSheet.Root>
   )
 }
 
@@ -98,47 +96,67 @@ const Reaction = ({
   onPress: () => void
 }) => {
   const styles = useStyles()
-  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })
 
   return (
     <View key={reaction.value} style={styles.reaction}>
-      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
-      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>
+      <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionContent}>{reaction.count}</Text>
     </View>
   )
 }
 
+type AuthorProps = Pick<MemberResource, 'id' | 'name' | 'avatar'>
+
+const Author = memo(({ author }: { author: AuthorProps }) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.authorRow}>
+      <Avatar sourceUri={author.avatar} size="sm" />
+      <Text variant="tertiary" numberOfLines={2} style={styles.authorName}>
+        {author.name}
+      </Text>
+    </View>
+  )
+})
+
 const useStyles = () => {
-  const theme = useTheme()
-  const { height } = useWindowDimensions()
+  const { colors } = useTheme()
   const { bottom } = useSafeAreaInsets()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
 
   return StyleSheet.create({
-    container: {
-      justifyContent: 'flex-start',
-      paddingTop: 12,
-      paddingBottom: bottom,
-      width: '100%',
-      backgroundColor: theme.colors.fillColorNeutral100Inverted,
-      height,
-      gap: 8,
+    formSheetContent: {
+      paddingTop: Platform.select({ android: 4, default: 16 }),
+    },
+    contentContainer: {
+      paddingTop: 8,
+      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
     },
-    authorList: {
+    authorRow: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8,
-      paddingHorizontal: 12,
-      paddingVertical: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      flex: 1,
+    },
+    authorName: {
+      flex: 1,
     },
     reaction: {
-      paddingVertical: 12,
-      paddingHorizontal: 12,
+      paddingHorizontal: 8,
+      paddingVertical: 16,
       flexDirection: 'row',
       gap: 4,
     },
+    reactionContent: {
+      fontSize: 18,
+      fontWeight: platformFontWeightMedium,
+    },
     actions: {
-      minHeight: 48,
-      borderBottomColor: theme.colors.fillColorNeutral040,
+      minHeight: 68 * fontScale,
+      borderBottomColor: colors.borderColorDefaultBase,
       borderBottomWidth: 1,
     },
     errorContainer: {

package/build/screens/conversation_filter_recipients/components/navigation_header.d.ts

@@ -1,5 +0,0 @@
-import { HeaderTitleProps } from '@react-navigation/elements';
-import React from 'react';
-export declare const FilterHeaderTitle: ({ tintColor }: HeaderTitleProps) => React.JSX.Element;
-export declare const HeaderRightWithContext: () => React.JSX.Element;
-//# sourceMappingURL=navigation_header.d.ts.map

package/build/screens/conversation_filter_recipients/components/navigation_header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation_header.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_filter_recipients/components/navigation_header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,eAAO,MAAM,iBAAiB,kBAAmB,gBAAgB,sBAIhE,CAAA;AA+BD,eAAO,MAAM,sBAAsB,yBAMlC,CAAA"}

package/build/screens/conversation_filter_recipients/components/navigation_header.js

@@ -1,46 +0,0 @@
-import { HeaderTitle } from '@react-navigation/elements';
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Button, TextButton } from '../../../components';
-import { useRoute } from '@react-navigation/native';
-import { tokens } from '../../../vendor/tapestry/tokens';
-import { FilterRecipientsProvider, useFilterRecipientsContext, } from '../context/conversation_filter_recipients_context';
-export const FilterHeaderTitle = ({ tintColor }) => {
-    const styles = useStyles();
-    return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Teams I lead</HeaderTitle>;
-};
-const HeaderRight = () => {
-    const styles = useStyles();
-    const route = useRoute();
-    const { resetTeamFilters, applyTeamFilters } = useFilterRecipientsContext();
-    const { team_ids } = route.params;
-    const noTeamsSelected = team_ids?.length === 0 || !team_ids;
-    const applyButtonAccessibilityHint = noTeamsSelected
-        ? 'Select at least one team to navigate to the final step in creating your conversation.'
-        : 'Saves selected teams and navigates to the final step to create your conversation.';
-    return (<View style={styles.headerRight}>
-      <TextButton onPress={resetTeamFilters} accessibilityHint="Cancels any selected teams and closes this modal.">
-        Cancel
-      </TextButton>
-      <Button title="Apply" accessibilityHint={applyButtonAccessibilityHint} onPress={() => applyTeamFilters(route.params)} disabled={noTeamsSelected}/>
-    </View>);
-};
-export const HeaderRightWithContext = () => {
-    return (<FilterRecipientsProvider>
-      <HeaderRight />
-    </FilterRecipientsProvider>);
-};
-const useStyles = () => {
-    return StyleSheet.create({
-        headerTitle: {
-            fontSize: tokens.fontSizeLg,
-            flex: 1,
-        },
-        headerRight: {
-            flexDirection: 'row',
-            gap: 16,
-            alignItems: 'center',
-        },
-    });
-};
-//# sourceMappingURL=navigation_header.js.map

package/build/screens/conversation_filter_recipients/components/navigation_header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation_header.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filter_recipients/components/navigation_header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAa,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EACL,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,mDAAmD,CAAA;AAG1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,SAAS,EAAoB,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAAA;AACnG,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAA+D,CAAA;IACrF,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,0BAA0B,EAAE,CAAA;IAE3E,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IACjC,MAAM,eAAe,GAAG,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAA;IAC3D,MAAM,4BAA4B,GAAG,eAAe;QAClD,CAAC,CAAC,uFAAuF;QACzF,CAAC,CAAC,mFAAmF,CAAA;IAEvF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;MAAA,CAAC,UAAU,CACT,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAC1B,iBAAiB,CAAC,mDAAmD,CAErE;;MACF,EAAE,UAAU,CACZ;MAAA,CAAC,MAAM,CACL,KAAK,CAAC,OAAO,CACb,iBAAiB,CAAC,CAAC,4BAA4B,CAAC,CAChD,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAC9C,QAAQ,CAAC,CAAC,eAAe,CAAC,EAE9B;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,OAAO,CACL,CAAC,wBAAwB,CACvB;MAAA,CAAC,WAAW,CAAC,AAAD,EACd;IAAA,EAAE,wBAAwB,CAAC,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,WAAW,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,IAAI,EAAE,CAAC;SACR;QACD,WAAW,EAAE;YACX,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,EAAE;YACP,UAAU,EAAE,QAAQ;SACrB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { HeaderTitle, HeaderTitleProps } from '@react-navigation/elements'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Button, TextButton } from '../../../components'\nimport { RouteProp, useRoute } from '@react-navigation/native'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport {\n  FilterRecipientsProvider,\n  useFilterRecipientsContext,\n} from '../context/conversation_filter_recipients_context'\nimport { ConversationFilterRecipientsScreenProps } from '../types'\n\nexport const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {\n  const styles = useStyles()\n\n  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Teams I lead</HeaderTitle>\n}\n\nconst HeaderRight = () => {\n  const styles = useStyles()\n  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()\n  const { resetTeamFilters, applyTeamFilters } = useFilterRecipientsContext()\n\n  const { team_ids } = route.params\n  const noTeamsSelected = team_ids?.length === 0 || !team_ids\n  const applyButtonAccessibilityHint = noTeamsSelected\n    ? 'Select at least one team to navigate to the final step in creating your conversation.'\n    : 'Saves selected teams and navigates to the final step to create your conversation.'\n\n  return (\n    <View style={styles.headerRight}>\n      <TextButton\n        onPress={resetTeamFilters}\n        accessibilityHint=\"Cancels any selected teams and closes this modal.\"\n      >\n        Cancel\n      </TextButton>\n      <Button\n        title=\"Apply\"\n        accessibilityHint={applyButtonAccessibilityHint}\n        onPress={() => applyTeamFilters(route.params)}\n        disabled={noTeamsSelected}\n      />\n    </View>\n  )\n}\n\nexport const HeaderRightWithContext = () => {\n  return (\n    <FilterRecipientsProvider>\n      <HeaderRight />\n    </FilterRecipientsProvider>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    headerTitle: {\n      fontSize: tokens.fontSizeLg,\n      flex: 1,\n    },\n    headerRight: {\n      flexDirection: 'row',\n      gap: 16,\n      alignItems: 'center',\n    },\n  })\n}\n"]}

package/build/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { PropsWithChildren } from 'react';
-import { ConversationFilterRecipientsParams } from '../types';
-export declare const FilterRecipientsContext: React.Context<{
-    params: ConversationFilterRecipientsParams;
-    resetTeamFilters: () => void;
-    setTeamFilters: (params: ConversationFilterRecipientsParams) => void;
-    applyTeamFilters: (params: ConversationFilterRecipientsParams) => void;
-}>;
-export declare const FilterRecipientsProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const useFilterRecipientsContext: () => {
-    params: ConversationFilterRecipientsParams;
-    resetTeamFilters: () => void;
-    setTeamFilters: (params: ConversationFilterRecipientsParams) => void;
-    applyTeamFilters: (params: ConversationFilterRecipientsParams) => void;
-};
-//# sourceMappingURL=conversation_filter_recipients_context.d.ts.map

package/build/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversation_filter_recipients_context.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,EACL,kCAAkC,EAEnC,MAAM,UAAU,CAAA;AAGjB,eAAO,MAAM,uBAAuB;YAC1B,kCAAkC;sBACxB,MAAM,IAAI;oBACZ,CAAC,MAAM,EAAE,kCAAkC,KAAK,IAAI;sBAClD,CAAC,MAAM,EAAE,kCAAkC,KAAK,IAAI;EAStE,CAAA;AAEF,eAAO,MAAM,wBAAwB,iBAAkB,iBAAiB,sBAwBvE,CAAA;AAED,eAAO,MAAM,0BAA0B;YAxC7B,kCAAkC;sBACxB,MAAM,IAAI;oBACZ,CAAC,MAAM,EAAE,kCAAkC,KAAK,IAAI;sBAClD,CAAC,MAAM,EAAE,kCAAkC,KAAK,IAAI;CAuCvE,CAAA"}

package/build/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { createContext } from 'react';
-import { StackActions, useNavigation, useRoute } from '@react-navigation/native';
-export const FilterRecipientsContext = createContext({
-    params: {
-        source_app_name: undefined,
-        team_ids: [],
-    },
-    resetTeamFilters: () => { },
-    setTeamFilters: () => { },
-    applyTeamFilters: () => { },
-});
-export const FilterRecipientsProvider = ({ children }) => {
-    const navigation = useNavigation();
-    const route = useRoute();
-    const filterContextValue = {
-        params: route.params,
-        resetTeamFilters: () => {
-            navigation.goBack();
-        },
-        setTeamFilters: (params) => {
-            navigation.setParams({
-                team_ids: params.team_ids,
-            });
-        },
-        applyTeamFilters: (params) => {
-            navigation.dispatch(StackActions.popTo('ConversationNew', params));
-        },
-    };
-    return (<FilterRecipientsContext.Provider value={filterContextValue}>
-      {children}
-    </FilterRecipientsContext.Provider>);
-};
-export const useFilterRecipientsContext = () => {
-    return React.useContext(FilterRecipientsContext);
-};
-//# sourceMappingURL=conversation_filter_recipients_context.js.map

package/build/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversation_filter_recipients_context.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAA;AACxD,OAAO,EAAa,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAO3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAKjD;IACD,MAAM,EAAE;QACN,eAAe,EAAE,SAAS;QAC1B,QAAQ,EAAE,EAAE;KACb;IACD,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC1E,MAAM,UAAU,GACd,aAAa,EAAsE,CAAA;IACrF,MAAM,KAAK,GAAG,QAAQ,EAA+D,CAAA;IACrF,MAAM,kBAAkB,GAAG;QACzB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,gBAAgB,EAAE,GAAG,EAAE;YACrB,UAAU,CAAC,MAAM,EAAE,CAAA;QACrB,CAAC;QACD,cAAc,EAAE,CAAC,MAAmE,EAAE,EAAE;YACtF,UAAU,CAAC,SAAS,CAAC;gBACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;aAC1B,CAAC,CAAA;QACJ,CAAC;QACD,gBAAgB,EAAE,CAAC,MAA0C,EAAE,EAAE;YAC/D,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;QACpE,CAAC;KACF,CAAA;IAED,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC1D;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAA;AAClD,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { createContext, PropsWithChildren } from 'react'\nimport { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'\nimport {\n  ConversationFilterRecipientsParams,\n  ConversationFilterRecipientsScreenProps,\n} from '../types'\nimport { NativeStackNavigationProp } from '@react-navigation/native-stack'\n\nexport const FilterRecipientsContext = createContext<{\n  params: ConversationFilterRecipientsParams\n  resetTeamFilters: () => void\n  setTeamFilters: (params: ConversationFilterRecipientsParams) => void\n  applyTeamFilters: (params: ConversationFilterRecipientsParams) => void\n}>({\n  params: {\n    source_app_name: undefined,\n    team_ids: [],\n  },\n  resetTeamFilters: () => {},\n  setTeamFilters: () => {},\n  applyTeamFilters: () => {},\n})\n\nexport const FilterRecipientsProvider = ({ children }: PropsWithChildren) => {\n  const navigation =\n    useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()\n  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()\n  const filterContextValue = {\n    params: route.params,\n    resetTeamFilters: () => {\n      navigation.goBack()\n    },\n    setTeamFilters: (params: Omit<ConversationFilterRecipientsParams, 'source_app_name'>) => {\n      navigation.setParams({\n        team_ids: params.team_ids,\n      })\n    },\n    applyTeamFilters: (params: ConversationFilterRecipientsParams) => {\n      navigation.dispatch(StackActions.popTo('ConversationNew', params))\n    },\n  }\n\n  return (\n    <FilterRecipientsContext.Provider value={filterContextValue}>\n      {children}\n    </FilterRecipientsContext.Provider>\n  )\n}\n\nexport const useFilterRecipientsContext = () => {\n  return React.useContext(FilterRecipientsContext)\n}\n"]}

package/src/screens/conversation_filter_recipients/components/navigation_header.tsx

@@ -1,68 +0,0 @@
-import { HeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Button, TextButton } from '../../../components'
-import { RouteProp, useRoute } from '@react-navigation/native'
-import { tokens } from '../../../vendor/tapestry/tokens'
-import {
-  FilterRecipientsProvider,
-  useFilterRecipientsContext,
-} from '../context/conversation_filter_recipients_context'
-import { ConversationFilterRecipientsScreenProps } from '../types'
-
-export const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {
-  const styles = useStyles()
-
-  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Teams I lead</HeaderTitle>
-}
-
-const HeaderRight = () => {
-  const styles = useStyles()
-  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
-  const { resetTeamFilters, applyTeamFilters } = useFilterRecipientsContext()
-
-  const { team_ids } = route.params
-  const noTeamsSelected = team_ids?.length === 0 || !team_ids
-  const applyButtonAccessibilityHint = noTeamsSelected
-    ? 'Select at least one team to navigate to the final step in creating your conversation.'
-    : 'Saves selected teams and navigates to the final step to create your conversation.'
-
-  return (
-    <View style={styles.headerRight}>
-      <TextButton
-        onPress={resetTeamFilters}
-        accessibilityHint="Cancels any selected teams and closes this modal."
-      >
-        Cancel
-      </TextButton>
-      <Button
-        title="Apply"
-        accessibilityHint={applyButtonAccessibilityHint}
-        onPress={() => applyTeamFilters(route.params)}
-        disabled={noTeamsSelected}
-      />
-    </View>
-  )
-}
-
-export const HeaderRightWithContext = () => {
-  return (
-    <FilterRecipientsProvider>
-      <HeaderRight />
-    </FilterRecipientsProvider>
-  )
-}
-
-const useStyles = () => {
-  return StyleSheet.create({
-    headerTitle: {
-      fontSize: tokens.fontSizeLg,
-      flex: 1,
-    },
-    headerRight: {
-      flexDirection: 'row',
-      gap: 16,
-      alignItems: 'center',
-    },
-  })
-}

package/src/screens/conversation_filter_recipients/context/conversation_filter_recipients_context.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { createContext, PropsWithChildren } from 'react'
-import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
-import {
-  ConversationFilterRecipientsParams,
-  ConversationFilterRecipientsScreenProps,
-} from '../types'
-import { NativeStackNavigationProp } from '@react-navigation/native-stack'
-
-export const FilterRecipientsContext = createContext<{
-  params: ConversationFilterRecipientsParams
-  resetTeamFilters: () => void
-  setTeamFilters: (params: ConversationFilterRecipientsParams) => void
-  applyTeamFilters: (params: ConversationFilterRecipientsParams) => void
-}>({
-  params: {
-    source_app_name: undefined,
-    team_ids: [],
-  },
-  resetTeamFilters: () => {},
-  setTeamFilters: () => {},
-  applyTeamFilters: () => {},
-})
-
-export const FilterRecipientsProvider = ({ children }: PropsWithChildren) => {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()
-  const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
-  const filterContextValue = {
-    params: route.params,
-    resetTeamFilters: () => {
-      navigation.goBack()
-    },
-    setTeamFilters: (params: Omit<ConversationFilterRecipientsParams, 'source_app_name'>) => {
-      navigation.setParams({
-        team_ids: params.team_ids,
-      })
-    },
-    applyTeamFilters: (params: ConversationFilterRecipientsParams) => {
-      navigation.dispatch(StackActions.popTo('ConversationNew', params))
-    },
-  }
-
-  return (
-    <FilterRecipientsContext.Provider value={filterContextValue}>
-      {children}
-    </FilterRecipientsContext.Provider>
-  )
-}
-
-export const useFilterRecipientsContext = () => {
-  return React.useContext(FilterRecipientsContext)
-}