@unif/react-native-chat 3.7.0 → 4.1.0

package/src/components/Process/ProcessCompactStep.tsx

@@ -1,7 +1,11 @@
+import {
+  ChevronDownOutlined,
+  ChevronUpOutlined,
+  SparkOutlined,
+} from '@unif/react-native-icons';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   Pulse,
   Reveal,
   motion,
@@ -16,6 +20,7 @@ import type { ProcessCompactStepProps } from './types';
 export function ProcessCompactStep({
   step,
   identity,
+  dense = false,
   expanded,
   elapsed,
   onToggle,
@@ -32,30 +37,38 @@ export function ProcessCompactStep({
       : step.status === 'failed'
         ? colors.error
         : colors.foregroundMuted;
-  const icon = (
-    <Icon
-      name={
-        running || step.status === 'completed'
-          ? 'spark'
-          : PROCESS_STATUS_ICONS[step.status]
-      }
-      size={14}
-      color={color}
-    />
-  );
+  const Glyph =
+    step.icon ??
+    (running || step.status === 'completed'
+      ? SparkOutlined
+      : PROCESS_STATUS_ICONS[step.status]);
+  const icon =
+    step.icon === null ? null : (
+      <Glyph
+        size={14}
+        color={step.icon === undefined ? color : colors.foregroundMuted}
+      />
+    );
+  const Glyph2 = expanded ? ChevronUpOutlined : ChevronDownOutlined;
   return (
     <View>
       <Pressable
         testID={`process-step-${step.id}-toggle`}
         accessible
         accessibilityRole={hasDetails ? 'button' : undefined}
-        accessibilityLabel={`${step.title}，${statusText}${elapsed ? `，${elapsed}` : ''}`}
+        accessibilityLabel={[step.title, statusText, elapsed]
+          .filter(Boolean)
+          .join('，')}
         accessibilityState={hasDetails ? { expanded } : undefined}
+        accessibilityValue={
+          statusText ? undefined : { text: PROCESS_STATUS_LABELS[step.status] }
+        }
         disabled={!hasDetails}
         hitSlop={10}
         onPress={onToggle}
         style={({ pressed }) => [
           styles.compactHeader,
+          dense && styles.compactHeaderDense,
           pressed && { opacity: pressedOpacity },
         ]}
       >
@@ -65,7 +78,7 @@ export function ProcessCompactStep({
             <View style={styles.spacer} />
           </>
         ) : null}
-        {running ? (
+        {running && icon ? (
           <Pulse from={0.4} duration={motion.pulse / 2}>
             {icon}
           </Pulse>
@@ -81,21 +94,24 @@ export function ProcessCompactStep({
             {step.title}
           </Text>
         ) : null}
-        <Text style={styles.compactStatus}>{statusText}</Text>
+        {statusText ? (
+          <Text style={styles.compactStatus}>{statusText}</Text>
+        ) : null}
         {elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
         {hasDetails ? (
-          <Icon
-            name={expanded ? 'chevron-up' : 'chevron-down'}
-            size={14}
-            color={colors.foregroundSubtle}
-          />
+          <Glyph2 size={14} color={colors.foregroundSubtle} />
         ) : null}
       </Pressable>
       {step.description ? (
         <Text style={styles.compactDescription}>{step.description}</Text>
       ) : null}
       {hasDetails && expanded ? (
-        <Reveal style={styles.compactDetailsContainer}>
+        <Reveal
+          style={[
+            styles.compactDetailsContainer,
+            dense && styles.compactDetailsDense,
+          ]}
+        >
           <ScrollView
             testID={`process-step-${step.id}-details`}
             style={styles.compactDetails}

package/src/components/Process/ProcessTimelineStep.tsx

@@ -1,7 +1,7 @@
+import { CloseOutlined } from '@unif/react-native-icons';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   StatusDot,
   icon,
   useColors,
@@ -35,7 +35,7 @@ export function ProcessTimelineStep({
     >
       <View style={styles.timelineGutter}>
         {step.status === 'cancelled' ? (
-          <Icon name="close" size={icon.xs} color={colors.foregroundSubtle} />
+          <CloseOutlined size={icon.xs} color={colors.foregroundSubtle} />
         ) : (
           <StatusDot
             status={status}

package/src/components/Process/constants.ts

@@ -1,4 +1,13 @@
-import type { IconName } from '@unif/react-native-design';
+import {
+  CircleMinusOutlined,
+  CloseOutlined,
+  ErrorOutlined,
+  SuccessOutlined,
+  ThinkingOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { ProcessStepStatus } from './types';
 
 export const PROCESS_STATUS_LABELS: Readonly<
@@ -12,11 +21,11 @@ export const PROCESS_STATUS_LABELS: Readonly<
 };
 
 export const PROCESS_STATUS_ICONS: Readonly<
-  Record<ProcessStepStatus, IconName>
+  Record<ProcessStepStatus, ComponentType<IconProps>>
 > = {
-  pending: 'circle-minus',
-  running: 'thinking',
-  completed: 'success',
-  failed: 'error',
-  cancelled: 'close',
+  pending: CircleMinusOutlined,
+  running: ThinkingOutlined,
+  completed: SuccessOutlined,
+  failed: ErrorOutlined,
+  cancelled: CloseOutlined,
 };

package/src/components/Process/styles.ts

@@ -53,6 +53,8 @@ export const createStyles = (colors: ColorTokens) =>
       minHeight: 44,
       paddingVertical: space[1],
     },
+    compactHeaderDense: { minHeight: 24, paddingVertical: 0 },
+    compactDetailsDense: { paddingTop: space[1], paddingBottom: space[1] },
     compactTitle: {
       flex: 1,
       minWidth: 0,

package/src/components/Process/types.ts

@@ -1,4 +1,7 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { ReactNode } from 'react';
+
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ChatAction } from '../../actions';
 
@@ -9,6 +12,8 @@ export interface ProcessStep {
   id: string;
   title: string;
   status: ProcessStepStatus;
+  /** compact 的活动图标；null 不显示，省略时沿状态呈现。 */
+  icon?: ComponentType<IconProps> | null;
   /** 调用者提供的状态显示文案；不改变 status 的语义。 */
   statusText?: string;
   description?: string;
@@ -20,6 +25,8 @@ export interface ProcessStep {
 export interface ProcessBaseProps {
   /** card 为状态面板；compact 为单行过程；timeline 为带状态节点的连续步骤。 */
   variant?: 'card' | 'compact' | 'timeline';
+  /** compact 文字密度；dense 用于与行内文字相邻的公开过程。 */
+  compactDensity?: 'comfortable' | 'dense';
   steps: readonly ProcessStep[];
   title?: string;
   identity?: ReactNode;
@@ -30,6 +37,7 @@ export interface ProcessBaseProps {
 }
 
 export interface ProcessCompactStepProps {
+  dense?: boolean;
   identity?: ReactNode;
   step: ProcessStep;
   expanded: boolean;

package/src/components/Sources/Sources.tsx

@@ -1,5 +1,6 @@
+import { ChevronRightOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
-import { Icon, useThemedStyles } from '@unif/react-native-design';
+import { r, useColors, useThemedStyles } from '@unif/react-native-design';
 import { DEFAULT_SOURCES_TITLE } from './constants';
 import { createStyles } from './styles';
 import type { SourceItem, SourcesProps } from './types';
@@ -12,6 +13,7 @@ export function Sources({
   testID,
 }: SourcesProps): React.JSX.Element | null {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
 
   if (items.length === 0) return null;
 
@@ -26,7 +28,9 @@ export function Sources({
           <Text style={styles.description}>{item.description}</Text>
         ) : null}
       </View>
-      {showChevron ? <Icon name="chevron-right" /> : null}
+      {showChevron ? (
+        <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
+      ) : null}
     </>
   );
 

package/src/components/Suggestions/Suggestions.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { Chip, Icon, useColors } from '@unif/react-native-design';
+import { Chip, useColors } from '@unif/react-native-design';
 import { SUGGESTION_ICON_SIZE } from './constants';
 import { styles } from './styles';
 import type { SuggestionsProps } from './types';
@@ -29,11 +29,7 @@ export function Suggestions({
           disabled={item.disabled}
           leading={
             item.icon ? (
-              <Icon
-                name={item.icon}
-                size={SUGGESTION_ICON_SIZE}
-                color={colors.primary}
-              />
+              <item.icon size={SUGGESTION_ICON_SIZE} color={colors.primary} />
             ) : undefined
           }
           onPress={onSelect ? () => onSelect(item) : undefined}

package/src/components/Suggestions/types.ts

@@ -1,11 +1,13 @@
-import type { IconName } from '@unif/react-native-design';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface SuggestionItem {
   id: string;
   label: string;
   /** 14 布局单位的主题主色图标，普通与选中状态保持相同图标样式。 */
-  icon?: IconName;
+  icon?: ComponentType<IconProps>;
   selected?: boolean;
   loading?: boolean;
   disabled?: boolean;