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

package/src/components/primitive/avatar_primitive.tsx

@@ -86,6 +86,7 @@ interface AvatarContextType {
   allImagesLoaded: boolean
   setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
   maxFontSizeMultiplier: number
+  minFontSizeMultiplier?: number
 }
 
 const AvatarContext = createContext<AvatarContextType | null>(null)
@@ -107,6 +108,7 @@ interface AvatarRootProps {
   size?: AvatarSize
   style?: ViewProps['style']
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 function AvatarRoot({
@@ -114,13 +116,20 @@ function AvatarRoot({
   size = 'md',
   style,
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles({ size, maxFontSizeMultiplier })
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <AvatarContext.Provider
-      value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}
+      value={{
+        size,
+        allImagesLoaded,
+        setAllImagesLoaded,
+        maxFontSizeMultiplier,
+        minFontSizeMultiplier,
+      }}
     >
       <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>
@@ -136,8 +145,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const { maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>
@@ -157,8 +166,8 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
   return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
@@ -183,9 +192,9 @@ interface AvatarImageFallbackProps {
 }
 
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
@@ -213,8 +222,8 @@ interface AvatarGroupProps {
 type AvatarIndex = 0 | 1 | 2 | 3
 
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
-  const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { setAllImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
@@ -323,9 +332,9 @@ AvatarGroup.displayName = 'Avatar.Group'
 // =================================
 
 function AvatarGroupLoader() {
-  const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, allImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
@@ -348,8 +357,8 @@ interface AvatarPresenceProps extends ViewProps {
 }
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, presence, maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, presence, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return <View style={styles.presence} {...props} />
 }
@@ -364,15 +373,17 @@ interface Styles {
   size?: AvatarSize
   presence?: AvatarPresenceType
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 const useStyles = ({
   size = 'md',
   presence = 'offline',
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: Styles = {}) => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,

package/src/screens/conversation_screen.tsx

@@ -35,6 +35,8 @@ import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 
+export const REPLIES_FEATURE_ENABLED = false
+
 export type ConversationRouteProps = {
   conversation_id: number
   chat_group_graph_id?: string

package/src/utils/styles.ts

@@ -5,6 +5,7 @@ export const MAX_FONT_SIZE_MULTIPLIER = 1.5
 export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
+export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,