@smart-link/rn-im 1.0.23 → 1.0.24

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

@@ -1,83 +1,55 @@
-"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 react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const ChatAvatar_1 = __importDefault(require("../../../components/ChatAvatar/ChatAvatar"));
-const rn_ui_1 = require("@smart-link/rn-ui");
+import React, { memo } from 'react';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import ChatAvatar from '../../../components/ChatAvatar/ChatAvatar';
+import { dp } from '@smart-link/rn-ui';
 // @ts-ignore
-const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
-const MessageItemQuote = (0, react_1.memo)(props => {
+import Icon from 'react-native-vector-icons/MaterialIcons';
+const MessageItemQuote = memo(props => {
     const { quoteId, quoteAvatars, quoteTitle, quoteText, onDeleteQuote, } = props;
-    return (<react_native_1.View style={styles.quote}>
-            <ChatAvatar_1.default id={quoteId} url={quoteAvatars} size={(0, rn_ui_1.dp)(32)} name={''}/>
-            <react_native_1.View style={styles.width10}/>
-            <react_native_1.View style={styles.left}>
-                <react_native_1.Text style={styles.name} numberOfLines={1}>{quoteTitle}</react_native_1.Text>
-                <react_native_1.Text style={styles.text} numberOfLines={1}>{quoteText}</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.TouchableOpacity style={styles.delete} onPress={onDeleteQuote}>
-                <MaterialIcons_1.default name="clear" color="#666" size={(0, rn_ui_1.dp)(18)}/>
-            </react_native_1.TouchableOpacity>
-        </react_native_1.View>);
+    return (<View style={styles.quote}>
+            <ChatAvatar id={quoteId} url={quoteAvatars} size={dp(32)} name={''}/>
+            <View style={styles.width10}/>
+            <View style={styles.left}>
+                <Text style={styles.name} numberOfLines={1}>{quoteTitle}</Text>
+                <Text style={styles.text} numberOfLines={1}>{quoteText}</Text>
+            </View>
+            <TouchableOpacity style={styles.delete} onPress={onDeleteQuote}>
+                <Icon name="clear" color="#666" size={dp(18)}/>
+            </TouchableOpacity>
+        </View>);
 });
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     quote: {
         backgroundColor: '#f3f3f3',
-        padding: (0, rn_ui_1.dp)(8),
+        padding: dp(8),
         flexDirection: 'row',
         borderColor: '#eee',
         borderStyle: 'solid',
-        borderWidth: (0, rn_ui_1.dp)(1),
+        borderWidth: dp(1),
         alignItems: 'center',
     },
     width10: {
-        width: (0, rn_ui_1.dp)(10),
+        width: dp(10),
     },
     left: {
         justifyContent: 'space-between'
     },
     name: {
-        width: (0, rn_ui_1.dp)(250),
-        fontSize: (0, rn_ui_1.dp)(12),
-        lineHeight: (0, rn_ui_1.dp)(15),
+        width: dp(250),
+        fontSize: dp(12),
+        lineHeight: dp(15),
         color: '#999',
     },
     text: {
-        width: (0, rn_ui_1.dp)(270),
-        fontSize: (0, rn_ui_1.dp)(12),
-        lineHeight: (0, rn_ui_1.dp)(16),
+        width: dp(270),
+        fontSize: dp(12),
+        lineHeight: dp(16),
         color: '#666',
     },
     delete: {
-        paddingTop: (0, rn_ui_1.dp)(3),
-        right: (0, rn_ui_1.dp)(10),
+        paddingTop: dp(3),
+        right: dp(10),
         position: 'absolute',
     }
 });
-exports.default = MessageItemQuote;
+export default MessageItemQuote;

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

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

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

@@ -1,27 +1,3 @@
-"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) {
@@ -31,38 +7,34 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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");
+import React, { memo, useRef } from 'react';
+import { Animated, Text, StyleSheet, TouchableOpacity, View, TouchableWithoutFeedback, Dimensions, UIManager, StatusBar, Modal, } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { getMessageActionKeys, MessageActions, MessagePanelActions, MessageStatus, PayloadType, ConversationType, } from '@smart-link/im-base';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { dp, Toast, useNavigation, Modal as Dialog } from '@smart-link/rn-ui';
+import useTranslation from '../../../hooks/useTranslation';
+import { ConfirmActionSheet } from '../../../utils/common-action-sheet';
+import { getImManager } from '../../../init';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { usePanel } from '../../../hooks/useImSelector';
+import { saveToAlbum } from '../../../utils/file';
+import { ReceiptBack } from "../../../pages/message/components/ReceiptBack";
 const getMessageAction = (t, message, navigation, setLoading) => {
     if (!message)
         return [];
-    const actions = (0, im_base_1.getMessageActionKeys)(message.payloadType);
+    const actions = 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'}/>,
+            icon: <AntDesign name="copy1" size={dp(20)} color={'#333'}/>,
             onPress: () => {
-                clipboard_1.default.setString(message.payload.text);
+                Clipboard.setString(message.payload.text);
             },
         },
         // {
@@ -76,28 +48,28 @@ const getMessageAction = (t, message, navigation, setLoading) => {
         {
             key: 'forward',
             title: t('forward'),
-            icon: <FontAwesome5_1.default name="reply" size={(0, rn_ui_1.dp)(19)} color={'#333'}/>,
+            icon: <FontAwesome5 name="reply" size={dp(19)} color={'#333'}/>,
             onPress: () => {
-                (0, init_1.getImManager)().store.dispatch(im_base_1.MessageActions.setForwardMessage(message));
+                getImManager().store.dispatch(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'}/>,
+            icon: <MaterialCommunityIcons name="delete-forever" size={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);
+                ConfirmActionSheet(t('confirmDeleteMessage'), () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield 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'}/>,
+            icon: <MaterialCommunityIcons name="message-processing" size={dp(20)} color={'#333'}/>,
             onPress: () => {
-                const imManager = (0, init_1.getImManager)();
+                const imManager = getImManager();
                 imManager.replyMessage(message);
                 setTimeout(() => {
                     var _a, _b;
@@ -116,17 +88,17 @@ const getMessageAction = (t, message, navigation, setLoading) => {
         {
             key: 'undo',
             title: t('undo'),
-            icon: <FontAwesome_1.default name="undo" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            icon: <FontAwesome name="undo" size={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* () {
+                ConfirmActionSheet(t('confirmUndoMessage'), () => __awaiter(void 0, void 0, void 0, function* () {
                     try {
                         setLoading(true);
-                        yield (0, init_1.getImManager)().undoMessage(message);
+                        yield getImManager().undoMessage(message);
                         setLoading(false);
                     }
                     catch (e) {
                         setLoading(false);
-                        rn_ui_1.Toast.error(t('undoFail'));
+                        Toast.error(t('undoFail'));
                     }
                 }), t);
             }),
@@ -134,10 +106,10 @@ const getMessageAction = (t, message, navigation, setLoading) => {
         {
             key: 'feedback',
             title: t('feedback'),
-            icon: <MaterialIcons_1.default name="feedback" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            icon: <MaterialIcons name="feedback" size={dp(20)} color={'#333'}/>,
             onPress: () => __awaiter(void 0, void 0, void 0, function* () {
-                rn_ui_1.Modal.open({
-                    content: <ReceiptBack_1.ReceiptBack message={message}/>,
+                Dialog.open({
+                    content: <ReceiptBack message={message}/>,
                     maskClosable: true,
                     footer: {
                         cancelButton: false,
@@ -149,34 +121,38 @@ const getMessageAction = (t, message, navigation, setLoading) => {
         {
             key: 'collect',
             title: t('collect'),
-            icon: <FontAwesome_1.default name="star" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            icon: <FontAwesome name="star" size={dp(20)} color={'#333'}/>,
             onPress: () => {
-                (0, init_1.getImManager)().collectMessage(message);
+                getImManager().collectMessage(message);
             },
         },
         {
             key: 'saveToAlbum',
             title: t('savePicture'),
-            icon: <AntDesign_1.default name="save" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            icon: <AntDesign name="save" size={dp(20)} color={'#333'}/>,
             onPress: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield (0, file_1.saveToAlbum)((0, init_1.getImManager)(), localPath);
+                yield saveToAlbum(getImManager(), localPath);
             }),
         },
         {
             key: 'download',
             title: t('download'),
-            icon: <AntDesign_1.default name="download" size={(0, rn_ui_1.dp)(20)} color={'#333'}/>,
+            icon: <AntDesign name="download" size={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));
+                const imManager = getImManager();
+                imManager.store.dispatch(MessagePanelActions.downloadFile(imManager, message, () => {
+                    Toast.success(t('downloaded'));
+                }, () => {
+                    Toast.error(t('downloadError'));
+                }));
             }),
         },
         {
             key: 'multiple',
             title: t('multiple'),
-            icon: <MaterialCommunityIcons_1.default name="playlist-check" size={(0, rn_ui_1.dp)(22)} color={'#333'}/>,
+            icon: <MaterialCommunityIcons name="playlist-check" size={dp(22)} color={'#333'}/>,
             onPress: () => {
-                (0, init_1.getImManager)().store.dispatch(im_base_1.MessagePanelActions.startMultipleSelect(message));
+                getImManager().store.dispatch(MessagePanelActions.startMultipleSelect(message));
             },
         },
     ];
@@ -186,72 +162,72 @@ const getMessageAction = (t, message, navigation, setLoading) => {
     // avatars,
     // text,
     localPath, }, conversationId, conversationType, } = message;
-    const imManager = (0, init_1.getImManager)();
+    const imManager = getImManager();
     return items.filter(item => {
         const { key } = item;
         //if (isMyMessage && key === 'reply') return false;
-        if (messageStatus === im_base_1.MessageStatus.EMITTING) {
+        if (messageStatus === MessageStatus.EMITTING) {
             return false;
         }
         if ((!isMyMessage ||
-            messageStatus === im_base_1.MessageStatus.EMIT_ERROR ||
+            messageStatus === MessageStatus.EMIT_ERROR ||
             new Date().getTime() - messageTime > imManager.undoLimitTime) &&
             key === 'undo')
             return false;
-        if (payloadType === im_base_1.PayloadType.FILE && localPath && key === 'download') {
+        if (payloadType === PayloadType.FILE && localPath && key === 'download') {
             return false;
         }
-        if ((!isMyMessage || conversationType !== im_base_1.ConversationType.C2C) && key === 'feedback') {
+        if ((!isMyMessage || conversationType !== ConversationType.C2C) && key === 'feedback') {
             return false;
         }
         return actions.includes(item.key);
     });
 };
 const renderOperations = (items, close) => {
-    return (<react_native_1.View style={styles.operationWrap}>
+    return (<View style={styles.operationWrap}>
             {items.map((item, index) => {
-            return (<react_native_1.TouchableOpacity key={index} onPress={() => {
+            return (<TouchableOpacity key={index} onPress={() => {
                     item.onPress && item.onPress();
                     close && close();
                 }}>
-                        <react_native_1.View style={styles.operationItem}>
+                        <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>);
+                            <Text style={styles.operationText}>{item.title}</Text>
+                        </View>
+                    </TouchableOpacity>);
         })}
-        </react_native_1.View>);
+        </View>);
 };
 const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) => {
     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 { t } = useTranslation();
+    const headerHeight = useHeaderHeight();
+    const { messageBarHeight } = usePanel();
+    const navigation = useNavigation();
     const items = getMessageAction(t, message, navigation, setLoading);
-    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 translateX = useRef(new Animated.Value(0)).current;
+    const translateY = useRef(new Animated.Value(0)).current;
+    const scale = useRef(new Animated.Value(0)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+    const padding = 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,
+        height: screenHeight - headerHeight - messageBarHeight - ((_a = 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, {
+        Animated.parallel([
+            Animated.timing(scale, {
                 toValue: 1,
                 duration: 150,
                 useNativeDriver: true,
             }),
-            react_native_1.Animated.timing(opacity, {
+            Animated.timing(opacity, {
                 toValue: 1,
                 duration: 150,
                 useNativeDriver: true,
@@ -259,13 +235,13 @@ const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) =
         ]).start();
     };
     const hideAnimation = () => {
-        react_native_1.Animated.parallel([
-            react_native_1.Animated.timing(scale, {
+        Animated.parallel([
+            Animated.timing(scale, {
                 toValue: 0,
                 duration: 150,
                 useNativeDriver: true,
             }),
-            react_native_1.Animated.timing(opacity, {
+            Animated.timing(opacity, {
                 toValue: 0,
                 duration: 150,
                 useNativeDriver: true,
@@ -285,7 +261,7 @@ const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) =
         if (nativeEvent) {
             // 测量点击位置的元素
             // @ts-ignore
-            react_native_1.UIManager.measure(nativeEvent.target, (x, y, width, height, pageX, pageY) => {
+            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) {
@@ -306,11 +282,11 @@ const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) =
     };
     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={[
+    return (<Modal visible={visible} transparent onRequestClose={onHide}>
+            <TouchableWithoutFeedback onPress={onHide}>
+                <View style={StyleSheet.absoluteFill}/>
+            </TouchableWithoutFeedback>
+            <Animated.View style={[
             styles.popWrap,
             {
                 transform: [
@@ -328,19 +304,19 @@ const MessageOption = ({ visible, message, nativeEvent, onClose, setLoading }) =
             },
         ]} onLayout={onLayout}>
                 {renderOperations(items, onClose)}
-            </react_native_1.Animated.View>
-        </react_native_1.Modal>);
+            </Animated.View>
+        </Modal>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     popWrap: {
-        maxWidth: (0, rn_ui_1.dp)(280),
-        borderRadius: (0, rn_ui_1.dp)(5),
-        paddingTop: (0, rn_ui_1.dp)(10),
+        maxWidth: dp(280),
+        borderRadius: dp(5),
+        paddingTop: 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),
+        shadowRadius: dp(5),
         elevation: 10,
     },
     operationWrap: {
@@ -348,16 +324,16 @@ const styles = react_native_1.StyleSheet.create({
         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),
+        width: dp(272 / 4),
+        height: dp(40),
+        paddingHorizontal: dp(2),
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: (0, rn_ui_1.dp)(10),
+        marginBottom: dp(10),
     },
     operationText: {
-        fontSize: (0, rn_ui_1.dp)(12),
-        lineHeight: (0, rn_ui_1.dp)(15),
+        fontSize: dp(12),
+        lineHeight: dp(15),
     },
 });
-exports.default = (0, react_1.memo)(MessageOption);
+export default memo(MessageOption);