@unif/react-native-chat 2.2.0 → 3.1.0

package/src/components/MessageList/MessageList.tsx

@@ -2,9 +2,14 @@ import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import type { RefAttributes } from 'react';
 import { FlatList, View } from 'react-native';
 import type { ListRenderItemInfo } from 'react-native';
-import { Button } from '@unif/react-native-design';
+import {
+  Button,
+  IconButton,
+  Spinner,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import { DEFAULT_END_THRESHOLD } from './constants';
-import { styles } from './styles';
+import { createStyles } from './styles';
 import { useWebPrependAnchor } from './webPrependAnchor';
 import { useMessageListScroll } from './useMessageListScroll';
 import { MessageListRow } from './MessageListRow';
@@ -25,15 +30,19 @@ export function MessageList<T>({
   followOutput = 'whenAtEnd',
   endThreshold = DEFAULT_END_THRESHOLD,
   showScrollToEnd = true,
+  scrollToEndBusy = false,
   onAtEndChange,
   hasEarlier = false,
   loadingEarlier = false,
   onRequestEarlier,
   keyboardDismissMode = 'on-drag',
+  contentContainerStyle,
+  showsVerticalScrollIndicator = false,
   style,
   testID,
   ref,
 }: MessageListProps<T> & RefAttributes<MessageListHandle>) {
+  const styles = useThemedStyles(createStyles);
   const listRef = useRef<FlatList<T>>(null);
   const keys = useMemo(() => items.map(keyExtractor), [items, keyExtractor]);
   const { getRowNativeID, preservingPrependRef, cancelPrependPreservation } =
@@ -97,10 +106,7 @@ export function MessageList<T>({
     () => (footer ? <View>{footer}</View> : undefined),
     [footer]
   );
-  const listEmpty = useMemo(
-    () => (empty ? <View>{empty}</View> : undefined),
-    [empty]
-  );
+  const listEmpty = useMemo(() => (empty ? <>{empty}</> : undefined), [empty]);
   return (
     <View style={[styles.root, style]} testID={testID}>
       <FlatList
@@ -116,6 +122,8 @@ export function MessageList<T>({
         ListEmptyComponent={listEmpty}
         maintainVisibleContentPosition={MAINTAIN_VISIBLE_POSITION}
         keyboardDismissMode={keyboardDismissMode}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
         onLayout={onLayout}
@@ -127,12 +135,25 @@ export function MessageList<T>({
         onMomentumScrollEnd={onMomentumScrollEnd}
       />
       {showScrollToEnd && items.length > 0 && !atEnd ? (
-        <Button
-          label="回到最新消息"
-          variant="secondary"
-          style={styles.returnToEnd}
-          onPress={() => scrollToEnd()}
-        />
+        <View style={styles.returnToEnd} pointerEvents="box-none">
+          {scrollToEndBusy ? (
+            <View style={styles.returnProgress} pointerEvents="none">
+              <Spinner size={44} thickness={2} />
+            </View>
+          ) : null}
+          <IconButton
+            icon="arrow-down"
+            accessibilityLabel={
+              scrollToEndBusy ? '回到最新消息，正在处理' : '回到最新消息'
+            }
+            variant="ghost"
+            size="md"
+            surfaceSize={36}
+            iconSize={18}
+            style={styles.returnButton}
+            onPress={() => scrollToEnd()}
+          />
+        </View>
       ) : null}
     </View>
   );

package/src/components/MessageList/styles.ts

@@ -1,7 +1,23 @@
 import { StyleSheet } from 'react-native';
-import { space } from '@unif/react-native-design';
-export const styles = StyleSheet.create({
-  root: { flex: 1, minHeight: 0, minWidth: 0 },
-  list: { flex: 1 },
-  returnToEnd: { position: 'absolute', bottom: space[3], alignSelf: 'center' },
-});
+import type { ColorTokens, ShadowTokens } from '@unif/react-native-design';
+export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
+  StyleSheet.create({
+    root: { flex: 1, minHeight: 0, minWidth: 0 },
+    list: { flex: 1 },
+    returnToEnd: {
+      position: 'absolute',
+      bottom: 0,
+      alignSelf: 'center',
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    returnProgress: StyleSheet.absoluteFill,
+    returnButton: {
+      alignSelf: 'center',
+      borderRadius: 18,
+      backgroundColor: colors.surface,
+      ...shadows.card,
+    },
+  });

package/src/components/MessageList/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 
 export interface MessageListScrollOptions {
   animated?: boolean;
@@ -20,11 +20,15 @@ export interface MessageListProps<T> {
   followOutput?: 'whenAtEnd' | 'never';
   endThreshold?: number;
   showScrollToEnd?: boolean;
+  /** 外部仍在生成内容时显示返回入口的进度外环，不影响滚动操作。 */
+  scrollToEndBusy?: boolean;
   onAtEndChange?(atEnd: boolean): void;
   hasEarlier?: boolean;
   loadingEarlier?: boolean;
   onRequestEarlier?(): void;
-  keyboardDismissMode?: 'none' | 'on-drag';
+  keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  showsVerticalScrollIndicator?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }