@unif/react-native-chat 2.1.0 → 2.1.2

package/src/components/MessageList/MessageList.tsx

@@ -1,17 +1,16 @@
-import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import type { RefAttributes } from 'react';
 import { FlatList, View } from 'react-native';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import type { ListRenderItemInfo } from 'react-native';
 import { Button } from '@unif/react-native-design';
 import { DEFAULT_END_THRESHOLD } from './constants';
 import { styles } from './styles';
 import { useWebPrependAnchor } from './webPrependAnchor';
-import type {
-  ListMeasurements,
-  MessageListHandle,
-  MessageListProps,
-  MessageListScrollOptions,
-} from './types';
+import { useMessageListScroll } from './useMessageListScroll';
+import { MessageListRow } from './MessageListRow';
+import type { MessageListHandle, MessageListProps } from './types';
+
+const MAINTAIN_VISIBLE_POSITION = { minIndexForVisible: 0 };
 
 export function MessageList<T>({
   items,
@@ -36,128 +35,72 @@ export function MessageList<T>({
   ref,
 }: MessageListProps<T> & RefAttributes<MessageListHandle>) {
   const listRef = useRef<FlatList<T>>(null);
-  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;
-  const keys = items.map(keyExtractor);
+  const keys = useMemo(() => items.map(keyExtractor), [items, keyExtractor]);
   const { getRowNativeID, preservingPrependRef, cancelPrependPreservation } =
     useWebPrependAnchor({ listRef, itemsIdentity: items, keys });
-
-  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;
+  const {
+    atEnd,
+    scrollToEnd,
+    onLayout,
+    onContentSizeChange,
+    onScroll,
+    onUserScrollBegin,
+    onScrollEndDrag,
+    onMomentumScrollEnd,
+  } = useMessageListScroll({
+    listRef,
+    keys,
+    initialPosition,
+    followOutput,
+    endThreshold,
+    onAtEndChange,
+    preservingPrependRef,
+    cancelPrependPreservation,
   });
+  useImperativeHandle(ref, () => ({ scrollToEnd }), [scrollToEnd]);
 
-  function ready() {
-    const current = measurements.current;
-    return current.viewport > 0 && current.hasContentSize;
-  }
-
-  function publishPosition() {
-    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);
-    }
-  }
-
-  function scrollToEnd(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();
-  }
-
-  useImperativeHandle(ref, () => ({ scrollToEnd }));
-
-  function reconcileLayout(contentChanged: boolean) {
-    if (!ready()) return;
-    const request = pendingScroll.current;
-    if (items.length > 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();
-  }
-
-  function onScroll(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();
-  }
+  const renderRow = useCallback(
+    ({ item, index }: ListRenderItemInfo<T>) => (
+      <MessageListRow
+        item={item}
+        index={index}
+        previous={renderSeparator ? items[index - 1] : undefined}
+        nativeID={getRowNativeID(keys[index]!)}
+        renderItem={renderItem}
+        renderSeparator={renderSeparator}
+        extraData={extraData}
+      />
+    ),
+    [extraData, getRowNativeID, items, keys, renderItem, renderSeparator]
+  );
 
   const history = hasEarlier && onRequestEarlier;
   const hasHeader = Boolean(header || history);
+  const listHeader = useMemo(
+    () =>
+      hasHeader ? (
+        <View>
+          {header}
+          {history ? (
+            <Button
+              label={loadingEarlier ? '正在加载…' : '查看更早消息'}
+              variant="text"
+              loading={loadingEarlier}
+              onPress={onRequestEarlier}
+            />
+          ) : null}
+        </View>
+      ) : undefined,
+    [hasHeader, header, history, loadingEarlier, onRequestEarlier]
+  );
+  const listFooter = useMemo(
+    () => (footer ? <View>{footer}</View> : undefined),
+    [footer]
+  );
+  const listEmpty = useMemo(
+    () => (empty ? <View>{empty}</View> : undefined),
+    [empty]
+  );
   return (
     <View style={[styles.root, style]} testID={testID}>
       <FlatList
@@ -167,63 +110,21 @@ export function MessageList<T>({
         data={items}
         keyExtractor={keyExtractor}
         extraData={extraData}
-        renderItem={({ item, index }) => (
-          <View nativeID={getRowNativeID(keyExtractor(item))}>
-            {index > 0 && renderSeparator
-              ? renderSeparator(items[index - 1]!, item)
-              : null}
-            {renderItem(item, index)}
-          </View>
-        )}
-        ListHeaderComponent={
-          hasHeader ? (
-            <View>
-              {header}
-              {history ? (
-                <Button
-                  label={loadingEarlier ? '正在加载…' : '查看更早消息'}
-                  variant="text"
-                  loading={loadingEarlier}
-                  onPress={onRequestEarlier}
-                />
-              ) : null}
-            </View>
-          ) : undefined
-        }
-        ListFooterComponent={footer ? <View>{footer}</View> : undefined}
-        ListEmptyComponent={empty ? <View>{empty}</View> : undefined}
-        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
+        renderItem={renderRow}
+        ListHeaderComponent={listHeader}
+        ListFooterComponent={listFooter}
+        ListEmptyComponent={listEmpty}
+        maintainVisibleContentPosition={MAINTAIN_VISIBLE_POSITION}
         keyboardDismissMode={keyboardDismissMode}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
-        onLayout={({ nativeEvent: { layout } }) => {
-          measurements.current.viewport = layout.height;
-          reconcileLayout(false);
-        }}
-        onContentSizeChange={(_width, height) => {
-          measurements.current.content = height;
-          measurements.current.hasContentSize = true;
-          reconcileLayout(true);
-        }}
+        onLayout={onLayout}
+        onContentSizeChange={onContentSizeChange}
         onScroll={onScroll}
-        onScrollBeginDrag={() => {
-          userScrolling.current = true;
-        }}
-        onMomentumScrollBegin={() => {
-          userScrolling.current = true;
-        }}
-        onScrollEndDrag={(event) => {
-          onScroll(event);
-          if (!event.nativeEvent.velocity?.y) {
-            userScrolling.current = false;
-            publishPosition();
-          }
-        }}
-        onMomentumScrollEnd={(event) => {
-          onScroll(event);
-          userScrolling.current = false;
-          publishPosition();
-        }}
+        onScrollBeginDrag={onUserScrollBegin}
+        onMomentumScrollBegin={onUserScrollBegin}
+        onScrollEndDrag={onScrollEndDrag}
+        onMomentumScrollEnd={onMomentumScrollEnd}
       />
       {showScrollToEnd && items.length > 0 && !atEnd ? (
         <Button

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;