@smart-link/rn-im 1.0.1

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+export interface PayloadWrapperProps {
+    showArrow?: boolean;
+    direction?: 'left' | 'right';
+    children: React.ReactNode;
+    style?: any;
+    onPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent) => void;
+}
+declare const PayloadWrapper: React.NamedExoticComponent<PayloadWrapperProps>;
+export default PayloadWrapper;

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

@@ -0,0 +1,73 @@
+"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;
+};
+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 PayloadWrapper = (0, react_1.memo)((_a) => {
+    var { children, direction, showArrow } = _a, retProps = __rest(_a, ["children", "direction", "showArrow"]);
+    return (<react_native_1.TouchableOpacity {...retProps}>
+            {showArrow && (<react_native_1.View style={[styles.arrow, direction === 'right' ? styles.rightArrow : styles.leftArrow]}/>)}
+            {children}
+        </react_native_1.TouchableOpacity>);
+});
+const styles = react_native_1.StyleSheet.create({
+    arrow: {
+        width: (0, rn_ui_1.dp)(12),
+        height: (0, rn_ui_1.dp)(12),
+        position: 'absolute',
+        top: (0, rn_ui_1.dp)(11),
+        zIndex: 1,
+        borderStyle: 'solid',
+        borderTopWidth: (0, rn_ui_1.dp)(8),
+        borderTopColor: 'transparent',
+        borderBottomWidth: (0, rn_ui_1.dp)(8),
+        borderBottomColor: 'transparent',
+    },
+    leftArrow: {
+        left: -(0, rn_ui_1.dp)(11),
+        borderRightColor: '#fff',
+        borderRightWidth: (0, rn_ui_1.dp)(8),
+        borderLeftWidth: 0,
+    },
+    rightArrow: {
+        right: -(0, rn_ui_1.dp)(12),
+        borderLeftColor: '#e3e3e3',
+        borderLeftWidth: (0, rn_ui_1.dp)(8),
+        borderRightWidth: 0,
+    },
+});
+exports.default = PayloadWrapper;

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

@@ -0,0 +1,9 @@
+import { IMessage } from "@smart-link/im-base";
+import { GestureResponderEvent, StyleProp, ViewStyle } from "react-native";
+export interface PayloadProps extends IMessage {
+    style?: StyleProp<ViewStyle>;
+    direction?: 'left' | 'right';
+    showArrow?: boolean;
+    onPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent) => void;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import { IMessage } from '@smart-link/im-base';
+import * as React from 'react';
+type Props = {
+    message: IMessage;
+};
+export declare const ReceiptBack: ({ message }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,82 @@
+"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.ReceiptBack = void 0;
+const im_base_1 = require("@smart-link/im-base");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const ReceiptBack = ({ message }) => {
+    const { t } = (0, useTranslation_1.default)();
+    return (<react_native_1.View style={styles.content}>
+            <react_native_1.View style={{ flexDirection: 'row' }}>
+                <react_native_1.Text style={[styles.text, { width: (0, rn_ui_1.dp)(165) }]}>
+                    {(0, dayjs_1.default)(message.messageTime).format('YYYY-MM-DD hh:mm:ss')}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.text}>{message.messageStatus === im_base_1.MessageStatus.EMIT_ERROR ? t('sendFail') : t('sent')}</react_native_1.Text>
+            </react_native_1.View>
+
+            {message.receiptBackList && message.receiptBackList.map((item, index) => {
+            let statusText = '';
+            switch (item.receiptBackMessageStatus) {
+                case im_base_1.MessageStatus.READ: {
+                    statusText = t('statusRead');
+                    break;
+                }
+                case im_base_1.MessageStatus.ARRIVED: {
+                    statusText = t('statusArrived');
+                    break;
+                }
+            }
+            return (<react_native_1.View key={index} style={{ flexDirection: 'row' }}>
+                            <react_native_1.Text style={[styles.text, { width: (0, rn_ui_1.dp)(165) }]}>
+                                {(0, dayjs_1.default)(item.receiptBackMessageTime || item.messageTime).format('YYYY-MM-DD hh:mm:ss')}
+                            </react_native_1.Text>
+                            <react_native_1.Text style={styles.text}>{statusText}</react_native_1.Text>
+                        </react_native_1.View>);
+        })}
+        </react_native_1.View>);
+};
+exports.ReceiptBack = ReceiptBack;
+const styles = react_native_1.StyleSheet.create({
+    content: {
+        flex: 1,
+        backgroundColor: '#fff',
+        borderRadius: (0, rn_ui_1.dp)(5),
+        height: (0, rn_ui_1.dp)(120),
+        paddingLeft: (0, rn_ui_1.dp)(50),
+        justifyContent: 'center'
+    },
+    text: {
+        fontSize: (0, rn_ui_1.dp)(15),
+        lineHeight: (0, rn_ui_1.dp)(22),
+        color: '#333',
+    }
+});

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type TextMixMessageProps = {
+    text: string;
+    onLongPressPhone?: (phone: string) => void;
+    onLongPressURL?: (url: string) => void;
+    textStyle?: any;
+};
+declare const TextMixMessage: React.NamedExoticComponent<TextMixMessageProps>;
+export default TextMixMessage;

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

@@ -0,0 +1,62 @@
+"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 react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const text_mix_1 = require("../../../utils/text-mix");
+const TextMixMessage = (0, react_1.memo)(props => {
+    const { text, onLongPressPhone, onLongPressURL, textStyle, } = props;
+    const viewItems = (0, text_mix_1.mix)(text);
+    return (<react_native_1.Text style={textStyle}>
+            {viewItems.map((item, index) => {
+            if (item.type === 'phone') {
+                return (<react_native_1.Text key={index} style={styles.phone} onPress={(e) => {
+                        e.stopPropagation();
+                        onLongPressPhone && onLongPressPhone(item.value);
+                    }}>
+                            {item.value}
+                        </react_native_1.Text>);
+            }
+            else if (item.type === 'url') {
+                return (<react_native_1.Text key={index} style={styles.url} onPress={() => {
+                        onLongPressURL && onLongPressURL(item.value);
+                    }}>
+                            {item.value}
+                        </react_native_1.Text>);
+            }
+            return item.value;
+        })}
+        </react_native_1.Text>);
+});
+const styles = react_native_1.StyleSheet.create({
+    phone: {
+        color: '#208aff'
+    },
+    url: {
+        color: '#208aff',
+        textDecorationLine: 'underline'
+    },
+});
+exports.default = TextMixMessage;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { IMessage } from '@smart-link/im-base';
+export interface QuoteTextMixProps {
+    quoteTitle: string;
+    quoteText: string;
+    color: string;
+    textStyle?: any;
+    quoteStyle?: any;
+    onPressQuote?: any;
+    onLongPressPhone?: any;
+    onLongPressURL?: any;
+    quoteMessageSeq?: any;
+}
+export declare const QuoteTextMix: React.NamedExoticComponent<QuoteTextMixProps>;
+export interface QuotePictureProps {
+    quoteTitle: string;
+    quoteMessage: IMessage;
+    quoteStyle?: any;
+    color: string;
+    textStyle?: any;
+    borderColor?: string;
+    backgroundColor?: string;
+    onPressQuote?: () => void;
+}
+export declare const QuotePicture: React.NamedExoticComponent<QuotePictureProps>;
+export interface QuoteVideoProps {
+    quoteTitle: string;
+    quoteMessage: IMessage;
+    quoteStyle?: any;
+    color: string;
+    textStyle?: any;
+    borderColor?: string;
+    backgroundColor?: string;
+    onPressQuote?: any;
+}
+export declare const QuoteVideo: React.NamedExoticComponent<QuoteVideoProps>;
+export interface QuoteFileProps {
+    quoteTitle: string;
+    quoteMessage: IMessage;
+    color: string;
+    textStyle?: any;
+    onPressQuote?: any;
+}
+export declare const QuoteFile: React.NamedExoticComponent<QuoteFileProps>;
+export interface QuoteVoiceProps {
+    quoteTitle: string;
+    quoteMessage: IMessage;
+    color: string;
+    textStyle?: any;
+    onPressQuote?: any;
+}
+export declare const QuoteVoice: React.NamedExoticComponent<QuoteVoiceProps>;
+export interface QuoteMultipleProps {
+    quoteTitle: string;
+    quoteMessage: IMessage;
+    color: string;
+    textStyle?: any;
+    quoteStyle?: any;
+    onPressQuote?: any;
+}
+export declare const QuoteMultiple: React.NamedExoticComponent<QuoteMultipleProps>;

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

@@ -0,0 +1,276 @@
+"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.QuoteMultiple = exports.QuoteVoice = exports.QuoteFile = exports.QuoteVideo = exports.QuotePicture = exports.QuoteTextMix = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TextMixMessage_1 = __importDefault(require("./TextMixMessage"));
+const styles_1 = require("../../../components/styles");
+// @ts-ignore
+const AntDesign_1 = __importDefault(require("react-native-vector-icons/AntDesign"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const im_base_1 = require("@smart-link/im-base");
+const golden_rectangle_1 = require("../../../utils/golden-rectangle");
+const color_1 = require("../../../utils/color");
+const LocalImage_1 = __importDefault(require("../../../components/LocalImage"));
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const init_1 = require("../../../init");
+const PayloadFile_1 = __importDefault(require("./Payload/PayloadFile"));
+const voiceLeft = require('../../../../assets/voice-left.png');
+const { width } = react_native_1.Dimensions.get('window');
+exports.QuoteTextMix = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteText, color, textStyle, quoteStyle, onPressQuote, onLongPressPhone, onLongPressURL } = props;
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { backgroundColor: (0, color_1.dark)(color, 4) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+            <TextMixMessage_1.default text={quoteText} textStyle={textStyle} onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL}/>
+        </react_native_1.TouchableOpacity>);
+});
+exports.QuotePicture = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteMessage, quoteStyle, color, textStyle, borderColor, backgroundColor, onPressQuote } = props;
+    const { height, width, localPath } = quoteMessage.payload;
+    const theme = (0, rn_ui_1.useTheme)();
+    console.log('QuotePicture', quoteMessage);
+    const sizeStyle = (0, golden_rectangle_1.calculate)(height || 100, width || 61.8, 100);
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { backgroundColor: (0, color_1.dark)(color, 6) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+            {(!localPath || localPath === '') && (<react_native_1.View style={[
+                styles.pictureEmpty,
+                Object.assign({ backgroundColor,
+                    borderColor }, sizeStyle),
+                { backgroundColor: (0, color_1.dark)(color, 6) },
+            ]}>
+                    <react_native_1.ActivityIndicator color={theme.primaryColor} animating={true}/>
+                </react_native_1.View>)}
+
+            {localPath && localPath !== '' && (<LocalImage_1.default style={sizeStyle} resizeMode="cover" localPath={localPath}/>)}
+        </react_native_1.TouchableOpacity>);
+});
+exports.QuoteVideo = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteMessage, quoteStyle, color, textStyle, borderColor, backgroundColor, onPressQuote } = props;
+    const { duration, height, width, imagePath } = quoteMessage.payload;
+    const theme = (0, rn_ui_1.useTheme)();
+    console.log('QuoteVideo: ', quoteMessage);
+    const sizeStyle = (0, golden_rectangle_1.calculate)(height, width);
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { backgroundColor: (0, color_1.dark)(color, 6) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+            {(!imagePath || imagePath === '') && (<react_native_1.View style={[
+                styles.pictureEmpty,
+                Object.assign({ backgroundColor,
+                    borderColor }, sizeStyle),
+                { backgroundColor: (0, color_1.dark)(color, 6) },
+            ]}>
+                    <react_native_1.ActivityIndicator color={theme.primaryColor} animating={true}/>
+                </react_native_1.View>)}
+
+            {imagePath && imagePath !== '' && (<react_native_1.View>
+                    <LocalImage_1.default style={sizeStyle} resizeMode="cover" localPath={imagePath}/>
+                    <react_native_1.View style={styles.playView}>
+                        <AntDesign_1.default size={30} name="playcircleo" color="#fff"/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ position: 'absolute', bottom: (0, rn_ui_1.dp)(5), right: (0, rn_ui_1.dp)(5) }}>
+                        <react_native_1.Text style={{ fontSize: (0, rn_ui_1.dp)(12), color: '#fff' }}>{(0, im_base_1.numberToTime)(duration)}</react_native_1.Text>
+                    </react_native_1.View>
+                </react_native_1.View>)}
+        </react_native_1.TouchableOpacity>);
+});
+exports.QuoteFile = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteMessage, color, textStyle, onPressQuote } = props;
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[styles.leftBorder, { padding: (0, rn_ui_1.dp)(5), backgroundColor: (0, color_1.dark)(color, 6) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+            <react_native_1.View style={[styles.popoverFile, { backgroundColor: (0, color_1.dark)(color, 10) }]}>
+                <PayloadFile_1.default {...quoteMessage} showArrow={false}/>
+            </react_native_1.View>
+        </react_native_1.TouchableOpacity>);
+});
+exports.QuoteVoice = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteMessage, color, textStyle, onPressQuote } = props;
+    const { duration } = quoteMessage.payload;
+    let voiceViewLength = 40 + (80 * duration) / 60;
+    voiceViewLength = (0, rn_ui_1.dp)(voiceViewLength > 120 ? 120 : voiceViewLength);
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[styles.leftBorder, { padding: (0, rn_ui_1.dp)(5), backgroundColor: (0, color_1.dark)(color, 6) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+
+            <react_native_1.View style={[styles.popoverVoice, { backgroundColor: (0, color_1.dark)(color, 10), width: voiceViewLength + (0, rn_ui_1.dp)(10) }]}>
+                <react_native_1.View style={{ width: voiceViewLength, alignItems: 'flex-start' }}>
+                    <react_native_1.Image style={styles.voiceImage} source={voiceLeft}></react_native_1.Image>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.duration}>{Math.round(duration || 0)}''</react_native_1.Text>
+            </react_native_1.View>
+        </react_native_1.TouchableOpacity>);
+});
+exports.QuoteMultiple = (0, react_1.memo)(props => {
+    const { quoteTitle, quoteMessage, color, textStyle, quoteStyle, onPressQuote } = props;
+    const { type, fromName, toName, selectedMessages } = quoteMessage.payload;
+    const { t } = (0, useTranslation_1.default)();
+    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');
+    const imManager = (0, init_1.getImManager)();
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { padding: (0, rn_ui_1.dp)(5), backgroundColor: (0, color_1.dark)(color, 4) }]}>
+            <react_native_1.Text style={[textStyle, styles.replyUserName]}>
+                {quoteTitle}
+                {' : '}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.h5}/>
+            <react_native_1.Text style={styles.mulTitleText} numberOfLines={2}>
+                {title}
+            </react_native_1.Text>
+            <react_native_1.View style={styles.mulContent}>
+                {messages.map((message, index) => {
+            if (typeof message === 'string') {
+                return (<react_native_1.Text key={index} style={styles.mulItemTextMore}>
+                                ......
+                            </react_native_1.Text>);
+            }
+            return (<react_native_1.Text key={index} style={styles.mulItemText} 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.mulLine}/>
+            <react_native_1.Text style={styles.mulFooterText}>{t('multipleChatRecord')}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>);
+});
+const styles = react_native_1.StyleSheet.create({
+    h5: {
+        height: (0, rn_ui_1.dp)(5),
+    },
+    pictureEmpty: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    playView: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fileInfo: {
+        flex: 1,
+        paddingHorizontal: (0, rn_ui_1.dp)(10),
+        justifyContent: 'center',
+    },
+    fileName: {
+        fontSize: (0, rn_ui_1.dp)(15),
+        lineHeight: (0, rn_ui_1.dp)(20),
+        color: '#010101',
+    },
+    fileSize: {
+        fontSize: (0, rn_ui_1.dp)(12),
+        lineHeight: (0, rn_ui_1.dp)(20),
+        color: '#a2a2a2',
+    },
+    imageIcon: {
+        height: (0, rn_ui_1.dp)(45),
+    },
+    popoverFile: {
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+        paddingVertical: (0, rn_ui_1.dp)(8),
+        width: width - (0, rn_ui_1.dp)(145),
+    },
+    voiceImage: {
+        width: (0, rn_ui_1.dp)(24),
+        height: (0, rn_ui_1.dp)(18),
+    },
+    duration: {
+        fontSize: (0, rn_ui_1.dp)(13),
+        lineHeight: (0, rn_ui_1.dp)(21),
+        color: '#666',
+        position: 'absolute',
+        right: (0, rn_ui_1.dp)(5),
+        alignSelf: 'center',
+    },
+    popoverVoice: Object.assign({ flexDirection: 'row', padding: (0, rn_ui_1.dp)(9), borderRadius: (0, rn_ui_1.dp)(3), borderStyle: 'solid' }, styles_1.shadowStyle),
+    replyUserName: {
+        fontWeight: '600',
+    },
+    leftBorder: {
+        borderLeftWidth: (0, rn_ui_1.dp)(4),
+        borderColor: '#adadad',
+        borderRadius: (0, rn_ui_1.dp)(4),
+    },
+    mulTitleText: {
+        color: '#333',
+        fontSize: (0, rn_ui_1.dp)(14),
+        lineHeight: (0, rn_ui_1.dp)(18),
+    },
+    mulContent: {
+        paddingVertical: (0, rn_ui_1.dp)(5),
+    },
+    mulItem: {
+        justifyContent: 'center',
+    },
+    mulItemText: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(13),
+        lineHeight: (0, rn_ui_1.dp)(19),
+    },
+    mulItemTextMore: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(13),
+        lineHeight: (0, rn_ui_1.dp)(13),
+    },
+    mulFooterText: {
+        color: '#777',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    mulLine: {
+        marginTop: (0, rn_ui_1.dp)(5),
+        marginBottom: (0, rn_ui_1.dp)(5),
+        backgroundColor: '#ddd',
+        width: '100%',
+        height: (0, rn_ui_1.dp)(1),
+    },
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IMessageQuote } from '@smart-link/im-base';
+interface QuoteTextMixProps {
+    text: string;
+    quote?: IMessageQuote | null;
+    textStyle?: any;
+    quoteBgColor: string;
+    quoteStyle?: any;
+    onPressQuote?: any;
+    onLongPressPhone?: any;
+    onLongPressURL?: any;
+}
+declare const TextMixQuoteMessage: React.NamedExoticComponent<QuoteTextMixProps>;
+export default TextMixQuoteMessage;