@planningcenter/chat-react-native 3.15.0-rc.3 → 3.15.0-rc.5

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.
Files changed (16) hide show
  1. package/build/components/conversations/conversation_actions.js +1 -1
  2. package/build/components/conversations/conversation_actions.js.map +1 -1
  3. package/build/screens/conversation_filters/components/conversation_filters.js +9 -7
  4. package/build/screens/conversation_filters/components/conversation_filters.js.map +1 -1
  5. package/build/screens/conversation_filters/components/rows.d.ts.map +1 -1
  6. package/build/screens/conversation_filters/components/rows.js +50 -31
  7. package/build/screens/conversation_filters/components/rows.js.map +1 -1
  8. package/build/utils/theme.d.ts +1 -0
  9. package/build/utils/theme.d.ts.map +1 -1
  10. package/build/utils/theme.js +2 -0
  11. package/build/utils/theme.js.map +1 -1
  12. package/package.json +2 -2
  13. package/src/components/conversations/conversation_actions.tsx +1 -1
  14. package/src/screens/conversation_filters/components/conversation_filters.tsx +10 -7
  15. package/src/screens/conversation_filters/components/rows.tsx +63 -50
  16. package/src/utils/theme.ts +3 -0
package/build/components/conversations/conversation_actions.js CHANGED
@@ -105,7 +105,7 @@ const useStyles = () => {
105
105
  const { colors } = useTheme();
106
106
  return StyleSheet.create({
107
107
  swipeableChildContainer: {
108
- backgroundColor: colors.surfaceColor100,
108
+ backgroundColor: colors.conversationActionsBackground,
109
109
  },
110
110
  actionButtonContainer: {
111
111
  flexDirection: 'row',
package/build/components/conversations/conversation_actions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport {\n AccessibilityActionEvent,\n Platform,\n Pressable,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native'\nimport ReanimatedSwipeable, {\n SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n useConversationsMarkRead,\n useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { SwipeableToggleButton } from './swipeable_toggle_button'\n\nexport function ConversationActions({\n children,\n conversation,\n style,\n onPress,\n accessibilityLabel,\n}: {\n children: ReactNode\n conversation: ConversationResource\n onPress: () => void\n style?: StyleProp<ViewStyle>\n accessibilityLabel?: string\n}) {\n const swipeableRef = useRef<SwipeableMethods>(null)\n const styles = useStyles()\n const { activeConversationId, setActiveConversationId } = useConversationsContext()\n const [disabled, setDisabled] = useState(false)\n const overshootLeft = Platform.OS === 'ios'\n const androidRippleColor = useCreateAndroidRippleColor({\n color: styles.swipeableChildContainer.backgroundColor,\n })\n const { muted, setMuted, isPending: isMutedPending } = useConversationsMute({ conversation })\n const {\n read,\n markRead,\n isPending: isMarkReadPending,\n } = useConversationsMarkRead({\n conversation,\n })\n\n const isConversationEmpty = conversation.lastMessageCreatedAt === null\n\n const handleSwipeableClose = useCallback(() => {\n setDisabled(false)\n swipeableRef.current?.close()\n }, [setDisabled])\n\n const handleSwipeableOpen = () => {\n setDisabled(true)\n setActiveConversationId(conversation.id)\n }\n\n const handlePress = useCallback(() => {\n if (disabled || !onPress) return\n onPress()\n }, [disabled, onPress])\n\n const handleMute = useCallback(() => {\n setMuted(!muted)\n handleSwipeableClose()\n }, [muted, handleSwipeableClose, setMuted])\n\n const handleLatestMessageUnread = useCallback(() => {\n markRead(!read)\n handleSwipeableClose()\n }, [read, handleSwipeableClose, markRead])\n\n const readAccessibilityAction = !isConversationEmpty\n ? [\n {\n name: read ? 'markUnread' : 'markRead',\n label: read ? 'Mark unread' : 'Mark read',\n },\n ]\n : []\n\n const accessibilityActions = [\n {\n name: muted ? 'unmute' : 'mute',\n label: muted ? 'Unmute' : 'Mute',\n },\n ...readAccessibilityAction,\n ]\n\n const handleAccessibilityAction = useCallback(\n (event: AccessibilityActionEvent) => {\n switch (event.nativeEvent.actionName) {\n case 'markRead':\n handleLatestMessageUnread()\n break\n case 'markUnread':\n handleLatestMessageUnread()\n break\n case 'mute':\n handleMute()\n break\n case 'unmute':\n handleMute()\n break\n }\n },\n [handleLatestMessageUnread, handleMute]\n )\n\n useEffect(() => {\n if (activeConversationId === conversation.id) return\n\n handleSwipeableClose()\n }, [activeConversationId, conversation.id, handleSwipeableClose])\n\n return (\n <ReanimatedSwipeable\n ref={swipeableRef}\n childrenContainerStyle={styles.swipeableChildContainer}\n containerStyle={styles.swipeableContainer}\n overshootFriction={8}\n overshootLeft={overshootLeft}\n overshootRight={false}\n onSwipeableOpenStartDrag={handleSwipeableOpen}\n onSwipeableClose={() => setDisabled(false)}\n renderRightActions={() => <></>}\n renderLeftActions={() => (\n <LeftActions\n isConversationEmpty={isConversationEmpty}\n handleMute={handleMute}\n handleLatestMessageUnread={handleLatestMessageUnread}\n muted={muted}\n read={read}\n isMutedPending={isMutedPending}\n isMarkReadPending={isMarkReadPending}\n />\n )}\n >\n <Pressable\n onPress={handlePress}\n style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={handleAccessibilityAction}\n >\n {children}\n </Pressable>\n </ReanimatedSwipeable>\n )\n}\n\ninterface LeftActionsProps {\n isConversationEmpty: boolean\n handleMute: () => void\n handleLatestMessageUnread: () => void\n muted: boolean\n read: boolean\n isMutedPending: boolean\n isMarkReadPending: boolean\n}\n\nfunction LeftActions({\n isConversationEmpty,\n handleMute,\n handleLatestMessageUnread,\n muted,\n read,\n isMutedPending,\n isMarkReadPending,\n}: LeftActionsProps) {\n const styles = useStyles()\n\n const muteToggleContent = {\n true: { iconName: 'general.bell', label: 'Unmute' },\n false: { iconName: 'general.bellMuted', label: 'Mute' },\n } as const\n\n const latestMessageUnreadToggleContent = {\n true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n } as const\n\n return (\n <View style={styles.actionButtonContainer}>\n <SwipeableToggleButton\n loading={isMarkReadPending}\n disabled={isConversationEmpty}\n toggled={!read}\n onPress={handleLatestMessageUnread}\n toggleContent={latestMessageUnreadToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeDefault}\n />\n <SwipeableToggleButton\n loading={isMutedPending}\n toggled={muted}\n onPress={handleMute}\n toggleContent={muteToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n />\n </View>\n )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n swipeableChildContainer: {\n backgroundColor: colors.surfaceColor100,\n },\n actionButtonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n alignContent: 'stretch',\n },\n swipeableContainer: {\n backgroundColor: colors.surfaceColor090,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport {\n AccessibilityActionEvent,\n Platform,\n Pressable,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native'\nimport ReanimatedSwipeable, {\n SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n useConversationsMarkRead,\n useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { SwipeableToggleButton } from './swipeable_toggle_button'\n\nexport function ConversationActions({\n children,\n conversation,\n style,\n onPress,\n accessibilityLabel,\n}: {\n children: ReactNode\n conversation: ConversationResource\n onPress: () => void\n style?: StyleProp<ViewStyle>\n accessibilityLabel?: string\n}) {\n const swipeableRef = useRef<SwipeableMethods>(null)\n const styles = useStyles()\n const { activeConversationId, setActiveConversationId } = useConversationsContext()\n const [disabled, setDisabled] = useState(false)\n const overshootLeft = Platform.OS === 'ios'\n const androidRippleColor = useCreateAndroidRippleColor({\n color: styles.swipeableChildContainer.backgroundColor,\n })\n const { muted, setMuted, isPending: isMutedPending } = useConversationsMute({ conversation })\n const {\n read,\n markRead,\n isPending: isMarkReadPending,\n } = useConversationsMarkRead({\n conversation,\n })\n\n const isConversationEmpty = conversation.lastMessageCreatedAt === null\n\n const handleSwipeableClose = useCallback(() => {\n setDisabled(false)\n swipeableRef.current?.close()\n }, [setDisabled])\n\n const handleSwipeableOpen = () => {\n setDisabled(true)\n setActiveConversationId(conversation.id)\n }\n\n const handlePress = useCallback(() => {\n if (disabled || !onPress) return\n onPress()\n }, [disabled, onPress])\n\n const handleMute = useCallback(() => {\n setMuted(!muted)\n handleSwipeableClose()\n }, [muted, handleSwipeableClose, setMuted])\n\n const handleLatestMessageUnread = useCallback(() => {\n markRead(!read)\n handleSwipeableClose()\n }, [read, handleSwipeableClose, markRead])\n\n const readAccessibilityAction = !isConversationEmpty\n ? [\n {\n name: read ? 'markUnread' : 'markRead',\n label: read ? 'Mark unread' : 'Mark read',\n },\n ]\n : []\n\n const accessibilityActions = [\n {\n name: muted ? 'unmute' : 'mute',\n label: muted ? 'Unmute' : 'Mute',\n },\n ...readAccessibilityAction,\n ]\n\n const handleAccessibilityAction = useCallback(\n (event: AccessibilityActionEvent) => {\n switch (event.nativeEvent.actionName) {\n case 'markRead':\n handleLatestMessageUnread()\n break\n case 'markUnread':\n handleLatestMessageUnread()\n break\n case 'mute':\n handleMute()\n break\n case 'unmute':\n handleMute()\n break\n }\n },\n [handleLatestMessageUnread, handleMute]\n )\n\n useEffect(() => {\n if (activeConversationId === conversation.id) return\n\n handleSwipeableClose()\n }, [activeConversationId, conversation.id, handleSwipeableClose])\n\n return (\n <ReanimatedSwipeable\n ref={swipeableRef}\n childrenContainerStyle={styles.swipeableChildContainer}\n containerStyle={styles.swipeableContainer}\n overshootFriction={8}\n overshootLeft={overshootLeft}\n overshootRight={false}\n onSwipeableOpenStartDrag={handleSwipeableOpen}\n onSwipeableClose={() => setDisabled(false)}\n renderRightActions={() => <></>}\n renderLeftActions={() => (\n <LeftActions\n isConversationEmpty={isConversationEmpty}\n handleMute={handleMute}\n handleLatestMessageUnread={handleLatestMessageUnread}\n muted={muted}\n read={read}\n isMutedPending={isMutedPending}\n isMarkReadPending={isMarkReadPending}\n />\n )}\n >\n <Pressable\n onPress={handlePress}\n style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={handleAccessibilityAction}\n >\n {children}\n </Pressable>\n </ReanimatedSwipeable>\n )\n}\n\ninterface LeftActionsProps {\n isConversationEmpty: boolean\n handleMute: () => void\n handleLatestMessageUnread: () => void\n muted: boolean\n read: boolean\n isMutedPending: boolean\n isMarkReadPending: boolean\n}\n\nfunction LeftActions({\n isConversationEmpty,\n handleMute,\n handleLatestMessageUnread,\n muted,\n read,\n isMutedPending,\n isMarkReadPending,\n}: LeftActionsProps) {\n const styles = useStyles()\n\n const muteToggleContent = {\n true: { iconName: 'general.bell', label: 'Unmute' },\n false: { iconName: 'general.bellMuted', label: 'Mute' },\n } as const\n\n const latestMessageUnreadToggleContent = {\n true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n } as const\n\n return (\n <View style={styles.actionButtonContainer}>\n <SwipeableToggleButton\n loading={isMarkReadPending}\n disabled={isConversationEmpty}\n toggled={!read}\n onPress={handleLatestMessageUnread}\n toggleContent={latestMessageUnreadToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeDefault}\n />\n <SwipeableToggleButton\n loading={isMutedPending}\n toggled={muted}\n onPress={handleMute}\n toggleContent={muteToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n />\n </View>\n )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n swipeableChildContainer: {\n backgroundColor: colors.conversationActionsBackground,\n },\n actionButtonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n alignContent: 'stretch',\n },\n swipeableContainer: {\n backgroundColor: colors.surfaceColor090,\n },\n })\n}\n"]}
package/build/screens/conversation_filters/components/conversation_filters.js CHANGED
@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
2
2
  import { StyleSheet, View } from 'react-native';
3
3
  import { FlatList } from 'react-native-gesture-handler';
4
4
  import { Heading } from '../../../components';
5
- import { useTheme } from '../../../hooks';
5
+ import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks';
6
6
  import { FilterContext, useFilterContext } from '../context/conversation_filter_context';
7
7
  import { FilterTypes } from '../filter_types';
8
8
  import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters';
@@ -86,7 +86,7 @@ export const ConversationFilters = () => {
86
86
  },
87
87
  {
88
88
  type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
89
- data: { title: 'Groups' },
89
+ data: { title: 'Groups', style: styles.extraHeaderScalableSpace },
90
90
  },
91
91
  ...groupItemData,
92
92
  {
@@ -95,7 +95,7 @@ export const ConversationFilters = () => {
95
95
  },
96
96
  {
97
97
  type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,
98
- data: { title: 'Teams' },
98
+ data: { title: 'Teams', style: styles.extraHeaderScalableSpace },
99
99
  },
100
100
  ...teamItemData,
101
101
  {
@@ -123,11 +123,11 @@ export const ConversationFilters = () => {
123
123
  const useStyles = () => {
124
124
  const { platformListPaddingBottom } = useFilterContext();
125
125
  const theme = useTheme();
126
+ const atFontScaleBreakpoint = useAtFontScaleBreakpoint();
126
127
  return StyleSheet.create({
127
128
  flatlistContainer: {
128
129
  paddingBottom: platformListPaddingBottom,
129
130
  },
130
- section: {},
131
131
  sectionHeader: {
132
132
  flexDirection: 'row',
133
133
  justifyContent: 'space-between',
@@ -135,7 +135,9 @@ const useStyles = () => {
135
135
  paddingBottom: 8,
136
136
  paddingHorizontal: 16,
137
137
  },
138
- selectTeamsButton: {},
138
+ extraHeaderScalableSpace: {
139
+ marginTop: atFontScaleBreakpoint ? 24 : 0,
140
+ },
139
141
  filterBar: {
140
142
  backgroundColor: theme.colors.fillColorNeutral100Inverted,
141
143
  flexDirection: 'row',
@@ -156,9 +158,9 @@ const useStyles = () => {
156
158
  },
157
159
  });
158
160
  };
159
- const Header = ({ title }) => {
161
+ const Header = ({ title, style = {} }) => {
160
162
  const styles = useStyles();
161
- return (<View style={styles.sectionHeader}>
163
+ return (<View style={[styles.sectionHeader, style]}>
162
164
  <Heading variant="h3">{title}</Heading>
163
165
  </View>);
164
166
  };
package/build/screens/conversation_filters/components/conversation_filters.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_filters.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/conversation_filters.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { FlatList } from 'react-native-gesture-handler'\nimport { Heading } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { FilterContext, useFilterContext } from '../context/conversation_filter_context'\nimport { FilterTypes } from '../filter_types'\nimport { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'\nimport {\n FilterProps,\n FilterRow,\n GroupRow,\n GroupRowProps,\n TeamRow,\n TeamRowProps,\n ViewMore,\n ViewMoreRowProps,\n} from './rows'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n filter,\n groups,\n header,\n hidden,\n more,\n teams,\n}\n\ntype SectionListData = Array<\n | DataItem<FilterProps, SectionTypes.filter>\n | DataItem<GroupRowProps, SectionTypes.groups>\n | DataItem<HeaderProps, SectionTypes.header>\n | DataItem<any, SectionTypes.hidden>\n | DataItem<ViewMoreRowProps, SectionTypes.more>\n | DataItem<TeamRowProps, SectionTypes.teams>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n type: TName\n data: T\n sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport const ConversationFilters = () => {\n const styles = useStyles()\n const { setScrollOffset, params } = useContext(FilterContext)\n const { chat_group_graph_id, group_source_app_name = '' } = params\n\n const activeFilter: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const { groups = [] } = useGroupsToFilter()\n const { teams = [] } = useTeamsToFilter()\n\n const activeGroupId = chat_group_graph_id\n const isExactGroupFilter = activeFilter === FilterTypes.More\n\n const teamItems: DataItem<TeamRowProps, SectionTypes.teams>[] = teams.map(team => ({\n type: SectionTypes.teams,\n data: {\n team,\n isActive: isExactGroupFilter && team.id.toString() === activeGroupId,\n },\n }))\n\n const groupItems: DataItem<GroupRowProps, SectionTypes.groups>[] = groups.map(group => ({\n type: SectionTypes.groups,\n data: {\n group,\n isActive: isExactGroupFilter && group?.id.toString() === activeGroupId,\n },\n }))\n const groupItemData = selectActiveWithFirst(5)(groupItems)\n const teamItemData = selectActiveWithFirst(5)(teamItems)\n\n const hideAppFilters = groupItems.length < 1 || teamItems.length < 1\n\n const listData: SectionListData = [\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,\n data: { title: 'General Filters' },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: {\n filter: FilterTypes.Groups,\n group_source_app_name: 'groups',\n isActive: activeFilter === FilterTypes.Groups,\n },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: {\n filter: FilterTypes.Teams,\n group_source_app_name: 'services',\n isActive: activeFilter === FilterTypes.Teams,\n },\n },\n {\n type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,\n data: { title: 'Groups' },\n },\n ...groupItemData,\n {\n type: groupItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,\n data: { routeName: 'GroupFilters' },\n },\n {\n type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,\n data: { title: 'Teams' },\n },\n ...teamItemData,\n {\n type: teamItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,\n data: { routeName: 'TeamFilters' },\n },\n ]\n\n return (\n <FlatList\n data={listData}\n contentContainerStyle={styles.flatlistContainer}\n nestedScrollEnabled={true}\n onScroll={e => setScrollOffset(e.nativeEvent.contentOffset.y)}\n renderItem={({ item }) => {\n switch (item.type) {\n case SectionTypes.header:\n return <Header {...item.data} />\n case SectionTypes.filter:\n return <FilterRow {...item.data} />\n case SectionTypes.groups:\n return <GroupRow {...item.data} />\n case SectionTypes.teams:\n return <TeamRow {...item.data} />\n case SectionTypes.more:\n return <ViewMore {...item.data} />\n default:\n return null\n }\n }}\n />\n )\n}\n\nconst useStyles = () => {\n const { platformListPaddingBottom } = useFilterContext()\n const theme = useTheme()\n\n return StyleSheet.create({\n flatlistContainer: {\n paddingBottom: platformListPaddingBottom,\n },\n section: {},\n sectionHeader: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingTop: 24,\n paddingBottom: 8,\n paddingHorizontal: 16,\n },\n selectTeamsButton: {},\n filterBar: {\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n paddingHorizontal: 16,\n paddingVertical: 16,\n gap: 8,\n },\n filterBarScroll: {\n elevation: 4,\n boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',\n },\n filterBarActions: {\n flexDirection: 'row',\n gap: 8,\n alignItems: 'center',\n },\n })\n}\n\ntype HeaderProps = {\n title: string\n}\n\nconst Header = ({ title }: HeaderProps) => {\n const styles = useStyles()\n\n return (\n <View style={styles.sectionHeader}>\n <Heading variant=\"h3\">{title}</Heading>\n </View>\n )\n}\n\ntype GroupSectionType =\n | DataItem<TeamRowProps, SectionTypes.teams>\n | DataItem<GroupRowProps, SectionTypes.groups>\n\nconst selectActiveWithFirst =\n (number: number) =>\n <T extends GroupSectionType>(groups: T[]): T[] => {\n const activeGroupIndex = groups.findIndex(group => group.data.isActive)\n const activeGroup = groups[activeGroupIndex]\n\n if (!activeGroup || activeGroupIndex <= number) {\n return groups.slice(0, number)\n }\n\n return [activeGroup, ...groups].slice(0, number)\n }\n"]}
1
+ {"version":3,"file":"conversation_filters.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/conversation_filters.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { FlatList } from 'react-native-gesture-handler'\nimport { Heading } from '../../../components'\nimport { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'\nimport { FilterContext, useFilterContext } from '../context/conversation_filter_context'\nimport { FilterTypes } from '../filter_types'\nimport { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'\nimport {\n FilterProps,\n FilterRow,\n GroupRow,\n GroupRowProps,\n TeamRow,\n TeamRowProps,\n ViewMore,\n ViewMoreRowProps,\n} from './rows'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n filter,\n groups,\n header,\n hidden,\n more,\n teams,\n}\n\ntype SectionListData = Array<\n | DataItem<FilterProps, SectionTypes.filter>\n | DataItem<GroupRowProps, SectionTypes.groups>\n | DataItem<HeaderProps, SectionTypes.header>\n | DataItem<any, SectionTypes.hidden>\n | DataItem<ViewMoreRowProps, SectionTypes.more>\n | DataItem<TeamRowProps, SectionTypes.teams>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n type: TName\n data: T\n sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport const ConversationFilters = () => {\n const styles = useStyles()\n const { setScrollOffset, params } = useContext(FilterContext)\n const { chat_group_graph_id, group_source_app_name = '' } = params\n\n const activeFilter: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const { groups = [] } = useGroupsToFilter()\n const { teams = [] } = useTeamsToFilter()\n\n const activeGroupId = chat_group_graph_id\n const isExactGroupFilter = activeFilter === FilterTypes.More\n\n const teamItems: DataItem<TeamRowProps, SectionTypes.teams>[] = teams.map(team => ({\n type: SectionTypes.teams,\n data: {\n team,\n isActive: isExactGroupFilter && team.id.toString() === activeGroupId,\n },\n }))\n\n const groupItems: DataItem<GroupRowProps, SectionTypes.groups>[] = groups.map(group => ({\n type: SectionTypes.groups,\n data: {\n group,\n isActive: isExactGroupFilter && group?.id.toString() === activeGroupId,\n },\n }))\n const groupItemData = selectActiveWithFirst(5)(groupItems)\n const teamItemData = selectActiveWithFirst(5)(teamItems)\n\n const hideAppFilters = groupItems.length < 1 || teamItems.length < 1\n\n const listData: SectionListData = [\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,\n data: { title: 'General Filters' },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: {\n filter: FilterTypes.Groups,\n group_source_app_name: 'groups',\n isActive: activeFilter === FilterTypes.Groups,\n },\n },\n {\n type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,\n data: {\n filter: FilterTypes.Teams,\n group_source_app_name: 'services',\n isActive: activeFilter === FilterTypes.Teams,\n },\n },\n {\n type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,\n data: { title: 'Groups', style: styles.extraHeaderScalableSpace },\n },\n ...groupItemData,\n {\n type: groupItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,\n data: { routeName: 'GroupFilters' },\n },\n {\n type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,\n data: { title: 'Teams', style: styles.extraHeaderScalableSpace },\n },\n ...teamItemData,\n {\n type: teamItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,\n data: { routeName: 'TeamFilters' },\n },\n ]\n\n return (\n <FlatList\n data={listData}\n contentContainerStyle={styles.flatlistContainer}\n nestedScrollEnabled={true}\n onScroll={e => setScrollOffset(e.nativeEvent.contentOffset.y)}\n renderItem={({ item }) => {\n switch (item.type) {\n case SectionTypes.header:\n return <Header {...item.data} />\n case SectionTypes.filter:\n return <FilterRow {...item.data} />\n case SectionTypes.groups:\n return <GroupRow {...item.data} />\n case SectionTypes.teams:\n return <TeamRow {...item.data} />\n case SectionTypes.more:\n return <ViewMore {...item.data} />\n default:\n return null\n }\n }}\n />\n )\n}\n\nconst useStyles = () => {\n const { platformListPaddingBottom } = useFilterContext()\n const theme = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n flatlistContainer: {\n paddingBottom: platformListPaddingBottom,\n },\n sectionHeader: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingTop: 24,\n paddingBottom: 8,\n paddingHorizontal: 16,\n },\n extraHeaderScalableSpace: {\n marginTop: atFontScaleBreakpoint ? 24 : 0,\n },\n filterBar: {\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n paddingHorizontal: 16,\n paddingVertical: 16,\n gap: 8,\n },\n filterBarScroll: {\n elevation: 4,\n boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',\n },\n filterBarActions: {\n flexDirection: 'row',\n gap: 8,\n alignItems: 'center',\n },\n })\n}\n\ntype HeaderProps = {\n title: string\n style?: ViewStyle\n}\n\nconst Header = ({ title, style = {} }: HeaderProps) => {\n const styles = useStyles()\n\n return (\n <View style={[styles.sectionHeader, style]}>\n <Heading variant=\"h3\">{title}</Heading>\n </View>\n )\n}\n\ntype GroupSectionType =\n | DataItem<TeamRowProps, SectionTypes.teams>\n | DataItem<GroupRowProps, SectionTypes.groups>\n\nconst selectActiveWithFirst =\n (number: number) =>\n <T extends GroupSectionType>(groups: T[]): T[] => {\n const activeGroupIndex = groups.findIndex(group => group.data.isActive)\n const activeGroup = groups[activeGroupIndex]\n\n if (!activeGroup || activeGroupIndex <= number) {\n return groups.slice(0, number)\n }\n\n return [activeGroup, ...groups].slice(0, number)\n }\n"]}
package/build/screens/conversation_filters/components/rows.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/rows.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAI1D,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAA;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAA;AAElE,MAAM,MAAM,WAAW,GAAG;IAAE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,CAAA;AAEpG,eAAO,MAAM,SAAS,gDAAiD,WAAW,sBAmBjF,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,QAAQ,wBAAyB,aAAa,sBAkC1D,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,sBAgC7C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;CAAE,CAAA;AAEpF,eAAO,MAAM,QAAQ,kBAAmB,gBAAgB,sBAWvD,CAAA;AAED,eAAO,MAAM,YAAY,4CAKtB,iBAAiB,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,sBAYlF,CAAA"}
1
+ {"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/rows.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAS1D,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAA;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAA;AAGlE,MAAM,MAAM,WAAW,GAAG;IAAE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,CAAA;AAEpG,eAAO,MAAM,SAAS,gDAAiD,WAAW,sBAQjF,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,QAAQ,wBAAyB,aAAa,sBA8B1D,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,sBA6B7C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;CAAE,CAAA;AAEpF,eAAO,MAAM,QAAQ,kBAAmB,gBAAgB,sBAWvD,CAAA;AAED,eAAO,MAAM,YAAY,4CAKtB,iBAAiB,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,sBAoBlF,CAAA"}
package/build/screens/conversation_filters/components/rows.js CHANGED
@@ -3,33 +3,31 @@ import { useNavigation } from '@react-navigation/native';
3
3
  import React, { useContext } from 'react';
4
4
  import { StyleSheet, View } from 'react-native';
5
5
  import { Heading, Icon, Image, Text, TextButton } from '../../../components';
6
- import { useTheme } from '../../../hooks';
6
+ import { useAtFontScaleBreakpoint, useFontScale, useScalableNumberOfLines, useTheme, } from '../../../hooks';
7
7
  import { useServicesTeamsMap } from '../../../hooks/services/use_services_team';
8
8
  import { FilterContext } from '../context/conversation_filter_context';
9
+ import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../../utils/styles';
9
10
  export const FilterRow = ({ group_source_app_name, isActive, filter }) => {
10
- const styles = useRowStyles({ isActive });
11
11
  const { setAppFilter } = useContext(FilterContext);
12
- return (<PressableRow style={styles.row} onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
12
+ return (<PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
13
13
  <Text>{filter}</Text>
14
- <Icon name="general.check" size={16} style={styles.rowIconRight} accessibilityElementsHidden/>
15
14
  </PressableRow>);
16
15
  };
17
16
  export const GroupRow = ({ group, isActive }) => {
18
- const styles = useRowStyles({ isActive });
17
+ const styles = useRowStyles();
19
18
  const { setGroupFilter } = useContext(FilterContext);
20
19
  const handleFilterByGroup = () => {
21
20
  setGroupFilter({ chat_group_graph_id: group.id });
22
21
  };
23
22
  const { headerImage, membershipsCount } = group;
24
- return (<PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
25
- {headerImage?.thumbnail && (<Image source={{ uri: headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt={`Image for ${group.name}`}/>)}
26
- <View style={styles.rowContent}>
23
+ return (<PressableRow onPress={handleFilterByGroup} isActive={isActive}>
24
+ {headerImage?.thumbnail && (<Image source={{ uri: headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt=""/>)}
25
+ <View style={styles.rowTextContainer}>
27
26
  <Heading variant="h3" style={styles.rowTitle}>
28
27
  {group.name}
29
28
  </Heading>
30
- {membershipsCount && <Text>{group.membershipsCount} members</Text>}
29
+ {membershipsCount && (<Text style={styles.rowSubtitle}>{group.membershipsCount} members</Text>)}
31
30
  </View>
32
- <Icon name="general.check" size={16} style={styles.rowIconRight} accessibilityElementsHidden/>
33
31
  </PressableRow>);
34
32
  };
35
33
  export const TeamRow = ({ team }) => {
@@ -38,36 +36,41 @@ export const TeamRow = ({ team }) => {
38
36
  const { params } = useContext(FilterContext);
39
37
  const { chat_group_graph_id } = params;
40
38
  const isActive = chat_group_graph_id === team.id.toString();
41
- const styles = useRowStyles({ isActive });
39
+ const styles = useRowStyles();
40
+ const scalableNumberOfLines = useScalableNumberOfLines();
42
41
  const handleFilterByGroup = () => {
43
42
  setGroupFilter({ chat_group_graph_id: team.id });
44
43
  };
45
44
  const servicesTeam = servicesTeams[team.id];
46
45
  const concatedServiceTypeNames = servicesTeam?.serviceTypeNames.join(', ');
47
46
  const serviceTypeName = concatedServiceTypeNames || servicesTeam?.group;
48
- return (<PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
49
- <View style={styles.rowContent}>
47
+ return (<PressableRow onPress={handleFilterByGroup} isActive={isActive}>
48
+ <View style={styles.rowTextContainer}>
50
49
  <Heading variant="h3" style={styles.rowTitle}>
51
50
  {team.name}
52
51
  </Heading>
53
- <Text numberOfLines={1}>{serviceTypeName}</Text>
52
+ <Text numberOfLines={scalableNumberOfLines} style={styles.rowSubtitle}>
53
+ {serviceTypeName}
54
+ </Text>
54
55
  </View>
55
- <Icon name="general.check" size={16} style={styles.rowIconRight} accessibilityElementsHidden/>
56
56
  </PressableRow>);
57
57
  };
58
58
  export const ViewMore = ({ routeName }) => {
59
59
  const styles = useRowStyles();
60
60
  const navigation = useNavigation();
61
- return (<View style={[styles.borderLessRow]}>
61
+ return (<View style={[styles.rowWithoutBorder]}>
62
62
  <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>
63
63
  View more
64
64
  </TextButton>
65
65
  </View>);
66
66
  };
67
67
  export const PressableRow = ({ children, isActive, onPress, style, }) => {
68
- const styles = useRowStyles();
69
- return (<PlatformPressable style={styles.container} onPress={onPress} accessibilityRole="radio" accessibilityState={{ selected: isActive }}>
70
- <View style={[styles.innerContainer, style]}>{children}</View>
68
+ const styles = useRowStyles({ isActive });
69
+ return (<PlatformPressable style={styles.pressable} onPress={onPress} accessibilityRole="radio" accessibilityState={{ selected: isActive }}>
70
+ <View style={styles.row}>
71
+ <View style={[styles.rowInner, style]}>{children}</View>
72
+ <Icon name="general.check" style={styles.rowIconRight} accessibilityElementsHidden maxFontSizeMultiplier={2.5}/>
73
+ </View>
71
74
  </PlatformPressable>);
72
75
  };
73
76
  const ASPECT_RATIO = 16 / 9;
@@ -75,20 +78,34 @@ const THUMBNAIL_WIDTH = 80;
75
78
  const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
76
79
  const useRowStyles = ({ isActive = false } = {}) => {
77
80
  const theme = useTheme();
81
+ const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
82
+ const atFontScaleBreakpoint = useAtFontScaleBreakpoint();
78
83
  return StyleSheet.create({
79
- container: {
84
+ pressable: {
80
85
  paddingLeft: 16,
81
86
  },
82
- innerContainer: {
87
+ row: {
83
88
  flexDirection: 'row',
84
89
  alignItems: 'center',
90
+ justifyContent: 'space-between',
85
91
  gap: 12,
86
92
  borderBottomWidth: 1,
87
- borderBottomColor: theme.colors.fillColorNeutral050Base,
93
+ borderBottomColor: atFontScaleBreakpoint
94
+ ? theme.colors.borderColorDefaultDark
95
+ : theme.colors.borderColorDefaultBase,
88
96
  paddingVertical: 12,
89
97
  paddingRight: 16,
90
98
  },
91
- borderLessRow: {
99
+ rowInner: {
100
+ flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
101
+ alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
102
+ gap: 12,
103
+ flexShrink: 1,
104
+ },
105
+ rowTextContainer: {
106
+ flexShrink: 1,
107
+ },
108
+ rowWithoutBorder: {
92
109
  flexDirection: 'row',
93
110
  alignItems: 'center',
94
111
  gap: 12,
@@ -99,23 +116,25 @@ const useRowStyles = ({ isActive = false } = {}) => {
99
116
  viewMoreButton: {
100
117
  flex: 1,
101
118
  },
102
- row: {},
103
119
  rowImage: {
104
- width: THUMBNAIL_WIDTH,
105
- height: THUMBNAIL_HEIGHT,
106
- borderRadius: 4,
107
- },
108
- rowContent: {
109
- flexShrink: 1,
120
+ width: THUMBNAIL_WIDTH * fontScale,
121
+ height: THUMBNAIL_HEIGHT * fontScale,
122
+ borderRadius: 4 * fontScale,
110
123
  },
111
124
  rowIconRight: {
112
- marginLeft: 'auto',
125
+ fontSize: 16,
113
126
  color: theme.colors.statusSuccessIcon,
114
127
  opacity: isActive ? 1 : 0,
115
128
  },
116
129
  rowTitle: {
117
130
  fontSize: 16,
118
131
  flexShrink: 1,
132
+ fontWeight: atFontScaleBreakpoint ? 400 : platformFontWeightBold,
133
+ },
134
+ rowSubtitle: {
135
+ color: atFontScaleBreakpoint
136
+ ? theme.colors.textColorDefaultSecondary
137
+ : theme.colors.textColorDefaultPrimary,
119
138
  },
120
139
  });
121
140
  };
package/build/screens/conversation_filters/components/rows.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rows.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/rows.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { NavigationProp, useNavigation } from '@react-navigation/native'\nimport React, { PropsWithChildren, useContext } from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { Heading, Icon, Image, Text, TextButton } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { useServicesTeamsMap } from '../../../hooks/services/use_services_team'\nimport { GroupResource } from '../../../types/resources/group_resource'\nimport { FilterContext } from '../context/conversation_filter_context'\nimport { FilterTypes } from '../filter_types'\nimport { FilteredGroup } from '../hooks/filters'\nimport { ConversationFilterStackParamList } from '../screen_props'\n\nexport type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }\n\nexport const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {\n const styles = useRowStyles({ isActive })\n const { setAppFilter } = useContext(FilterContext)\n\n return (\n <PressableRow\n style={styles.row}\n onPress={() => setAppFilter({ group_source_app_name })}\n isActive={isActive}\n >\n <Text>{filter}</Text>\n <Icon\n name=\"general.check\"\n size={16}\n style={styles.rowIconRight}\n accessibilityElementsHidden\n />\n </PressableRow>\n )\n}\n\nexport type GroupRowProps = {\n group: FilteredGroup\n isActive: boolean\n}\n\nexport const GroupRow = ({ group, isActive }: GroupRowProps) => {\n const styles = useRowStyles({ isActive })\n const { setGroupFilter } = useContext(FilterContext)\n\n const handleFilterByGroup = () => {\n setGroupFilter({ chat_group_graph_id: group.id })\n }\n\n const { headerImage, membershipsCount } = group\n\n return (\n <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>\n {headerImage?.thumbnail && (\n <Image\n source={{ uri: headerImage?.thumbnail }}\n resizeMode=\"cover\"\n style={styles.rowImage}\n alt={`Image for ${group.name}`}\n />\n )}\n <View style={styles.rowContent}>\n <Heading variant=\"h3\" style={styles.rowTitle}>\n {group.name}\n </Heading>\n {membershipsCount && <Text>{group.membershipsCount} members</Text>}\n </View>\n <Icon\n name=\"general.check\"\n size={16}\n style={styles.rowIconRight}\n accessibilityElementsHidden\n />\n </PressableRow>\n )\n}\n\nexport type TeamRowProps = {\n team: GroupResource\n isActive: boolean\n}\n\nexport const TeamRow = ({ team }: TeamRowProps) => {\n const { setGroupFilter } = useContext(FilterContext)\n const servicesTeams = useServicesTeamsMap()\n const { params } = useContext(FilterContext)\n const { chat_group_graph_id } = params\n const isActive = chat_group_graph_id === team.id.toString()\n const styles = useRowStyles({ isActive })\n\n const handleFilterByGroup = () => {\n setGroupFilter({ chat_group_graph_id: team.id })\n }\n\n const servicesTeam = servicesTeams[team.id]\n const concatedServiceTypeNames = servicesTeam?.serviceTypeNames.join(', ')\n const serviceTypeName = concatedServiceTypeNames || servicesTeam?.group\n\n return (\n <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>\n <View style={styles.rowContent}>\n <Heading variant=\"h3\" style={styles.rowTitle}>\n {team.name}\n </Heading>\n <Text numberOfLines={1}>{serviceTypeName}</Text>\n </View>\n <Icon\n name=\"general.check\"\n size={16}\n style={styles.rowIconRight}\n accessibilityElementsHidden\n />\n </PressableRow>\n )\n}\n\nexport type ViewMoreRowProps = { routeName: keyof ConversationFilterStackParamList }\n\nexport const ViewMore = ({ routeName }: ViewMoreRowProps) => {\n const styles = useRowStyles()\n const navigation = useNavigation<NavigationProp<ConversationFilterStackParamList, 'Filters'>>()\n\n return (\n <View style={[styles.borderLessRow]}>\n <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>\n View more\n </TextButton>\n </View>\n )\n}\n\nexport const PressableRow = ({\n children,\n isActive,\n onPress,\n style,\n}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {\n const styles = useRowStyles()\n return (\n <PlatformPressable\n style={styles.container}\n onPress={onPress}\n accessibilityRole=\"radio\"\n accessibilityState={{ selected: isActive }}\n >\n <View style={[styles.innerContainer, style]}>{children}</View>\n </PlatformPressable>\n )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {\n const theme = useTheme()\n return StyleSheet.create({\n container: {\n paddingLeft: 16,\n },\n innerContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n paddingVertical: 12,\n paddingRight: 16,\n },\n borderLessRow: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n paddingVertical: 12,\n paddingRight: 16,\n paddingLeft: 16,\n },\n viewMoreButton: {\n flex: 1,\n },\n row: {},\n rowImage: {\n width: THUMBNAIL_WIDTH,\n height: THUMBNAIL_HEIGHT,\n borderRadius: 4,\n },\n rowContent: {\n flexShrink: 1,\n },\n rowIconRight: {\n marginLeft: 'auto',\n color: theme.colors.statusSuccessIcon,\n opacity: isActive ? 1 : 0,\n },\n rowTitle: {\n fontSize: 16,\n flexShrink: 1,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"rows.js","sourceRoot":"","sources":["../../../../src/screens/conversation_filters/components/rows.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { NavigationProp, useNavigation } from '@react-navigation/native'\nimport React, { PropsWithChildren, useContext } from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { Heading, Icon, Image, Text, TextButton } from '../../../components'\nimport {\n useAtFontScaleBreakpoint,\n useFontScale,\n useScalableNumberOfLines,\n useTheme,\n} from '../../../hooks'\nimport { useServicesTeamsMap } from '../../../hooks/services/use_services_team'\nimport { GroupResource } from '../../../types/resources/group_resource'\nimport { FilterContext } from '../context/conversation_filter_context'\nimport { FilterTypes } from '../filter_types'\nimport { FilteredGroup } from '../hooks/filters'\nimport { ConversationFilterStackParamList } from '../screen_props'\nimport { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../../utils/styles'\n\nexport type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }\n\nexport const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {\n const { setAppFilter } = useContext(FilterContext)\n\n return (\n <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>\n <Text>{filter}</Text>\n </PressableRow>\n )\n}\n\nexport type GroupRowProps = {\n group: FilteredGroup\n isActive: boolean\n}\n\nexport const GroupRow = ({ group, isActive }: GroupRowProps) => {\n const styles = useRowStyles()\n const { setGroupFilter } = useContext(FilterContext)\n\n const handleFilterByGroup = () => {\n setGroupFilter({ chat_group_graph_id: group.id })\n }\n\n const { headerImage, membershipsCount } = group\n\n return (\n <PressableRow onPress={handleFilterByGroup} isActive={isActive}>\n {headerImage?.thumbnail && (\n <Image\n source={{ uri: headerImage?.thumbnail }}\n resizeMode=\"cover\"\n style={styles.rowImage}\n alt=\"\"\n />\n )}\n <View style={styles.rowTextContainer}>\n <Heading variant=\"h3\" style={styles.rowTitle}>\n {group.name}\n </Heading>\n {membershipsCount && (\n <Text style={styles.rowSubtitle}>{group.membershipsCount} members</Text>\n )}\n </View>\n </PressableRow>\n )\n}\n\nexport type TeamRowProps = {\n team: GroupResource\n isActive: boolean\n}\n\nexport const TeamRow = ({ team }: TeamRowProps) => {\n const { setGroupFilter } = useContext(FilterContext)\n const servicesTeams = useServicesTeamsMap()\n const { params } = useContext(FilterContext)\n const { chat_group_graph_id } = params\n const isActive = chat_group_graph_id === team.id.toString()\n const styles = useRowStyles()\n const scalableNumberOfLines = useScalableNumberOfLines()\n\n const handleFilterByGroup = () => {\n setGroupFilter({ chat_group_graph_id: team.id })\n }\n\n const servicesTeam = servicesTeams[team.id]\n const concatedServiceTypeNames = servicesTeam?.serviceTypeNames.join(', ')\n const serviceTypeName = concatedServiceTypeNames || servicesTeam?.group\n\n return (\n <PressableRow onPress={handleFilterByGroup} isActive={isActive}>\n <View style={styles.rowTextContainer}>\n <Heading variant=\"h3\" style={styles.rowTitle}>\n {team.name}\n </Heading>\n <Text numberOfLines={scalableNumberOfLines} style={styles.rowSubtitle}>\n {serviceTypeName}\n </Text>\n </View>\n </PressableRow>\n )\n}\n\nexport type ViewMoreRowProps = { routeName: keyof ConversationFilterStackParamList }\n\nexport const ViewMore = ({ routeName }: ViewMoreRowProps) => {\n const styles = useRowStyles()\n const navigation = useNavigation<NavigationProp<ConversationFilterStackParamList, 'Filters'>>()\n\n return (\n <View style={[styles.rowWithoutBorder]}>\n <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>\n View more\n </TextButton>\n </View>\n )\n}\n\nexport const PressableRow = ({\n children,\n isActive,\n onPress,\n style,\n}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {\n const styles = useRowStyles({ isActive })\n return (\n <PlatformPressable\n style={styles.pressable}\n onPress={onPress}\n accessibilityRole=\"radio\"\n accessibilityState={{ selected: isActive }}\n >\n <View style={styles.row}>\n <View style={[styles.rowInner, style]}>{children}</View>\n <Icon\n name=\"general.check\"\n style={styles.rowIconRight}\n accessibilityElementsHidden\n maxFontSizeMultiplier={2.5}\n />\n </View>\n </PlatformPressable>\n )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {\n const theme = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n pressable: {\n paddingLeft: 16,\n },\n row: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 12,\n borderBottomWidth: 1,\n borderBottomColor: atFontScaleBreakpoint\n ? theme.colors.borderColorDefaultDark\n : theme.colors.borderColorDefaultBase,\n paddingVertical: 12,\n paddingRight: 16,\n },\n rowInner: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n gap: 12,\n flexShrink: 1,\n },\n rowTextContainer: {\n flexShrink: 1,\n },\n rowWithoutBorder: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n paddingVertical: 12,\n paddingRight: 16,\n paddingLeft: 16,\n },\n viewMoreButton: {\n flex: 1,\n },\n rowImage: {\n width: THUMBNAIL_WIDTH * fontScale,\n height: THUMBNAIL_HEIGHT * fontScale,\n borderRadius: 4 * fontScale,\n },\n rowIconRight: {\n fontSize: 16,\n color: theme.colors.statusSuccessIcon,\n opacity: isActive ? 1 : 0,\n },\n rowTitle: {\n fontSize: 16,\n flexShrink: 1,\n fontWeight: atFontScaleBreakpoint ? 400 : platformFontWeightBold,\n },\n rowSubtitle: {\n color: atFontScaleBreakpoint\n ? theme.colors.textColorDefaultSecondary\n : theme.colors.textColorDefaultPrimary,\n },\n })\n}\n"]}
package/build/utils/theme.d.ts CHANGED
@@ -34,6 +34,7 @@ interface ChatColors {
34
34
  androidModalHeaderButtonTextColor: ColorValue | string | undefined;
35
35
  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined;
36
36
  androidSwitchThumbColor: string | undefined;
37
+ conversationActionsBackground: string;
37
38
  testColor: string;
38
39
  statusSuccessIcon: string;
39
40
  statusSuccessText: string;
package/build/utils/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAiB,MAAM,cAAc,CAAA;AAE3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAe3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IAClE,6BAA6B,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,sBAAsB,EAAE,MAAM,CAAA;IAC9B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,4BAA4B,EAAE,MAAM,CAAA;IACpC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,6BAA6B,EAAE,MAAM,CAAA;IACrC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;CACxC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAiB,MAAM,cAAc,CAAA;AAE3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAe3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IAClE,6BAA6B,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3C,6BAA6B,EAAE,MAAM,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,sBAAsB,EAAE,MAAM,CAAA;IAC9B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,4BAA4B,EAAE,MAAM,CAAA;IACpC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,6BAA6B,EAAE,MAAM,CAAA;IACrC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;CACxC"}
package/build/utils/theme.js CHANGED
@@ -23,6 +23,7 @@ const colorsChatLight = {
23
23
  buttonEnd: undefined,
24
24
  interaction: tokens.fillColorInteractionDefault,
25
25
  androidSwitchThumbColor: undefined,
26
+ conversationActionsBackground: tokens.colorNeutral100White,
26
27
  testColor: 'hotpink',
27
28
  statusInfoIcon: tokens.iconColorStatusInfoPrimary,
28
29
  statusInfoText: tokens.textColorStatusInfo,
@@ -64,6 +65,7 @@ const colorsChatDark = {
64
65
  buttonEnd: undefined,
65
66
  interaction: tokens.fillColorInteractionDefaultDark,
66
67
  androidSwitchThumbColor: undefined,
68
+ conversationActionsBackground: tokens.colorNeutral7,
67
69
  testColor: 'pink',
68
70
  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,
69
71
  statusInfoText: tokens.textColorStatusInfoDark,
package/build/utils/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n colors: DefaultTheme['colors'] &\n (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n The default theme is intended to support two types of customizations:\n 1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n 2. Any styles for a specific component. (Use only one level of nesting.)\n ```\n primaryButton: {\n borderRadius: number\n container: ViewStyle\n text: TextStyle\n }\n ```\n============================================= */\n\nexport interface DefaultTheme {\n colors: ChatColors\n button: {\n borderRadius: number\n }\n showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n const scheme = colorScheme || 'light'\n\n const defaultColors = {\n ...chatThemeColorMap[scheme],\n ...aliasTokensColorMap[scheme],\n }\n\n return {\n colors: defaultColors,\n button: {\n borderRadius: 40,\n },\n showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n name: string\n buttonStart: string | undefined\n buttonEnd: string | undefined\n interaction: string\n androidModalHeaderButtonTextColor: ColorValue | string | undefined\n iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n androidSwitchThumbColor: string | undefined\n testColor: string\n statusSuccessIcon: string\n statusSuccessText: string\n statusSuccessBorder: string\n statusSuccessFill: string\n statusInfoIcon: string\n statusInfoText: string\n statusInfoBorder: string\n statusInfoFill: string\n statusWarningIcon: string\n statusWarningText: string\n statusWarningBorder: string\n statusWarningFill: string\n statusErrorIcon: string\n statusErrorText: string\n statusErrorBorder: string\n statusErrorFill: string\n statusSuccessComposedIcon: string\n statusSuccessComposedText: string\n statusSuccessComposedBackground: string\n statusInfoComposedIcon: string\n statusInfoComposedText: string\n statusInfoComposedBackground: string\n statusWarningComposedIcon: string\n statusWarningComposedText: string\n statusWarningComposedBackground: string\n statusErrorComposedIcon: string\n statusErrorComposedText: string\n statusErrorComposedBackground: string\n statusNeutralComposedIcon: string\n statusNeutralComposedText: string\n statusNeutralComposedBackground: string\n}\n\nconst colorsChatLight: ChatColors = {\n name: 'light',\n androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n iOSModalHeaderButtonTextColor: PlatformColor('link'),\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefault,\n androidSwitchThumbColor: undefined,\n testColor: 'hotpink',\n statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n statusInfoText: tokens.textColorStatusInfo,\n statusInfoBorder: tokens.borderColorStatusInfo,\n statusInfoFill: tokens.fillColorStatusInfoSolid,\n statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n statusSuccessText: tokens.textColorStatusSuccess,\n statusSuccessBorder: tokens.borderColorStatusSuccess,\n statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n statusWarningText: tokens.textColorStatusWarning,\n statusWarningBorder: tokens.borderColorStatusWarning,\n statusWarningFill: tokens.fillColorStatusWarningSolid,\n statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n statusErrorText: tokens.textColorStatusError,\n statusErrorBorder: tokens.borderColorStatusError,\n statusErrorFill: tokens.fillColorStatusErrorSolid,\n statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n statusInfoComposedText: tokens.textColorStatusInfo,\n statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n statusSuccessComposedText: tokens.textColorStatusSuccess,\n statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n statusWarningComposedText: tokens.textColorStatusWarning,\n statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n statusErrorComposedText: tokens.textColorStatusError,\n statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n statusNeutralComposedText: tokens.textColorStatusNeutral,\n statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n}\n\nconst colorsChatDark: ChatColors = {\n name: 'dark',\n androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n iOSModalHeaderButtonTextColor: PlatformColor('link'),\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefaultDark,\n androidSwitchThumbColor: undefined,\n testColor: 'pink',\n statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n statusInfoText: tokens.textColorStatusInfoDark,\n statusInfoBorder: tokens.borderColorStatusInfoDark,\n statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n statusSuccessText: tokens.textColorStatusSuccessDark,\n statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n statusWarningText: tokens.textColorStatusWarningDark,\n statusWarningBorder: tokens.borderColorStatusWarningDark,\n statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n statusErrorText: tokens.textColorStatusErrorDark,\n statusErrorBorder: tokens.borderColorStatusErrorDark,\n statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n // Note: CCA inverts composed status colors in dark mode\n statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n statusInfoComposedText: tokens.textColorStatusInfoDark,\n statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n statusWarningComposedText: tokens.textColorStatusWarningDark,\n statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n statusErrorComposedText: tokens.textColorStatusErrorDark,\n statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n}\n\nconst chatThemeColorMap = {\n light: colorsChatLight,\n dark: colorsChatDark,\n}\n"]}
1
+ {"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n colors: DefaultTheme['colors'] &\n (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n The default theme is intended to support two types of customizations:\n 1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n 2. Any styles for a specific component. (Use only one level of nesting.)\n ```\n primaryButton: {\n borderRadius: number\n container: ViewStyle\n text: TextStyle\n }\n ```\n============================================= */\n\nexport interface DefaultTheme {\n colors: ChatColors\n button: {\n borderRadius: number\n }\n showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n const scheme = colorScheme || 'light'\n\n const defaultColors = {\n ...chatThemeColorMap[scheme],\n ...aliasTokensColorMap[scheme],\n }\n\n return {\n colors: defaultColors,\n button: {\n borderRadius: 40,\n },\n showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n name: string\n buttonStart: string | undefined\n buttonEnd: string | undefined\n interaction: string\n androidModalHeaderButtonTextColor: ColorValue | string | undefined\n iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n androidSwitchThumbColor: string | undefined\n conversationActionsBackground: string\n testColor: string\n statusSuccessIcon: string\n statusSuccessText: string\n statusSuccessBorder: string\n statusSuccessFill: string\n statusInfoIcon: string\n statusInfoText: string\n statusInfoBorder: string\n statusInfoFill: string\n statusWarningIcon: string\n statusWarningText: string\n statusWarningBorder: string\n statusWarningFill: string\n statusErrorIcon: string\n statusErrorText: string\n statusErrorBorder: string\n statusErrorFill: string\n statusSuccessComposedIcon: string\n statusSuccessComposedText: string\n statusSuccessComposedBackground: string\n statusInfoComposedIcon: string\n statusInfoComposedText: string\n statusInfoComposedBackground: string\n statusWarningComposedIcon: string\n statusWarningComposedText: string\n statusWarningComposedBackground: string\n statusErrorComposedIcon: string\n statusErrorComposedText: string\n statusErrorComposedBackground: string\n statusNeutralComposedIcon: string\n statusNeutralComposedText: string\n statusNeutralComposedBackground: string\n}\n\nconst colorsChatLight: ChatColors = {\n name: 'light',\n androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n iOSModalHeaderButtonTextColor: PlatformColor('link'),\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefault,\n androidSwitchThumbColor: undefined,\n conversationActionsBackground: tokens.colorNeutral100White,\n testColor: 'hotpink',\n statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n statusInfoText: tokens.textColorStatusInfo,\n statusInfoBorder: tokens.borderColorStatusInfo,\n statusInfoFill: tokens.fillColorStatusInfoSolid,\n statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n statusSuccessText: tokens.textColorStatusSuccess,\n statusSuccessBorder: tokens.borderColorStatusSuccess,\n statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n statusWarningText: tokens.textColorStatusWarning,\n statusWarningBorder: tokens.borderColorStatusWarning,\n statusWarningFill: tokens.fillColorStatusWarningSolid,\n statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n statusErrorText: tokens.textColorStatusError,\n statusErrorBorder: tokens.borderColorStatusError,\n statusErrorFill: tokens.fillColorStatusErrorSolid,\n statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n statusInfoComposedText: tokens.textColorStatusInfo,\n statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n statusSuccessComposedText: tokens.textColorStatusSuccess,\n statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n statusWarningComposedText: tokens.textColorStatusWarning,\n statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n statusErrorComposedText: tokens.textColorStatusError,\n statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n statusNeutralComposedText: tokens.textColorStatusNeutral,\n statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n}\n\nconst colorsChatDark: ChatColors = {\n name: 'dark',\n androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n iOSModalHeaderButtonTextColor: PlatformColor('link'),\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefaultDark,\n androidSwitchThumbColor: undefined,\n conversationActionsBackground: tokens.colorNeutral7,\n testColor: 'pink',\n statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n statusInfoText: tokens.textColorStatusInfoDark,\n statusInfoBorder: tokens.borderColorStatusInfoDark,\n statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n statusSuccessText: tokens.textColorStatusSuccessDark,\n statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n statusWarningText: tokens.textColorStatusWarningDark,\n statusWarningBorder: tokens.borderColorStatusWarningDark,\n statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n statusErrorText: tokens.textColorStatusErrorDark,\n statusErrorBorder: tokens.borderColorStatusErrorDark,\n statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n // Note: CCA inverts composed status colors in dark mode\n statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n statusInfoComposedText: tokens.textColorStatusInfoDark,\n statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n statusWarningComposedText: tokens.textColorStatusWarningDark,\n statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n statusErrorComposedText: tokens.textColorStatusErrorDark,\n statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n}\n\nconst chatThemeColorMap = {\n light: colorsChatLight,\n dark: colorsChatDark,\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "3.15.0-rc.3",
3
+ "version": "3.15.0-rc.5",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
55
55
  "react-native-url-polyfill": "^2.0.0",
56
56
  "typescript": "<5.6.0"
57
57
  },
58
- "gitHead": "cdeb9cd8dea9abae3b6fb5762536a1556a91a494"
58
+ "gitHead": "e33219deeff9258a0fae6a45484cfaff66e2505d"
59
59
  }
package/src/components/conversations/conversation_actions.tsx CHANGED
@@ -219,7 +219,7 @@ const useStyles = () => {
219
219
  const { colors } = useTheme()
220
220
  return StyleSheet.create({
221
221
  swipeableChildContainer: {
222
- backgroundColor: colors.surfaceColor100,
222
+ backgroundColor: colors.conversationActionsBackground,
223
223
  },
224
224
  actionButtonContainer: {
225
225
  flexDirection: 'row',
package/src/screens/conversation_filters/components/conversation_filters.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react'
2
2
  import { StyleSheet, View, ViewStyle } from 'react-native'
3
3
  import { FlatList } from 'react-native-gesture-handler'
4
4
  import { Heading } from '../../../components'
5
- import { useTheme } from '../../../hooks'
5
+ import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
6
6
  import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
7
7
  import { FilterTypes } from '../filter_types'
8
8
  import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -119,7 +119,7 @@ export const ConversationFilters = () => {
119
119
  },
120
120
  {
121
121
  type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
122
- data: { title: 'Groups' },
122
+ data: { title: 'Groups', style: styles.extraHeaderScalableSpace },
123
123
  },
124
124
  ...groupItemData,
125
125
  {
@@ -128,7 +128,7 @@ export const ConversationFilters = () => {
128
128
  },
129
129
  {
130
130
  type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,
131
- data: { title: 'Teams' },
131
+ data: { title: 'Teams', style: styles.extraHeaderScalableSpace },
132
132
  },
133
133
  ...teamItemData,
134
134
  {
@@ -166,12 +166,12 @@ export const ConversationFilters = () => {
166
166
  const useStyles = () => {
167
167
  const { platformListPaddingBottom } = useFilterContext()
168
168
  const theme = useTheme()
169
+ const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
169
170
 
170
171
  return StyleSheet.create({
171
172
  flatlistContainer: {
172
173
  paddingBottom: platformListPaddingBottom,
173
174
  },
174
- section: {},
175
175
  sectionHeader: {
176
176
  flexDirection: 'row',
177
177
  justifyContent: 'space-between',
@@ -179,7 +179,9 @@ const useStyles = () => {
179
179
  paddingBottom: 8,
180
180
  paddingHorizontal: 16,
181
181
  },
182
- selectTeamsButton: {},
182
+ extraHeaderScalableSpace: {
183
+ marginTop: atFontScaleBreakpoint ? 24 : 0,
184
+ },
183
185
  filterBar: {
184
186
  backgroundColor: theme.colors.fillColorNeutral100Inverted,
185
187
  flexDirection: 'row',
@@ -203,13 +205,14 @@ const useStyles = () => {
203
205
 
204
206
  type HeaderProps = {
205
207
  title: string
208
+ style?: ViewStyle
206
209
  }
207
210
 
208
- const Header = ({ title }: HeaderProps) => {
211
+ const Header = ({ title, style = {} }: HeaderProps) => {
209
212
  const styles = useStyles()
210
213
 
211
214
  return (
212
- <View style={styles.sectionHeader}>
215
+ <View style={[styles.sectionHeader, style]}>
213
216
  <Heading variant="h3">{title}</Heading>
214
217
  </View>
215
218
  )
package/src/screens/conversation_filters/components/rows.tsx CHANGED
@@ -3,33 +3,28 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'
3
3
  import React, { PropsWithChildren, useContext } from 'react'
4
4
  import { StyleSheet, View, ViewStyle } from 'react-native'
5
5
  import { Heading, Icon, Image, Text, TextButton } from '../../../components'
6
- import { useTheme } from '../../../hooks'
6
+ import {
7
+ useAtFontScaleBreakpoint,
8
+ useFontScale,
9
+ useScalableNumberOfLines,
10
+ useTheme,
11
+ } from '../../../hooks'
7
12
  import { useServicesTeamsMap } from '../../../hooks/services/use_services_team'
8
13
  import { GroupResource } from '../../../types/resources/group_resource'
9
14
  import { FilterContext } from '../context/conversation_filter_context'
10
15
  import { FilterTypes } from '../filter_types'
11
16
  import { FilteredGroup } from '../hooks/filters'
12
17
  import { ConversationFilterStackParamList } from '../screen_props'
18
+ import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../../utils/styles'
13
19
 
14
20
  export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
15
21
 
16
22
  export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
17
- const styles = useRowStyles({ isActive })
18
23
  const { setAppFilter } = useContext(FilterContext)
19
24
 
20
25
  return (
21
- <PressableRow
22
- style={styles.row}
23
- onPress={() => setAppFilter({ group_source_app_name })}
24
- isActive={isActive}
25
- >
26
+ <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
26
27
  <Text>{filter}</Text>
27
- <Icon
28
- name="general.check"
29
- size={16}
30
- style={styles.rowIconRight}
31
- accessibilityElementsHidden
32
- />
33
28
  </PressableRow>
34
29
  )
35
30
  }
@@ -40,7 +35,7 @@ export type GroupRowProps = {
40
35
  }
41
36
 
42
37
  export const GroupRow = ({ group, isActive }: GroupRowProps) => {
43
- const styles = useRowStyles({ isActive })
38
+ const styles = useRowStyles()
44
39
  const { setGroupFilter } = useContext(FilterContext)
45
40
 
46
41
  const handleFilterByGroup = () => {
@@ -50,27 +45,23 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
50
45
  const { headerImage, membershipsCount } = group
51
46
 
52
47
  return (
53
- <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
48
+ <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
54
49
  {headerImage?.thumbnail && (
55
50
  <Image
56
51
  source={{ uri: headerImage?.thumbnail }}
57
52
  resizeMode="cover"
58
53
  style={styles.rowImage}
59
- alt={`Image for ${group.name}`}
54
+ alt=""
60
55
  />
61
56
  )}
62
- <View style={styles.rowContent}>
57
+ <View style={styles.rowTextContainer}>
63
58
  <Heading variant="h3" style={styles.rowTitle}>
64
59
  {group.name}
65
60
  </Heading>
66
- {membershipsCount && <Text>{group.membershipsCount} members</Text>}
61
+ {membershipsCount && (
62
+ <Text style={styles.rowSubtitle}>{group.membershipsCount} members</Text>
63
+ )}
67
64
  </View>
68
- <Icon
69
- name="general.check"
70
- size={16}
71
- style={styles.rowIconRight}
72
- accessibilityElementsHidden
73
- />
74
65
  </PressableRow>
75
66
  )
76
67
  }
@@ -86,7 +77,8 @@ export const TeamRow = ({ team }: TeamRowProps) => {
86
77
  const { params } = useContext(FilterContext)
87
78
  const { chat_group_graph_id } = params
88
79
  const isActive = chat_group_graph_id === team.id.toString()
89
- const styles = useRowStyles({ isActive })
80
+ const styles = useRowStyles()
81
+ const scalableNumberOfLines = useScalableNumberOfLines()
90
82
 
91
83
  const handleFilterByGroup = () => {
92
84
  setGroupFilter({ chat_group_graph_id: team.id })
@@ -97,19 +89,15 @@ export const TeamRow = ({ team }: TeamRowProps) => {
97
89
  const serviceTypeName = concatedServiceTypeNames || servicesTeam?.group
98
90
 
99
91
  return (
100
- <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
101
- <View style={styles.rowContent}>
92
+ <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
93
+ <View style={styles.rowTextContainer}>
102
94
  <Heading variant="h3" style={styles.rowTitle}>
103
95
  {team.name}
104
96
  </Heading>
105
- <Text numberOfLines={1}>{serviceTypeName}</Text>
97
+ <Text numberOfLines={scalableNumberOfLines} style={styles.rowSubtitle}>
98
+ {serviceTypeName}
99
+ </Text>
106
100
  </View>
107
- <Icon
108
- name="general.check"
109
- size={16}
110
- style={styles.rowIconRight}
111
- accessibilityElementsHidden
112
- />
113
101
  </PressableRow>
114
102
  )
115
103
  }
@@ -121,7 +109,7 @@ export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
121
109
  const navigation = useNavigation<NavigationProp<ConversationFilterStackParamList, 'Filters'>>()
122
110
 
123
111
  return (
124
- <View style={[styles.borderLessRow]}>
112
+ <View style={[styles.rowWithoutBorder]}>
125
113
  <TextButton onPress={() => navigation.navigate(routeName, {})} style={styles.viewMoreButton}>
126
114
  View more
127
115
  </TextButton>
@@ -135,15 +123,23 @@ export const PressableRow = ({
135
123
  onPress,
136
124
  style,
137
125
  }: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
138
- const styles = useRowStyles()
126
+ const styles = useRowStyles({ isActive })
139
127
  return (
140
128
  <PlatformPressable
141
- style={styles.container}
129
+ style={styles.pressable}
142
130
  onPress={onPress}
143
131
  accessibilityRole="radio"
144
132
  accessibilityState={{ selected: isActive }}
145
133
  >
146
- <View style={[styles.innerContainer, style]}>{children}</View>
134
+ <View style={styles.row}>
135
+ <View style={[styles.rowInner, style]}>{children}</View>
136
+ <Icon
137
+ name="general.check"
138
+ style={styles.rowIconRight}
139
+ accessibilityElementsHidden
140
+ maxFontSizeMultiplier={2.5}
141
+ />
142
+ </View>
147
143
  </PlatformPressable>
148
144
  )
149
145
  }
@@ -154,20 +150,35 @@ const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
154
150
 
155
151
  const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
156
152
  const theme = useTheme()
153
+ const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
154
+ const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
155
+
157
156
  return StyleSheet.create({
158
- container: {
157
+ pressable: {
159
158
  paddingLeft: 16,
160
159
  },
161
- innerContainer: {
160
+ row: {
162
161
  flexDirection: 'row',
163
162
  alignItems: 'center',
163
+ justifyContent: 'space-between',
164
164
  gap: 12,
165
165
  borderBottomWidth: 1,
166
- borderBottomColor: theme.colors.fillColorNeutral050Base,
166
+ borderBottomColor: atFontScaleBreakpoint
167
+ ? theme.colors.borderColorDefaultDark
168
+ : theme.colors.borderColorDefaultBase,
167
169
  paddingVertical: 12,
168
170
  paddingRight: 16,
169
171
  },
170
- borderLessRow: {
172
+ rowInner: {
173
+ flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
174
+ alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
175
+ gap: 12,
176
+ flexShrink: 1,
177
+ },
178
+ rowTextContainer: {
179
+ flexShrink: 1,
180
+ },
181
+ rowWithoutBorder: {
171
182
  flexDirection: 'row',
172
183
  alignItems: 'center',
173
184
  gap: 12,
@@ -178,23 +189,25 @@ const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
178
189
  viewMoreButton: {
179
190
  flex: 1,
180
191
  },
181
- row: {},
182
192
  rowImage: {
183
- width: THUMBNAIL_WIDTH,
184
- height: THUMBNAIL_HEIGHT,
185
- borderRadius: 4,
186
- },
187
- rowContent: {
188
- flexShrink: 1,
193
+ width: THUMBNAIL_WIDTH * fontScale,
194
+ height: THUMBNAIL_HEIGHT * fontScale,
195
+ borderRadius: 4 * fontScale,
189
196
  },
190
197
  rowIconRight: {
191
- marginLeft: 'auto',
198
+ fontSize: 16,
192
199
  color: theme.colors.statusSuccessIcon,
193
200
  opacity: isActive ? 1 : 0,
194
201
  },
195
202
  rowTitle: {
196
203
  fontSize: 16,
197
204
  flexShrink: 1,
205
+ fontWeight: atFontScaleBreakpoint ? 400 : platformFontWeightBold,
206
+ },
207
+ rowSubtitle: {
208
+ color: atFontScaleBreakpoint
209
+ ? theme.colors.textColorDefaultSecondary
210
+ : theme.colors.textColorDefaultPrimary,
198
211
  },
199
212
  })
200
213
  }
package/src/utils/theme.ts CHANGED
@@ -57,6 +57,7 @@ interface ChatColors {
57
57
  androidModalHeaderButtonTextColor: ColorValue | string | undefined
58
58
  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined
59
59
  androidSwitchThumbColor: string | undefined
60
+ conversationActionsBackground: string
60
61
  testColor: string
61
62
  statusSuccessIcon: string
62
63
  statusSuccessText: string
@@ -99,6 +100,7 @@ const colorsChatLight: ChatColors = {
99
100
  buttonEnd: undefined,
100
101
  interaction: tokens.fillColorInteractionDefault,
101
102
  androidSwitchThumbColor: undefined,
103
+ conversationActionsBackground: tokens.colorNeutral100White,
102
104
  testColor: 'hotpink',
103
105
  statusInfoIcon: tokens.iconColorStatusInfoPrimary,
104
106
  statusInfoText: tokens.textColorStatusInfo,
@@ -141,6 +143,7 @@ const colorsChatDark: ChatColors = {
141
143
  buttonEnd: undefined,
142
144
  interaction: tokens.fillColorInteractionDefaultDark,
143
145
  androidSwitchThumbColor: undefined,
146
+ conversationActionsBackground: tokens.colorNeutral7,
144
147
  testColor: 'pink',
145
148
  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,
146
149
  statusInfoText: tokens.textColorStatusInfoDark,