@planningcenter/chat-react-native 3.15.0-rc.0 → 3.15.0-rc.10

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 (204) 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/components/conversations/conversation_preview.d.ts.map +1 -1
  4. package/build/components/conversations/conversation_preview.js +9 -5
  5. package/build/components/conversations/conversation_preview.js.map +1 -1
  6. package/build/components/conversations/mute_indicator.d.ts.map +1 -1
  7. package/build/components/conversations/mute_indicator.js +3 -1
  8. package/build/components/conversations/mute_indicator.js.map +1 -1
  9. package/build/components/conversations/swipeable_toggle_button.d.ts.map +1 -1
  10. package/build/components/conversations/swipeable_toggle_button.js +6 -3
  11. package/build/components/conversations/swipeable_toggle_button.js.map +1 -1
  12. package/build/components/conversations/unread_count_badge.js +9 -6
  13. package/build/components/conversations/unread_count_badge.js.map +1 -1
  14. package/build/components/display/action_button.d.ts.map +1 -1
  15. package/build/components/display/action_button.js +2 -4
  16. package/build/components/display/action_button.js.map +1 -1
  17. package/build/components/display/avatar.d.ts +3 -1
  18. package/build/components/display/avatar.d.ts.map +1 -1
  19. package/build/components/display/avatar.js +2 -2
  20. package/build/components/display/avatar.js.map +1 -1
  21. package/build/components/display/avatar_group.d.ts +3 -1
  22. package/build/components/display/avatar_group.d.ts.map +1 -1
  23. package/build/components/display/avatar_group.js +2 -2
  24. package/build/components/display/avatar_group.js.map +1 -1
  25. package/build/components/display/badge.d.ts +5 -1
  26. package/build/components/display/badge.d.ts.map +1 -1
  27. package/build/components/display/badge.js +2 -2
  28. package/build/components/display/badge.js.map +1 -1
  29. package/build/components/display/icon.d.ts +26 -13
  30. package/build/components/display/icon.d.ts.map +1 -1
  31. package/build/components/display/icon.js +0 -12
  32. package/build/components/display/icon.js.map +1 -1
  33. package/build/components/display/index.d.ts +1 -0
  34. package/build/components/display/index.d.ts.map +1 -1
  35. package/build/components/display/index.js +1 -0
  36. package/build/components/display/index.js.map +1 -1
  37. package/build/components/display/pressable_row.d.ts +14 -0
  38. package/build/components/display/pressable_row.d.ts.map +1 -0
  39. package/build/components/display/pressable_row.js +65 -0
  40. package/build/components/display/pressable_row.js.map +1 -0
  41. package/build/components/display/toggle_button.d.ts +3 -1
  42. package/build/components/display/toggle_button.d.ts.map +1 -1
  43. package/build/components/display/toggle_button.js +1 -1
  44. package/build/components/display/toggle_button.js.map +1 -1
  45. package/build/components/primitive/avatar_primitive.d.ts +2 -0
  46. package/build/components/primitive/avatar_primitive.d.ts.map +1 -1
  47. package/build/components/primitive/avatar_primitive.js +20 -19
  48. package/build/components/primitive/avatar_primitive.js.map +1 -1
  49. package/build/components/primitive/form_sheet.d.ts +3 -2
  50. package/build/components/primitive/form_sheet.d.ts.map +1 -1
  51. package/build/components/primitive/form_sheet.js +5 -3
  52. package/build/components/primitive/form_sheet.js.map +1 -1
  53. package/build/hooks/index.d.ts +1 -0
  54. package/build/hooks/index.d.ts.map +1 -1
  55. package/build/hooks/index.js +1 -0
  56. package/build/hooks/index.js.map +1 -1
  57. package/build/hooks/use_api.d.ts +1 -1
  58. package/build/hooks/use_api.d.ts.map +1 -1
  59. package/build/hooks/use_api.js.map +1 -1
  60. package/build/hooks/use_api_client.d.ts +1 -1
  61. package/build/hooks/use_api_client.d.ts.map +1 -1
  62. package/build/hooks/use_api_client.js +1 -1
  63. package/build/hooks/use_api_client.js.map +1 -1
  64. package/build/hooks/use_app_name.d.ts +3 -0
  65. package/build/hooks/use_app_name.d.ts.map +1 -0
  66. package/build/hooks/use_app_name.js +12 -0
  67. package/build/hooks/use_app_name.js.map +1 -0
  68. package/build/hooks/use_async_storage.d.ts +1 -1
  69. package/build/hooks/use_async_storage.d.ts.map +1 -1
  70. package/build/hooks/use_async_storage.js +6 -5
  71. package/build/hooks/use_async_storage.js.map +1 -1
  72. package/build/hooks/use_report_bug_action.d.ts +1 -1
  73. package/build/hooks/use_report_bug_action.d.ts.map +1 -1
  74. package/build/hooks/use_report_bug_action.js +1 -9
  75. package/build/hooks/use_report_bug_action.js.map +1 -1
  76. package/build/hooks/use_scalable_number_of_lines.d.ts +2 -0
  77. package/build/hooks/use_scalable_number_of_lines.d.ts.map +1 -0
  78. package/build/hooks/use_scalable_number_of_lines.js +9 -0
  79. package/build/hooks/use_scalable_number_of_lines.js.map +1 -0
  80. package/build/hooks/use_suspense_api.d.ts +1 -1
  81. package/build/hooks/use_suspense_api.d.ts.map +1 -1
  82. package/build/hooks/use_suspense_api.js.map +1 -1
  83. package/build/index.d.ts +2 -0
  84. package/build/index.d.ts.map +1 -1
  85. package/build/index.js +2 -0
  86. package/build/index.js.map +1 -1
  87. package/build/navigation/index.d.ts +20 -5
  88. package/build/navigation/index.d.ts.map +1 -1
  89. package/build/navigation/index.js +23 -15
  90. package/build/navigation/index.js.map +1 -1
  91. package/build/polyfills/events/CustomEvent.d.ts +21 -0
  92. package/build/polyfills/events/CustomEvent.d.ts.map +1 -0
  93. package/build/polyfills/events/CustomEvent.js +22 -0
  94. package/build/polyfills/events/CustomEvent.js.map +1 -0
  95. package/build/polyfills/events/Event.d.ts +49 -0
  96. package/build/polyfills/events/Event.d.ts.map +1 -0
  97. package/build/polyfills/events/Event.js +125 -0
  98. package/build/polyfills/events/Event.js.map +1 -0
  99. package/build/polyfills/events/EventHandlerAttributes.d.ts +8 -0
  100. package/build/polyfills/events/EventHandlerAttributes.d.ts.map +1 -0
  101. package/build/polyfills/events/EventHandlerAttributes.js +46 -0
  102. package/build/polyfills/events/EventHandlerAttributes.js.map +1 -0
  103. package/build/polyfills/events/EventTarget.d.ts +33 -0
  104. package/build/polyfills/events/EventTarget.d.ts.map +1 -0
  105. package/build/polyfills/events/EventTarget.js +238 -0
  106. package/build/polyfills/events/EventTarget.js.map +1 -0
  107. package/build/polyfills/events/internals/EventInternals.d.ts +30 -0
  108. package/build/polyfills/events/internals/EventInternals.d.ts.map +1 -0
  109. package/build/polyfills/events/internals/EventInternals.js +76 -0
  110. package/build/polyfills/events/internals/EventInternals.js.map +1 -0
  111. package/build/polyfills/events/internals/EventTargetInternals.d.ts +9 -0
  112. package/build/polyfills/events/internals/EventTargetInternals.d.ts.map +1 -0
  113. package/build/polyfills/events/internals/EventTargetInternals.js +11 -0
  114. package/build/polyfills/events/internals/EventTargetInternals.js.map +1 -0
  115. package/build/polyfills/webidl/PlatformObjects.d.ts +31 -0
  116. package/build/polyfills/webidl/PlatformObjects.d.ts.map +1 -0
  117. package/build/polyfills/webidl/PlatformObjects.js +39 -0
  118. package/build/polyfills/webidl/PlatformObjects.js.map +1 -0
  119. package/build/screens/bug_report_screen.d.ts.map +1 -1
  120. package/build/screens/bug_report_screen.js +62 -57
  121. package/build/screens/bug_report_screen.js.map +1 -1
  122. package/build/screens/conversation_filters/components/conversation_filters.js +9 -7
  123. package/build/screens/conversation_filters/components/conversation_filters.js.map +1 -1
  124. package/build/screens/conversation_filters/components/rows.d.ts.map +1 -1
  125. package/build/screens/conversation_filters/components/rows.js +50 -31
  126. package/build/screens/conversation_filters/components/rows.js.map +1 -1
  127. package/build/screens/conversations/components/list_header_component.d.ts.map +1 -1
  128. package/build/screens/conversations/components/list_header_component.js +2 -2
  129. package/build/screens/conversations/components/list_header_component.js.map +1 -1
  130. package/build/screens/conversations/conversations_screen.d.ts.map +1 -1
  131. package/build/screens/conversations/conversations_screen.js +6 -6
  132. package/build/screens/conversations/conversations_screen.js.map +1 -1
  133. package/build/screens/design_system_screen.js +1 -1
  134. package/build/screens/design_system_screen.js.map +1 -1
  135. package/build/screens/get_help_screen.d.ts +5 -0
  136. package/build/screens/get_help_screen.d.ts.map +1 -0
  137. package/build/screens/get_help_screen.js +94 -0
  138. package/build/screens/get_help_screen.js.map +1 -0
  139. package/build/screens/message_actions_screen.d.ts +1 -1
  140. package/build/screens/message_actions_screen.d.ts.map +1 -1
  141. package/build/screens/message_actions_screen.js +14 -11
  142. package/build/screens/message_actions_screen.js.map +1 -1
  143. package/build/utils/client/index.d.ts +1 -0
  144. package/build/utils/client/index.d.ts.map +1 -1
  145. package/build/utils/client/index.js +1 -0
  146. package/build/utils/client/index.js.map +1 -1
  147. package/build/utils/client/types.d.ts +61 -0
  148. package/build/utils/client/types.d.ts.map +1 -0
  149. package/build/utils/client/types.js +2 -0
  150. package/build/utils/client/types.js.map +1 -0
  151. package/build/utils/styles.d.ts +1 -1
  152. package/build/utils/styles.js +1 -1
  153. package/build/utils/styles.js.map +1 -1
  154. package/build/utils/theme.d.ts +1 -0
  155. package/build/utils/theme.d.ts.map +1 -1
  156. package/build/utils/theme.js +2 -0
  157. package/build/utils/theme.js.map +1 -1
  158. package/package.json +5 -5
  159. package/src/__tests__/event-polyfill.test.ts +314 -0
  160. package/src/components/conversations/conversation_actions.tsx +1 -1
  161. package/src/components/conversations/conversation_preview.tsx +15 -4
  162. package/src/components/conversations/mute_indicator.tsx +9 -1
  163. package/src/components/conversations/swipeable_toggle_button.tsx +18 -3
  164. package/src/components/conversations/unread_count_badge.tsx +9 -6
  165. package/src/components/display/action_button.tsx +3 -4
  166. package/src/components/display/avatar.tsx +5 -1
  167. package/src/components/display/avatar_group.tsx +5 -1
  168. package/src/components/display/badge.tsx +6 -1
  169. package/src/components/display/icon.tsx +17 -14
  170. package/src/components/display/index.ts +1 -0
  171. package/src/components/display/pressable_row.tsx +103 -0
  172. package/src/components/display/toggle_button.tsx +12 -1
  173. package/src/components/primitive/avatar_primitive.tsx +35 -19
  174. package/src/components/primitive/form_sheet.tsx +33 -5
  175. package/src/hooks/index.ts +1 -0
  176. package/src/hooks/use_api.ts +1 -1
  177. package/src/hooks/use_api_client.ts +2 -2
  178. package/src/hooks/use_app_name.ts +17 -0
  179. package/src/hooks/use_async_storage.ts +8 -5
  180. package/src/hooks/use_report_bug_action.ts +2 -10
  181. package/src/hooks/use_scalable_number_of_lines.ts +10 -0
  182. package/src/hooks/use_suspense_api.ts +1 -1
  183. package/src/index.tsx +2 -0
  184. package/src/navigation/index.tsx +38 -25
  185. package/src/polyfills/events/CustomEvent.ts +32 -0
  186. package/src/polyfills/events/Event.ts +186 -0
  187. package/src/polyfills/events/EventHandlerAttributes.ts +67 -0
  188. package/src/polyfills/events/EventTarget.ts +360 -0
  189. package/src/polyfills/events/README.md +1 -0
  190. package/src/polyfills/events/internals/EventInternals.ts +95 -0
  191. package/src/polyfills/events/internals/EventTargetInternals.ts +16 -0
  192. package/src/polyfills/webidl/PlatformObjects.ts +50 -0
  193. package/src/screens/bug_report_screen.tsx +79 -67
  194. package/src/screens/conversation_filters/components/conversation_filters.tsx +10 -7
  195. package/src/screens/conversation_filters/components/rows.tsx +63 -50
  196. package/src/screens/conversations/components/list_header_component.tsx +3 -1
  197. package/src/screens/conversations/conversations_screen.tsx +8 -6
  198. package/src/screens/design_system_screen.tsx +1 -1
  199. package/src/screens/get_help_screen.tsx +131 -0
  200. package/src/screens/message_actions_screen.tsx +34 -12
  201. package/src/utils/client/index.ts +1 -0
  202. package/src/utils/styles.ts +1 -1
  203. package/src/utils/theme.ts +3 -0
  204. /package/src/utils/client/{types.d.ts → types.ts} +0 -0
@@ -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',
@@ -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"]}
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAUlD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,kDAK7B,wBAAwB,sBAiE1B,CAAA;AAmCD,eAAO,MAAM,2BAA2B,yBAqBvC,CAAA"}
1
+ {"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAelD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,kDAK7B,wBAAwB,sBAoE1B,CAAA;AAqCD,eAAO,MAAM,2BAA2B,yBAqBvC,CAAA"}
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { StyleSheet, View } from 'react-native';
3
3
  import { AvatarGroup, Heading, Text, Badge } from '../display';
4
4
  import { formatDatePreview } from '../../utils/date';
5
- import { useTheme, useAtFontScaleBreakpoint } from '../../hooks';
5
+ import { useTheme, useAtFontScaleBreakpoint, useFontScale, useScalableNumberOfLines, } from '../../hooks';
6
6
  import { UnreadCountBadge } from './unread_count_badge';
7
7
  import { ConversationActions } from './conversation_actions';
8
8
  import { MuteIndicator } from './mute_indicator';
@@ -15,6 +15,8 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
15
15
  const shouldShowFallback = emptyConversation || !hasAvatarUrls;
16
16
  const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person';
17
17
  const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted;
18
+ const numberOfLinesScaledTitle = useScalableNumberOfLines(1);
19
+ const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2);
18
20
  const conversationPreviewText = lastMessageTextPreview
19
21
  ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
20
22
  : EMPTY_CONVERSATION_PREVIEW_TEXT;
@@ -25,10 +27,10 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
25
27
  return (<ConversationActions conversation={conversation} style={[styles.previewRow, style]} onPress={onPress} accessibilityLabel={conversationAccessibilityLabel}>
26
28
  <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} showFallback={shouldShowFallback} fallbackIconName={fallbackIconName}/>
27
29
  <View style={styles.conversationBody}>
28
- <Heading numberOfLines={1} variant="h3" style={styles.title}>
30
+ <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={styles.title}>
29
31
  {title}
30
32
  </Heading>
31
- <Text variant="tertiary" numberOfLines={2} style={emptyConversation && styles.emptyConversationPreviewText}>
33
+ <Text variant="tertiary" numberOfLines={numberOfLinesScaledPreviewText} style={emptyConversation && styles.emptyConversationPreviewText}>
32
34
  {conversationPreviewText}
33
35
  </Text>
34
36
  <ConversationBadges visible={showBadges} badges={badges}/>
@@ -44,11 +46,12 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
44
46
  };
45
47
  const ConversationBadges = ({ visible, badges }) => {
46
48
  const styles = useStyles();
49
+ const numberOfLinesScaled = useScalableNumberOfLines(1);
47
50
  if (!visible || !badges || badges.length === 0) {
48
51
  return null;
49
52
  }
50
53
  return (<View style={styles.badges}>
51
- {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
54
+ {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''} numberOfLinesMetaLabel={numberOfLinesScaled}/>))}
52
55
  </View>);
53
56
  };
54
57
  const skeletonBadges = [
@@ -90,6 +93,7 @@ const getConversationAccessibilityLabel = ({ conversation, showBadges, }) => {
90
93
  const useStyles = () => {
91
94
  const { colors } = useTheme();
92
95
  const atFontScaleBreakpoint = useAtFontScaleBreakpoint();
96
+ const fontScale = useFontScale();
93
97
  return StyleSheet.create({
94
98
  previewRow: {
95
99
  flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
@@ -144,7 +148,7 @@ const useStyles = () => {
144
148
  statusContainer: {
145
149
  flexDirection: 'row',
146
150
  alignItems: 'center',
147
- gap: 4,
151
+ gap: 4 * fontScale,
148
152
  },
149
153
  });
150
154
  };
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport { useTheme, useAtFontScaleBreakpoint } from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\nimport { ConversationActions } from './conversation_actions'\nimport { MuteIndicator } from './mute_indicator'\n\nconst EMPTY_CONVERSATION_PREVIEW_TEXT = 'Send your first message'\n\ninterface ConversationPreviewProps {\n conversation: ConversationResource\n onPress: () => void\n showBadges?: boolean\n style?: ViewStyle\n}\n\nexport const ConversationPreview = ({\n conversation,\n onPress,\n showBadges = true,\n style,\n}: ConversationPreviewProps) => {\n const styles = useStyles()\n const {\n lastMessageAuthorName,\n lastMessageCreatedAt,\n lastMessageTextPreview,\n previewAvatarUrls,\n title,\n unreadCount,\n badges,\n muted,\n } = conversation\n\n const emptyConversation = !lastMessageCreatedAt\n const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0\n const shouldShowFallback = emptyConversation || !hasAvatarUrls\n const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'\n const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted\n\n const conversationPreviewText = lastMessageTextPreview\n ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT\n\n const conversationAccessibilityLabel = getConversationAccessibilityLabel({\n conversation,\n showBadges,\n })\n\n return (\n <ConversationActions\n conversation={conversation}\n style={[styles.previewRow, style]}\n onPress={onPress}\n accessibilityLabel={conversationAccessibilityLabel}\n >\n <AvatarGroup\n size=\"lg\"\n sourceUris={previewAvatarUrls || []}\n showFallback={shouldShowFallback}\n fallbackIconName={fallbackIconName}\n />\n <View style={styles.conversationBody}>\n <Heading numberOfLines={1} variant=\"h3\" style={styles.title}>\n {title}\n </Heading>\n <Text\n variant=\"tertiary\"\n numberOfLines={2}\n style={emptyConversation && styles.emptyConversationPreviewText}\n >\n {conversationPreviewText}\n </Text>\n <ConversationBadges visible={showBadges} badges={badges} />\n </View>\n {hasMetaContent && (\n <View style={styles.metaContainer}>\n <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n <View style={styles.statusContainer}>\n <UnreadCountBadge count={unreadCount} showDot={muted} />\n <MuteIndicator muted={muted} />\n </View>\n </View>\n )}\n </ConversationActions>\n )\n}\n\ninterface BadgeShape {\n appName?: BadgeProps['productLogoName']\n pcoResourceType: string\n text: string | null\n}\nconst ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {\n const styles = useStyles()\n\n if (!visible || !badges || badges.length === 0) {\n return null\n }\n\n return (\n <View style={styles.badges}>\n {badges.map(badge => (\n <Badge\n key={badge.text}\n variant=\"meta\"\n productLogoName={badge.appName}\n label={badge.pcoResourceType}\n metaLabel={badge.text || ''}\n />\n ))}\n </View>\n )\n}\n\nconst skeletonBadges: BadgeShape[] = [\n {\n pcoResourceType: ' ',\n text: ' ',\n },\n]\nexport const ConversationPreviewSkeleton = () => {\n const styles = useStyles()\n\n return (\n <View style={styles.previewRow}>\n <AvatarGroup\n size=\"lg\"\n sourceUris={[]}\n showFallback={true}\n fallbackIconName={'general.person'}\n />\n <View style={styles.conversationBody}>\n <View style={styles.titleLoading} />\n <View style={styles.subtitleLoading} />\n <ConversationBadges visible={true} badges={skeletonBadges} />\n </View>\n <View style={styles.metaContainer}>\n <View style={styles.dateLoading} />\n </View>\n </View>\n )\n}\n\ninterface GetConversationAccessibilityLabelProps {\n conversation: ConversationResource\n showBadges: boolean\n}\nconst getConversationAccessibilityLabel = ({\n conversation,\n showBadges,\n}: GetConversationAccessibilityLabelProps) => {\n const {\n badges,\n title,\n lastMessageAuthorName,\n lastMessageTextPreview,\n muted,\n unreadCount,\n lastMessageCreatedAt,\n } = conversation\n\n const hasBadges = badges && showBadges\n const hasUnreadMessages = unreadCount > 0\n const hasLastMessage = lastMessageCreatedAt\n\n const label = {\n title,\n badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',\n muted: muted ? 'Muted' : '',\n readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',\n lastMessage: hasLastMessage\n ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT,\n }\n\n return `Select ${label.title}, ${label.badge}, ${label.muted}, ${label.readStatus}, ${label.lastMessage}`.trim()\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n previewRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n gap: 8,\n borderBottomWidth: 1,\n borderBottomColor: atFontScaleBreakpoint\n ? colors.borderColorDefaultDark\n : colors.borderColorDefaultDim,\n paddingTop: 12,\n paddingBottom: 12,\n paddingHorizontal: 16,\n },\n title: {\n fontSize: 16,\n color: colors.textColorDefaultPrimary,\n },\n titleLoading: {\n width: 120,\n height: 20,\n backgroundColor: colors.fillColorNeutral080,\n borderRadius: 4,\n },\n conversationBody: {\n flex: 1,\n rowGap: 2,\n },\n emptyConversationPreviewText: {\n color: colors.interaction,\n },\n subtitleLoading: {\n width: 80,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n metaContainer: {\n gap: 4,\n alignItems: atFontScaleBreakpoint ? 'center' : 'flex-end',\n justifyContent: atFontScaleBreakpoint ? 'space-between' : 'flex-start',\n flexDirection: atFontScaleBreakpoint ? 'row' : 'column',\n },\n dateLoading: {\n width: 60,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n badges: {\n marginTop: 4,\n alignItems: 'flex-start',\n },\n statusContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,YAAY,EACZ,wBAAwB,GACzB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,MAAM,+BAA+B,GAAG,yBAAyB,CAAA;AASjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,YAAY,EACZ,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,KAAK,GACoB,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EACJ,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,GACN,GAAG,YAAY,CAAA;IAEhB,MAAM,iBAAiB,GAAG,CAAC,oBAAoB,CAAA;IAC/C,MAAM,aAAa,GAAG,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAA;IACvE,MAAM,kBAAkB,GAAG,iBAAiB,IAAI,CAAC,aAAa,CAAA;IAC9D,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,gBAAgB,CAAA;IACtF,MAAM,cAAc,GAAG,oBAAoB,IAAI,WAAW,GAAG,CAAC,IAAI,KAAK,CAAA;IAEvE,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;IAC5D,MAAM,8BAA8B,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;IAElE,MAAM,uBAAuB,GAAG,sBAAsB;QACpD,CAAC,CAAC,GAAG,qBAAqB,KAAK,sBAAsB,EAAE;QACvD,CAAC,CAAC,+BAA+B,CAAA;IAEnC,MAAM,8BAA8B,GAAG,iCAAiC,CAAC;QACvE,YAAY;QACZ,UAAU;KACX,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,mBAAmB,CAClB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAClC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,kBAAkB,CAAC,CAAC,8BAA8B,CAAC,CAEnD;MAAA,CAAC,WAAW,CACV,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CACpC,YAAY,CAAC,CAAC,kBAAkB,CAAC,CACjC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAErC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;QAAA,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACjF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,IAAI,CACH,OAAO,CAAC,UAAU,CAClB,aAAa,CAAC,CAAC,8BAA8B,CAAC,CAC9C,KAAK,CAAC,CAAC,iBAAiB,IAAI,MAAM,CAAC,4BAA4B,CAAC,CAEhE;UAAA,CAAC,uBAAuB,CAC1B;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAC1D;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,cAAc,IAAI,CACjB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC,EAAE,IAAI,CACxE;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;YAAA,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EACrD;YAAA,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC9B;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,kBAAkB,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAA+C,EAAE,EAAE;IAC9F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;IAEvD,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/C,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACnB,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAChB,OAAO,CAAC,MAAM,CACd,eAAe,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAC7B,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAC5B,sBAAsB,CAAC,CAAC,mBAAmB,CAAC,EAC5C,CACH,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,cAAc,GAAiB;IACnC;QACE,eAAe,EAAE,SAAS;QAC1B,IAAI,EAAE,gBAAgB;KACvB;CACF,CAAA;AACD,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;MAAA,CAAC,WAAW,CACV,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,YAAY,CAAC,CAAC,IAAI,CAAC,CACnB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAErC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EACjC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,EACpC;QAAA,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAC5D;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,EAClC;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAMD,MAAM,iCAAiC,GAAG,CAAC,EACzC,YAAY,EACZ,UAAU,GAC6B,EAAE,EAAE;IAC3C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,qBAAqB,EACrB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,oBAAoB,GACrB,GAAG,YAAY,CAAA;IAEhB,MAAM,SAAS,GAAG,MAAM,IAAI,UAAU,CAAA;IACtC,MAAM,iBAAiB,GAAG,WAAW,GAAG,CAAC,CAAA;IACzC,MAAM,cAAc,GAAG,oBAAoB,CAAA;IAE3C,MAAM,KAAK,GAAG;QACZ,KAAK;QACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,eAAe,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;QACpF,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAC3B,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,WAAW,kBAAkB,CAAC,CAAC,CAAC,EAAE;QACrE,WAAW,EAAE,cAAc;YACzB,CAAC,CAAC,qBAAqB,iBAAiB,CAAC,oBAAoB,CAAC,SAAS,qBAAqB,aAAa,sBAAsB,EAAE;YACjI,CAAC,CAAC,+BAA+B;KACpC,CAAA;IAED,OAAO,UAAU,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAA;AAClH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAA;IACxD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,aAAa,EAAE,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACvD,GAAG,EAAE,CAAC;YACN,iBAAiB,EAAE,CAAC;YACpB,iBAAiB,EAAE,qBAAqB;gBACtC,CAAC,CAAC,MAAM,CAAC,sBAAsB;gBAC/B,CAAC,CAAC,MAAM,CAAC,qBAAqB;YAChC,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,EAAE;YACjB,iBAAiB,EAAE,EAAE;SACtB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,EAAE;YACV,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY,EAAE,CAAC;SAChB;QACD,gBAAgB,EAAE;YAChB,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,CAAC;SACV;QACD,4BAA4B,EAAE;YAC5B,KAAK,EAAE,MAAM,CAAC,WAAW;SAC1B;QACD,eAAe,EAAE;YACf,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY,EAAE,CAAC;SAChB;QACD,aAAa,EAAE;YACb,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;YACzD,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;YACtE,aAAa,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;SACxD;QACD,WAAW,EAAE;YACX,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY,EAAE,CAAC;SAChB;QACD,MAAM,EAAE;YACN,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,YAAY;SACzB;QACD,eAAe,EAAE;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC,GAAG,SAAS;SACnB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport {\n useTheme,\n useAtFontScaleBreakpoint,\n useFontScale,\n useScalableNumberOfLines,\n} from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\nimport { ConversationActions } from './conversation_actions'\nimport { MuteIndicator } from './mute_indicator'\n\nconst EMPTY_CONVERSATION_PREVIEW_TEXT = 'Send your first message'\n\ninterface ConversationPreviewProps {\n conversation: ConversationResource\n onPress: () => void\n showBadges?: boolean\n style?: ViewStyle\n}\n\nexport const ConversationPreview = ({\n conversation,\n onPress,\n showBadges = true,\n style,\n}: ConversationPreviewProps) => {\n const styles = useStyles()\n const {\n lastMessageAuthorName,\n lastMessageCreatedAt,\n lastMessageTextPreview,\n previewAvatarUrls,\n title,\n unreadCount,\n badges,\n muted,\n } = conversation\n\n const emptyConversation = !lastMessageCreatedAt\n const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0\n const shouldShowFallback = emptyConversation || !hasAvatarUrls\n const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'\n const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted\n\n const numberOfLinesScaledTitle = useScalableNumberOfLines(1)\n const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2)\n\n const conversationPreviewText = lastMessageTextPreview\n ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT\n\n const conversationAccessibilityLabel = getConversationAccessibilityLabel({\n conversation,\n showBadges,\n })\n\n return (\n <ConversationActions\n conversation={conversation}\n style={[styles.previewRow, style]}\n onPress={onPress}\n accessibilityLabel={conversationAccessibilityLabel}\n >\n <AvatarGroup\n size=\"lg\"\n sourceUris={previewAvatarUrls || []}\n showFallback={shouldShowFallback}\n fallbackIconName={fallbackIconName}\n />\n <View style={styles.conversationBody}>\n <Heading numberOfLines={numberOfLinesScaledTitle} variant=\"h3\" style={styles.title}>\n {title}\n </Heading>\n <Text\n variant=\"tertiary\"\n numberOfLines={numberOfLinesScaledPreviewText}\n style={emptyConversation && styles.emptyConversationPreviewText}\n >\n {conversationPreviewText}\n </Text>\n <ConversationBadges visible={showBadges} badges={badges} />\n </View>\n {hasMetaContent && (\n <View style={styles.metaContainer}>\n <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n <View style={styles.statusContainer}>\n <UnreadCountBadge count={unreadCount} showDot={muted} />\n <MuteIndicator muted={muted} />\n </View>\n </View>\n )}\n </ConversationActions>\n )\n}\n\ninterface BadgeShape {\n appName?: BadgeProps['productLogoName']\n pcoResourceType: string\n text: string | null\n}\nconst ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {\n const styles = useStyles()\n const numberOfLinesScaled = useScalableNumberOfLines(1)\n\n if (!visible || !badges || badges.length === 0) {\n return null\n }\n\n return (\n <View style={styles.badges}>\n {badges.map(badge => (\n <Badge\n key={badge.text}\n variant=\"meta\"\n productLogoName={badge.appName}\n label={badge.pcoResourceType}\n metaLabel={badge.text || ''}\n numberOfLinesMetaLabel={numberOfLinesScaled}\n />\n ))}\n </View>\n )\n}\n\nconst skeletonBadges: BadgeShape[] = [\n {\n pcoResourceType: ' ',\n text: ' ',\n },\n]\nexport const ConversationPreviewSkeleton = () => {\n const styles = useStyles()\n\n return (\n <View style={styles.previewRow}>\n <AvatarGroup\n size=\"lg\"\n sourceUris={[]}\n showFallback={true}\n fallbackIconName={'general.person'}\n />\n <View style={styles.conversationBody}>\n <View style={styles.titleLoading} />\n <View style={styles.subtitleLoading} />\n <ConversationBadges visible={true} badges={skeletonBadges} />\n </View>\n <View style={styles.metaContainer}>\n <View style={styles.dateLoading} />\n </View>\n </View>\n )\n}\n\ninterface GetConversationAccessibilityLabelProps {\n conversation: ConversationResource\n showBadges: boolean\n}\nconst getConversationAccessibilityLabel = ({\n conversation,\n showBadges,\n}: GetConversationAccessibilityLabelProps) => {\n const {\n badges,\n title,\n lastMessageAuthorName,\n lastMessageTextPreview,\n muted,\n unreadCount,\n lastMessageCreatedAt,\n } = conversation\n\n const hasBadges = badges && showBadges\n const hasUnreadMessages = unreadCount > 0\n const hasLastMessage = lastMessageCreatedAt\n\n const label = {\n title,\n badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',\n muted: muted ? 'Muted' : '',\n readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',\n lastMessage: hasLastMessage\n ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT,\n }\n\n return `Select ${label.title}, ${label.badge}, ${label.muted}, ${label.readStatus}, ${label.lastMessage}`.trim()\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n const fontScale = useFontScale()\n\n return StyleSheet.create({\n previewRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n gap: 8,\n borderBottomWidth: 1,\n borderBottomColor: atFontScaleBreakpoint\n ? colors.borderColorDefaultDark\n : colors.borderColorDefaultDim,\n paddingTop: 12,\n paddingBottom: 12,\n paddingHorizontal: 16,\n },\n title: {\n fontSize: 16,\n color: colors.textColorDefaultPrimary,\n },\n titleLoading: {\n width: 120,\n height: 20,\n backgroundColor: colors.fillColorNeutral080,\n borderRadius: 4,\n },\n conversationBody: {\n flex: 1,\n rowGap: 2,\n },\n emptyConversationPreviewText: {\n color: colors.interaction,\n },\n subtitleLoading: {\n width: 80,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n metaContainer: {\n gap: 4,\n alignItems: atFontScaleBreakpoint ? 'center' : 'flex-end',\n justifyContent: atFontScaleBreakpoint ? 'space-between' : 'flex-start',\n flexDirection: atFontScaleBreakpoint ? 'row' : 'column',\n },\n dateLoading: {\n width: 60,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n badges: {\n marginTop: 4,\n alignItems: 'flex-start',\n },\n statusContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4 * fontScale,\n },\n })\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"mute_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,aAAa,cAAe;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,6BAM1D,CAAA"}
1
+ {"version":3,"file":"mute_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,aAAa,cAAe;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,6BAY1D,CAAA"}
@@ -2,17 +2,19 @@ import React from 'react';
2
2
  import { StyleSheet } from 'react-native';
3
3
  import { Icon } from '../display';
4
4
  import { useTheme } from '../../hooks';
5
+ import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils';
5
6
  export const MuteIndicator = ({ muted }) => {
6
7
  const styles = useStyles();
7
8
  if (!muted)
8
9
  return null;
9
- return <Icon name="general.bellMuted" size={16} style={styles.mutedIcon}/>;
10
+ return (<Icon name="general.bellMuted" style={styles.mutedIcon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>);
10
11
  };
11
12
  const useStyles = () => {
12
13
  const { colors } = useTheme();
13
14
  return StyleSheet.create({
14
15
  mutedIcon: {
15
16
  color: colors.iconColorDefaultDim,
17
+ fontSize: 16,
16
18
  },
17
19
  });
18
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"mute_indicator.js","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAG,CAAA;AAC7E,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,mBAAmB;SAClC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Icon } from '../display'\nimport { useTheme } from '../../hooks'\n\nexport const MuteIndicator = ({ muted }: { muted: boolean }) => {\n const styles = useStyles()\n\n if (!muted) return null\n\n return <Icon name=\"general.bellMuted\" size={16} style={styles.mutedIcon} />\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n mutedIcon: {\n color: colors.iconColorDefaultDim,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"mute_indicator.js","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,mBAAmB,CACxB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,qBAAqB,CAAC,CAAC,wBAAwB,CAAC,EAChD,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,mBAAmB;YACjC,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Icon } from '../display'\nimport { useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'\n\nexport const MuteIndicator = ({ muted }: { muted: boolean }) => {\n const styles = useStyles()\n\n if (!muted) return null\n\n return (\n <Icon\n name=\"general.bellMuted\"\n style={styles.mutedIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n mutedIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"swipeable_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAM5D,UAAU,0BAA2B,SAAQ,cAAc;IACzD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,0BAA0B,qBAiC5B"}
1
+ {"version":3,"file":"swipeable_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAU5D,UAAU,0BAA2B,SAAQ,cAAc;IACzD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,0BAA0B,qBAyC5B"}
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
3
3
  import { Pressable } from 'react-native-gesture-handler';
4
4
  import { Icon, Spinner, Text } from '../display';
5
5
  import { useCreateAndroidRippleColor, useTheme } from '../../hooks';
6
- import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles';
6
+ import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, platformPressedOpacityStyle, } from '../../utils/styles';
7
7
  import { tokens } from '../../vendor/tapestry/tokens';
8
8
  import { Haptic } from '../../utils/native_adapters/configuration';
9
9
  export function SwipeableToggleButton({ backgroundColor, onPress, toggleContent, disabled = false, toggled, loading = false, ...props }) {
@@ -17,8 +17,8 @@ export function SwipeableToggleButton({ backgroundColor, onPress, toggleContent,
17
17
  onPress?.(event);
18
18
  }} style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} disabled={disabled || loading} accessibilityRole="togglebutton" accessibilityState={{ checked: toggled }} {...props}>
19
19
  {loading ? (<Spinner size={20}/>) : (<>
20
- <Icon name={iconName} style={styles.icon} size={20}/>
21
- <Text variant="footnote" style={styles.text}>
20
+ <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
21
+ <Text variant="footnote" style={styles.text} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}>
22
22
  {label}
23
23
  </Text>
24
24
  </>)}
@@ -41,12 +41,15 @@ const useStyles = ({ backgroundColor, disabled }) => {
41
41
  backgroundColor: buttonBackgroundColor,
42
42
  },
43
43
  icon: {
44
+ fontSize: 20,
44
45
  color: fillColor,
45
46
  marginTop: 4,
46
47
  },
47
48
  text: {
48
49
  color: fillColor,
49
50
  fontWeight: platformFontWeightMedium,
51
+ textAlign: 'center',
52
+ paddingHorizontal: 8,
50
53
  },
51
54
  });
52
55
  };
@@ -1 +1 @@
1
- {"version":3,"file":"swipeable_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\ninterface SwipeableToggleButtonProps extends PressableProps {\n backgroundColor: string\n toggled: boolean\n toggleContent: {\n true: { iconName: IconString; label: string }\n false: { iconName: IconString; label: string }\n }\n loading?: boolean\n}\n\nexport function SwipeableToggleButton({\n backgroundColor,\n onPress,\n toggleContent,\n disabled = false,\n toggled,\n loading = false,\n ...props\n}: SwipeableToggleButtonProps) {\n const styles = useStyles({ backgroundColor, disabled })\n const androidRippleColor = useCreateAndroidRippleColor({\n color: backgroundColor,\n })\n\n const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n return (\n <Pressable\n onPress={event => {\n Haptic.impactLight()\n onPress?.(event)\n }}\n style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n disabled={disabled || loading}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: toggled }}\n {...props}\n >\n {loading ? (\n <Spinner size={20} />\n ) : (\n <>\n <Icon name={iconName} style={styles.icon} size={20} />\n <Text variant=\"footnote\" style={styles.text}>\n {label}\n </Text>\n </>\n )}\n </Pressable>\n )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonProps>) => {\n const { colors } = useTheme()\n const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n const buttonBackgroundColor = disabled\n ? colors.fillColorButtonNeutralSolidDisabled\n : backgroundColor\n\n return StyleSheet.create({\n button: {\n flex: 1,\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n height: '100%',\n backgroundColor: buttonBackgroundColor,\n },\n icon: {\n color: fillColor,\n marginTop: 4,\n },\n text: {\n color: fillColor,\n fontWeight: platformFontWeightMedium,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"swipeable_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport {\n MAX_FONT_SIZE_MULTIPLIER,\n platformFontWeightMedium,\n platformPressedOpacityStyle,\n} from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\ninterface SwipeableToggleButtonProps extends PressableProps {\n backgroundColor: string\n toggled: boolean\n toggleContent: {\n true: { iconName: IconString; label: string }\n false: { iconName: IconString; label: string }\n }\n loading?: boolean\n}\n\nexport function SwipeableToggleButton({\n backgroundColor,\n onPress,\n toggleContent,\n disabled = false,\n toggled,\n loading = false,\n ...props\n}: SwipeableToggleButtonProps) {\n const styles = useStyles({ backgroundColor, disabled })\n const androidRippleColor = useCreateAndroidRippleColor({\n color: backgroundColor,\n })\n\n const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n return (\n <Pressable\n onPress={event => {\n Haptic.impactLight()\n onPress?.(event)\n }}\n style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n disabled={disabled || loading}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: toggled }}\n {...props}\n >\n {loading ? (\n <Spinner size={20} />\n ) : (\n <>\n <Icon\n name={iconName}\n style={styles.icon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n <Text\n variant=\"footnote\"\n style={styles.text}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n >\n {label}\n </Text>\n </>\n )}\n </Pressable>\n )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonProps>) => {\n const { colors } = useTheme()\n const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n const buttonBackgroundColor = disabled\n ? colors.fillColorButtonNeutralSolidDisabled\n : backgroundColor\n\n return StyleSheet.create({\n button: {\n flex: 1,\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n height: '100%',\n backgroundColor: buttonBackgroundColor,\n },\n icon: {\n fontSize: 20,\n color: fillColor,\n marginTop: 4,\n },\n text: {\n color: fillColor,\n fontWeight: platformFontWeightMedium,\n textAlign: 'center',\n paddingHorizontal: 8,\n },\n })\n}\n"]}
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { StyleSheet, View } from 'react-native';
3
3
  import { Text } from '../display';
4
- import { useTheme } from '../../hooks';
5
- import { platformFontWeightBold } from '../../utils';
4
+ import { useFontScale, useTheme } from '../../hooks';
5
+ import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils';
6
6
  export const UnreadCountBadge = ({ count, showDot }) => {
7
7
  const styles = useStyles();
8
8
  const displayCount = count > 99 ? '99+' : count;
@@ -18,22 +18,25 @@ export const UnreadCountBadge = ({ count, showDot }) => {
18
18
  };
19
19
  const useStyles = () => {
20
20
  const { colors } = useTheme();
21
+ const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5;
22
+ const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit });
23
+ const size = 8 * fontScale;
21
24
  return StyleSheet.create({
22
25
  badge: {
23
26
  alignSelf: 'flex-end',
24
27
  backgroundColor: colors.fillColorInteractionDefault,
25
28
  paddingVertical: 2,
26
29
  paddingHorizontal: 8,
27
- borderRadius: 24,
30
+ borderRadius: 24 * fontScale,
28
31
  },
29
32
  count: {
30
33
  fontWeight: platformFontWeightBold,
31
34
  color: 'white',
32
35
  },
33
36
  dot: {
34
- width: 8,
35
- height: 8,
36
- borderRadius: 8,
37
+ width: size,
38
+ height: size,
39
+ borderRadius: size,
37
40
  backgroundColor: colors.fillColorInteractionDefault,
38
41
  },
39
42
  });
@@ -1 +1 @@
1
- {"version":3,"file":"unread_count_badge.js","sourceRoot":"","sources":["../../../src/components/conversations/unread_count_badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAuC,EAAE,EAAE;IAC1F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAE/C,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAC5B,IAAI,OAAO;QAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAG,CAAA;IAE/C,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAC3C;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU;YACrB,eAAe,EAAE,MAAM,CAAC,2BAA2B;YACnD,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;YACpB,YAAY,EAAE,EAAE;SACjB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,sBAAsB;YAClC,KAAK,EAAE,OAAO;SACf;QACD,GAAG,EAAE;YACH,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,YAAY,EAAE,CAAC;YACf,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../display'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightBold } from '../../utils'\n\nexport const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {\n const styles = useStyles()\n const displayCount = count > 99 ? '99+' : count\n\n if (count === 0) return null\n if (showDot) return <View style={styles.dot} />\n\n return (\n <View style={styles.badge}>\n <Text variant=\"footnote\" style={styles.count}>\n {displayCount}\n </Text>\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n badge: {\n alignSelf: 'flex-end',\n backgroundColor: colors.fillColorInteractionDefault,\n paddingVertical: 2,\n paddingHorizontal: 8,\n borderRadius: 24,\n },\n count: {\n fontWeight: platformFontWeightBold,\n color: 'white',\n },\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: colors.fillColorInteractionDefault,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"unread_count_badge.js","sourceRoot":"","sources":["../../../src/components/conversations/unread_count_badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAE9E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAuC,EAAE,EAAE;IAC1F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAE/C,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAC5B,IAAI,OAAO;QAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAG,CAAA;IAE/C,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAC3C;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,aAAa,GAAG,wBAAwB,GAAG,GAAG,CAAA;IACpD,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC,CAAA;IACxE,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAA;IAE1B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU;YACrB,eAAe,EAAE,MAAM,CAAC,2BAA2B;YACnD,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;YACpB,YAAY,EAAE,EAAE,GAAG,SAAS;SAC7B;QACD,KAAK,EAAE;YACL,UAAU,EAAE,sBAAsB;YAClC,KAAK,EAAE,OAAO;SACf;QACD,GAAG,EAAE;YACH,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../display'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'\n\nexport const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {\n const styles = useStyles()\n const displayCount = count > 99 ? '99+' : count\n\n if (count === 0) return null\n if (showDot) return <View style={styles.dot} />\n\n return (\n <View style={styles.badge}>\n <Text variant=\"footnote\" style={styles.count}>\n {displayCount}\n </Text>\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5\n const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })\n const size = 8 * fontScale\n\n return StyleSheet.create({\n badge: {\n alignSelf: 'flex-end',\n backgroundColor: colors.fillColorInteractionDefault,\n paddingVertical: 2,\n paddingHorizontal: 8,\n borderRadius: 24 * fontScale,\n },\n count: {\n fontWeight: platformFontWeightBold,\n color: 'white',\n },\n dot: {\n width: size,\n height: size,\n borderRadius: size,\n backgroundColor: colors.fillColorInteractionDefault,\n },\n })\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,mGAStB;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,6BAoCA,CAAA"}
1
+ {"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,mGAStB;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,6BAsCA,CAAA"}
@@ -23,17 +23,15 @@ export const ActionButton = ({ visible = true, disabled = false, onPress, title,
23
23
  </Text>)}
24
24
  <View style={styles.buttonRow}>
25
25
  {secondaryButton}
26
- <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>
26
+ <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle={title}/>
27
27
  </View>
28
28
  </Animated.View>);
29
29
  };
30
- const SCALE_THAT_BUTTONS_WRAP = 1.15;
31
30
  const useStyles = () => {
32
31
  const { fontScale } = useWindowDimensions();
33
32
  const { bottom } = useSafeAreaInsets();
34
33
  const { colors } = useTheme();
35
34
  const containerVerticalPadding = 16;
36
- const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP;
37
35
  return StyleSheet.create({
38
36
  container: {
39
37
  backgroundColor: colors.surfaceColor090,
@@ -46,7 +44,7 @@ const useStyles = () => {
46
44
  },
47
45
  buttonRow: {
48
46
  flexDirection: 'row',
49
- justifyContent: isButtonsWrapping ? 'center' : 'space-between',
47
+ justifyContent: fontScale > 1 ? 'center' : 'space-between',
50
48
  alignItems: 'center',
51
49
  gap: 16,
52
50
  flexWrap: 'wrap-reverse',
@@ -1 +1 @@
1
- {"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button } from './button'\nimport { useEffect } from 'react'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport { IconString } from './icon'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n}) => {\n const styles = useStyles()\n const [show, setShow] = useState(visible)\n\n useEffect(() => {\n if (show === visible) return\n\n setShow(visible)\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n }, [show, visible])\n\n if (!visible) return null\n\n return (\n <Animated.View style={styles.container}>\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n />\n </View>\n </Animated.View>\n )\n}\n\nconst SCALE_THAT_BUTTONS_WRAP = 1.15\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: isButtonsWrapping ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n })\n}\n"]}
1
+ {"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAA;AAE/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,OAAO,GAAG,KAAK,GAUhB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,OAAO;YAAE,OAAM;QAE5B,OAAO,CAAC,OAAO,CAAC,CAAA;QAChB,eAAe,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACtE,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAA;IAEnB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzB,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACrC;MAAA,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAU,CAC9C;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,eAAe,CAChB;QAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,IAAI,CAAC,IAAI,CACT,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACvD,YAAY,CAAC,CAAC,kBAAkB,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,qBAAqB,CAAC,CAAC,iCAAiC,CAAC,CACzD,oCAAoC,CACpC,8BAA8B,CAAC,CAAC,KAAK,CAAC,EAE1C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,wBAAwB,GAAG,EAAE,CAAA;IAEnC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,wBAAwB;YACpC,aAAa,EAAE,MAAM,GAAG,wBAAwB;YAChD,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC,qBAAqB;YAC5C,GAAG,EAAE,EAAE;SACR;QACD,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe;YAC1D,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,cAAc;SACzB;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,CAAC;SACZ;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,QAAQ;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button } from './button'\nimport { useEffect } from 'react'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport { IconString } from './icon'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n}) => {\n const styles = useStyles()\n const [show, setShow] = useState(visible)\n\n useEffect(() => {\n if (show === visible) return\n\n setShow(visible)\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n }, [show, visible])\n\n if (!visible) return null\n\n return (\n <Animated.View style={styles.container}>\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={title}\n />\n </View>\n </Animated.View>\n )\n}\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: fontScale > 1 ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n })\n}\n"]}
@@ -7,7 +7,9 @@ interface AvatarProps {
7
7
  presence?: AvatarPresenceProps['presence'];
8
8
  showFallback?: boolean;
9
9
  fallbackIconName?: IconString;
10
+ style?: AvatarRootProps['style'];
11
+ maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
10
12
  }
11
- export declare function Avatar({ presence, size, sourceUri, showFallback, fallbackIconName, }: AvatarProps): React.JSX.Element;
13
+ export declare function Avatar({ presence, size, sourceUri, showFallback, fallbackIconName, style, maxFontSizeMultiplier, }: AvatarProps): React.JSX.Element;
12
14
  export {};
13
15
  //# sourceMappingURL=avatar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,WAAW;IACnB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;CAC9B;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAoB,EACpB,gBAAmC,GACpC,EAAE,WAAW,qBAeb"}
1
+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,WAAW;IACnB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAoB,EACpB,gBAAmC,EACnC,KAAK,EACL,qBAAqB,GACtB,EAAE,WAAW,qBAeb"}
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import AvatarPrimitive from '../primitive/avatar_primitive';
3
- export function Avatar({ presence, size = 'lg', sourceUri, showFallback = false, fallbackIconName = 'general.person', }) {
3
+ export function Avatar({ presence, size = 'lg', sourceUri, showFallback = false, fallbackIconName = 'general.person', style, maxFontSizeMultiplier, }) {
4
4
  const shouldShowFallback = showFallback || !sourceUri;
5
- return (<AvatarPrimitive.Root size={size}>
5
+ return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
6
6
  <AvatarPrimitive.Mask>
7
7
  {shouldShowFallback ? (<AvatarPrimitive.ImageFallback name={fallbackIconName}/>) : (<AvatarPrimitive.Image sourceUri={sourceUri}/>)}
8
8
  </AvatarPrimitive.Mask>
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAIN,MAAM,+BAA+B,CAAA;AAWtC,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,GACvB;IACZ,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,SAAS,CAAA;IAErD,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/B;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAChD,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarImageProps,\n type AvatarPresenceProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarProps {\n sourceUri: AvatarImageProps['sourceUri']\n size?: AvatarRootProps['size']\n presence?: AvatarPresenceProps['presence']\n showFallback?: boolean\n fallbackIconName?: IconString\n}\n\nexport function Avatar({\n presence,\n size = 'lg',\n sourceUri,\n showFallback = false,\n fallbackIconName = 'general.person',\n}: AvatarProps) {\n const shouldShowFallback = showFallback || !sourceUri\n\n return (\n <AvatarPrimitive.Root size={size}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <AvatarPrimitive.Image sourceUri={sourceUri} />\n )}\n </AvatarPrimitive.Mask>\n {presence && <AvatarPrimitive.Presence presence={presence} />}\n </AvatarPrimitive.Root>\n )\n}\n"]}
1
+ {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAIN,MAAM,+BAA+B,CAAA;AAatC,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,KAAK,EACL,qBAAqB,GACT;IACZ,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,SAAS,CAAA;IAErD,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC3F;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAChD,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarImageProps,\n type AvatarPresenceProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarProps {\n sourceUri: AvatarImageProps['sourceUri']\n size?: AvatarRootProps['size']\n presence?: AvatarPresenceProps['presence']\n showFallback?: boolean\n fallbackIconName?: IconString\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function Avatar({\n presence,\n size = 'lg',\n sourceUri,\n showFallback = false,\n fallbackIconName = 'general.person',\n style,\n maxFontSizeMultiplier,\n}: AvatarProps) {\n const shouldShowFallback = showFallback || !sourceUri\n\n return (\n <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <AvatarPrimitive.Image sourceUri={sourceUri} />\n )}\n </AvatarPrimitive.Mask>\n {presence && <AvatarPrimitive.Presence presence={presence} />}\n </AvatarPrimitive.Root>\n )\n}\n"]}
@@ -6,7 +6,9 @@ interface AvatarGroupDisplayProps {
6
6
  showFallback?: boolean;
7
7
  fallbackIconName?: IconString;
8
8
  size?: AvatarRootProps['size'];
9
+ style?: AvatarRootProps['style'];
10
+ maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
9
11
  }
10
- export declare function AvatarGroup({ sourceUris, showFallback, fallbackIconName, size, }: AvatarGroupDisplayProps): React.JSX.Element;
12
+ export declare function AvatarGroup({ sourceUris, showFallback, fallbackIconName, size, style, maxFontSizeMultiplier, }: AvatarGroupDisplayProps): React.JSX.Element;
11
13
  export {};
12
14
  //# sourceMappingURL=avatar_group.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"avatar_group.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAoB,EACpB,gBAAmC,EACnC,IAAW,GACZ,EAAE,uBAAuB,qBAiBzB"}
1
+ {"version":3,"file":"avatar_group.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAoB,EACpB,gBAAmC,EACnC,IAAW,EACX,KAAK,EACL,qBAAqB,GACtB,EAAE,uBAAuB,qBAiBzB"}
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import AvatarPrimitive from '../primitive/avatar_primitive';
3
- export function AvatarGroup({ sourceUris, showFallback = false, fallbackIconName = 'general.person', size = 'lg', }) {
3
+ export function AvatarGroup({ sourceUris, showFallback = false, fallbackIconName = 'general.person', size = 'lg', style, maxFontSizeMultiplier, }) {
4
4
  const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0;
5
- return (<AvatarPrimitive.Root size={size}>
5
+ return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
6
6
  <AvatarPrimitive.Mask>
7
7
  {shouldShowFallback ? (<AvatarPrimitive.ImageFallback name={fallbackIconName}/>) : (<>
8
8
  <AvatarPrimitive.Group sourceUris={sourceUris}/>
@@ -1 +1 @@
1
- {"version":3,"file":"avatar_group.js","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAGN,MAAM,+BAA+B,CAAA;AAUtC,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,IAAI,GAAG,IAAI,GACa;IACxB,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,CAAA;IAEjF,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/B;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,EACE;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC9C;YAAA,CAAC,eAAe,CAAC,WAAW,CAAC,AAAD,EAC9B;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarGroupProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarGroupDisplayProps {\n sourceUris: AvatarGroupProps['sourceUris']\n showFallback?: boolean\n fallbackIconName?: IconString\n size?: AvatarRootProps['size']\n}\n\nexport function AvatarGroup({\n sourceUris,\n showFallback = false,\n fallbackIconName = 'general.person',\n size = 'lg',\n}: AvatarGroupDisplayProps) {\n const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0\n\n return (\n <AvatarPrimitive.Root size={size}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <>\n <AvatarPrimitive.Group sourceUris={sourceUris} />\n <AvatarPrimitive.GroupLoader />\n </>\n )}\n </AvatarPrimitive.Mask>\n </AvatarPrimitive.Root>\n )\n}\n"]}
1
+ {"version":3,"file":"avatar_group.js","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAGN,MAAM,+BAA+B,CAAA;AAYtC,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,IAAI,GAAG,IAAI,EACX,KAAK,EACL,qBAAqB,GACG;IACxB,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,CAAA;IAEjF,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC3F;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,EACE;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC9C;YAAA,CAAC,eAAe,CAAC,WAAW,CAAC,AAAD,EAC9B;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarGroupProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarGroupDisplayProps {\n sourceUris: AvatarGroupProps['sourceUris']\n showFallback?: boolean\n fallbackIconName?: IconString\n size?: AvatarRootProps['size']\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function AvatarGroup({\n sourceUris,\n showFallback = false,\n fallbackIconName = 'general.person',\n size = 'lg',\n style,\n maxFontSizeMultiplier,\n}: AvatarGroupDisplayProps) {\n const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0\n\n return (\n <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <>\n <AvatarPrimitive.Group sourceUris={sourceUris} />\n <AvatarPrimitive.GroupLoader />\n </>\n )}\n </AvatarPrimitive.Mask>\n </AvatarPrimitive.Root>\n )\n}\n"]}
@@ -50,7 +50,11 @@ export interface BadgeProps {
50
50
  * Callback function when the badge is pressed.
51
51
  */
52
52
  onPress?: () => void;
53
+ /**
54
+ * Specifies the number of lines for the meta label before truncating.
55
+ */
56
+ numberOfLinesMetaLabel?: number;
53
57
  }
54
- export declare function Badge({ appearance, metaLabel, style, iconName, iconNameRight, label, productLogoName, variant, maxFontSizeMultiplier, onPress, }: BadgeProps): JSX.Element;
58
+ export declare function Badge({ appearance, metaLabel, style, iconName, iconNameRight, label, productLogoName, variant, maxFontSizeMultiplier, numberOfLinesMetaLabel, onPress, }: BadgeProps): JSX.Element;
55
59
  export {};
56
60
  //# sourceMappingURL=badge.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;AAMnE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEzC,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAM/F,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAcpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,EACrB,OAAO,GACR,EAAE,UAAU,eAsCZ"}
1
+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;AAMnE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEzC,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAM/F,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAcpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,EACrB,sBAA0B,EAC1B,OAAO,GACR,EAAE,UAAU,eAsCZ"}
@@ -21,7 +21,7 @@ const PRODUCT_LOGO_COMPONENT_MAP = {
21
21
  services: ServicesIcon,
22
22
  Services: ServicesIcon,
23
23
  };
24
- export function Badge({ appearance = 'neutral', metaLabel, style, iconName, iconNameRight, label, productLogoName, variant = 'default', maxFontSizeMultiplier, onPress, }) {
24
+ export function Badge({ appearance = 'neutral', metaLabel, style, iconName, iconNameRight, label, productLogoName, variant = 'default', maxFontSizeMultiplier, numberOfLinesMetaLabel = 1, onPress, }) {
25
25
  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant });
26
26
  const { showBadgeProductLogo } = useTheme();
27
27
  const isMetaSubtle = variant === 'metaSubtle';
@@ -38,7 +38,7 @@ export function Badge({ appearance = 'neutral', metaLabel, style, iconName, icon
38
38
  </Text>
39
39
  {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight}/>}
40
40
  </View>
41
- {hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier}>
41
+ {hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={numberOfLinesMetaLabel} maxFontSizeMultiplier={maxFontSizeMultiplier}>
42
42
  {metaLabel}
43
43
  </Text>)}
44
44
  </BadgeWrapper>);