@smart-link/rn-im 1.0.23 → 1.0.26

package/dist/pages/message/MessageList.js

@@ -1,95 +1,68 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const im_base_1 = require("@smart-link/im-base");
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const FontAwesome5_1 = __importDefault(require("react-native-vector-icons/FontAwesome5"));
-const useImSelector_1 = require("../../hooks/useImSelector");
-const useTranslation_1 = __importDefault(require("../../hooks/useTranslation"));
-const init_1 = require("../../init");
-const MessageBar_1 = __importDefault(require("./components/messageBar/MessageBar"));
-const MessageItem_1 = __importDefault(require("./components/MessageItem"));
-const MessageOption_1 = __importDefault(require("./components/MessageOption"));
-const VideoPlayer_1 = __importDefault(require("../../components/VideoPlayer"));
-const MessageItemQuote_1 = __importDefault(require("../../pages/message/components/MessageItemQuote"));
-const MessagePictureAlbum_1 = __importDefault(require("./components/MessagePictureAlbum"));
-const MultipleBar_1 = __importDefault(require("./components/MultipleBar"));
-const ChatBg_1 = __importDefault(require("./components/ChatBg"));
-const ahooks_1 = require("ahooks");
-const MessageItemTips_1 = __importDefault(require("./components/MessageItemTips"));
+import { ConversationType, MessageActions, MessagePanelActions, PayloadType, TipsType, showTimeLine, } from '@smart-link/im-base';
+import { dp, HeaderBackButton, Input, NavigationPage } from '@smart-link/rn-ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, Keyboard, InteractionManager, StyleSheet, ActivityIndicator, TouchableWithoutFeedback } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { useAuth, useConversation, useMessage } from '../../hooks/useImSelector';
+import useTranslation from '../../hooks/useTranslation';
+import { getImManager } from '../../init';
+import MessageBar from './components/messageBar/MessageBar';
+import MessageItem from './components/MessageItem';
+import MessageOption from './components/MessageOption';
+import MessageItemQuote from './components/MessageItemQuote';
+import MessagePictureAlbum from './components/MessagePictureAlbum';
+import MultipleBar from './components/MultipleBar';
+import ChatBg from './components/ChatBg';
+import { useMemoizedFn } from "ahooks";
+import MessageItemTips from './components/MessageItemTips';
+import FastImage from "react-native-fast-image";
+import { noMessageImg } from "../../default-assets";
 const MessageList = ({ navigation }) => {
-    const { t } = (0, useTranslation_1.default)();
-    const messageListRef = (0, react_1.useRef)(null);
-    const { currentConversation } = (0, useImSelector_1.useConversation)();
-    const { messages, rangeList, quote, tips, isMultiple, multipleSelect, isSearch } = (0, useImSelector_1.useMessage)();
-    const { user } = (0, useImSelector_1.useAuth)();
-    const bar = (0, react_1.useRef)(null);
-    const [showAlbum, setShowAlbum] = (0, react_1.useState)(false);
-    const [targetMessageSeq, setTargetMessageSeq] = (0, react_1.useState)('');
-    const [selectMessage, setSelectMessage] = (0, react_1.useState)();
-    const [nativeEvent, setNativeEvent] = (0, react_1.useState)();
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const isB2C = (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === im_base_1.ConversationType.B2C;
-    (0, react_1.useEffect)(() => {
+    const { t } = useTranslation();
+    const messageListRef = useRef(null);
+    const { currentConversation } = useConversation();
+    const { messages, rangeList, quote, tips, isMultiple, multipleSelect, isSearch } = useMessage();
+    const { user } = useAuth();
+    const bar = useRef(null);
+    const [showAlbum, setShowAlbum] = useState(false);
+    const [targetMessageSeq, setTargetMessageSeq] = useState('');
+    const [selectMessage, setSelectMessage] = useState();
+    const [loading, setLoading] = useState(false);
+    const [touchPoint, setTouchPoint] = useState();
+    const [targetLayout, setTargetLayout] = useState();
+    const isB2C = (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.B2C;
+    useEffect(() => {
         console.log('[进入会话]: ', currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.name);
         if (currentConversation) {
             navigation.setOptions({
                 headerLeft: isMultiple
-                    ? () => (<react_native_1.TouchableOpacity onPress={() => {
-                            (0, init_1.getImManager)().store.dispatch(im_base_1.MessagePanelActions.cancelMultipleSelect());
+                    ? () => (<TouchableOpacity onPress={() => {
+                            getImManager().store.dispatch(MessagePanelActions.cancelMultipleSelect());
                         }}>
-                            <react_native_1.Text style={{ color: '#fff' }}>{t('cancel')}</react_native_1.Text>
-                        </react_native_1.TouchableOpacity>)
-                    : rn_ui_1.HeaderBackButton,
-                headerTitle: ({ tintColor }) => (<react_native_1.View style={{ width: (0, rn_ui_1.dp)(220) }}>
-                    <react_native_1.Text numberOfLines={1} style={{ color: tintColor, fontSize: (0, rn_ui_1.dp)(18), textAlign: 'center' }}>{currentConversation.name}</react_native_1.Text>
-                </react_native_1.View>),
-                headerRight: ({ tintColor }) => (<react_native_1.TouchableOpacity onPress={() => {
+                            <Text style={{ color: '#fff' }}>{t('cancel')}</Text>
+                        </TouchableOpacity>)
+                    : HeaderBackButton,
+                headerTitle: ({ tintColor }) => (<View style={{ width: dp(220) }}>
+                    <Text numberOfLines={1} style={{ color: tintColor, fontSize: dp(18), textAlign: 'center' }}>{currentConversation.name}</Text>
+                </View>),
+                headerRight: ({ tintColor }) => (<TouchableOpacity onPress={() => {
                         navigation.navigate('ConversationSetting');
-                    }} style={{ width: (0, rn_ui_1.dp)(40), justifyContent: 'center', alignItems: 'center' }}>
-                        <FontAwesome5_1.default name="ellipsis-h" color={tintColor} size={(0, rn_ui_1.dp)(18)}/>
-                    </react_native_1.TouchableOpacity>),
+                    }} style={{ width: dp(40), justifyContent: 'center', alignItems: 'center' }}>
+                        <FontAwesome5 name="ellipsis-h" color={tintColor} size={dp(18)}/>
+                    </TouchableOpacity>),
             });
         }
         let remover = navigation.addListener('beforeRemove', e => {
-            const imManager = (0, init_1.getImManager)();
+            const imManager = getImManager();
             if (isMultiple) {
                 e.preventDefault();
-                imManager.store.dispatch(im_base_1.MessagePanelActions.cancelMultipleSelect());
+                imManager.store.dispatch(MessagePanelActions.cancelMultipleSelect());
             }
             else {
-                react_native_1.InteractionManager.runAfterInteractions(() => {
-                    console.log('[离开会话]: ');
-                    imManager.store.dispatch(im_base_1.MessagePanelActions.saveDraftText(imManager));
+                InteractionManager.runAfterInteractions(() => {
+                    imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
-                    imManager.store.dispatch(im_base_1.MessageActions.resetState());
+                    imManager.store.dispatch(MessageActions.resetState({}));
                 });
             }
         });
@@ -97,97 +70,134 @@ const MessageList = ({ navigation }) => {
             remover();
         };
     }, [isMultiple, navigation, currentConversation]);
-    (0, react_1.useEffect)(() => {
-        (0, init_1.getImManager)().setFlatListRef(messageListRef);
-        (0, init_1.getImManager)().setInputRef(bar);
+    useEffect(() => {
+        getImManager().setFlatListRef(messageListRef);
+        getImManager().setInputRef(bar);
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
         if (isSearch) {
             (_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
-            (0, init_1.getImManager)().store.dispatch(im_base_1.MessageActions.setIsSearch(false));
+            getImManager().store.dispatch(MessageActions.setIsSearch(false));
         }
     }, [isSearch]);
-    const onLongPressPopover = (0, react_1.useCallback)((message, nativeEvent) => {
-        setNativeEvent(nativeEvent);
+    const onPressPopover = useCallback((message, nativeEvent) => {
+        if (message.payloadType === PayloadType.PICTURE) {
+            setShowAlbum(true);
+            setSelectMessage(undefined);
+            setTargetMessageSeq(message.messageSeq);
+        }
+    }, []);
+    const onLongPressPopover = useCallback((message, nativeEvent, layout) => {
         setSelectMessage(message);
+        setTouchPoint({
+            x: nativeEvent.pageX - nativeEvent.locationX,
+            y: nativeEvent.pageY - nativeEvent.locationY
+        });
+        setTargetLayout(layout);
     }, []);
-    const onLayoutItem = (0, ahooks_1.useMemoizedFn)((message, e) => {
+    const onLayoutItem = useMemoizedFn((message, e) => {
         if (rangeList.length > 0 && message.messageSeq === (tips === null || tips === void 0 ? void 0 : tips.messageSeq)) {
-            const imManager = (0, init_1.getImManager)();
-            imManager.store.dispatch(im_base_1.MessagePanelActions.onRangeLayout(imManager));
+            const imManager = getImManager();
+            imManager.store.dispatch(MessagePanelActions.onRangeLayout(imManager));
         }
     });
-    const onPressPopover = (0, react_1.useCallback)((message, nativeEvent) => {
-        if (message.payloadType === im_base_1.PayloadType.PICTURE) {
-            setNativeEvent(nativeEvent);
-            setShowAlbum(true);
-            setTargetMessageSeq(message.messageSeq);
-        }
+    const onLoadBefore = useMemoizedFn(() => {
+        getImManager()
+            .loadBeforeMessages(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.id, { limit: 15 })
+            .then(() => {
+            console.log('loaded');
+        });
+    });
+    const onLoadAfter = useMemoizedFn(() => {
+        getImManager()
+            .loadAfterMessages(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.id, { limit: 15 })
+            .then(() => {
+            console.log('loaded');
+        });
+    });
+    const renderItem = useMemoizedFn(({ item, index }) => {
+        return (<MessageItem message={item} conversation={currentConversation} mine={item.messageFrom === user.userId} showTimeLine={showTimeLine(item, index, messages)} isMultiple={isMultiple} multipleSelect={multipleSelect} onLongPressPopover={onLongPressPopover} onPressPopover={onPressPopover} onLayoutItem={onLayoutItem}/>);
+    });
+    const onTouchStart = useCallback(() => {
+        var _a;
+        (_a = bar.current) === null || _a === void 0 ? void 0 : _a.reset();
     }, []);
     const onKeyboardAt = () => {
-        if ((currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === im_base_1.ConversationType.C2G) {
-            react_native_1.Keyboard.dismiss();
+        if ((currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.C2G) {
+            Keyboard.dismiss();
             navigation.navigate('ChooseMember', { atOther: true });
         }
     };
-    return (<rn_ui_1.NavigationPage noPadding>
-            {(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === im_base_1.ConversationType.B2C && (<react_native_1.View style={{ padding: (0, rn_ui_1.dp)(8), backgroundColor: '#f5f5f5', elevation: 1 }}>
-                    <rn_ui_1.Input shape="normal" placeholder={t('search')} wrapStyle={{ height: (0, rn_ui_1.dp)(40) }}/>
-                </react_native_1.View>)}
-            <ChatBg_1.default fileId={currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.imageBackground}>
+    return (<NavigationPage noPadding>
+            {(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.B2C && (<View style={{ padding: dp(8), backgroundColor: '#f5f5f5', elevation: 1 }}>
+                    <Input shape="normal" placeholder={t('search')} wrapStyle={{ height: dp(40) }}/>
+                </View>)}
+
+            {messages.length === 0 && (<TouchableWithoutFeedback onPress={onTouchStart} style={{ flex: 1 }}>
+                <View style={styles.empty}>
+                    <FastImage source={noMessageImg} style={styles.noMessageImg}/>
+                    <Text style={styles.noMessageText}>
+                        {t('noChatMessage')}
+                    </Text>
+                </View>
+            </TouchableWithoutFeedback>)}
+
+            {messages.length > 0 && (<ChatBg fileId={currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.imageBackground}>
                 <>
-                    <react_native_1.FlatList ref={messageListRef} inverted contentContainerStyle={{
-            paddingVertical: (0, rn_ui_1.dp)(20),
-            justifyContent: 'flex-end',
-            flexGrow: 1,
-            overflow: 'scroll',
-        }} numColumns={1} onEndReachedThreshold={0.1} keyboardShouldPersistTaps={'handled'} keyExtractor={item => item.messageSeq} renderItem={({ item, index }) => {
-            return (<MessageItem_1.default message={item} conversation={currentConversation} mine={item.messageFrom === user.userId} showTimeLine={(0, im_base_1.showTimeLine)(item, index, messages)} isMultiple={isMultiple} multipleSelect={multipleSelect} onLongPressPopover={onLongPressPopover} onPressPopover={onPressPopover} onLayoutItem={onLayoutItem}/>);
-        }} data={messages} onEndReached={() => {
-            (0, init_1.getImManager)()
-                .loadBeforeMessages(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.id, { limit: 15 })
-                .then(() => {
-                console.log('loaded');
-            });
-        }} refreshing={false} onRefresh={() => {
-            (0, init_1.getImManager)()
-                .loadAfterMessages(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.id, { limit: 15 })
-                .then(() => {
-                console.log('loaded last');
-            });
-        }} onTouchStart={() => {
-            var _a;
-            (_a = bar.current) === null || _a === void 0 ? void 0 : _a.reset();
-        }} onLayout={() => {
-        }}/>
-                    {quote && (<MessageItemQuote_1.default {...quote} onDeleteQuote={() => {
-                (0, init_1.getImManager)().store.dispatch(im_base_1.MessageActions.setQuote(null));
-            }}/>)}
+                    <FlatList ref={messageListRef} inverted contentContainerStyle={{
+                paddingVertical: dp(20),
+                justifyContent: 'flex-end',
+                flexGrow: 1,
+                overflow: 'scroll',
+            }} numColumns={1} onEndReachedThreshold={0.1} keyboardShouldPersistTaps={'handled'} keyExtractor={item => item.messageSeq} renderItem={renderItem} data={messages} onEndReached={onLoadBefore} refreshing={false} 
+        // 在头部增加数据时，保持滚动位置，0.72 以上可以使用
+        maintainVisibleContentPosition={{
+                minIndexForVisible: 0,
+            }} onRefresh={onLoadAfter} onTouchStart={onTouchStart}/>
+                    {quote && (<MessageItemQuote {...quote} onDeleteQuote={() => {
+                    getImManager().store.dispatch(MessageActions.setQuote(null));
+                }}/>)}
                 </>
-            </ChatBg_1.default>
+            </ChatBg>)}
 
-            {!isB2C && (isMultiple ? <MultipleBar_1.default /> : <MessageBar_1.default ref={bar} onKeyboardAt={onKeyboardAt}/>)}
+            {!isB2C && (isMultiple ? <MultipleBar /> : <MessageBar ref={bar} onKeyboardAt={onKeyboardAt}/>)}
 
-            {tips && tips.type === im_base_1.TipsType.AT && (<MessageItemTips_1.default {...tips}/>)}
-            <VideoPlayer_1.default />
-            <MessageOption_1.default visible={Boolean(selectMessage)} nativeEvent={nativeEvent} message={selectMessage} setLoading={(value) => {
+            {tips && tips.type !== TipsType.NONE && (<MessageItemTips {...tips}/>)}
+            <MessageOption visible={Boolean(selectMessage)} touchPoint={touchPoint} nativeEventLayout={targetLayout} message={selectMessage} setLoading={(value) => {
             setLoading(value);
         }} onClose={() => {
-            setNativeEvent(undefined);
             setSelectMessage(undefined);
+            setTargetLayout(undefined);
+            setTouchPoint(undefined);
         }}/>
 
-            <MessagePictureAlbum_1.default visible={showAlbum} messages={messages} messageSeq={targetMessageSeq} onClose={() => {
+            <MessagePictureAlbum visible={showAlbum} messages={messages} messageSeq={targetMessageSeq} onClose={() => {
             setShowAlbum(false);
         }}/>
 
-            {loading && (<react_native_1.View style={styles.loadingContainer}>
-                    <react_native_1.ActivityIndicator size="large" color="#FFFFFF"/>
-                </react_native_1.View>)}
-        </rn_ui_1.NavigationPage>);
+            {loading && (<View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color="#FFFFFF"/>
+                </View>)}
+        </NavigationPage>);
 };
-const styles = react_native_1.StyleSheet.create({
-    loadingContainer: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 }),
+const styles = StyleSheet.create({
+    loadingContainer: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 }),
+    empty: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    noMessageImg: {
+        alignSelf: 'center',
+        width: dp(152),
+        height: dp(122)
+    },
+    noMessageText: {
+        alignSelf: 'center',
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        color: "#999999"
+    },
 });
-exports.default = MessageList;
+export default MessageList;

package/dist/pages/message/MessageRecord.js

@@ -1,131 +1,118 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ChatAvatar_1 = __importDefault(require("../../components/ChatAvatar/ChatAvatar"));
-const FormatTimeText_1 = __importDefault(require("../../components/FormatTimeText"));
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const MessagePayload_1 = __importDefault(require("./components/MessagePayload"));
-const MessagePictureAlbum_1 = __importDefault(require("./components/MessagePictureAlbum"));
-const lodash_es_1 = require("lodash-es");
+import ChatAvatar from '../../components/ChatAvatar/ChatAvatar';
+import FormatTimeText from '../../components/FormatTimeText';
+import { dp, NavigationPage } from '@smart-link/rn-ui';
+import React, { useEffect, useMemo } from 'react';
+import { View, StyleSheet, FlatList, Text } from 'react-native';
+import MessagePayload from './components/MessagePayload';
+import { MessageListActions } from '@smart-link/im-base';
+import MessagePictureAlbum from "./components/MessagePictureAlbum";
+import { useMessage } from "../../hooks/useImSelector";
+import { getImManager } from "../../init";
+import { loadVideoPlayer } from "../../slice/video/video.action";
 const MessageRecord = ({ navigation, route: { params } }) => {
-    const { messages, messageSeq, title } = params;
-    (0, react_1.useEffect)(() => {
+    const { messageSeq, title } = params;
+    const { messageListData } = useMessage();
+    useEffect(() => {
         navigation.setOptions({
             title,
         });
+        return () => {
+            console.log('back');
+            getImManager().store.dispatch(MessageListActions.removeMessageListData());
+        };
     }, [navigation, title]);
-    const [updateMessages, setUpdateMessages] = react_1.default.useState([]);
-    const [previewMessages, setPreviewMessages] = react_1.default.useState([]);
-    const [showAlbum, setShowAlbum] = react_1.default.useState(false);
-    const [targetMessageSeq, setTargetMessageSeq] = react_1.default.useState('');
-    (0, react_1.useEffect)(() => {
-        setUpdateMessages((0, lodash_es_1.cloneDeep)(messages));
-    }, [messages]);
-    const onPress = (item) => {
+    const listRef = React.useRef(null);
+    const [previewMessages, setPreviewMessages] = React.useState([]);
+    const [showAlbum, setShowAlbum] = React.useState(false);
+    const [targetMessageSeq, setTargetMessageSeq] = React.useState('');
+    const data = useMemo(() => {
         var _a;
-        // console.log('MessageRecord: ', item);
-        if (((_a = item.payload.quote) === null || _a === void 0 ? void 0 : _a.quoteMessage.payloadType) === 'picture') {
-            setShowAlbum(true);
-            setTargetMessageSeq(item.payload.quote.quoteMessage.messageSeq);
-            setPreviewMessages([item.payload.quote.quoteMessage]);
-            return;
+        return ((_a = messageListData.find(item => item.messageSeq === messageSeq)) === null || _a === void 0 ? void 0 : _a.childMessages) || [];
+    }, [messageSeq, messageListData]);
+    useEffect(() => {
+        var _a;
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
+    }, [messageSeq]);
+    const onPress = (item) => {
+        if (item.payload.quote) {
+            if (item.payload.quote.quoteMessage.payloadType === 'picture') {
+                setShowAlbum(true);
+                setTargetMessageSeq(item.payload.quote.quoteMessage.messageSeq);
+                setPreviewMessages([item.payload.quote.quoteMessage]);
+                return;
+            }
+            if (item.payload.quote.quoteMessage.payloadType === 'video') {
+                getImManager().store.dispatch(loadVideoPlayer({
+                    messageSeq: item.payload.quote.quoteMessage.messageSeq,
+                    payload: item.payload.quote.quoteMessage.payload,
+                    isRecord: true
+                }));
+            }
         }
         if (item.payloadType === 'picture') {
             setShowAlbum(true);
             setTargetMessageSeq(item.messageSeq);
-            setPreviewMessages(updateMessages);
+            setPreviewMessages(data);
         }
     };
-    return (<rn_ui_1.NavigationPage noPadding>
-            <react_native_1.FlatList contentContainerStyle={styles.list} data={updateMessages} renderItem={({ item, index }) => {
-            const isSamePerson = index > 0 && messages[index - 1].messageFrom === item.messageFrom;
-            return (<react_native_1.View style={styles.messageItem}>
-                            <react_native_1.View style={styles.avatar}>
-                                {!isSamePerson && (<ChatAvatar_1.default id={item.messageFrom} url={item.payload.avatars} size={(0, rn_ui_1.dp)(40)} name={item.messageFromName}/>)}
-                            </react_native_1.View>
-                            <react_native_1.View style={styles.content}>
-                                <react_native_1.View style={styles.info}>
-                                    <react_native_1.Text style={styles.usernameText}>{item.messageFromName}</react_native_1.Text>
-                                    <FormatTimeText_1.default style={styles.timeText} time={item.messageTime}></FormatTimeText_1.default>
-                                </react_native_1.View>
-                                <MessagePayload_1.default {...item} isRecord direction="left" showArrow={false} onPress={() => {
+    return (<NavigationPage noPadding>
+            <FlatList ref={listRef} contentContainerStyle={styles.list} data={data} renderItem={({ item, index }) => {
+            const isSamePerson = index > 0 && data.length > 1 && data[index - 1].messageFrom === item.messageFrom;
+            return (<View style={styles.messageItem}>
+                            <View style={styles.avatar}>
+                                {!isSamePerson && (<ChatAvatar id={item.messageFrom} url={item.payload.avatars} size={dp(40)} name={item.messageFromName}/>)}
+                            </View>
+                            <View style={styles.content}>
+                                <View style={styles.info}>
+                                    <Text style={styles.usernameText}>{item.messageFromName}</Text>
+                                    <FormatTimeText style={styles.timeText} time={item.messageTime}></FormatTimeText>
+                                </View>
+                                <MessagePayload {...item} isRecord direction="left" showArrow={false} onPress={() => {
                     onPress(item);
-                }} onLoad={(localPath) => {
-                    console.log('localPath: ', localPath);
-                    if (!item.payload.localPath) {
-                        item.payload.localPath = localPath;
-                    }
                 }}/>
-                            </react_native_1.View>
-                        </react_native_1.View>);
+                            </View>
+                        </View>);
         }}/>
-            <MessagePictureAlbum_1.default visible={showAlbum} messages={previewMessages} messageSeq={targetMessageSeq} onClose={() => {
+            <MessagePictureAlbum visible={showAlbum} messages={previewMessages} messageSeq={targetMessageSeq} onClose={() => {
             setShowAlbum(false);
         }}/>
-        </rn_ui_1.NavigationPage>);
+        </NavigationPage>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     list: {
-        padding: (0, rn_ui_1.dp)(12),
+        padding: dp(12),
     },
     titleText: {
-        fontSize: (0, rn_ui_1.dp)(16),
+        fontSize: dp(16),
         color: '#fff',
     },
     messageItem: {
         flexDirection: 'row',
-        marginBottom: (0, rn_ui_1.dp)(10),
+        marginBottom: dp(10),
     },
     avatar: {
-        width: (0, rn_ui_1.dp)(40),
+        width: dp(40),
     },
     content: {
         flex: 1,
-        marginHorizontal: (0, rn_ui_1.dp)(6),
-        paddingVertical: (0, rn_ui_1.dp)(4),
-        borderBottomWidth: (0, rn_ui_1.dp)(1),
+        marginHorizontal: dp(6),
+        paddingVertical: dp(4),
+        borderBottomWidth: dp(1),
         borderStyle: 'solid',
         borderColor: '#eee',
     },
     info: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        marginBottom: (0, rn_ui_1.dp)(5),
+        marginBottom: dp(5),
     },
     usernameText: {
         color: '#999',
-        fontSize: (0, rn_ui_1.dp)(12),
+        fontSize: dp(12),
     },
     timeText: {
         color: '#999',
-        fontSize: (0, rn_ui_1.dp)(12),
+        fontSize: dp(12),
     },
 });
-exports.default = MessageRecord;
+export default MessageRecord;