@smart-link/rn-im 1.0.23 → 1.0.26

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

@@ -1,132 +1,107 @@
-"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 rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_svg_1 = require("react-native-svg");
+import { dp } from '@smart-link/rn-ui';
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
 const notifyTypeIcon = {
-    conference: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
-            <react_native_svg_1.Path d="M12.5 2.5c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm0 17.5c-4.5 0-8.5-3.5-8.5-8.5s3.5-8.5 8.5-8."/>
-        </react_native_svg_1.Svg>),
-    todo: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
-            <react_native_svg_1.Path d="M584.32 244.416h-154.272c-43.392 0-77.152-33.76-77.152-77.152s33.76-77.152 77.152-77.152h154.272c43.392 0 77.152 33.76 77.152 77.152s-33.76 77.152-77.152 77.152z m159.104 332.672c-96.416 0-178.4 81.952-178.4 178.4s81.952 178.4 178.4 178.4 178.4-81.952 178.4-178.4c0-101.248-81.952-178.4-178.4-178.4z m77.152 231.424h-101.248c-14.464 0-24.096-9.632-24.096-24.096V688c0-14.464 9.632-24.096 24.096-24.096s24.096 9.632 24.096 24.096v67.488h77.152c14.464 0 24.096 9.632 24.096 24.096 0 19.296-9.632 28.928-24.096 28.928zM796.48 167.264h-43.392c0 9.632 4.832 19.296 4.832 24.096 0 57.856-48.224 101.248-101.248 101.248h-308.576c-57.856 0-101.248-48.224-101.248-101.248 0-9.632 0-19.296 4.832-24.096H203.456c-57.856 0-101.248 43.392-101.248 101.248v515.904c0 57.856 43.392 101.248 101.248 101.248h347.136c-24.096-38.56-38.56-81.952-38.56-130.176 0-125.344 101.248-231.424 231.424-231.424 57.856 0 115.712 24.096 154.272 62.688V268.544c0-57.856-48.224-101.248-101.248-101.248zM449.312 678.336H280.576c-24.096 0-38.56-19.296-38.56-38.56s19.296-38.56 38.56-38.56h163.936c24.096 0 43.392 19.296 43.392 38.56s-19.296 38.56-38.56 38.56z m115.712-168.736h-284.48c-24.096 0-38.56-19.296-38.56-38.56 0-24.096 19.296-43.392 38.56-43.392h279.648c24.096 0 38.56 19.296 38.56 38.56 4.832 24.096-14.464 43.392-33.76 43.392z"/>
-        </react_native_svg_1.Svg>),
-    toread: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
-            <react_native_svg_1.Path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
-        </react_native_svg_1.Svg>),
-    supervise: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
-            <react_native_svg_1.Path d="M300.8 268.8c-25.6 0-44.8-25.6-44.8-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c-6.4 25.6-25.6 51.2-57.6 51.2zM736 268.8c-25.6 0-51.2-19.2-51.2-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c0 25.6-25.6 51.2-51.2 51.2z"/>
-            <react_native_svg_1.Path d="M883.2 102.4h-83.2v115.2c0 38.4-32 64-64 64-38.4 0-64-32-64-64V102.4H371.2v115.2c0 38.4-32 64-64 64s-64-32-64-64V102.4H160c-51.2 0-89.6 38.4-89.6 89.6v160h902.4V192c0-51.2-38.4-89.6-89.6-89.6zM70.4 403.2v396.8c0 51.2 38.4 89.6 89.6 89.6h723.2c51.2 0 89.6-38.4 89.6-89.6V403.2H70.4zM768 768H275.2c-19.2 0-32-12.8-32-32 0-12.8 12.8-32 32-32H768c19.2 0 32 12.8 32 32-6.4 19.2-19.2 32-32 32z m25.6-217.6c0 19.2-12.8 32-32 32H275.2c-19.2 0-32-12.8-32-32s12.8-32 32-32H768c12.8 6.4 25.6 19.2 25.6 32z"/>
-        </react_native_svg_1.Svg>),
-    calendarSchedule: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
-            <react_native_svg_1.Path d="M715.33 515.17L667.16 467 448.79 685.37l-94.39-94.39-48.17 48.17 142.81 142.81 266.29-266.79z m109.31-360.94h-44.02V64h-90.23v90.23H333.61V64h-90.23v90.23h-44.02c-25.19 0-46.46 8.81-64.07 26.17-17.61 17.61-26.17 38.88-26.17 64.07v625.29c0 25.19 8.8 46.46 26.17 64.07C152.9 951.44 174.17 960 199.36 960h625.29c25.19 0 46.46-8.81 64.07-26.17 17.61-17.61 26.17-38.88 26.17-64.07V244.47c0-25.19-8.8-46.46-26.17-64.07-17.62-17.37-38.89-26.17-64.08-26.17z m0 715.52H199.36V378.71h625.29v491.04z"/>
-        </react_native_svg_1.Svg>),
+    conference: ({ color, size }) => (<Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <Path d="M12.5 2.5c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm0 17.5c-4.5 0-8.5-3.5-8.5-8.5s3.5-8.5 8.5-8."/>
+        </Svg>),
+    todo: ({ color, size }) => (<Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <Path d="M584.32 244.416h-154.272c-43.392 0-77.152-33.76-77.152-77.152s33.76-77.152 77.152-77.152h154.272c43.392 0 77.152 33.76 77.152 77.152s-33.76 77.152-77.152 77.152z m159.104 332.672c-96.416 0-178.4 81.952-178.4 178.4s81.952 178.4 178.4 178.4 178.4-81.952 178.4-178.4c0-101.248-81.952-178.4-178.4-178.4z m77.152 231.424h-101.248c-14.464 0-24.096-9.632-24.096-24.096V688c0-14.464 9.632-24.096 24.096-24.096s24.096 9.632 24.096 24.096v67.488h77.152c14.464 0 24.096 9.632 24.096 24.096 0 19.296-9.632 28.928-24.096 28.928zM796.48 167.264h-43.392c0 9.632 4.832 19.296 4.832 24.096 0 57.856-48.224 101.248-101.248 101.248h-308.576c-57.856 0-101.248-48.224-101.248-101.248 0-9.632 0-19.296 4.832-24.096H203.456c-57.856 0-101.248 43.392-101.248 101.248v515.904c0 57.856 43.392 101.248 101.248 101.248h347.136c-24.096-38.56-38.56-81.952-38.56-130.176 0-125.344 101.248-231.424 231.424-231.424 57.856 0 115.712 24.096 154.272 62.688V268.544c0-57.856-48.224-101.248-101.248-101.248zM449.312 678.336H280.576c-24.096 0-38.56-19.296-38.56-38.56s19.296-38.56 38.56-38.56h163.936c24.096 0 43.392 19.296 43.392 38.56s-19.296 38.56-38.56 38.56z m115.712-168.736h-284.48c-24.096 0-38.56-19.296-38.56-38.56 0-24.096 19.296-43.392 38.56-43.392h279.648c24.096 0 38.56 19.296 38.56 38.56 4.832 24.096-14.464 43.392-33.76 43.392z"/>
+        </Svg>),
+    toread: ({ color, size }) => (<Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <Path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
+        </Svg>),
+    supervise: ({ color, size }) => (<Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <Path d="M300.8 268.8c-25.6 0-44.8-25.6-44.8-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c-6.4 25.6-25.6 51.2-57.6 51.2zM736 268.8c-25.6 0-51.2-19.2-51.2-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c0 25.6-25.6 51.2-51.2 51.2z"/>
+            <Path d="M883.2 102.4h-83.2v115.2c0 38.4-32 64-64 64-38.4 0-64-32-64-64V102.4H371.2v115.2c0 38.4-32 64-64 64s-64-32-64-64V102.4H160c-51.2 0-89.6 38.4-89.6 89.6v160h902.4V192c0-51.2-38.4-89.6-89.6-89.6zM70.4 403.2v396.8c0 51.2 38.4 89.6 89.6 89.6h723.2c51.2 0 89.6-38.4 89.6-89.6V403.2H70.4zM768 768H275.2c-19.2 0-32-12.8-32-32 0-12.8 12.8-32 32-32H768c19.2 0 32 12.8 32 32-6.4 19.2-19.2 32-32 32z m25.6-217.6c0 19.2-12.8 32-32 32H275.2c-19.2 0-32-12.8-32-32s12.8-32 32-32H768c12.8 6.4 25.6 19.2 25.6 32z"/>
+        </Svg>),
+    calendarSchedule: ({ color, size }) => (<Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <Path d="M715.33 515.17L667.16 467 448.79 685.37l-94.39-94.39-48.17 48.17 142.81 142.81 266.29-266.79z m109.31-360.94h-44.02V64h-90.23v90.23H333.61V64h-90.23v90.23h-44.02c-25.19 0-46.46 8.81-64.07 26.17-17.61 17.61-26.17 38.88-26.17 64.07v625.29c0 25.19 8.8 46.46 26.17 64.07C152.9 951.44 174.17 960 199.36 960h625.29c25.19 0 46.46-8.81 64.07-26.17 17.61-17.61 26.17-38.88 26.17-64.07V244.47c0-25.19-8.8-46.46-26.17-64.07-17.62-17.37-38.89-26.17-64.08-26.17z m0 715.52H199.36V378.71h625.29v491.04z"/>
+        </Svg>),
 };
 const BusiNotifyCard = ({ payload }) => {
     const Icon = notifyTypeIcon[payload.busiType] || notifyTypeIcon.todo;
     const color = payload.read ? '#ea1f2d' : '#333';
-    return (<react_native_1.TouchableOpacity style={styles.root} activeOpacity={0.5}>
-            <react_native_1.View style={styles.busiTypeContainer}>
-                <Icon color={color} size={(0, rn_ui_1.dp)(24)}/>
-                <react_native_1.Text style={[styles.busiType, { color }]}>{payload.busiTypeText}</react_native_1.Text>
-            </react_native_1.View>
+    return (<TouchableOpacity style={styles.root} activeOpacity={0.5}>
+            <View style={styles.busiTypeContainer}>
+                <Icon color={color} size={dp(24)}/>
+                <Text style={[styles.busiType, { color }]}>{payload.busiTypeText}</Text>
+            </View>
 
-            <react_native_1.Text style={styles.title}>{payload.title}</react_native_1.Text>
-            {payload.columns.length > 0 && (<react_native_1.View style={styles.columns}>
-                    {payload.columns.map(column => (<react_native_1.View key={column.key} style={styles.column}>
-                            <react_native_1.Text style={styles.label}>{column.label}:</react_native_1.Text>
-                            {column.userId ? (<react_native_1.TouchableOpacity>
-                                    <react_native_1.Text style={[styles.value, { color: '#208aff' }]}>{column.value}</react_native_1.Text>
-                                </react_native_1.TouchableOpacity>) : (<react_native_1.Text style={styles.value}>{column.value}</react_native_1.Text>)}
-                        </react_native_1.View>))}
-                </react_native_1.View>)}
-            {payload.content && <react_native_1.Text style={styles.content}>{payload.content}</react_native_1.Text>}
-            {payload.busiStatusText && <react_native_1.Text style={[styles.busiStatusText, { color }]}>{payload.busiStatusText}</react_native_1.Text>}
-        </react_native_1.TouchableOpacity>);
+            <Text style={styles.title}>{payload.title}</Text>
+            {payload.columns.length > 0 && (<View style={styles.columns}>
+                    {payload.columns.map(column => (<View key={column.key} style={styles.column}>
+                            <Text style={styles.label}>{column.label}:</Text>
+                            {column.userId ? (<TouchableOpacity>
+                                    <Text style={[styles.value, { color: '#208aff' }]}>{column.value}</Text>
+                                </TouchableOpacity>) : (<Text style={styles.value}>{column.value}</Text>)}
+                        </View>))}
+                </View>)}
+            {payload.content && <Text style={styles.content}>{payload.content}</Text>}
+            {payload.busiStatusText && <Text style={[styles.busiStatusText, { color }]}>{payload.busiStatusText}</Text>}
+        </TouchableOpacity>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     root: {
-        marginTop: (0, rn_ui_1.dp)(12),
-        marginBottom: -(0, rn_ui_1.dp)(32),
+        marginTop: dp(12),
+        marginBottom: -dp(32),
         marginHorizontal: '5%',
         width: '90%',
-        borderRadius: (0, rn_ui_1.dp)(4),
-        padding: (0, rn_ui_1.dp)(20),
+        borderRadius: dp(4),
+        padding: dp(20),
         shadowColor: 'rgba(0, 0, 0, 0.4)',
         backgroundColor: '#fff',
         shadowOffset: {
             width: 1,
-            height: (0, rn_ui_1.dp)(6),
+            height: dp(6),
         },
-        shadowRadius: (0, rn_ui_1.dp)(6),
+        shadowRadius: dp(6),
         shadowOpacity: 1,
         elevation: 2,
     },
     busiTypeContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginBottom: (0, rn_ui_1.dp)(6),
+        marginBottom: dp(6),
     },
     busiType: {
-        fontSize: (0, rn_ui_1.dp)(14),
+        fontSize: dp(14),
         color: '#333333',
-        marginLeft: (0, rn_ui_1.dp)(6),
+        marginLeft: dp(6),
     },
     title: {
-        fontSize: (0, rn_ui_1.dp)(14),
+        fontSize: dp(14),
         color: '#333333',
-        marginBottom: (0, rn_ui_1.dp)(6),
+        marginBottom: dp(6),
     },
     content: {},
     busiStatusText: {
         alignSelf: 'flex-end',
-        fontSize: (0, rn_ui_1.dp)(15),
-        lineHeight: (0, rn_ui_1.dp)(22),
+        fontSize: dp(15),
+        lineHeight: dp(22),
         color: '#333333',
     },
     columns: {},
     column: {
         flexDirection: 'row',
-        marginBottom: (0, rn_ui_1.dp)(6),
+        marginBottom: dp(6),
     },
     label: {
-        width: (0, rn_ui_1.dp)(80),
+        width: dp(80),
         letterSpacing: 2,
-        height: (0, rn_ui_1.dp)(24),
-        fontSize: (0, rn_ui_1.dp)(15),
-        lineHeight: (0, rn_ui_1.dp)(24),
+        height: dp(24),
+        fontSize: dp(15),
+        lineHeight: dp(24),
         color: '#666666',
         overflow: 'hidden',
     },
     value: {
-        height: (0, rn_ui_1.dp)(24),
-        fontSize: (0, rn_ui_1.dp)(15),
-        lineHeight: (0, rn_ui_1.dp)(24),
+        height: dp(24),
+        fontSize: dp(15),
+        lineHeight: dp(24),
         color: '#333333',
         overflow: 'hidden',
     },
 });
-exports.default = (0, react_1.memo)(BusiNotifyCard);
+export default memo(BusiNotifyCard);

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

@@ -1,44 +1,19 @@
-"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 init_1 = require("../../../init");
-const file_1 = require("../../../utils/file");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
+import { getImManager } from '../../../init';
+import { download, toAbsolutePath } from '../../../utils/file';
+import React, { useEffect, useState } from 'react';
+import { ImageBackground } from 'react-native';
 const ChatBg = ({ fileId, children }) => {
-    const [localPath, setLocalPath] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
+    const [localPath, setLocalPath] = useState('');
+    useEffect(() => {
         if (fileId && fileId !== 'bg0') {
-            const imManager = (0, init_1.getImManager)();
+            const imManager = getImManager();
             imManager.loadResourceFromCache(fileId).then(resp => {
                 if (resp) {
                     setLocalPath(resp);
                 }
                 else {
                     // 下载资源
-                    (0, file_1.download)({
+                    download({
                         fileId,
                         resourceType: 'background',
                         filename: fileId + '.png',
@@ -58,8 +33,8 @@ const ChatBg = ({ fileId, children }) => {
     if (!fileId || fileId === 'bg0' || !localPath) {
         return children;
     }
-    return (<react_native_1.ImageBackground style={{ flex: 1 }} resizeMode='cover' source={{ uri: (0, file_1.toAbsolutePath)(localPath) }}>
+    return (<ImageBackground style={{ flex: 1 }} resizeMode='cover' source={{ uri: toAbsolutePath(localPath) }}>
             {children}
-        </react_native_1.ImageBackground>);
+        </ImageBackground>);
 };
-exports.default = ChatBg;
+export default ChatBg;

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

@@ -1,94 +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 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 ChatAvatar_1 = __importDefault(require("../../../components/ChatAvatar/ChatAvatar"));
-const useFormatMsgTime_1 = __importDefault(require("../../../hooks/useFormatMsgTime"));
-const BusiNotifyCard_1 = __importDefault(require("./BusiNotifyCard"));
-const PayloadNotify_1 = __importDefault(require("./Payload/PayloadNotify"));
-const MessagePayload_1 = __importDefault(require("./MessagePayload"));
-const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+import { ConversationType, MessageStatus, PayloadType, isNotifyMessage, MessagePanelActions, } from '@smart-link/im-base';
+import { Checkbox, dp, useTheme } from '@smart-link/rn-ui';
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Dimensions, ActivityIndicator, TouchableWithoutFeedback, } from 'react-native';
+import ChatAvatar from '../../../components/ChatAvatar/ChatAvatar';
+import useFormatMsgTime from '../../../hooks/useFormatMsgTime';
+import BusiNotifyCard from './BusiNotifyCard';
+import PayloadNotify from './Payload/PayloadNotify';
+import MessagePayload from './MessagePayload';
+import useTranslation from '../../../hooks/useTranslation';
 //@ts-ignore
-const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
-const init_1 = require("../../../init");
-const MessageReceiptStatus_1 = __importDefault(require("./MessageReceiptStatus"));
-const MessageUndo_1 = __importDefault(require("../../../pages/message/components/MessageUndo"));
-const { width: screenWidth } = react_native_1.Dimensions.get('window');
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { getImManager } from '../../../init';
+import MessageReceiptStatus from './MessageReceiptStatus';
+import MessageUndo from "../../../pages/message/components/MessageUndo";
+const { width: screenWidth } = Dimensions.get('window');
 const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine, showTimeLine, onPressPopover, onLongPressPopover, onLayoutItem, }) => {
-    const theme = (0, rn_ui_1.useTheme)();
-    const { t } = (0, useTranslation_1.default)();
-    const time = (0, useFormatMsgTime_1.default)(message.messageTime);
-    const isNotify = (0, im_base_1.isNotifyMessage)(message.payloadType);
-    const isB2C = (conversation === null || conversation === void 0 ? void 0 : conversation.type) === im_base_1.ConversationType.B2C;
-    const isC2C = (conversation === null || conversation === void 0 ? void 0 : conversation.type) === im_base_1.ConversationType.C2C;
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const time = useFormatMsgTime(message.messageTime);
+    const isNotify = isNotifyMessage(message.payloadType);
+    const isB2C = (conversation === null || conversation === void 0 ? void 0 : conversation.type) === ConversationType.B2C;
+    const isC2C = (conversation === null || conversation === void 0 ? void 0 : conversation.type) === ConversationType.C2C;
     const isMultipleChecked = !!(multipleSelect === null || multipleSelect === void 0 ? void 0 : multipleSelect[message.messageSeq]);
-    const notArrow = [im_base_1.PayloadType.PICTURE, im_base_1.PayloadType.VIDEO].includes(message.payloadType);
-    const isUndo = message.messageStatus === im_base_1.MessageStatus.UNDO || message.payloadType === im_base_1.PayloadType.CONVERSATION_MESSAGE_UNDO;
+    const notArrow = [PayloadType.PICTURE, PayloadType.VIDEO].includes(message.payloadType);
+    const isUndo = message.messageStatus === MessageStatus.UNDO || message.payloadType === PayloadType.CONVERSATION_MESSAGE_UNDO;
     const isMessagePayload = !isB2C && !isNotify && !isUndo;
-    return (<react_native_1.View style={styles.root} onLayout={(e) => {
+    return (<View style={styles.root} onLayout={(e) => {
             onLayoutItem(message, e);
         }}>
-            {showTimeLine && <react_native_1.Text style={styles.time}>{time}</react_native_1.Text>}
-            {isB2C && <BusiNotifyCard_1.default payload={message.payload}/>}
-            {isNotify && <PayloadNotify_1.default {...message}/>}
-            {isUndo && <MessageUndo_1.default messageSeq={message.messageSeq} text={mine ? t('youWithdrawMsg') : `"${message.messageFromName}" ${t('withdrawMsg')}`} undoText={message.payload.text} haveBackgroundImage={false} edit={mine && message.payloadType === 'text'}/>}
+            {showTimeLine && <Text style={styles.time}>{time}</Text>}
+            {isB2C && <BusiNotifyCard payload={message.payload}/>}
+            {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 && (<react_native_1.TouchableWithoutFeedback onPress={() => {
-                    (0, init_1.getImManager)().store.dispatch(im_base_1.MessagePanelActions.onMultipleSelect(message.messageSeq));
+                    {isMultiple && message.payloadType !== 'voice' && (<TouchableWithoutFeedback onPress={() => {
+                    getImManager().store.dispatch(MessagePanelActions.onMultipleSelect(message.messageSeq));
                 }}>
-                            <react_native_1.View style={styles.multipleWrap}/>
-                        </react_native_1.TouchableWithoutFeedback>)}
-                    <react_native_1.View style={[
+                            <View style={styles.multipleWrap}/>
+                        </TouchableWithoutFeedback>)}
+                    <View style={[
                 styles.bubble,
                 {
                     flexDirection: mine ? 'row-reverse' : 'row',
                     justifyContent: 'flex-start',
                 },
             ]}>
-                        {mine && isMultiple && (<rn_ui_1.Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox]}/>)}
-                        <ChatAvatar_1.default name={message.messageFromName} id={message.messageFrom} size={(0, rn_ui_1.dp)(40)}/>
-                        <react_native_1.View style={[
+                        {mine && isMultiple && message.payloadType !== 'voice' && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox]}/>)}
+                        <ChatAvatar name={message.messageFromName} id={message.messageFrom} size={dp(40)}/>
+                        <View style={[
                 {
                     alignContent: 'flex-end',
                     alignItems: mine ? 'flex-end' : 'flex-start',
-                    paddingHorizontal: [im_base_1.PayloadType.PICTURE, im_base_1.PayloadType.VIDEO].includes(message.payloadType)
-                        ? (0, rn_ui_1.dp)(10)
+                    paddingHorizontal: [PayloadType.PICTURE, PayloadType.VIDEO].includes(message.payloadType)
+                        ? dp(10)
                         : 0,
                 },
             ]}>
-                            {!mine && message.conversationType !== im_base_1.ConversationType.C2C && (<react_native_1.Text style={[styles.name, {
-                        marginLeft: notArrow ? 0 : (0, rn_ui_1.dp)(10),
-                    }]}>{message.messageFromName}</react_native_1.Text>)}
-                            <react_native_1.View>
-                                <MessagePayload_1.default style={[
+                            {!mine && message.conversationType !== ConversationType.C2C && (<Text style={[styles.name, {
+                        marginLeft: notArrow ? 0 : dp(10),
+                        marginBottom: dp(5),
+                    }]}>{message.messageFromName}</Text>)}
+                            <View>
+                                <MessagePayload style={[
                 styles.payload,
                 {
                     justifyContent: mine ? 'flex-end' : 'flex-start',
@@ -98,28 +71,28 @@ 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_1.default {...message}/>}
-                            </react_native_1.View>
-                        </react_native_1.View>
-                        {message.messageStatus === im_base_1.MessageStatus.EMIT_ERROR && (<react_native_1.Text style={{ alignSelf: 'center' }}>
-                                <MaterialIcons_1.default name="info" size={(0, rn_ui_1.dp)(20)} color={theme.errorColor}/>
-                            </react_native_1.Text>)}
-                        {mine && message.messageStatus === im_base_1.MessageStatus.EMITTING && (<react_native_1.ActivityIndicator size="small" color={'#666'} animating={true}/>)}
-                        {!mine && isMultiple && (<rn_ui_1.Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
-                    </react_native_1.View>
+                                {isC2C && mine && <MessageReceiptStatus {...message}/>}
+                            </View>
+                        </View>
+                        {message.messageStatus === MessageStatus.EMIT_ERROR && (<Text style={{ alignSelf: 'center' }}>
+                                <Icon name="info" size={dp(20)} color={theme.errorColor}/>
+                            </Text>)}
+                        {mine && message.messageStatus === MessageStatus.EMITTING && (<ActivityIndicator size="small" color={'#666'} animating={true}/>)}
+                        {!mine && isMultiple && message.payloadType !== 'voice' && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
+                    </View>
                 </>)}
-            {message.messageStatus === im_base_1.MessageStatus.EMIT_ERROR && (<>
-                    <react_native_1.View style={{ height: (0, rn_ui_1.dp)(10) }}/>
-                    <react_native_1.View style={styles.errorInfo}>
-                        <react_native_1.Text style={styles.errorInfoText}>{t('sendMsgFail')}</react_native_1.Text>
-                        <react_native_1.TouchableOpacity activeOpacity={0.5} onPress={() => {
+            {message.messageStatus === MessageStatus.EMIT_ERROR && (<>
+                    <View style={{ height: dp(10) }}/>
+                    <View style={styles.errorInfo}>
+                        <Text style={styles.errorInfoText}>{t('sendMsgFail')}</Text>
+                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                 var _a;
-                const imManager = (0, init_1.getImManager)();
+                const imManager = getImManager();
                 imManager.resendMessage(conversation, message).then(() => { });
                 console.log('resendMessage');
                 ((_a = imManager.flatListRef) === null || _a === void 0 ? void 0 : _a.current).scrollToOffset({
@@ -127,60 +100,60 @@ const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine,
                     offset: 0,
                 });
             }}>
-                            <react_native_1.Text style={styles.errorInfoSend}>{t('resendMsg')}</react_native_1.Text>
-                        </react_native_1.TouchableOpacity>
-                    </react_native_1.View>
+                            <Text style={styles.errorInfoSend}>{t('resendMsg')}</Text>
+                        </TouchableOpacity>
+                    </View>
                 </>)}
-        </react_native_1.View>);
+        </View>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     root: {
-        marginTop: (0, rn_ui_1.dp)(10),
-        paddingHorizontal: (0, rn_ui_1.dp)(10),
+        marginTop: dp(10),
+        paddingHorizontal: dp(10),
         position: 'relative',
     },
     time: {
-        fontSize: (0, rn_ui_1.dp)(12),
+        fontSize: dp(12),
         textAlign: 'center',
     },
     bubble: {
-        paddingTop: (0, rn_ui_1.dp)(10),
+        paddingTop: dp(10),
         zIndex: 1,
         position: 'relative',
     },
     multipleCheckbox: {
-        marginTop: (0, rn_ui_1.dp)(10),
+        marginTop: dp(10),
     },
     multipleCheckboxRight: {
-        marginTop: (0, rn_ui_1.dp)(10),
+        marginTop: dp(10),
         position: 'absolute',
         right: 0,
-        top: (0, rn_ui_1.dp)(20),
+        top: dp(20),
     },
     name: {
-        fontSize: (0, rn_ui_1.dp)(12),
+        fontSize: dp(12),
     },
     notify: {},
     payload: {
-        maxWidth: screenWidth - (0, rn_ui_1.dp)(110),
+        maxWidth: screenWidth - dp(110),
         minHeight: 20,
-        marginHorizontal: (0, rn_ui_1.dp)(10),
-        borderRadius: (0, rn_ui_1.dp)(5),
+        marginHorizontal: dp(10),
+        borderRadius: dp(5),
         shadowColor: 'rgba(0, 0, 0, 0.2)',
         shadowOffset: {
             width: 0,
-            height: (0, rn_ui_1.dp)(2),
+            height: dp(2),
         },
-        shadowRadius: (0, rn_ui_1.dp)(3),
+        shadowRadius: dp(3),
         shadowOpacity: 1,
         elevation: 6,
         position: 'relative',
     },
     plain: {
         color: '#000',
-        fontSize: (0, rn_ui_1.dp)(14),
-        paddingHorizontal: (0, rn_ui_1.dp)(12),
-        paddingVertical: (0, rn_ui_1.dp)(10),
+        fontSize: dp(14),
+        paddingHorizontal: dp(12),
+        paddingVertical: dp(10),
     },
     errorInfo: {
         flexDirection: 'row',
@@ -188,13 +161,13 @@ const styles = react_native_1.StyleSheet.create({
     },
     errorInfoText: {
         color: '#808080',
-        fontSize: (0, rn_ui_1.dp)(13),
+        fontSize: dp(13),
     },
     errorInfoSend: {
         paddingHorizontal: 5,
         color: '#208aff',
         textDecorationLine: 'underline',
-        fontSize: (0, rn_ui_1.dp)(13),
+        fontSize: dp(13),
     },
     multipleWrap: {
         position: 'absolute',
@@ -203,4 +176,4 @@ const styles = react_native_1.StyleSheet.create({
         zIndex: 99,
     },
 });
-exports.default = (0, react_1.memo)(MessageItem);
+export default memo(MessageItem);