@smart-link/rn-im 1.0.24 → 1.0.26

package/dist/components/ChatAvatar/ChatAvatarLocal.js

@@ -81,7 +81,6 @@ const ChatAvatarLocal = ({ fileId, size, name, defaultAvatar }) => {
             return;
         }
         loadAvatar().then(_r => { });
-        console.log('fileId: ', fileId, name);
     }, [fileId]);
     if (ready && avatar) {
         return (<LocalImage localPath={avatar} style={size ? { width: size, height: size, borderRadius: size / 2 } : { width: 40, height: 40, borderRadius: 20 }}/>);

package/dist/default-assets.d.ts

@@ -17,3 +17,4 @@ export declare const messageBackupImg: {
     cloud_begin: any;
 };
 export declare const noMessageImg: any;
+export declare const dirImg: any;

package/dist/default-assets.js

@@ -18,3 +18,4 @@ export const messageBackupImg = {
     cloud_begin: require('../assets/cloud-backup-begin.png'),
 };
 export const noMessageImg = require('../assets/no_message.png');
+export const dirImg = require('../assets/file-dir.jpg');

package/dist/interface.d.ts

@@ -45,3 +45,12 @@ export type IGroup = {
     parent: boolean;
     userCount: number;
 };
+export type IPathItem = {
+    path: string;
+    isDir: boolean;
+    childrenCount: number;
+    name: string;
+    thumbPath?: string;
+    time: number;
+    size: number;
+};

package/dist/pages/conversation/setting/OptionAvatars.d.ts

@@ -4,7 +4,7 @@ export interface OptionAvatarsProps {
     list: {
         userId: string;
         userName: string;
-        avatars: string;
+        avatars?: string;
         memberLevel?: MemberLevel;
     }[];
     showTitle?: boolean;

package/dist/pages/conversation/setting/OptionGroup.d.ts

@@ -4,7 +4,7 @@ import { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes"
 interface IOptionGroupProps extends ViewProps {
     id: string;
     name: string;
-    avatars: string;
+    avatars?: string;
     notice: string;
     memberLevel: MemberLevel;
     enableInviteValidate: string;

package/dist/pages/conversation/setting/Setting.js

@@ -110,13 +110,12 @@ const ConversationSetting = ({ navigation }) => {
     switch (type) {
         case ConversationType.C2C:
             content = (<>
-                    <OptionAvatars list={id ? [
+                    <OptionAvatars list={[
                     {
                         userId: id,
                         userName: name,
-                        avatars,
                     },
-                ] : []} showAdd={true} showDelete={false} showMore={false} addUser={() => {
+                ]} showAdd={true} showDelete={false} showMore={false} addUser={() => {
                     getImManager().store.dispatch(startCreateGroup());
                     navigation.navigate('ChooseContact', {
                         chooseOrg: true,

package/dist/pages/message/FileSelector.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { NativeStackScreenProps } from "@react-navigation/native-stack/lib/typescript/src/types";
+import { IMPageParamList } from "../types";
+type FileSelectorProps = NativeStackScreenProps<IMPageParamList, 'FileSelector'>;
+declare const FileSelector: ({ navigation }: FileSelectorProps) => React.JSX.Element;
+export default FileSelector;

package/dist/pages/message/FileSelector.js

@@ -0,0 +1,235 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// @flow
+import * as React from 'react';
+import { dp, NavigationPage, SearchInput } from "@smart-link/rn-ui";
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text, FlatList } from "react-native";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { getFileRootItem, getFileType, isImage, numberToFileSize, readFileDir, selectFile } from "../../utils/file";
+import { getImManager } from "../../init";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import useTranslation from "../../hooks/useTranslation";
+import { findSvgIcon } from "../../utils/file-icon";
+import FastImage from "react-native-fast-image";
+import { dirImg } from "../../default-assets";
+import { formatTime } from "../../hooks/useFormatMsgTime";
+import { useConversation } from "../../hooks/useImSelector";
+const getIcon = (item) => {
+    if (item.isDir) {
+        return <FastImage style={styles.fileImage} source={dirImg}/>;
+    }
+    if (isImage(item.path)) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.path }}/>;
+    }
+    if (item.thumbPath) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.thumbPath }}/>;
+    }
+    const Icon = findSvgIcon(getFileType(item.path));
+    return <Icon style={styles.fileImage}/>;
+};
+const FileSelector = ({ navigation }) => {
+    const scrollHolder = {};
+    const [data, setData] = useState([]);
+    const [keyword, setKeyword] = useState('');
+    const [pathItems, setPathItems] = useState([]);
+    const imManager = getImManager();
+    const { t, i18n } = useTranslation();
+    const { currentConversation } = useConversation();
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft({ tintColor }) {
+                return (<TouchableOpacity activeOpacity={0.5} style={{ padding: dp(10) }} onPress={() => {
+                        navigation.goBack();
+                    }}>
+                        <Text style={{ color: tintColor }}>{t('cancel')}</Text>
+                    </TouchableOpacity>);
+            },
+            title: t('file')
+        });
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, [navigation, t]);
+    const onPressItem = (item) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!item.isDir) {
+            const localPath = yield selectFile(imManager, item.path, item.name);
+            const file = {
+                filename: item.name,
+                localPath: localPath,
+                size: item.size,
+                type: getFileType(item.path),
+                lastModified: item.time,
+            };
+            navigation.goBack();
+            if (isImage(file.localPath)) {
+                imManager.sendPictureMessage(currentConversation, file);
+            }
+            else {
+                imManager.sendFileMessage(currentConversation, file);
+            }
+            return;
+        }
+        setPathItems([...pathItems.filter(pathItem => pathItem.path !== item.path), item]);
+        scrollHolder.scroll.scrollToEnd();
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    });
+    const onChangeText = useCallback((keyword) => {
+        setKeyword(keyword);
+        if (pathItems.length === 0) {
+            return;
+        }
+        readFileDir(imManager, pathItems[pathItems.length - 1].path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems]);
+    const onPressPathRoot = useCallback(() => {
+        setPathItems([]);
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, []);
+    const onPressPathItem = useCallback((item) => {
+        setPathItems([
+            ...pathItems.filter(source => source.path.indexOf(item.path) === -1),
+            item
+        ]);
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems, keyword]);
+    const listHeaderComponent = data.length === 0 ? null : <View style={styles.listHeaderLine}/>;
+    const listFooterComponent = data.length === 0 ? null : <View style={styles.listFooterLine}/>;
+    const itemSeparatorComponent = () => <View style={styles.separator}/>;
+    const keyExtractor = (item) => item.name + '_' + item.size;
+    const renderItem = ({ item }) => {
+        const icon = getIcon(item);
+        const extText = item.isDir ? (item.childrenCount + t('items')) : numberToFileSize(item.size);
+        return (<TouchableOpacity style={styles.item} onPress={() => {
+                onPressItem && onPressItem(item);
+            }}>
+
+                {icon}
+                <View style={styles.width15}/>
+                <View style={styles.left}>
+                    <Text style={styles.name} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {item.name}
+                    </Text>
+                    <Text style={styles.time} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {(item.time ? (formatTime(item.time, t, i18n) + ' - ') : '') + extText}
+                    </Text>
+                </View>
+                {item.isDir &&
+                <AntDesign name='right' size={dp(14)} color={'#666'} style={styles.accessory}/>}
+
+            </TouchableOpacity>);
+    };
+    return (<NavigationPage noPadding>
+            <View style={styles.selector}>
+                <View style={styles.search}>
+                    <SearchInput style={{
+            height: dp(32),
+            backgroundColor: '#ececec',
+        }} value={keyword} onChange={onChangeText} onSubmitEditing={() => { }}/>
+                </View>
+                <View style={styles.scroll}>
+                    <TouchableOpacity onPress={onPressPathRoot} style={styles.scrollVertical}>
+                        <Text style={styles.pathText}>{t('position')}</Text>
+                    </TouchableOpacity>
+                    <AntDesign name='right' size={dp(16)} color={'#333'} style={styles.scrollVertical}/>
+                    <ScrollView style={styles.scrollVertical} horizontal={true} ref={v => scrollHolder.scroll = v}>
+
+                        {pathItems.map((pathItem, index) => {
+            const disabled = index === pathItems.length - 1;
+            return (<Fragment key={index}>
+                                        <TouchableOpacity disabled={disabled} onPress={() => {
+                    onPressPathItem && onPressPathItem(pathItem);
+                }}>
+                                            <Text style={styles.pathText}>{pathItem.name}</Text>
+                                        </TouchableOpacity>
+                                        <AntDesign name='right' size={dp(16)} color={'#333'}/>
+                                    </Fragment>);
+        })}
+                    </ScrollView>
+                </View>
+                <FlatList contentContainerStyle={styles.list} ItemSeparatorComponent={itemSeparatorComponent} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} initialNumToRender={20} numColumns={1} data={data} keyboardShouldPersistTaps={'handled'} keyExtractor={keyExtractor} renderItem={renderItem}/>
+            </View>
+        </NavigationPage>);
+};
+const styles = StyleSheet.create({
+    selector: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    scroll: {
+        flexDirection: 'row',
+        paddingHorizontal: dp(8),
+    },
+    scrollVertical: {
+        paddingBottom: dp(10),
+    },
+    pathText: {
+        paddingHorizontal: dp(5),
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        color: '#666',
+    },
+    search: {
+        backgroundColor: '#fff',
+        padding: dp(10),
+    },
+    list: {
+        paddingHorizontal: dp(15),
+    },
+    listFooterLine: {},
+    listHeaderLine: {},
+    separator: {
+        marginLeft: dp(65),
+        marginVertical: dp(10),
+        height: dp(1),
+        backgroundColor: '#ececec'
+    },
+    width15: {
+        width: dp(15),
+    },
+    width10: {
+        width: dp(10),
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    fileImage: {
+        borderRadius: dp(5),
+        width: dp(49),
+        height: dp(49)
+    },
+    left: {
+        justifyContent: 'space-around'
+    },
+    name: {
+        color: '#333',
+        fontSize: dp(15),
+        lineHeight: dp(20),
+        width: dp(260),
+    },
+    time: {
+        color: '#666',
+        fontSize: dp(12),
+        lineHeight: dp(18),
+    },
+    accessory: {
+        alignSelf: 'center',
+        position: 'absolute',
+        right: dp(15),
+    }
+});
+export default FileSelector;

package/dist/pages/message/MessageList.js

@@ -27,9 +27,9 @@ const MessageList = ({ navigation }) => {
     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 [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);
@@ -62,7 +62,7 @@ const MessageList = ({ navigation }) => {
                 InteractionManager.runAfterInteractions(() => {
                     imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
-                    imManager.store.dispatch(MessageActions.resetState());
+                    imManager.store.dispatch(MessageActions.resetState({}));
                 });
             }
         });
@@ -81,12 +81,22 @@ const MessageList = ({ navigation }) => {
             getImManager().store.dispatch(MessageActions.setIsSearch(false));
         }
     }, [isSearch]);
-    const onLongPressPopover = 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 = 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 = getImManager();
             imManager.store.dispatch(MessagePanelActions.onRangeLayout(imManager));
@@ -113,13 +123,6 @@ const MessageList = ({ navigation }) => {
         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) === ConversationType.C2G) {
             Keyboard.dismiss();
@@ -161,11 +164,12 @@ const MessageList = ({ navigation }) => {
             {!isB2C && (isMultiple ? <MultipleBar /> : <MessageBar ref={bar} onKeyboardAt={onKeyboardAt}/>)}
 
             {tips && tips.type !== TipsType.NONE && (<MessageItemTips {...tips}/>)}
-            <MessageOption visible={Boolean(selectMessage)} nativeEvent={nativeEvent} message={selectMessage} setLoading={(value) => {
+            <MessageOption visible={Boolean(selectMessage)} touchPoint={touchPoint} nativeEventLayout={targetLayout} message={selectMessage} setLoading={(value) => {
             setLoading(value);
         }} onClose={() => {
-            setNativeEvent(undefined);
             setSelectMessage(undefined);
+            setTargetLayout(undefined);
+            setTouchPoint(undefined);
         }}/>
 
             <MessagePictureAlbum visible={showAlbum} messages={messages} messageSeq={targetMessageSeq} onClose={() => {

package/dist/pages/message/MessageRecord.js

@@ -1,47 +1,63 @@
 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 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 { cloneDeep } from "lodash-es";
+import { useMessage } from "../../hooks/useImSelector";
+import { getImManager } from "../../init";
+import { loadVideoPlayer } from "../../slice/video/video.action";
 const MessageRecord = ({ navigation, route: { params } }) => {
-    const { messages, title } = params;
+    const { messageSeq, title } = params;
+    const { messageListData } = useMessage();
     useEffect(() => {
         navigation.setOptions({
             title,
         });
+        return () => {
+            console.log('back');
+            getImManager().store.dispatch(MessageListActions.removeMessageListData());
+        };
     }, [navigation, title]);
     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('');
+    const data = useMemo(() => {
+        var _a;
+        return ((_a = messageListData.find(item => item.messageSeq === messageSeq)) === null || _a === void 0 ? void 0 : _a.childMessages) || [];
+    }, [messageSeq, messageListData]);
     useEffect(() => {
         var _a;
-        setUpdateMessages(cloneDeep(messages));
         (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
-    }, [messages]);
+    }, [messageSeq]);
     const onPress = (item) => {
-        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;
+        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 (<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;
+            <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}/>)}
@@ -53,11 +69,6 @@ const MessageRecord = ({ navigation, route: { params } }) => {
                                 </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;
-                    }
                 }}/>
                             </View>
                         </View>);

package/dist/pages/message/components/MessageItem.d.ts

@@ -1,6 +1,7 @@
 import { IConversation, IMessage } from '@smart-link/im-base';
 import React from 'react';
 import { NativeTouchEvent, LayoutChangeEvent } from 'react-native';
+import { NativeEventLayout } from "../../types";
 type MessageItemProps = {
     isMultiple?: boolean;
     multipleSelect?: Record<string, IMessage>;
@@ -8,7 +9,7 @@ type MessageItemProps = {
     message: IMessage;
     mine: boolean;
     showTimeLine: boolean;
-    onLongPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
+    onLongPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent, layout: NativeEventLayout) => void;
     onPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
     onLayoutItem: (item: IMessage, e: LayoutChangeEvent) => void;
 };

package/dist/pages/message/components/MessageItem.js

@@ -33,7 +33,7 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
             {isNotify && <PayloadNotify {...message}/>}
             {isUndo && <MessageUndo messageSeq={message.messageSeq} text={mine ? t('youWithdrawMsg') : `"${message.messageFromName}" ${t('withdrawMsg')}`} undoText={message.payload.text} haveBackgroundImage={false} edit={mine && message.payloadType === 'text'}/>}
             {isMessagePayload && (<>
-                    {isMultiple && (<TouchableWithoutFeedback onPress={() => {
+                    {isMultiple && message.payloadType !== 'voice' && (<TouchableWithoutFeedback onPress={() => {
                     getImManager().store.dispatch(MessagePanelActions.onMultipleSelect(message.messageSeq));
                 }}>
                             <View style={styles.multipleWrap}/>
@@ -45,7 +45,7 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
                     justifyContent: 'flex-start',
                 },
             ]}>
-                        {mine && isMultiple && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox]}/>)}
+                        {mine && isMultiple && message.payloadType !== 'voice' && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox]}/>)}
                         <ChatAvatar name={message.messageFromName} id={message.messageFrom} size={dp(40)}/>
                         <View style={[
                 {
@@ -58,6 +58,7 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
             ]}>
                             {!mine && message.conversationType !== ConversationType.C2C && (<Text style={[styles.name, {
                         marginLeft: notArrow ? 0 : dp(10),
+                        marginBottom: dp(5),
                     }]}>{message.messageFromName}</Text>)}
                             <View>
                                 <MessagePayload style={[
@@ -70,10 +71,10 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
                 e.stopPropagation();
                 e.preventDefault();
                 onPressPopover(message, e.nativeEvent);
-            }} onLongPress={e => {
+            }} onLongPress={(e, layout) => {
                 e.stopPropagation();
                 e.preventDefault();
-                onLongPressPopover(message, e.nativeEvent);
+                onLongPressPopover(message, e.nativeEvent, layout);
             }}/>
                                 {isC2C && mine && <MessageReceiptStatus {...message}/>}
                             </View>
@@ -82,7 +83,7 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
                                 <Icon name="info" size={dp(20)} color={theme.errorColor}/>
                             </Text>)}
                         {mine && message.messageStatus === MessageStatus.EMITTING && (<ActivityIndicator size="small" color={'#666'} animating={true}/>)}
-                        {!mine && isMultiple && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
+                        {!mine && isMultiple && message.payloadType !== 'voice' && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
                     </View>
                 </>)}
             {message.messageStatus === MessageStatus.EMIT_ERROR && (<>

package/dist/pages/message/components/MessageOption.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
-import { NativeTouchEvent } from 'react-native';
 import { IMessage } from '@smart-link/im-base';
+import { NativeEventLayout } from '../../../pages';
 type MessageOptionProps = {
     message?: IMessage;
     visible: boolean;
-    nativeEvent?: NativeTouchEvent;
+    touchPoint?: {
+        x: number;
+        y: number;
+    };
+    nativeEventLayout?: NativeEventLayout;
     onClose: () => void;
     setLoading: (loading: boolean) => void;
 };
-declare const _default: React.MemoExoticComponent<({ visible, message, nativeEvent, onClose, setLoading }: MessageOptionProps) => React.JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ visible, message, nativeEventLayout, touchPoint, onClose, setLoading }: MessageOptionProps) => React.JSX.Element | null>;
 export default _default;

package/dist/pages/message/components/MessageOption.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { memo, useRef } from 'react';
-import { Animated, Text, StyleSheet, TouchableOpacity, View, TouchableWithoutFeedback, Dimensions, UIManager, StatusBar, Modal, } from 'react-native';
+import { Animated, Text, StyleSheet, TouchableOpacity, View, TouchableWithoutFeedback, Dimensions, StatusBar, Modal, } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { getMessageActionKeys, MessageActions, MessagePanelActions, MessageStatus, PayloadType, ConversationType, } from '@smart-link/im-base';
 import AntDesign from 'react-native-vector-icons/AntDesign';
@@ -198,7 +198,7 @@ const renderOperations = (items, close) => {
         })}
         </View>);
 };
-const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) => {
+const MessageOption = ({ visible, message, nativeEventLayout, touchPoint, onClose, setLoading }) => {
     var _a;
     const { t } = useTranslation();
     const headerHeight = useHeaderHeight();
@@ -258,20 +258,17 @@ const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) =
         const { width: contentWidth, height: contentHeight } = e.nativeEvent.layout;
         // 计算操作项的显示位置
         // 判断点击位置是否存在
-        if (nativeEvent) {
-            // 测量点击位置的元素
-            // @ts-ignore
-            UIManager.measure(nativeEvent.target, (x, y, width, height, pageX, pageY) => {
-                console.log('measure', x, y, width, height, pageX, pageY);
-                let targetY = 0;
-                if (pageY + height + contentHeight > displayArea.height) {
-                    targetY = pageY - contentHeight;
-                }
-                else {
-                    targetY = pageY + height;
-                }
-                showAnimation(displayArea.x + displayArea.width - contentWidth, targetY);
-            });
+        if (nativeEventLayout && touchPoint) {
+            const { height } = nativeEventLayout;
+            const { x, y } = touchPoint;
+            let safePageY = !isNaN(y) ? y : displayArea.y;
+            let targetY = safePageY + height + contentHeight > displayArea.height
+                ? safePageY - contentHeight
+                : safePageY + height;
+            let targetX = x + contentWidth > displayArea.width
+                ? displayArea.width - contentWidth
+                : x;
+            showAnimation(targetX, targetY);
         }
         else {
             showAnimation(displayArea.x + displayArea.width - contentWidth, displayArea.y + displayArea.height / 2 - contentHeight / 2);

package/dist/pages/message/components/MessagePayload.d.ts

@@ -3,13 +3,14 @@ import { IMessage } from '@smart-link/im-base';
 import { StyleProp } from 'react-native';
 import { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import { GestureResponderEvent } from 'react-native/Libraries/Types/CoreEventTypes';
+import { NativeEventLayout } from "../../types";
 export interface MessagePayloadProps extends IMessage {
     style?: StyleProp<ViewStyle>;
     direction?: 'left' | 'right';
     showArrow?: boolean;
     isRecord?: boolean;
     onPress?: (e: GestureResponderEvent) => void;
-    onLongPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent, layout: NativeEventLayout) => void;
     onLoad?: (localPath: string) => void;
 }
 declare const _default: React.NamedExoticComponent<MessagePayloadProps>;

package/dist/pages/message/components/Payload/PayloadFile.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { PayloadProps } from './type';
-declare const _default: React.MemoExoticComponent<({ payload, messageSeq, direction, showArrow, isRecord, messageStatus, sendSize, style, onLongPress }: PayloadProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ payload, messageSeq, direction, showArrow, isRecord, messageStatus, jobId, sendSize, style, onLongPress }: PayloadProps) => React.JSX.Element>;
 export default _default;