@smart-link/rn-im 1.0.22 → 1.0.24

package/dist/pages/message/MessageBackup/utils.js

@@ -1,4 +1,3 @@
-"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,14 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageRestoreUtils = exports.MessageBackupUtils = void 0;
-const axios_1 = __importDefault(require("axios"));
-const init_1 = require("../../../init");
-const backup_1 = require("../../../api/backup");
+import axios from "axios";
+import { getImManager } from "../../../init";
+import { uploadMessage, cancelBackupMessage, queryMyBackMessage, queryMyLastBackupMessageSeq } from "../../../api/backup";
 class Queue {
     constructor() {
         this.queue = [];
@@ -96,7 +90,7 @@ class BaseUtils {
 }
 class TaskItem {
     constructor(limit, offset) {
-        this.cancelToken = axios_1.default.CancelToken.source();
+        this.cancelToken = axios.CancelToken.source();
         this.limit = limit;
         this.offset = offset;
     }
@@ -119,19 +113,19 @@ class BackupTaskItem extends TaskItem {
     }
     execute(callback, batchId) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data, lastMessageSeq } = yield (0, init_1.getImManager)().db.selectMessageForBackup({
+            const { data, lastMessageSeq } = yield getImManager().db.selectMessageForBackup({
                 messageSeq: this.messageSeq,
                 limit: this.limit,
                 offset: this.offset
             });
             let prevCount = Math.ceil(data.length / 5);
             callback(prevCount, batchId);
-            const { data: newBatchId } = yield (0, backup_1.uploadMessage)({ batchId: batchId, lastMessageSeq, messages: data }, { cancelToken: this.cancelToken.token });
+            const { data: newBatchId } = yield uploadMessage({ batchId: batchId, lastMessageSeq, messages: data }, { cancelToken: this.cancelToken.token });
             callback(data.length - prevCount, newBatchId || batchId);
         });
     }
 }
-class MessageBackupUtils extends BaseUtils {
+export class MessageBackupUtils extends BaseUtils {
     constructor(callback) {
         super(callback);
     }
@@ -146,9 +140,9 @@ class MessageBackupUtils extends BaseUtils {
         return __awaiter(this, void 0, void 0, function* () {
             this.state = 'running';
             // 查询最近一次备份的消息序列
-            const { data: messageSeq } = yield (0, backup_1.queryMyLastBackupMessageSeq)();
+            const { data: messageSeq } = yield queryMyLastBackupMessageSeq();
             console.log('LastBackup messageSeq: ', messageSeq);
-            const total = yield (0, init_1.getImManager)().db.countMessageAfterSeq(messageSeq);
+            const total = yield getImManager().db.countMessageAfterSeq(messageSeq);
             console.log('total', total);
             this.total = total;
             // 没有需要备份的消息
@@ -169,11 +163,10 @@ class MessageBackupUtils extends BaseUtils {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.cancel.call(this);
-            yield (0, backup_1.cancelBackupMessage)(this.batchId);
+            yield cancelBackupMessage(this.batchId);
         });
     }
 }
-exports.MessageBackupUtils = MessageBackupUtils;
 class RestoreTaskItem extends TaskItem {
     constructor(pageNum, pageSize) {
         super(pageNum, pageSize);
@@ -182,8 +175,8 @@ class RestoreTaskItem extends TaskItem {
     }
     execute(callback) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data: { records: [messages] } } = yield (0, backup_1.queryMyBackMessage)({ pageNum: this.pageNum, pageSize: this.pageSize }, { cancelToken: this.cancelToken.token });
-            const imManager = (0, init_1.getImManager)();
+            const { data: { records: [messages] } } = yield queryMyBackMessage({ pageNum: this.pageNum, pageSize: this.pageSize }, { cancelToken: this.cancelToken.token });
+            const imManager = getImManager();
             yield Promise.all(messages.map(item => {
                 return (() => __awaiter(this, void 0, void 0, function* () {
                     const message = JSON.parse(item);
@@ -207,7 +200,7 @@ class RestoreTaskItem extends TaskItem {
         });
     }
 }
-class MessageRestoreUtils extends BaseUtils {
+export class MessageRestoreUtils extends BaseUtils {
     constructor(callback) {
         super(callback);
         // 默认每页1个批次的多条数据，按批次处理进度
@@ -223,7 +216,7 @@ class MessageRestoreUtils extends BaseUtils {
     start() {
         return __awaiter(this, void 0, void 0, function* () {
             this.state = 'running';
-            const { data: { total, } } = yield (0, backup_1.queryMyBackMessage)({ pageNum: 1, pageSize: 1 });
+            const { data: { total, } } = yield queryMyBackMessage({ pageNum: 1, pageSize: 1 });
             console.log('total: ', total);
             this.total = total;
             const length = Math.ceil(this.total / this.pageSize);
@@ -236,4 +229,3 @@ class MessageRestoreUtils extends BaseUtils {
         });
     }
 }
-exports.MessageRestoreUtils = MessageRestoreUtils;

package/dist/pages/message/MessageList.js

@@ -1,94 +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 [nativeEvent, setNativeEvent] = useState();
+    const [loading, setLoading] = useState(false);
+    const itemLayout = useRef({});
+    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 {
-                console.log('[离开会话]: ');
-                imManager.store.dispatch(im_base_1.MessagePanelActions.saveDraftText(imManager));
-                react_native_1.InteractionManager.runAfterInteractions(() => {
+                InteractionManager.runAfterInteractions(() => {
+                    imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
+                    imManager.store.dispatch(MessageActions.resetState());
                 });
             }
         });
@@ -96,97 +70,130 @@ 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) => {
+    const onLongPressPopover = useCallback((message, nativeEvent) => {
         setNativeEvent(nativeEvent);
         setSelectMessage(message);
     }, []);
-    const onLayoutItem = (0, ahooks_1.useMemoizedFn)((message, e) => {
+    const onLayoutItem = useMemoizedFn((message, e) => {
+        itemLayout.current[message.messageSeq] = e.nativeEvent.layout.height;
         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) {
+    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 onPressPopover = useCallback((message, nativeEvent) => {
+        if (message.payloadType === PayloadType.PICTURE) {
             setNativeEvent(nativeEvent);
             setShowAlbum(true);
             setTargetMessageSeq(message.messageSeq);
         }
     }, []);
     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)} nativeEvent={nativeEvent} message={selectMessage} setLoading={(value) => {
             setLoading(value);
         }} onClose={() => {
             setNativeEvent(undefined);
             setSelectMessage(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,52 +1,27 @@
-"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 } from 'react';
+import { View, StyleSheet, FlatList, Text } from 'react-native';
+import MessagePayload from './components/MessagePayload';
+import MessagePictureAlbum from "./components/MessagePictureAlbum";
+import { cloneDeep } from "lodash-es";
 const MessageRecord = ({ navigation, route: { params } }) => {
-    const { messages, messageSeq, title } = params;
-    (0, react_1.useEffect)(() => {
+    const { messages, title } = params;
+    useEffect(() => {
         navigation.setOptions({
             title,
         });
     }, [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));
+    const listRef = React.useRef(null);
+    const [updateMessages, setUpdateMessages] = React.useState([]);
+    const [previewMessages, setPreviewMessages] = React.useState([]);
+    const [showAlbum, setShowAlbum] = React.useState(false);
+    const [targetMessageSeq, setTargetMessageSeq] = React.useState('');
+    useEffect(() => {
+        var _a;
+        setUpdateMessages(cloneDeep(messages));
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
     }, [messages]);
     const onPress = (item) => {
         var _a;
@@ -63,19 +38,20 @@ const MessageRecord = ({ navigation, route: { params } }) => {
             setPreviewMessages(updateMessages);
         }
     };
-    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={updateMessages} renderItem={({ item, index }) => {
+            console.log('index: ', index);
+            const isSamePerson = index > 0 && updateMessages.length > 1 && updateMessages[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);
@@ -83,49 +59,49 @@ const MessageRecord = ({ navigation, route: { params } }) => {
                         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;