@unif/react-native-chat 3.2.0 → 3.2.2

package/src/components/Attachments/AttachmentItem.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   CircularProgress,
@@ -6,11 +6,17 @@ import {
   IconButton,
   radius,
   Spinner,
+  Thumbnail,
+  useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
-import { ATTACHMENT_ICONS, STATUS_LABELS } from './constants';
+import {
+  ATTACHMENT_ICONS,
+  ATTACHMENT_STATUS_OWNER_SIZE,
+  ROW_IMAGE_SIZE,
+  STATUS_LABELS,
+} from './constants';
 import { createStyles } from './styles';
-import { Thumbnail } from '@unif/react-native-design';
 import type { AttachmentItemProps } from './types';
 
 export function AttachmentItem({
@@ -18,15 +24,18 @@ export function AttachmentItem({
   width,
   imageSize,
   row,
+  mixed = false,
   showProgressLabel = false,
   onPreview,
   onRemove,
 }: AttachmentItemProps) {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
   const name = item.name || '未命名附件';
   const status = item.status ?? 'idle';
-  const loadingVisual = item.loadingVisual ?? 'center';
   const busy = status === 'uploading' || status === 'processing';
+  const failed = status === 'failed';
+  const caption = item.loadingVisual === 'caption';
   const progress =
     status === 'uploading' &&
     typeof item.progress === 'number' &&
@@ -36,99 +45,281 @@ export function AttachmentItem({
       ? item.progress
       : undefined;
   const statusText = item.statusText ?? STATUS_LABELS[status];
-  const icon = <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={28} />;
-  const media = (
-    <View style={[styles.media, { minWidth: imageSize, minHeight: imageSize }]}>
-      <View pointerEvents="none" style={styles.imageLayer}>
-        {item.thumbnail ? (
-          <Thumbnail
-            source={item.thumbnail}
-            size={{
-              width: imageSize,
-              height: imageSize,
-              borderRadius: radius.sm,
-            }}
-            fallback={icon}
+  const previewable = item.previewable && onPreview;
+  const separatePreview = previewable && (busy || failed);
+  const removable = item.removable && onRemove;
+  const singleAction = item.actions?.length === 1 ? item.actions[0] : undefined;
+  const retry =
+    failed &&
+    !caption &&
+    singleAction &&
+    (singleAction.id === 'retry' ||
+      singleAction.icon === 'retry' ||
+      singleAction.icon === 'refresh')
+      ? singleAction
+      : undefined;
+  const icon = (
+    <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={ROW_IMAGE_SIZE} />
+  );
+  const thumbnail = item.thumbnail ? (
+    <Thumbnail
+      source={item.thumbnail}
+      size={{ width: imageSize, height: imageSize, borderRadius: radius.sm }}
+      fallback={icon}
+    />
+  ) : (
+    <View style={[styles.placeholder, { width: imageSize, height: imageSize }]}>
+      {icon}
+    </View>
+  );
+  const statusVisual =
+    busy || failed ? (
+      <View style={styles.statusVisual}>
+        {failed ? (
+          <Icon
+            name={retry?.icon ?? 'refresh'}
+            size={16}
+            color={colors.onPrimary}
+          />
+        ) : progress !== undefined ? (
+          <CircularProgress
+            value={progress}
+            size={36}
+            showLabel={showProgressLabel}
+            color={colors.onPrimary}
+            accessibilityLabel={`${name}上传进度`}
           />
         ) : (
-          <View
-            style={[
-              styles.media,
-              styles.placeholder,
-              { width: imageSize, height: imageSize },
-            ]}
-          >
-            {icon}
-          </View>
+          <Spinner size={16} color={colors.onPrimary} />
         )}
       </View>
-      {busy && loadingVisual === 'center' ? (
-        <View pointerEvents="none" style={styles.progress}>
-          {progress !== undefined ? (
-            <CircularProgress
-              value={progress}
-              showLabel={showProgressLabel}
-              accessibilityLabel={`${name}上传进度`}
-            />
-          ) : (
-            <Spinner />
-          )}
+    ) : null;
+  const statusOwner =
+    !caption && statusVisual ? (
+      retry ? (
+        <Pressable
+          style={[
+            styles.statusOwner,
+            {
+              top: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+              left: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+            },
+            styles.retryOwner,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={retry.label}
+          accessibilityHint={retry.accessibilityHint}
+          accessibilityState={{
+            disabled: !!(retry.disabled || retry.loading),
+            busy: !!retry.loading,
+          }}
+          disabled={retry.disabled || retry.loading}
+          onPress={() => retry.onPress()}
+        >
+          {statusVisual}
+        </Pressable>
+      ) : (
+        <View
+          style={[
+            styles.statusOwner,
+            {
+              top: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+              left: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+            },
+          ]}
+          accessible
+          accessibilityLabel={statusText}
+          accessibilityState={{ busy }}
+        >
+          {statusVisual}
         </View>
-      ) : null}
-    </View>
-  );
+      )
+    ) : null;
+  const actions = item.actions
+    ?.filter((action) => action !== retry)
+    .map((action) => (
+      <Button
+        key={action.id}
+        label={action.label}
+        leftIcon={action.icon}
+        variant="secondary"
+        style={styles.action}
+        size="sm"
+        disabled={action.disabled}
+        loading={action.loading}
+        accessibilityHint={action.accessibilityHint}
+        onPress={action.onPress}
+      />
+    ));
 
-  return (
-    <View style={[styles.item, row ? styles.row : { width }]}>
-      {media}
-      <View style={[styles.content, row && styles.rowContent]}>
-        <Text style={styles.name}>{name}</Text>
-        {item.meta ? <Text style={styles.meta}>{item.meta}</Text> : null}
-        {statusText ? (
-          <Text
-            style={[styles.meta, status === 'failed' && styles.failed]}
-            accessibilityLiveRegion="polite"
-          >
-            {statusText}
+  if (row) {
+    const content = (
+      <>
+        <View style={styles.media}>
+          {thumbnail}
+          {statusOwner}
+        </View>
+        <View style={[styles.content, styles.rowContent]}>
+          <Text style={styles.name} numberOfLines={1} ellipsizeMode="middle">
+            {name}
           </Text>
-        ) : null}
-        {busy &&
-        loadingVisual === 'caption' &&
-        showProgressLabel &&
-        progress !== undefined ? (
-          <Text style={styles.meta}>{`${Math.round(progress * 100)}%`}</Text>
-        ) : null}
+          {item.meta ? (
+            <Text
+              style={[styles.meta, !mixed && styles.fileMeta]}
+              numberOfLines={1}
+            >
+              {item.meta}
+            </Text>
+          ) : null}
+          {statusText ? (
+            <Text
+              style={[styles.meta, failed && styles.failed]}
+              accessibilityLiveRegion="polite"
+            >
+              {statusText}
+            </Text>
+          ) : null}
+          {busy && caption && showProgressLabel && progress !== undefined ? (
+            <Text style={styles.meta}>{`${Math.round(progress * 100)}%`}</Text>
+          ) : null}
+        </View>
+      </>
+    );
+    return (
+      <View style={[styles.item, styles.row, mixed && styles.mixedRow]}>
+        {previewable && !retry ? (
+          <Pressable
+            style={[styles.rowBody, mixed && styles.mixedRowBody]}
+            accessibilityRole="button"
+            accessibilityLabel={`预览${name}`}
+            onPress={() => onPreview?.(item)}
+          >
+            {content}
+          </Pressable>
+        ) : (
+          <View style={[styles.rowBody, mixed && styles.mixedRowBody]}>
+            {content}
+          </View>
+        )}
         <View style={styles.actions}>
-          {item.previewable && onPreview ? (
+          {previewable && retry ? (
             <IconButton
               icon="eye"
+              size="sm"
               accessibilityLabel={`预览${name}`}
-              onPress={() => onPreview(item)}
+              onPress={() => onPreview?.(item)}
             />
           ) : null}
-          {item.removable && onRemove ? (
+          {removable ? (
             <IconButton
               icon="close"
+              size="sm"
               accessibilityLabel={`移除${name}`}
               disabled={item.removeDisabled}
-              onPress={() => onRemove(item)}
+              onPress={() => onRemove?.(item)}
             />
           ) : null}
-          {item.actions?.map((action) => (
-            <Button
-              key={action.id}
-              label={action.label}
-              leftIcon={action.icon}
-              variant="secondary"
-              style={styles.action}
-              disabled={action.disabled}
-              loading={action.loading}
-              accessibilityHint={action.accessibilityHint}
-              onPress={action.onPress}
-            />
-          ))}
+          {actions}
         </View>
       </View>
+    );
+  }
+
+  const removeLeft =
+    previewable && !separatePreview
+      ? width!
+      : (busy && !caption) || failed
+        ? (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2 +
+          ATTACHMENT_STATUS_OWNER_SIZE
+        : imageSize - ATTACHMENT_STATUS_OWNER_SIZE;
+  const ownerWidth = removable
+    ? Math.max(width!, removeLeft + ATTACHMENT_STATUS_OWNER_SIZE)
+    : width;
+  const picture = (
+    <>
+      {thumbnail}
+      {item.kind !== 'image' ? (
+        <Text style={styles.documentName} numberOfLines={2}>
+          {name}
+        </Text>
+      ) : null}
+    </>
+  );
+  return (
+    <View style={[styles.tileOwner, { width: ownerWidth }]}>
+      {previewable && !separatePreview ? (
+        <Pressable
+          style={[
+            styles.tile,
+            { width, height: imageSize },
+            failed && styles.tileFailed,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={`预览${name}`}
+          onPress={() => onPreview?.(item)}
+        >
+          {picture}
+        </Pressable>
+      ) : (
+        <View
+          style={[
+            styles.tile,
+            { width, height: imageSize },
+            failed && styles.tileFailed,
+          ]}
+          accessible={!statusOwner}
+          accessibilityLabel={name}
+        >
+          {picture}
+        </View>
+      )}
+      {statusOwner}
+      {removable ? (
+        <Pressable
+          style={[styles.removeOwner, { left: removeLeft }]}
+          accessibilityRole="button"
+          accessibilityLabel={`移除${name}`}
+          disabled={item.removeDisabled}
+          accessibilityState={{ disabled: !!item.removeDisabled }}
+          onPress={() => onRemove?.(item)}
+        >
+          <View style={[styles.removeVisual, failed && styles.removeFailed]}>
+            <Icon
+              name="close"
+              size={10}
+              color={colors.onPrimary}
+              strokeWidth={2.5}
+            />
+          </View>
+        </Pressable>
+      ) : null}
+      {caption && (busy || failed) ? (
+        <View style={styles.caption} accessibilityLiveRegion="polite">
+          {status === 'processing' ? <Spinner size={10} /> : null}
+          <Text
+            style={[styles.captionText, failed && styles.failed]}
+            numberOfLines={1}
+          >
+            {statusText}
+          </Text>
+          {showProgressLabel && progress !== undefined ? (
+            <Text
+              style={styles.captionText}
+            >{`${Math.round(progress * 100)}%`}</Text>
+          ) : null}
+        </View>
+      ) : null}
+      {separatePreview ? (
+        <View style={styles.previewAction}>
+          <IconButton
+            icon="eye"
+            size="sm"
+            accessibilityLabel={`预览${name}`}
+            onPress={() => onPreview?.(item)}
+          />
+        </View>
+      ) : null}
+      {actions?.length ? <View style={styles.actions}>{actions}</View> : null}
     </View>
   );
 }

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;
 }

package/src/components/Process/ProcessCompactStep.tsx

@@ -93,6 +93,7 @@ export function ProcessCompactStep({
           {step.actions.map((action) => (
             <Button
               key={action.id}
+              style={styles.compactAction}
               label={action.label}
               leftIcon={action.icon}
               onPress={action.onPress}

package/src/components/Process/styles.ts

@@ -6,6 +6,7 @@ export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
     compactRoot: { gap: space[2] },
     compactSteps: { gap: space[2] },
+    compactAction: { minWidth: 44, minHeight: 44 },
     compactHeader: {
       flexDirection: 'row',
       alignItems: 'center',