@unif/react-native-chat 3.2.1 → 3.2.2

package/src/components/Attachments/Attachments.tsx

@@ -1,7 +1,6 @@
-import { useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import { space, useThemedStyles } from '@unif/react-native-design';
-import { CARD_WIDTH, ROW_IMAGE_SIZE } from './constants';
+import { useThemedStyles } from '@unif/react-native-design';
+import { CARD_WIDTH, MIXED_IMAGE_SIZE, ROW_IMAGE_SIZE } from './constants';
 import { createStyles } from './styles';
 import { AttachmentItem } from './AttachmentItem';
 import type { AttachmentsProps } from './types';
@@ -16,15 +15,6 @@ export function Attachments({
   testID,
 }: AttachmentsProps) {
   const styles = useThemedStyles(createStyles);
-  const [availableWidth, setAvailableWidth] = useState(0);
-  const columns = Math.max(
-    1,
-    Math.floor((availableWidth + space[2]) / (CARD_WIDTH + space[2]))
-  );
-  const cardWidth =
-    layout === 'grid' && availableWidth > 0
-      ? (availableWidth - space[2] * (columns - 1)) / columns
-      : Math.min(CARD_WIDTH, availableWidth || CARD_WIDTH);
   const content = items.map((item) => {
     const row =
       layout === 'list' || (layout === 'mixed' && item.kind !== 'image');
@@ -33,9 +23,14 @@ export function Attachments({
         key={item.id}
         item={item}
         row={row}
-        width={cardWidth}
+        mixed={layout === 'mixed'}
+        width={CARD_WIDTH}
         imageSize={
-          row ? ROW_IMAGE_SIZE : Math.max(1, cardWidth - space[2] * 2 - 2)
+          row
+            ? layout === 'mixed'
+              ? MIXED_IMAGE_SIZE
+              : ROW_IMAGE_SIZE
+            : CARD_WIDTH
         }
         showProgressLabel={showProgressLabel}
         onPreview={onPreview}
@@ -49,10 +44,8 @@ export function Attachments({
         <ScrollView
           horizontal
           keyboardShouldPersistTaps="handled"
+          showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.carousel}
-          onLayout={({ nativeEvent: { layout: measured } }) =>
-            setAvailableWidth(measured.width)
-          }
         >
           {content}
         </ScrollView>
@@ -60,9 +53,6 @@ export function Attachments({
         <View
           testID={testID ? `${testID}-content` : undefined}
           style={styles.collection}
-          onLayout={({ nativeEvent: { layout: measured } }) =>
-            setAvailableWidth(measured.width)
-          }
         >
           {content}
         </View>

package/src/components/Attachments/constants.ts

@@ -1,8 +1,15 @@
+import { icon, r } from '@unif/react-native-design';
 import type { IconName } from '@unif/react-native-design';
 import type { ChatAttachmentItem } from './types';
 
-export const CARD_WIDTH = 144;
-export const ROW_IMAGE_SIZE = 56;
+export const CARD_WIDTH = r(76);
+export const ROW_IMAGE_SIZE = icon.xl;
+export const MIXED_IMAGE_SIZE = r(36);
+export const ATTACHMENT_STATUS_SIZE = r(40);
+export const ATTACHMENT_STATUS_OWNER_SIZE = Math.max(
+  44,
+  ATTACHMENT_STATUS_SIZE
+);
 export const ATTACHMENT_ICONS: Record<
   NonNullable<ChatAttachmentItem['kind']>,
   IconName

package/src/components/Attachments/styles.ts

@@ -1,6 +1,19 @@
 import { StyleSheet } from 'react-native';
-import { radius, space, type } from '@unif/react-native-design';
+import {
+  fontMono,
+  fw,
+  icon,
+  r,
+  radius,
+  space,
+  type,
+} from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
+import {
+  ATTACHMENT_STATUS_OWNER_SIZE,
+  ATTACHMENT_STATUS_SIZE,
+  CARD_WIDTH,
+} from './constants';
 
 export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
@@ -9,45 +22,126 @@ export const createStyles = (colors: ColorTokens) =>
       flexDirection: 'row',
       flexWrap: 'wrap',
       alignItems: 'flex-start',
-      gap: space[2],
+      gap: space[3],
+    },
+    carousel: { gap: space[3], alignItems: 'flex-start' },
+    tileOwner: { position: 'relative', minWidth: 0 },
+    tile: {
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.outline,
+      borderRadius: radius.md,
+      backgroundColor: colors.surfaceContainerHigh,
+      overflow: 'hidden',
+    },
+    tileFailed: { borderColor: colors.error, borderWidth: 2 },
+    documentName: {
+      position: 'absolute',
+      left: space[1],
+      right: space[1],
+      bottom: space[1],
+      fontSize: type.micro,
+      color: colors.foreground,
+      textAlign: 'center',
+      backgroundColor: colors.surfaceContainerHigh,
     },
-    carousel: { gap: space[2], alignItems: 'flex-start' },
     item: {
-      gap: space[2],
-      padding: space[2],
+      gap: space[4],
+      padding: space[4],
       borderWidth: 1,
       borderColor: colors.outline,
       borderRadius: radius.md,
       backgroundColor: colors.surface,
     },
     row: { width: '100%', flexDirection: 'row', alignItems: 'center' },
-    content: { minWidth: 0, flexShrink: 1, gap: space[1] },
+    rowBody: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[4],
+    },
+    mixedRowBody: { gap: space[3] },
+    mixedRow: {
+      height: r(64),
+      paddingVertical: 0,
+      paddingHorizontal: space[3],
+      borderWidth: 0,
+      borderRadius: 0,
+    },
+    content: { minWidth: 0, flexShrink: 1 },
     rowContent: { flex: 1 },
     media: {
       alignItems: 'center',
       justifyContent: 'center',
-      alignSelf: 'center',
+      position: 'relative',
+    },
+    placeholder: {
+      backgroundColor: colors.surfaceContainerHigh,
+      borderRadius: radius.sm,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    imageLayer: {
+    statusOwner: {
       position: 'absolute',
+      top: (CARD_WIDTH - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+      left: (CARD_WIDTH - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+      width: ATTACHMENT_STATUS_OWNER_SIZE,
+      height: ATTACHMENT_STATUS_OWNER_SIZE,
       alignItems: 'center',
       justifyContent: 'center',
+    },
+    retryOwner: { zIndex: 3, elevation: 3 },
+    statusVisual: {
+      width: ATTACHMENT_STATUS_SIZE,
+      height: ATTACHMENT_STATUS_SIZE,
+      borderRadius: radius.pill,
+      backgroundColor: colors.scrim,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    removeOwner: {
+      position: 'absolute',
       top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
+      width: 44,
+      height: 44,
+      paddingTop: space[1],
+      zIndex: 2,
+      elevation: 2,
     },
-    placeholder: {
-      backgroundColor: colors.surfaceContainer,
-      borderRadius: radius.sm,
+    removeVisual: {
+      width: icon.xs,
+      height: icon.xs,
+      borderRadius: radius.pill,
+      backgroundColor: colors.scrim,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    progress: {
-      padding: space[1],
-      borderRadius: radius.sm,
-      backgroundColor: colors.surface,
+    removeFailed: { backgroundColor: colors.error },
+    caption: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: space[1],
+      paddingTop: space[1],
+      width: CARD_WIDTH,
+    },
+    captionText: {
+      flexShrink: 1,
+      fontSize: type.micro,
+      color: colors.foregroundMuted,
+    },
+    previewAction: { width: CARD_WIDTH, alignItems: 'center' },
+    name: {
+      color: colors.foreground,
+      fontSize: type.xs,
+      fontWeight: fw.medium,
+    },
+    meta: {
+      color: colors.foregroundSubtle,
+      fontSize: type.micro,
+      marginTop: r(2),
     },
-    name: { color: colors.foreground, fontSize: type.body },
-    meta: { color: colors.foregroundMuted, fontSize: type.sm },
+    fileMeta: { fontFamily: fontMono },
     failed: { color: colors.error },
     action: { maxWidth: '100%' },
     actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[1] },

package/src/components/Attachments/types.ts

@@ -35,4 +35,5 @@ export interface AttachmentItemProps extends Pick<
   width?: number;
   imageSize: number;
   row: boolean;
+  mixed?: boolean;
 }