@unif/react-native-chat 2.1.1 → 2.2.0

package/src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.ts

@@ -1,4 +1,4 @@
-import { useId, useLayoutEffect, useRef } from 'react';
+import { useCallback, useId, useLayoutEffect, useRef } from 'react';
 import { Platform } from 'react-native';
 import { USER_INTERACTION_EVENTS } from './constants';
 import type {
@@ -26,8 +26,9 @@ function isWebElementLike(value: unknown): value is WebElementLike {
 
 function sameKeys(left: readonly string[], right: readonly string[]): boolean {
   return (
-    left.length === right.length &&
-    left.every((key, index) => key === right[index])
+    left === right ||
+    (left.length === right.length &&
+      left.every((key, index) => key === right[index]))
   );
 }
 
@@ -79,111 +80,135 @@ export function useWebPrependAnchor({
 
   const globals = globalThis as unknown as WebGlobals;
 
-  const getRowNativeID = (key: string) =>
-    `${rowNativeIDPrefix}-${encodeURIComponent(key)}`;
+  const getRowNativeID = useCallback(
+    (key: string) => `${rowNativeIDPrefix}-${encodeURIComponent(key)}`,
+    [rowNativeIDPrefix]
+  );
 
-  const getRows = (scroller: WebElementLike): WebElementLike[] =>
-    Array.from(scroller.querySelectorAll('[id]')).filter(
-      (candidate): candidate is WebElementLike =>
-        isWebElementLike(candidate) &&
-        candidate.id.startsWith(`${rowNativeIDPrefix}-`)
-    );
+  const getRows = useCallback(
+    (scroller: WebElementLike): WebElementLike[] =>
+      Array.from(scroller.querySelectorAll('[id]')).filter(
+        (candidate): candidate is WebElementLike =>
+          isWebElementLike(candidate) &&
+          candidate.id.startsWith(`${rowNativeIDPrefix}-`)
+      ),
+    [rowNativeIDPrefix]
+  );
 
-  const findRow = (
-    scroller: WebElementLike,
-    id: string
-  ): WebElementLike | undefined => {
-    const candidate = globals.document?.getElementById(id);
-    return isWebElementLike(candidate) && scroller.contains(candidate)
-      ? candidate
-      : undefined;
-  };
+  const findRow = useCallback(
+    (scroller: WebElementLike, id: string): WebElementLike | undefined => {
+      const candidate = globals.document?.getElementById(id);
+      return isWebElementLike(candidate) && scroller.contains(candidate)
+        ? candidate
+        : undefined;
+    },
+    [globals]
+  );
 
-  const captureAnchor = (connection: WebPrependAnchorConnection) => {
-    const viewport = connection.scroller.getBoundingClientRect();
-    const firstVisible = getRows(connection.scroller).find((row) => {
-      const rect = row.getBoundingClientRect();
-      return rect.bottom > viewport.top && rect.top < viewport.bottom;
-    });
-    if (!firstVisible) return;
-    lastAnchorRef.current = {
-      id: firstVisible.id,
-      top: firstVisible.getBoundingClientRect().top - viewport.top,
-      scrollHeight: connection.scroller.scrollHeight,
-      scrollTop: connection.scroller.scrollTop,
-    };
-  };
+  const captureAnchor = useCallback(
+    (connection: WebPrependAnchorConnection) => {
+      const viewport = connection.scroller.getBoundingClientRect();
+      const firstVisible = getRows(connection.scroller).find((row) => {
+        const rect = row.getBoundingClientRect();
+        return rect.bottom > viewport.top && rect.top < viewport.bottom;
+      });
+      if (!firstVisible) return;
+      lastAnchorRef.current = {
+        id: firstVisible.id,
+        top: firstVisible.getBoundingClientRect().top - viewport.top,
+        scrollHeight: connection.scroller.scrollHeight,
+        scrollTop: connection.scroller.scrollTop,
+      };
+    },
+    [getRows]
+  );
 
-  const refreshResizeTargets = (connection: WebPrependAnchorConnection) => {
-    const resizeObserver = connection.resizeObserver;
-    if (!resizeObserver) return;
-    const nextTargets = new Set([
-      connection.scroller,
-      ...getRows(connection.scroller),
-    ]);
-    connection.resizeTargets.forEach((target) => {
-      if (!nextTargets.has(target)) resizeObserver.unobserve?.(target);
-    });
-    nextTargets.forEach((target) => {
-      if (!connection.resizeTargets.has(target)) resizeObserver.observe(target);
-    });
-    connection.resizeTargets = nextTargets;
-  };
+  const refreshResizeTargets = useCallback(
+    (connection: WebPrependAnchorConnection) => {
+      const resizeObserver = connection.resizeObserver;
+      if (!resizeObserver) return;
+      const nextTargets = new Set([
+        connection.scroller,
+        ...getRows(connection.scroller),
+      ]);
+      // RN Web exposes its content node here. Observe direct wrappers too:
+      // opposite header/footer resizes can leave the total height unchanged.
+      const content = connection.scroller.getInnerViewNode?.();
+      if (isWebElementLike(content)) {
+        nextTargets.add(content);
+        for (const child of Array.from(content.children ?? [])) {
+          if (isWebElementLike(child)) nextTargets.add(child);
+        }
+      }
+      connection.resizeTargets.forEach((target) => {
+        if (!nextTargets.has(target)) resizeObserver.unobserve?.(target);
+      });
+      nextTargets.forEach((target) => {
+        if (!connection.resizeTargets.has(target))
+          resizeObserver.observe(target);
+      });
+      connection.resizeTargets = nextTargets;
+    },
+    [getRows]
+  );
 
-  const correctPrepend = (connection: WebPrependAnchorConnection) => {
-    const preservation = preservationRef.current;
-    if (!preservation) return;
-    const anchor = findRow(connection.scroller, preservation.id);
-    if (anchor) {
-      const viewport = connection.scroller.getBoundingClientRect();
-      const currentTop = anchor.getBoundingClientRect().top - viewport.top;
-      const delta = currentTop - preservation.top;
-      if (Math.abs(delta) > 0.5) {
+  const correctPrepend = useCallback(
+    (connection: WebPrependAnchorConnection) => {
+      const preservation = preservationRef.current;
+      if (!preservation) return;
+      const anchor = findRow(connection.scroller, preservation.id);
+      if (anchor) {
+        const viewport = connection.scroller.getBoundingClientRect();
+        const currentTop = anchor.getBoundingClientRect().top - viewport.top;
+        const delta = currentTop - preservation.top;
+        if (Math.abs(delta) > 0.5) {
+          connection.list.scrollToOffset({
+            offset: Math.max(0, connection.scroller.scrollTop + delta),
+            animated: false,
+          });
+        }
+        return;
+      }
+
+      const heightDelta = Math.max(
+        0,
+        connection.scroller.scrollHeight - preservation.scrollHeight
+      );
+      if (heightDelta > 0) {
         connection.list.scrollToOffset({
-          offset: Math.max(0, connection.scroller.scrollTop + delta),
+          offset: Math.max(0, preservation.scrollTop + heightDelta),
           animated: false,
         });
       }
-      return;
-    }
-
-    const heightDelta = Math.max(
-      0,
-      connection.scroller.scrollHeight - preservation.scrollHeight
-    );
-    if (heightDelta > 0) {
-      connection.list.scrollToOffset({
-        offset: Math.max(0, preservation.scrollTop + heightDelta),
-        animated: false,
-      });
-    }
-  };
+    },
+    [findRow]
+  );
 
-  const runFrame = () => {
+  const runFrame = useCallback(() => {
     frameRef.current = undefined;
     const connection = connectionRef.current;
     if (!connection) return;
     refreshResizeTargets(connection);
     if (preservingPrependRef.current) correctPrepend(connection);
     else captureAnchor(connection);
-  };
+  }, [captureAnchor, correctPrepend, refreshResizeTargets]);
 
-  const scheduleFrame = () => {
+  const scheduleFrame = useCallback(() => {
     if (frameRef.current !== undefined) return;
     if (globals.requestAnimationFrame) {
       frameRef.current = globals.requestAnimationFrame(runFrame);
     } else {
       runFrame();
     }
-  };
+  }, [globals, runFrame]);
 
-  const stopPreserving = () => {
+  const stopPreserving = useCallback(() => {
     preservingPrependRef.current = false;
     preservationRef.current = undefined;
     lastAnchorRef.current = undefined;
-  };
+  }, []);
 
-  const disconnect = () => {
+  const disconnect = useCallback(() => {
     const connection = connectionRef.current;
     disconnectConnection(connection);
     connectionRef.current = undefined;
@@ -191,9 +216,9 @@ export function useWebPrependAnchor({
       globals.cancelAnimationFrame?.(frameRef.current);
       frameRef.current = undefined;
     }
-  };
+  }, [globals]);
 
-  const ensureConnected = () => {
+  const ensureConnected = useCallback(() => {
     if (Platform.OS !== 'web') return;
     const list = listRef.current;
     const scroller = list ? list.getScrollableNode() : undefined;
@@ -241,12 +266,20 @@ export function useWebPrependAnchor({
     scroller.addEventListener('scroll', scroll, { passive: true });
     refreshResizeTargets(connection);
     scheduleFrame();
-  };
+  }, [
+    captureAnchor,
+    disconnect,
+    globals,
+    listRef,
+    refreshResizeTargets,
+    scheduleFrame,
+    stopPreserving,
+  ]);
 
-  const cancelPrependPreservation = () => {
+  const cancelPrependPreservation = useCallback(() => {
     stopPreserving();
     scheduleFrame();
-  };
+  }, [scheduleFrame, stopPreserving]);
 
   useLayoutEffect(() => {
     ensureConnected();
@@ -266,8 +299,9 @@ export function useWebPrependAnchor({
       }
     }
     previousIdentityRef.current = itemsIdentity;
-    previousKeysRef.current = [...keys];
-    scheduleFrame();
+    previousKeysRef.current = keys;
+    if (!previousKeys || previousKeys !== keys || identityChanged)
+      scheduleFrame();
   });
 
   useLayoutEffect(

package/src/components/ProcessingProgress/ProcessingProgress.tsx

@@ -0,0 +1,49 @@
+import { Text, View } from 'react-native';
+import {
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { PROCESSING_PROGRESS_SEPARATOR } from './constants';
+import { ProcessingProgressPrefix } from './ProcessingProgressPrefix';
+import { createStyles } from './styles';
+import type { ProcessingProgressProps } from './types';
+
+export function ProcessingProgress({ progress }: ProcessingProgressProps) {
+  const styles = useThemedStyles(createStyles);
+  const reducedMotion = usePrefersReducedMotion();
+  const separatorIndex = progress.indexOf(PROCESSING_PROGRESS_SEPARATOR);
+  const prefix =
+    separatorIndex === -1 ? progress : progress.slice(0, separatorIndex);
+  const suffix = separatorIndex === -1 ? '' : progress.slice(separatorIndex);
+
+  return (
+    <View
+      style={styles.root}
+      accessible
+      accessibilityRole="text"
+      accessibilityLabel={progress}
+      accessibilityState={{ busy: true }}
+      aria-busy
+      accessibilityLiveRegion="polite"
+    >
+      <Text
+        testID="processing-progress-line"
+        style={styles.text}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        accessible={false}
+        aria-hidden
+      >
+        <ProcessingProgressPrefix
+          // Each prefix/motion generation owns its value, including late frames.
+          key={`${reducedMotion}:${prefix}`}
+          text={prefix}
+          reducedMotion={reducedMotion}
+        />
+        {suffix ? (
+          <Text testID="processing-progress-suffix">{suffix}</Text>
+        ) : null}
+      </Text>
+    </View>
+  );
+}

package/src/components/ProcessingProgress/ProcessingProgressPrefix.tsx

@@ -0,0 +1,68 @@
+import { memo, useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, Text } from 'react-native';
+import { useTheme } from '@unif/react-native-design';
+import {
+  PROCESSING_PROGRESS_SHINE_DURATION_MS,
+  PROCESSING_PROGRESS_SHINE_PEAK,
+  PROCESSING_PROGRESS_SHINE_RADIUS,
+} from './constants';
+import type { ProcessingProgressPrefixProps } from './types';
+
+export const ProcessingProgressPrefix = memo(function Prefix({
+  text,
+  reducedMotion,
+}: ProcessingProgressPrefixProps) {
+  const { colors, scheme } = useTheme();
+  const animation = useRef(
+    new Animated.Value(-PROCESSING_PROGRESS_SHINE_RADIUS)
+  ).current;
+  const characters = Array.from(text);
+
+  useEffect(() => {
+    if (reducedMotion || !characters.length) return undefined;
+    const loop = Animated.loop(
+      Animated.timing(animation, {
+        toValue: characters.length + PROCESSING_PROGRESS_SHINE_RADIUS,
+        duration: PROCESSING_PROGRESS_SHINE_DURATION_MS,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+        isInteraction: false,
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [animation, characters.length, reducedMotion]);
+
+  const baseColor =
+    scheme === 'dark' ? colors.foregroundMuted : colors.foreground;
+
+  if (reducedMotion) return <Text style={{ color: baseColor }}>{text}</Text>;
+
+  return (
+    <Text>
+      {characters.map((character, index) => (
+        <Animated.Text
+          key={`${index}:${character}`}
+          style={{
+            color: animation
+              .interpolate({
+                inputRange: [
+                  index - PROCESSING_PROGRESS_SHINE_RADIUS,
+                  index,
+                  index + PROCESSING_PROGRESS_SHINE_RADIUS,
+                ],
+                outputRange: [0, PROCESSING_PROGRESS_SHINE_PEAK, 0],
+                extrapolate: 'clamp',
+              })
+              .interpolate({
+                inputRange: [0, 1],
+                outputRange: [baseColor, colors.onPrimary],
+              }),
+          }}
+        >
+          {character}
+        </Animated.Text>
+      ))}
+    </Text>
+  );
+});

package/src/components/ProcessingProgress/constants.ts

@@ -0,0 +1,4 @@
+export const PROCESSING_PROGRESS_SEPARATOR = '·';
+export const PROCESSING_PROGRESS_SHINE_DURATION_MS = 1800;
+export const PROCESSING_PROGRESS_SHINE_RADIUS = 2;
+export const PROCESSING_PROGRESS_SHINE_PEAK = 0.85;

package/src/components/ProcessingProgress/index.ts

@@ -0,0 +1,2 @@
+export { ProcessingProgress } from './ProcessingProgress';
+export type { ProcessingProgressProps } from './types';

package/src/components/ProcessingProgress/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { r, space, type } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      minWidth: 0,
+      paddingHorizontal: space[4],
+      paddingVertical: space[3],
+    },
+    text: {
+      color: colors.foregroundMuted,
+      fontSize: type.xs,
+      lineHeight: r(20),
+    },
+  });

package/src/components/ProcessingProgress/types.ts

@@ -0,0 +1,9 @@
+export interface ProcessingProgressProps {
+  /** 当前公开进度；文案和展示结束时机由调用方提供。 */
+  progress: string;
+}
+
+export interface ProcessingProgressPrefixProps {
+  text: string;
+  reducedMotion: boolean;
+}

package/src/index.tsx

@@ -53,6 +53,8 @@ export type {
   ProcessStep,
   ProcessStepStatus,
 } from './components/Process';
+export { ProcessingProgress } from './components/ProcessingProgress';
+export type { ProcessingProgressProps } from './components/ProcessingProgress';
 export { Feedback } from './components/Feedback';
 export type { FeedbackProps, FeedbackTone } from './components/Feedback';
 export { Sources } from './components/Sources';