@smart-link/rn-im 1.0.1

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

@@ -0,0 +1,67 @@
+"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 rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const FontAwesome_1 = __importDefault(require("react-native-vector-icons/FontAwesome"));
+const styles_1 = require("../../../components/styles");
+const init_1 = require("../../../init");
+const im_base_1 = require("@smart-link/im-base");
+const MessageItemTips = (0, react_1.memo)(props => {
+    const { text, style, } = props;
+    return (<react_native_1.TouchableOpacity style={[styles.tips, style]} onPress={() => {
+            const imManager = (0, init_1.getImManager)();
+            imManager.store.dispatch(im_base_1.MessagePanelActions.focusTipsMessage(imManager));
+        }}>
+            <react_native_1.Image style={styles.logo} source={(0, init_1.getLogo)()}/>
+            <react_native_1.Text style={styles.text}>{text}</react_native_1.Text>
+            <react_native_1.Text style={styles.icon}>
+                <FontAwesome_1.default name="angle-double-up" color="#777" size={17}/>
+            </react_native_1.Text>
+        </react_native_1.TouchableOpacity>);
+});
+const styles = react_native_1.StyleSheet.create({
+    tips: Object.assign({ top: (0, rn_ui_1.dp)(35), right: (0, rn_ui_1.dp)(0), position: 'absolute', flexDirection: 'row', height: (0, rn_ui_1.dp)(36), backgroundColor: '#fff', justifyContent: 'space-between', alignItems: 'center', borderColor: '#eee', borderTopLeftRadius: (0, rn_ui_1.dp)(20), borderBottomLeftRadius: (0, rn_ui_1.dp)(20), paddingVertical: (0, rn_ui_1.dp)(4) }, styles_1.shadowStyle),
+    logo: {
+        marginHorizontal: (0, rn_ui_1.dp)(4),
+        height: (0, rn_ui_1.dp)(30),
+        width: (0, rn_ui_1.dp)(30),
+        justifyContent: 'center',
+        borderRadius: (0, rn_ui_1.dp)(15),
+    },
+    text: {
+        fontSize: (0, rn_ui_1.dp)(13),
+        lineHeight: (0, rn_ui_1.dp)(18),
+        color: '#555',
+    },
+    icon: {
+        marginHorizontal: (0, rn_ui_1.dp)(4),
+    }
+});
+exports.default = MessageItemTips;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NativeTouchEvent } from 'react-native';
+import { IMessage } from '@smart-link/im-base';
+type MessageOptionProps = {
+    message?: IMessage;
+    visible: boolean;
+    nativeEvent?: NativeTouchEvent;
+    onClose: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ visible, message, nativeEvent, onClose }: MessageOptionProps) => React.JSX.Element | null>;
+export default _default;

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

@@ -0,0 +1,360 @@
+"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 __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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const clipboard_1 = __importDefault(require("@react-native-clipboard/clipboard"));
+const im_base_1 = require("@smart-link/im-base");
+const AntDesign_1 = __importDefault(require("react-native-vector-icons/AntDesign"));
+const FontAwesome5_1 = __importDefault(require("react-native-vector-icons/FontAwesome5"));
+const MaterialCommunityIcons_1 = __importDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
+const FontAwesome_1 = __importDefault(require("react-native-vector-icons/FontAwesome"));
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const common_action_sheet_1 = require("../../../utils/common-action-sheet");
+const init_1 = require("../../../init");
+const elements_1 = require("@react-navigation/elements");
+const useImSelector_1 = require("../../../hooks/useImSelector");
+const file_1 = require("../../../utils/file");
+const ReceiptBack_1 = require("../../../pages/message/components/ReceiptBack");
+const getMessageAction = (t, message, navigation) => {
+    if (!message)
+        return [];
+    const actions = (0, im_base_1.getMessageActionKeys)(message.payloadType);
+    const items = [
+        {
+            key: 'copy',
+            title: t('copy'),
+            icon: <AntDesign_1.default name="copy1" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => {
+                clipboard_1.default.setString(message.payload.text);
+            },
+        },
+        // {
+        //     key: 'copyNotice',
+        //     title: t('copy'),
+        //     icon: <AntDesign name="copy1" size={dp(20)} color={'#333'}/>,
+        //     onPress: () => {
+        //         // Clipboard.setString(message.payload.title + '\r\n' + message.payload.content);
+        //     }
+        // },
+        {
+            key: 'forward',
+            title: t('forward'),
+            icon: <FontAwesome5_1.default name="reply" size={(0, rn_ui_1.dp)(19)} color={'#333'}/>,
+            onPress: () => {
+                (0, init_1.getImManager)().store.dispatch(im_base_1.MessageActions.setForwardMessage(message));
+                navigation.navigate('ForwardToConversation');
+            },
+        },
+        {
+            key: 'delete',
+            title: t('delete'),
+            icon: <MaterialCommunityIcons_1.default name="delete-forever" size={(0, rn_ui_1.dp)(23)} color={'#333'}/>,
+            onPress: () => {
+                (0, common_action_sheet_1.ConfirmActionSheet)(t('confirmDeleteMessage'), () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield (0, init_1.getImManager)().deleteMessage(message);
+                }), t);
+            },
+        },
+        {
+            key: 'reply',
+            title: t('reply'),
+            icon: <MaterialCommunityIcons_1.default name="message-processing" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => {
+                const imManager = (0, init_1.getImManager)();
+                imManager.replyMessage(message);
+                setTimeout(() => {
+                    var _a, _b;
+                    if ((_a = imManager.inputRef) === null || _a === void 0 ? void 0 : _a.current) {
+                        imManager.inputRef.current.focusTextInput();
+                    }
+                    if ((_b = imManager.flatListRef) === null || _b === void 0 ? void 0 : _b.current) {
+                        imManager.flatListRef.current.scrollToOffset({
+                            offset: 0,
+                            animated: false,
+                        });
+                    }
+                }, 300);
+            },
+        },
+        {
+            key: 'undo',
+            title: t('undo'),
+            icon: <FontAwesome_1.default name="undo" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => __awaiter(void 0, void 0, void 0, function* () {
+                (0, common_action_sheet_1.ConfirmActionSheet)(t('confirmUndoMessage'), () => __awaiter(void 0, void 0, void 0, function* () {
+                    try {
+                        yield (0, init_1.getImManager)().undoMessage(message);
+                    }
+                    catch (e) {
+                        rn_ui_1.Toast.error(t('undoFail'));
+                    }
+                }), t);
+            }),
+        },
+        {
+            key: 'feedback',
+            title: t('feedback'),
+            icon: <MaterialIcons_1.default name="feedback" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => __awaiter(void 0, void 0, void 0, function* () {
+                rn_ui_1.Modal.open({
+                    content: <ReceiptBack_1.ReceiptBack message={message}/>,
+                    maskClosable: true,
+                    footer: {
+                        cancelButton: false,
+                        confirmButton: false,
+                    },
+                });
+            })
+        },
+        {
+            key: 'collect',
+            title: t('collect'),
+            icon: <FontAwesome_1.default name="star" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => {
+                (0, init_1.getImManager)().collectMessage(message);
+            },
+        },
+        {
+            key: 'saveToAlbum',
+            title: t('savePicture'),
+            icon: <AntDesign_1.default name="save" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield (0, file_1.saveToAlbum)((0, init_1.getImManager)(), localPath);
+            }),
+        },
+        {
+            key: 'download',
+            title: t('download'),
+            icon: <AntDesign_1.default name="download" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            onPress: () => __awaiter(void 0, void 0, void 0, function* () {
+                const imManager = (0, init_1.getImManager)();
+                imManager.store.dispatch(im_base_1.MessagePanelActions.downloadFile(imManager, message));
+            }),
+        },
+        {
+            key: 'multiple',
+            title: t('multiple'),
+            icon: <MaterialCommunityIcons_1.default name="playlist-check" size={(0, rn_ui_1.dp)(22)} color={'#333'}/>,
+            onPress: () => {
+                (0, init_1.getImManager)().store.dispatch(im_base_1.MessagePanelActions.startMultipleSelect(message));
+            },
+        },
+    ];
+    const { messageFrom, isMyMessage, messageFromName, messageTime, payloadType, messageStatus, payload: { 
+    // title,
+    // content,
+    // avatars,
+    // text,
+    localPath, }, conversationId, conversationType, } = message;
+    const imManager = (0, init_1.getImManager)();
+    return items.filter(item => {
+        const { key } = item;
+        //if (isMyMessage && key === 'reply') return false;
+        if (messageStatus === im_base_1.MessageStatus.EMITTING) {
+            return false;
+        }
+        if ((!isMyMessage ||
+            messageStatus === im_base_1.MessageStatus.EMIT_ERROR ||
+            new Date().getTime() - messageTime > imManager.undoLimitTime) &&
+            key === 'undo')
+            return false;
+        if (payloadType === im_base_1.PayloadType.FILE && localPath && key === 'download') {
+            return false;
+        }
+        if ((!isMyMessage || conversationType !== im_base_1.ConversationType.C2C) && key === 'feedback') {
+            return false;
+        }
+        return actions.includes(item.key);
+    });
+};
+const renderOperations = (items, close) => {
+    return (<react_native_1.View style={styles.operationWrap}>
+            {items.map((item, index) => {
+            return (<react_native_1.TouchableOpacity key={index} onPress={() => {
+                    item.onPress && item.onPress();
+                    close && close();
+                }}>
+                        <react_native_1.View style={styles.operationItem}>
+                            {item.icon}
+                            <react_native_1.Text style={styles.operationText}>{item.title}</react_native_1.Text>
+                        </react_native_1.View>
+                    </react_native_1.TouchableOpacity>);
+        })}
+        </react_native_1.View>);
+};
+const MessageOption = ({ visible, message, nativeEvent, onClose }) => {
+    var _a;
+    const { t } = (0, useTranslation_1.default)();
+    const headerHeight = (0, elements_1.useHeaderHeight)();
+    const { messageBarHeight } = (0, useImSelector_1.usePanel)();
+    const navigation = (0, rn_ui_1.useNavigation)();
+    const items = getMessageAction(t, message, navigation);
+    const translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const { width: screenWidth, height: screenHeight } = react_native_1.Dimensions.get('window');
+    const padding = (0, rn_ui_1.dp)(12);
+    // 视窗范围
+    const displayArea = {
+        x: padding,
+        y: padding,
+        width: screenWidth - padding * 2,
+        height: screenHeight - headerHeight - messageBarHeight - ((_a = react_native_1.StatusBar.currentHeight) !== null && _a !== void 0 ? _a : 0) - padding * 2,
+    };
+    const showAnimation = (x, y) => {
+        translateX.setValue(x);
+        translateY.setValue(y);
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(scale, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    };
+    const hideAnimation = () => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(scale, {
+                toValue: 0,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 0,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            onClose();
+            translateX.setValue(0);
+            translateY.setValue(0);
+            opacity.setValue(0);
+            scale.setValue(0);
+        });
+    };
+    const onLayout = (e) => {
+        const { width: contentWidth, height: contentHeight } = e.nativeEvent.layout;
+        // 计算操作项的显示位置
+        // 判断点击位置是否存在
+        if (nativeEvent) {
+            // 测量点击位置的元素
+            // @ts-ignore
+            react_native_1.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);
+            });
+        }
+        else {
+            showAnimation(displayArea.x + displayArea.width - contentWidth, displayArea.y + displayArea.height / 2 - contentHeight / 2);
+        }
+    };
+    const onHide = () => {
+        hideAnimation();
+    };
+    if (!items.length)
+        return null;
+    return (<react_native_1.Modal visible={visible} transparent onRequestClose={onHide}>
+            <react_native_1.TouchableWithoutFeedback onPress={onHide}>
+                <react_native_1.View style={react_native_1.StyleSheet.absoluteFill}/>
+            </react_native_1.TouchableWithoutFeedback>
+            <react_native_1.Animated.View style={[
+            styles.popWrap,
+            {
+                transform: [
+                    {
+                        translateX: translateX,
+                    },
+                    {
+                        translateY: translateY,
+                    },
+                    {
+                        scale: scale,
+                    },
+                ],
+                opacity: opacity,
+            },
+        ]} onLayout={onLayout}>
+                {renderOperations(items, onClose)}
+            </react_native_1.Animated.View>
+        </react_native_1.Modal>);
+};
+const styles = react_native_1.StyleSheet.create({
+    popWrap: {
+        maxWidth: (0, rn_ui_1.dp)(280),
+        borderRadius: (0, rn_ui_1.dp)(5),
+        paddingTop: (0, rn_ui_1.dp)(10),
+        backgroundColor: '#fff',
+        shadowOffset: { width: 1, height: 2 },
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowOpacity: 1,
+        shadowRadius: (0, rn_ui_1.dp)(5),
+        elevation: 10,
+    },
+    operationWrap: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    operationItem: {
+        width: (0, rn_ui_1.dp)(272 / 4),
+        height: (0, rn_ui_1.dp)(40),
+        paddingHorizontal: (0, rn_ui_1.dp)(2),
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: (0, rn_ui_1.dp)(10),
+    },
+    operationText: {
+        fontSize: (0, rn_ui_1.dp)(12),
+        lineHeight: (0, rn_ui_1.dp)(15),
+    },
+});
+exports.default = (0, react_1.memo)(MessageOption);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+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';
+export interface MessagePayloadProps extends IMessage {
+    style?: StyleProp<ViewStyle>;
+    direction?: 'left' | 'right';
+    showArrow?: boolean;
+    onPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent) => void;
+}
+declare const _default: React.NamedExoticComponent<MessagePayloadProps>;
+export default _default;

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

@@ -0,0 +1,96 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const im_base_1 = require("@smart-link/im-base");
+const react_native_1 = require("react-native");
+const PayloadContact_1 = __importDefault(require("./Payload/PayloadContact"));
+const PayloadFile_1 = __importDefault(require("./Payload/PayloadFile"));
+const PayloadPicture_1 = __importDefault(require("./Payload/PayloadPicture"));
+const PayloadVoice_1 = __importDefault(require("./Payload/PayloadVoice"));
+const PayloadVideo_1 = __importDefault(require("./Payload/PayloadVideo"));
+const PayloadText_1 = __importDefault(require("./Payload/PayloadText"));
+const styles_1 = require("../../../components/styles");
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const PayloadMultiple_1 = __importDefault(require("./Payload/PayloadMultiple"));
+const PayloadWrapper_1 = __importDefault(require("./Payload/PayloadWrapper"));
+const PayloadShare_1 = __importDefault(require("../../../pages/message/components/Payload/PayloadShare"));
+const MessagePayload = props => {
+    const { style: outStyle } = props, retProps = __rest(props, ["style"]);
+    const { t } = (0, useTranslation_1.default)();
+    const payloadType = props.payloadType;
+    const noStylePayloadType = [im_base_1.PayloadType.PICTURE, im_base_1.PayloadType.VIDEO];
+    const style = !noStylePayloadType.includes(payloadType) ? outStyle : [];
+    const mergeProps = Object.assign(Object.assign({}, retProps), { style });
+    let content;
+    switch (payloadType) {
+        case im_base_1.PayloadType.TEXT:
+            content = <PayloadText_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.PICTURE:
+            content = <PayloadPicture_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.VOICE:
+            content = <PayloadVoice_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.VIDEO:
+            content = <PayloadVideo_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.FILE:
+            content = <PayloadFile_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.CONTACT:
+            content = <PayloadContact_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.MULTIPLE:
+            content = <PayloadMultiple_1.default {...mergeProps}/>;
+            break;
+        case im_base_1.PayloadType.SHARE:
+            content = <PayloadShare_1.default {...mergeProps}/>;
+            break;
+        default:
+            console.log('暂不支持的消息类型：', payloadType);
+            content = (<PayloadWrapper_1.default style={style} direction={mergeProps.direction}>
+                    <react_native_1.Text style={styles_1.plain}>[{t('msgTypeNotSupported')}]</react_native_1.Text>
+                </PayloadWrapper_1.default>);
+            break;
+    }
+    return content;
+};
+exports.default = (0, react_1.memo)(MessagePayload);

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

@@ -0,0 +1,10 @@
+import { IMessage } from '@smart-link/im-base';
+import React from 'react';
+export interface MessagePictureAlbumProps {
+    visible: boolean;
+    messages: IMessage[];
+    messageSeq: string;
+    onClose: () => void;
+}
+declare const MessagePictureAlbum: ({ visible, onClose, messages, messageSeq }: MessagePictureAlbumProps) => React.JSX.Element;
+export default MessagePictureAlbum;

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

@@ -0,0 +1,105 @@
+"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 file_1 = require("../../../api/file");
+const file_2 = require("../../../utils/file");
+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 AntDesign_1 = __importDefault(require("react-native-vector-icons/AntDesign"));
+const MessagePictureAlbum = ({ visible, onClose, messages, messageSeq }) => {
+    const { width, height } = react_native_1.Dimensions.get('window');
+    const [index, setIndex] = (0, react_1.useState)(0);
+    const [sources, setSources] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        let defaultIndex = 0;
+        const imageSources = messages
+            .filter(item => item.payloadType === im_base_1.PayloadType.PICTURE)
+            .sort((s, t) => {
+            return s.messageTime - t.messageTime;
+        })
+            .map((item, index) => {
+            if (messageSeq === item.messageSeq) {
+                defaultIndex = index;
+            }
+            const { payload: { localPath, fileId }, } = item;
+            let source = localPath;
+            if (Object.prototype.toString.call(localPath) === '[object String]') {
+                source = { uri: (0, file_2.toAbsolutePath)(localPath) };
+            }
+            else if (fileId) {
+                source = { uri: (0, file_1.getDownloadUrl)(fileId) };
+            }
+            return source;
+        });
+        setSources(imageSources);
+        setIndex(defaultIndex);
+    }, [visible, messages]);
+    const handleClose = () => {
+        setIndex(0);
+        setSources([]);
+        onClose();
+    };
+    return (<react_native_1.Modal visible={visible} onRequestClose={handleClose}>
+            {visible && (<react_native_1.View style={styles.root}>
+                    {react_native_1.Platform.OS === 'android' && <react_native_1.StatusBar backgroundColor={'#000'}/>}
+                    <react_native_1.View style={{ width: width, height: height }}>
+                        <rn_ui_1.AlbumView images={sources} defaultIndex={index}/>
+                    </react_native_1.View>
+
+                    <react_native_1.TouchableOpacity style={styles.cancel} onPress={handleClose}>
+                        <AntDesign_1.default name='close' size={(0, rn_ui_1.dp)(25)} color={'#fff'}/>
+                    </react_native_1.TouchableOpacity>
+                </react_native_1.View>)}
+        </react_native_1.Modal>);
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flex: 1,
+        backgroundColor: '#000',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    cancel: {
+        height: (0, rn_ui_1.dp)(40),
+        width: (0, rn_ui_1.dp)(40),
+        borderRadius: (0, rn_ui_1.dp)(5),
+        backgroundColor: '#333',
+        position: 'absolute',
+        top: (0, rn_ui_1.dp)(70),
+        right: (0, rn_ui_1.dp)(30),
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity: 0.7,
+    },
+});
+exports.default = MessagePictureAlbum;

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

@@ -0,0 +1,6 @@
+import { IMessage } from '@smart-link/im-base';
+import React from 'react';
+export interface MessageReceiptStatusProps extends IMessage {
+}
+declare const MessageReceiptStatus: React.NamedExoticComponent<MessageReceiptStatusProps>;
+export default MessageReceiptStatus;