@unif/react-native-chat 3.2.3 → 3.3.0

package/src/components/Process/ProcessTimelineStep.tsx

@@ -0,0 +1,109 @@
+import { Text, View } from 'react-native';
+import {
+  Button,
+  Icon,
+  StatusDot,
+  icon,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { PROCESS_STATUS_LABELS } from './constants';
+import { createStyles } from './styles';
+import type { ProcessCompactStepProps } from './types';
+
+export function ProcessTimelineStep({
+  step,
+  last,
+  expanded,
+  elapsed,
+  onToggle,
+}: ProcessCompactStepProps & { last: boolean }) {
+  const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const status =
+    step.status === 'running'
+      ? 'active'
+      : step.status === 'completed'
+        ? 'done'
+        : step.status === 'failed'
+          ? 'error'
+          : 'pending';
+  return (
+    <View
+      style={styles.timelineStep}
+      accessibilityLabel={`${step.title}，${step.statusText ?? PROCESS_STATUS_LABELS[step.status]}`}
+    >
+      <View style={styles.timelineGutter}>
+        {step.status === 'cancelled' ? (
+          <Icon name="close" size={icon.xs} color={colors.foregroundSubtle} />
+        ) : (
+          <StatusDot
+            status={status}
+            tone="soft"
+            size={icon.xs}
+            accessibilityLabel=""
+          />
+        )}
+        {!last ? <View style={styles.timelineLine} /> : null}
+      </View>
+      <View style={[styles.timelineBody, !last && styles.timelineBodyNotLast]}>
+        <View style={styles.stepHeader}>
+          <Text
+            testID={`process-step-title-${step.id}`}
+            style={[
+              styles.timelineTitle,
+              step.status === 'running' && styles.timelineActive,
+              step.status === 'pending' && styles.timelinePending,
+            ]}
+            numberOfLines={1}
+          >
+            {step.title}
+          </Text>
+          {step.description ? (
+            <Text
+              style={[
+                styles.timelineDescription,
+                step.status === 'failed' && styles.timelineError,
+              ]}
+              numberOfLines={1}
+            >
+              {step.description}
+            </Text>
+          ) : null}
+        </View>
+        {elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
+        {step.details != null ? (
+          <>
+            <Button
+              label={expanded ? '收起详情' : '展开详情'}
+              onPress={onToggle}
+              size="sm"
+              variant="text"
+              testID={`process-step-${step.id}-toggle`}
+            />
+            {expanded ? (
+              <View style={styles.details}>{step.details}</View>
+            ) : null}
+          </>
+        ) : null}
+        {step.actions?.length ? (
+          <View style={styles.actions}>
+            {step.actions.map((action) => (
+              <Button
+                key={action.id}
+                label={action.label}
+                leftIcon={action.icon}
+                onPress={action.onPress}
+                disabled={action.disabled}
+                loading={action.loading}
+                accessibilityHint={action.accessibilityHint}
+                size="sm"
+                variant="text"
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/components/Process/styles.ts

@@ -1,9 +1,48 @@
 import { StyleSheet } from 'react-native';
-import { fw, r, radius, space, type } from '@unif/react-native-design';
+import { fw, icon, r, radius, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
+    timelineRoot: {
+      backgroundColor: colors.surface,
+      borderRadius: radius.lg,
+      padding: space[5],
+    },
+    timelineStep: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[4],
+    },
+    timelineGutter: {
+      alignItems: 'center',
+      width: icon.xs,
+      alignSelf: 'stretch',
+    },
+    timelineLine: {
+      width: r(1.5),
+      flex: 1,
+      backgroundColor: colors.outline,
+      marginTop: r(2),
+      minHeight: space[5],
+    },
+    timelineBody: { flex: 1 },
+    timelineBodyNotLast: { paddingBottom: space[7] },
+    timelineTitle: {
+      flex: 1,
+      fontSize: type.xs,
+      fontWeight: fw.medium,
+      color: colors.foreground,
+      lineHeight: type.xs * 1.4,
+    },
+    timelineActive: { color: colors.primary },
+    timelinePending: { color: colors.foregroundSubtle, fontWeight: fw.regular },
+    timelineDescription: {
+      flexShrink: 0,
+      fontSize: type.xs,
+      color: colors.foregroundSubtle,
+    },
+    timelineError: { color: colors.error },
     compactRoot: { gap: space[2] },
     compactSteps: { gap: space[2] },
     compactAction: { minWidth: 44, minHeight: 44 },
@@ -21,16 +60,22 @@ export const createStyles = (colors: ColorTokens) =>
       fontSize: type.xs,
       fontWeight: fw.medium,
     },
+    spacer: { flex: 1 },
+    compactStatus: {
+      fontSize: type.xs,
+      fontWeight: fw.medium,
+      color: colors.foregroundMuted,
+    },
     compactDescription: {
       color: colors.foregroundMuted,
       fontSize: type.xs,
       lineHeight: type.xs * 1.6,
     },
-    compactDetails: {
-      maxHeight: r(180),
+    compactDetailsContainer: {
       paddingTop: space[3],
       paddingBottom: space[2],
     },
+    compactDetails: { maxHeight: r(180) },
     root: {
       gap: space[4],
       padding: space[5],

package/src/components/Process/types.ts

@@ -9,6 +9,8 @@ export interface ProcessStep {
   id: string;
   title: string;
   status: ProcessStepStatus;
+  /** 调用者提供的状态显示文案；不改变 status 的语义。 */
+  statusText?: string;
   description?: string;
   elapsedMs?: number;
   details?: ReactNode;
@@ -16,16 +18,19 @@ export interface ProcessStep {
 }
 
 export interface ProcessBaseProps {
-  /** card 为完整步骤面板；compact 为可整行展开、有界详情的轻量过程展示。 */
-  variant?: 'card' | 'compact';
+  /** card 为状态面板；compact 为单行过程；timeline 为带状态节点的连续步骤。 */
+  variant?: 'card' | 'compact' | 'timeline';
   steps: readonly ProcessStep[];
   title?: string;
   identity?: ReactNode;
+  /** inline 仅用于 compact 单项，让身份与状态处于同一行。 */
+  identityPlacement?: 'heading' | 'inline';
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
 export interface ProcessCompactStepProps {
+  identity?: ReactNode;
   step: ProcessStep;
   expanded: boolean;
   elapsed?: string;

package/src/index.tsx

@@ -28,6 +28,7 @@ export type {
 } from './components/Message';
 export { MessageList } from './components/MessageList';
 export type {
+  MessageListAnchorOptions,
   MessageListHandle,
   MessageListProps,
   MessageListScrollOptions,