@unif/react-native-chat 2.1.1 → 2.1.2

package/src/components/MessageList/MessageListRow.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { MessageListProps } from './types';
+
+interface MessageListRowProps<T> extends Pick<
+  MessageListProps<T>,
+  'renderItem' | 'renderSeparator' | 'extraData'
+> {
+  item: T;
+  previous: T | undefined;
+  index: number;
+  nativeID: string;
+}
+
+function MessageListRowContent<T>({
+  item,
+  previous,
+  index,
+  nativeID,
+  renderItem,
+  renderSeparator,
+}: MessageListRowProps<T>) {
+  return (
+    <View nativeID={nativeID}>
+      {index > 0 && renderSeparator ? renderSeparator(previous!, item) : null}
+      {renderItem(item, index)}
+    </View>
+  );
+}
+
+// extraData participates in memo's shallow comparison even though renderers
+// read that external display state through their own closures.
+export const MessageListRow = memo(
+  MessageListRowContent
+) as typeof MessageListRowContent;

package/src/components/MessageList/useMessageListScroll.ts

@@ -0,0 +1,216 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+import type {
+  FlatList,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import { DEFAULT_END_THRESHOLD } from './constants';
+import type {
+  ListMeasurements,
+  MessageListProps,
+  MessageListScrollOptions,
+} from './types';
+
+interface MessageListScrollInput<T> extends Pick<
+  MessageListProps<T>,
+  'initialPosition' | 'followOutput' | 'endThreshold' | 'onAtEndChange'
+> {
+  listRef: RefObject<FlatList<T> | null>;
+  keys: readonly string[];
+  preservingPrependRef: RefObject<boolean>;
+  cancelPrependPreservation(): void;
+}
+
+export function useMessageListScroll<T>({
+  listRef,
+  keys,
+  initialPosition,
+  followOutput,
+  endThreshold = DEFAULT_END_THRESHOLD,
+  onAtEndChange,
+  preservingPrependRef,
+  cancelPrependPreservation,
+}: MessageListScrollInput<T>) {
+  const measurements = useRef<ListMeasurements>({
+    viewport: 0,
+    content: 0,
+    offset: 0,
+    hasContentSize: false,
+  });
+  const initial = useRef(initialPosition);
+  const initialized = useRef(false);
+  const previousKeys = useRef<readonly string[]>([]);
+  const prependPending = useRef(false);
+  const pendingScroll = useRef<MessageListScrollOptions | undefined>(undefined);
+  const userScrolling = useRef(false);
+  const atEndRef = useRef<boolean | undefined>(undefined);
+  const [atEnd, setAtEnd] = useState(true);
+  const threshold = Number.isFinite(endThreshold)
+    ? Math.max(0, endThreshold)
+    : DEFAULT_END_THRESHOLD;
+
+  useLayoutEffect(() => {
+    const previous = previousKeys.current;
+    const added = keys.length - previous.length;
+    const onlyPrepended =
+      previous.length > 0 &&
+      added > 0 &&
+      previous.every((key, index) => keys[index + added] === key);
+    const changed =
+      keys.length !== previous.length ||
+      keys.some((key, index) => key !== previous[index]);
+    if (changed) prependPending.current = onlyPrepended;
+    previousKeys.current = keys;
+  }, [keys]);
+
+  const ready = useCallback(() => {
+    const current = measurements.current;
+    return current.viewport > 0 && current.hasContentSize;
+  }, []);
+
+  const publishPosition = useCallback(() => {
+    if (!ready()) return;
+    const { viewport, content, offset } = measurements.current;
+    const next = content - viewport - Math.max(0, offset) <= threshold;
+    if (next !== atEndRef.current) {
+      atEndRef.current = next;
+      setAtEnd(next);
+      onAtEndChange?.(next);
+    }
+  }, [onAtEndChange, ready, threshold]);
+
+  const scrollToEnd = useCallback(
+    (options: MessageListScrollOptions = {}) => {
+      cancelPrependPreservation();
+      const request = { animated: options.animated ?? true };
+      if (!ready()) {
+        pendingScroll.current = request;
+        return;
+      }
+      pendingScroll.current = undefined;
+      listRef.current?.scrollToOffset({
+        offset: Math.max(
+          0,
+          measurements.current.content - measurements.current.viewport
+        ),
+        animated: request.animated,
+      });
+      if (measurements.current.content <= measurements.current.viewport)
+        publishPosition();
+    },
+    [cancelPrependPreservation, listRef, publishPosition, ready]
+  );
+
+  const itemCount = keys.length;
+  const reconcileLayout = useCallback(
+    (contentChanged: boolean) => {
+      if (!ready()) return;
+      const request = pendingScroll.current;
+      if (itemCount > 0 && !initialized.current) {
+        initialized.current = true;
+        if (request || initial.current === 'end') {
+          scrollToEnd(request ?? { animated: false });
+          return;
+        }
+        publishPosition();
+        return;
+      }
+      if (request) {
+        scrollToEnd(request);
+        return;
+      }
+      const prepended = prependPending.current;
+      if (contentChanged) prependPending.current = false;
+      const shouldFollow =
+        initialized.current &&
+        followOutput === 'whenAtEnd' &&
+        !userScrolling.current &&
+        !prepended &&
+        !preservingPrependRef.current &&
+        atEndRef.current;
+      if (shouldFollow) scrollToEnd({ animated: false });
+      else publishPosition();
+    },
+    [
+      followOutput,
+      itemCount,
+      preservingPrependRef,
+      publishPosition,
+      ready,
+      scrollToEnd,
+    ]
+  );
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } =
+        event.nativeEvent;
+      const movedUp = contentOffset.y < measurements.current.offset;
+      const resizingAtEnd =
+        atEndRef.current &&
+        !movedUp &&
+        !userScrolling.current &&
+        followOutput === 'whenAtEnd' &&
+        (measurements.current.content !== contentSize.height ||
+          measurements.current.viewport !== layoutMeasurement.height);
+      measurements.current = {
+        offset: contentOffset.y,
+        content: contentSize.height,
+        viewport: layoutMeasurement.height,
+        hasContentSize: true,
+      };
+      if (!resizingAtEnd) publishPosition();
+    },
+    [followOutput, publishPosition]
+  );
+
+  const onLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      measurements.current.viewport = layout.height;
+      reconcileLayout(false);
+    },
+    [reconcileLayout]
+  );
+  const onContentSizeChange = useCallback(
+    (_width: number, height: number) => {
+      measurements.current.content = height;
+      measurements.current.hasContentSize = true;
+      reconcileLayout(true);
+    },
+    [reconcileLayout]
+  );
+  const onUserScrollBegin = useCallback(() => {
+    userScrolling.current = true;
+  }, []);
+  const onScrollEndDrag = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      onScroll(event);
+      if (!event.nativeEvent.velocity?.y) {
+        userScrolling.current = false;
+        publishPosition();
+      }
+    },
+    [onScroll, publishPosition]
+  );
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      onScroll(event);
+      userScrolling.current = false;
+      publishPosition();
+    },
+    [onScroll, publishPosition]
+  );
+
+  return {
+    atEnd,
+    scrollToEnd,
+    onLayout,
+    onContentSizeChange,
+    onScroll,
+    onUserScrollBegin,
+    onScrollEndDrag,
+    onMomentumScrollEnd,
+  };
+}

package/src/components/MessageList/webPrependAnchor/types.ts

@@ -14,6 +14,8 @@ export interface WebElementLike {
   id: string;
   scrollTop: number;
   scrollHeight: number;
+  readonly children?: ArrayLike<unknown>;
+  getInnerViewNode?(): unknown;
   getBoundingClientRect(): WebRectLike;
   querySelectorAll(selector: string): ArrayLike<unknown>;
   contains(candidate: unknown): boolean;

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(