@smart-link/rn-im 1.0.1

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

@@ -0,0 +1,61 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const default_assets_1 = require("../../../default-assets");
+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 { EMITTED, ARRIVED, READ, } = im_base_1.MessageStatus;
+const MessageReceiptStatus = (0, react_1.memo)(({ receiptBackList, messageStatus }) => {
+    let statusSource;
+    let receiptBackMessageStatusList = (receiptBackList || []).map(item => item.receiptBackMessageStatus);
+    if (receiptBackMessageStatusList.includes(READ) || messageStatus === READ) {
+        statusSource = default_assets_1.receiptStatus[READ];
+    }
+    else if (receiptBackMessageStatusList.includes(ARRIVED) || messageStatus === ARRIVED) {
+        statusSource = default_assets_1.receiptStatus[ARRIVED];
+    }
+    else if (messageStatus === EMITTED) {
+        statusSource = default_assets_1.receiptStatus[EMITTED];
+    }
+    if (!statusSource)
+        return null;
+    return (<react_native_1.View style={[styles.status]}>
+        <react_native_1.Image resizeMode="contain" style={styles.statusImage} source={statusSource}/>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    status: {
+        alignSelf: 'flex-end',
+        flexDirection: 'row',
+        marginRight: (0, rn_ui_1.dp)(10),
+    },
+    statusImage: {
+        width: (0, rn_ui_1.dp)(18),
+        height: (0, rn_ui_1.dp)(18)
+    },
+});
+exports.default = MessageReceiptStatus;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type Props = {
+    messageSeq: string;
+    undoText?: string;
+    haveBackgroundImage?: boolean;
+    edit?: boolean;
+    text: string;
+};
+export declare const MessageUndo: (props: Props) => React.JSX.Element;
+export default MessageUndo;

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

@@ -0,0 +1,75 @@
+"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 });
+exports.MessageUndo = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const init_1 = require("../../../init");
+const MessageUndo = (props) => {
+    const { undoText, edit, text, haveBackgroundImage = true } = props;
+    const { t } = (0, useTranslation_1.default)();
+    const bgStyle = haveBackgroundImage ? { backgroundColor: 'rgba(255,255,255,0.7)' } : {};
+    const bgFont = haveBackgroundImage ? { color: '#555' } : {};
+    const onPress = () => {
+        var _a, _b;
+        const inputRef = (_a = (0, init_1.getImManager)()) === null || _a === void 0 ? void 0 : _a.inputRef;
+        if (inputRef) {
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.setMessageText(undoText);
+        }
+    };
+    return (<react_native_1.View style={[styles.root, bgStyle]}>
+            <react_native_1.Text style={[styles.text, bgFont]}>{text}</react_native_1.Text>
+            <react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPress}>
+                {edit && (undoText === null || undoText === void 0 ? void 0 : undoText.length) && <react_native_1.Text style={styles.edit}> {t('reedit')} </react_native_1.Text>}
+            </react_native_1.TouchableOpacity>
+        </react_native_1.View>);
+};
+exports.MessageUndo = MessageUndo;
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        borderRadius: (0, rn_ui_1.dp)(3),
+        padding: (0, rn_ui_1.dp)(8),
+        flexDirection: 'row',
+        alignSelf: 'center'
+    },
+    text: {
+        color: '#808080',
+        fontSize: (13),
+        lineHeight: (15)
+    },
+    edit: {
+        paddingHorizontal: 5,
+        textDecorationLine: 'underline',
+        color: '#208aff',
+        fontSize: (13),
+        lineHeight: (15)
+    }
+});
+exports.default = exports.MessageUndo;

package/dist/pages/message/components/MultipleBar/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface MultipleBarProps {
+}
+declare const MultipleBar: React.NamedExoticComponent<MultipleBarProps>;
+export default MultipleBar;

package/dist/pages/message/components/MultipleBar/index.js

@@ -0,0 +1,116 @@
+"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 FontAwesome5_1 = __importDefault(require("react-native-vector-icons/FontAwesome5"));
+const AntDesign_1 = __importDefault(require("react-native-vector-icons/AntDesign"));
+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 useImSelector_1 = require("../../../../hooks/useImSelector");
+const init_1 = require("../../../../init");
+const message_panel_action_1 = require("@smart-link/im-base/dist/slice/message/message.panel.action");
+const im_base_1 = require("@smart-link/im-base");
+const common_action_sheet_1 = require("../../../../utils/common-action-sheet");
+const MultipleBar = (0, react_1.memo)((props) => {
+    const navigation = (0, rn_ui_1.useNavigation)();
+    const { multipleSelect } = (0, useImSelector_1.useMessage)();
+    const imManager = (0, init_1.getImManager)();
+    const disabled = Object.keys(multipleSelect).length === 0;
+    const { t } = (0, useTranslation_1.default)();
+    const [height] = (0, react_1.useState)(new react_native_1.Animated.Value(0)); // 高度初始值设为0
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(height, {
+            toValue: (0, rn_ui_1.dp)(50),
+            duration: 300,
+            useNativeDriver: false
+        }).start();
+    }, []);
+    const color = disabled ? '#aaaaaa' : '#333';
+    const fontStyle = [styles.text, { color }];
+    return (<react_native_1.Animated.View style={[styles.wrap, { height }]}>
+            <react_native_1.TouchableOpacity disabled={disabled} style={styles.item} onPress={() => {
+            imManager.store.dispatch((0, message_panel_action_1.onMultipleForward)(imManager, true));
+            navigation.navigate('ForwardToConversation');
+        }}>
+                <react_native_1.View style={styles.item}>
+                    <FontAwesome5_1.default name="reply" size={(0, rn_ui_1.dp)(20)} color={color}/>
+                    <react_native_1.Text style={fontStyle}>{t('forward')}</react_native_1.Text>
+                </react_native_1.View>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity disabled={disabled} style={styles.item} onPress={() => __awaiter(void 0, void 0, void 0, function* () {
+            yield imManager.store.dispatch(im_base_1.MessagePanelActions.onMultipleCollect(imManager));
+            rn_ui_1.Toast.info(t('collectSuccess'));
+        })}>
+                <MaterialIcons_1.default name="collections" size={(0, rn_ui_1.dp)(20)} color={color}/>
+                <react_native_1.Text style={fontStyle}>{t('collect')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+
+            <react_native_1.TouchableOpacity disabled={disabled} style={styles.item} onPress={() => {
+            (0, common_action_sheet_1.ConfirmActionSheet)(t('confirmDeleteMessages'), () => {
+                imManager.store.dispatch(im_base_1.MessagePanelActions.onMultipleDelete(imManager));
+            }, t);
+        }}>
+                <AntDesign_1.default name="delete" size={(0, rn_ui_1.dp)(20)} color={color}/>
+                <react_native_1.Text style={fontStyle}>{t('delete')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+        </react_native_1.Animated.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    wrap: {
+        paddingTop: (0, rn_ui_1.dp)(10),
+        backgroundColor: '#fff',
+        width: '100%',
+        paddingHorizontal: (0, rn_ui_1.dp)(10),
+        justifyContent: 'space-around',
+        flexDirection: 'row',
+    },
+    item: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    text: {
+        fontSize: (0, rn_ui_1.dp)(12),
+        fontWeight: '500',
+        lineHeight: (0, rn_ui_1.dp)(20)
+    }
+});
+exports.default = MultipleBar;

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

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

package/dist/pages/message/components/Payload/PayloadContact.js

@@ -0,0 +1,86 @@
+"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 useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const ChatAvatar_1 = __importDefault(require("../../../../components/ChatAvatar/ChatAvatar"));
+const PayloadContact = ({ payload, direction, style, showArrow = true, onLongPress }) => {
+    const { t } = (0, useTranslation_1.default)();
+    const contact = payload.contact;
+    const navigation = (0, rn_ui_1.useNavigation)();
+    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} style={[style, styles.contact]} onPress={() => {
+            navigation.navigate('UserDetail', { userId: contact.userId });
+        }} onLongPress={onLongPress}>
+            <react_native_1.View style={styles.content}>
+                <ChatAvatar_1.default id={contact.userId} url={contact.avatars} name={contact.userName}/>
+                <react_native_1.View style={styles.info}>
+                    <react_native_1.Text style={styles.name}>{contact.userName}</react_native_1.Text>
+                    <react_native_1.Text style={styles.group} numberOfLines={2}>
+                        {contact.groupNamePaths}
+                    </react_native_1.Text>
+                </react_native_1.View>
+            </react_native_1.View>
+            <react_native_1.Text style={styles.footer}>{t('contact')}</react_native_1.Text>
+        </PayloadWrapper_1.default>);
+};
+const styles = react_native_1.StyleSheet.create({
+    contact: {
+        flexDirection: 'column',
+        padding: (0, rn_ui_1.dp)(6),
+        borderRadius: (0, rn_ui_1.dp)(8),
+        width: (0, rn_ui_1.dp)(240),
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        borderBottomColor: '#eee',
+        borderBottomWidth: (0, rn_ui_1.dp)(1),
+        paddingBottom: (0, rn_ui_1.dp)(6),
+    },
+    info: {
+        flex: 1,
+        flexDirection: 'column',
+        marginLeft: (0, rn_ui_1.dp)(12),
+    },
+    name: {
+        fontSize: (0, rn_ui_1.dp)(16),
+        color: '#333',
+    },
+    group: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(14),
+    },
+    footer: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(12),
+    },
+});
+exports.default = (0, react_1.memo)(PayloadContact);

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

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

package/dist/pages/message/components/Payload/PayloadFile.js

@@ -0,0 +1,115 @@
+"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 rn_ui_1 = require("@smart-link/rn-ui");
+const react_native_file_viewer_1 = __importDefault(require("react-native-file-viewer"));
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const file_1 = require("../../../../utils/file");
+const im_base_1 = require("@smart-link/im-base");
+const UploadProgress_1 = __importDefault(require("../UploadProgress"));
+const init_1 = require("../../../../init");
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const file_icon_1 = require("../../../../utils/file-icon");
+const PayloadFile = ({ payload, messageSeq, direction, showArrow = true, messageStatus, sendSize, style, onLongPress }) => {
+    const ext = payload.filename.split('.').pop();
+    const Icon = (0, file_icon_1.findSvgIcon)(ext);
+    const path = (0, react_1.useRef)('');
+    const downloading = (0, react_1.useRef)(false);
+    const [download, setDownload] = (0, react_1.useState)({
+        progress: 0,
+        status: 'pending',
+    });
+    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} onLongPress={onLongPress} style={[style, styles.file]} onPress={() => __awaiter(void 0, void 0, void 0, function* () {
+            if (payload.localPath || path.current) {
+                yield react_native_file_viewer_1.default.open((payload.localPath || path.current));
+            }
+            else if (payload.fileId) {
+                if (downloading.current)
+                    return;
+                downloading.current = true;
+                const localPath = yield (0, init_1.getImManager)().download({
+                    fileId: payload.fileId,
+                    resourceType: 'file',
+                    filename: payload.filename,
+                    fileSize: payload.size,
+                    onProgress: (e) => {
+                        setDownload({
+                            progress: e.loaded,
+                            status: 'downloading',
+                        });
+                    }
+                });
+                setDownload({
+                    progress: payload.size,
+                    status: 'done',
+                });
+                path.current = localPath;
+                (0, init_1.getImManager)().db.updateMessage({
+                    messageSeq,
+                    payload: Object.assign(Object.assign({}, payload), { localPath: localPath }),
+                });
+                yield react_native_file_viewer_1.default.open(localPath);
+            }
+        })}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Icon style={styles.fileIcon}/>
+                <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text>{payload.filename}</react_native_1.Text>
+                    <react_native_1.Text style={styles.size}>{(0, file_1.numberToFileSize)(payload.size)}</react_native_1.Text>
+                </react_native_1.View>
+            </react_native_1.View>
+            <UploadProgress_1.default show={download.status === 'downloading'} width={200} sendSize={download.progress} totalSize={payload.size}/>
+            <UploadProgress_1.default show={messageStatus === im_base_1.MessageStatus.EMITTING} width={200} sendSize={sendSize || 0} totalSize={payload.size}/>
+        </PayloadWrapper_1.default>);
+};
+const styles = react_native_1.StyleSheet.create({
+    file: {
+        minWidth: 200,
+        alignItems: 'center',
+        padding: (0, rn_ui_1.dp)(6),
+        borderRadius: (0, rn_ui_1.dp)(8),
+        width: react_native_1.Dimensions.get('window').width * 0.6,
+    },
+    fileIcon: {
+        marginRight: (0, rn_ui_1.dp)(8),
+    },
+    size: {
+        color: '#999',
+    },
+});
+exports.default = (0, react_1.memo)(PayloadFile);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PayloadProps } from './type';
+declare const PayloadMultiple: React.NamedExoticComponent<PayloadProps>;
+export default PayloadMultiple;

package/dist/pages/message/components/Payload/PayloadMultiple.js

@@ -0,0 +1,102 @@
+"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 styles_1 = require("../../../../components/styles");
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const init_1 = require("../../../../init");
+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 PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const { width } = react_native_1.Dimensions.get('window');
+const PayloadMultiple = (0, react_1.memo)(({ payload, direction, showArrow = true, style, onLongPress }) => {
+    const navigation = (0, rn_ui_1.useNavigation)();
+    const { type, toName, fromName, selectedMessages } = payload;
+    const { t } = (0, useTranslation_1.default)();
+    const imManager = (0, init_1.getImManager)();
+    const messages = selectedMessages.length > 4 ? [...selectedMessages.slice(0, 4), 'more'] : selectedMessages;
+    const title = type === im_base_1.ConversationType.C2C
+        ? t('multipleChatRecordTitle', { fromName, toName })
+        : t('multipleChatRecordTitleGroup');
+    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} style={[style, styles.wrap]} onPress={() => {
+            navigation.navigate('MessageRecord', {
+                messages: selectedMessages,
+                title,
+            });
+        }} onLongPress={onLongPress}>
+            <react_native_1.Text style={styles.titleText} numberOfLines={2}>
+                {title}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.content}>
+                {messages.map((message, index) => {
+            return message === 'more' ? (<react_native_1.Text key={index} style={styles.itemTextMore}>
+                                    ......
+                                </react_native_1.Text>) : (<react_native_1.Text key={index} style={styles.itemText} numberOfLines={1}>
+                                    {message.messageFromName + ': ' + (0, im_base_1.buildSimpleText)(imManager, message.payloadType, message.payload)}
+                                </react_native_1.Text>);
+        })}
+            </react_native_1.View>
+            <react_native_1.View style={styles.line}/>
+            <react_native_1.Text style={styles.footerText}>{t('multipleChatRecord')}</react_native_1.Text>
+        </PayloadWrapper_1.default>);
+});
+const styles = react_native_1.StyleSheet.create({
+    wrap: Object.assign(Object.assign({ minWidth: (0, rn_ui_1.dp)(200), maxWidth: width - 120, padding: (0, rn_ui_1.dp)(12), paddingBottom: (0, rn_ui_1.dp)(6) }, styles_1.borderStyle), styles_1.shadowStyle),
+    titleText: {
+        color: '#333',
+        fontSize: (0, rn_ui_1.dp)(14),
+        lineHeight: (0, rn_ui_1.dp)(18),
+    },
+    content: {
+        paddingVertical: (0, rn_ui_1.dp)(5),
+    },
+    item: {
+        justifyContent: 'center',
+    },
+    itemText: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    itemTextMore: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    footerText: {
+        color: '#777',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    line: {
+        marginTop: (0, rn_ui_1.dp)(5),
+        marginBottom: (0, rn_ui_1.dp)(5),
+        backgroundColor: '#eee',
+        width: '100%',
+        height: (0, rn_ui_1.dp)(1),
+    },
+});
+exports.default = PayloadMultiple;

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

@@ -0,0 +1,9 @@
+import { IPayload, IMessage } from '@smart-link/im-base';
+import React from 'react';
+export interface PayloadNotifyProps extends IMessage {
+}
+export interface PayloadNotifyDetail {
+    payload: IPayload;
+}
+declare const _default: React.MemoExoticComponent<({ payload, payloadType }: PayloadNotifyProps) => React.JSX.Element>;
+export default _default;