@smart-link/rn-im 1.0.24 → 1.1.1

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

@@ -9,13 +9,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { dp } from '@smart-link/rn-ui';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { dp } from "@smart-link/rn-ui";
+import Svg, { Path } from "react-native-svg";
+import Color from "color";
+// 通过 Svg 实现箭头
+const SvgFromUri = ({ direction, focus }) => {
+    let fill = direction === 'left' ? '#fff' : '#cde6f9';
+    let stroke = direction === 'left' ? "#eee" : '#cde6f9';
+    if (focus) {
+        fill = Color(fill).darken(0.08).hex();
+        if (direction === 'right') {
+            stroke = Color(stroke).darken(0.08).hex();
+        }
+    }
+    return (<Svg width={12} height={12}>
+            <Path d={direction == 'left' ? "M 12 12 L 0 5 L 12 0" : "M 0 12 L 12 5 L 0 0"} fill={fill} stroke={stroke} strokeWidth={1}></Path>
+        </Svg>);
+};
 const PayloadWrapper = memo((_a) => {
-    var { children, direction, showArrow } = _a, retProps = __rest(_a, ["children", "direction", "showArrow"]);
-    return (<TouchableOpacity {...retProps}>
-            {showArrow && (<View style={[styles.arrow, direction === 'right' ? styles.rightArrow : styles.leftArrow]}/>)}
+    var { children, direction, showArrow, onLongPress, style } = _a, retProps = __rest(_a, ["children", "direction", "showArrow", "onLongPress", "style"]);
+    const [layout, setLayout] = useState();
+    const [focus, setFocus] = useState(false);
+    let backgroundColor = direction === 'right' ? '#cde6f9' : '#fff';
+    if (focus) {
+        backgroundColor = Color(backgroundColor).darken(0.08).hex();
+    }
+    return (<TouchableOpacity {...retProps} style={[
+            style,
+            {
+                backgroundColor,
+            }
+        ]} onLayout={e => {
+            setLayout(e.nativeEvent.layout);
+        }} onLongPress={(e) => {
+            onLongPress && onLongPress(e, layout);
+        }} activeOpacity={1} onPressIn={() => {
+            setFocus(true);
+        }} onPressOut={() => {
+            setFocus(false);
+        }}>
+            {showArrow && (<View style={[styles.arrow, direction === 'right' ? styles.rightArrow : styles.leftArrow]}>
+                    <SvgFromUri direction={direction} focus={focus}/>
+                </View>)}
             {children}
         </TouchableOpacity>);
 });
@@ -24,25 +61,14 @@ const styles = StyleSheet.create({
         width: dp(12),
         height: dp(12),
         position: 'absolute',
-        top: dp(11),
-        zIndex: 1,
-        borderStyle: 'solid',
-        borderTopWidth: dp(8),
-        borderTopColor: 'transparent',
-        borderBottomWidth: dp(8),
-        borderBottomColor: 'transparent',
+        top: dp(12),
+        zIndex: -10,
     },
     leftArrow: {
-        left: -dp(11),
-        borderRightColor: '#fff',
-        borderRightWidth: dp(8),
-        borderLeftWidth: 0,
+        left: -dp(10),
     },
     rightArrow: {
-        right: -dp(12),
-        borderLeftColor: '#e3e3e3',
-        borderLeftWidth: dp(8),
-        borderRightWidth: 0,
+        right: -dp(10),
     },
 });
 export default PayloadWrapper;

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

@@ -1,11 +1,13 @@
 import { IMessage } from "@smart-link/im-base";
 import { GestureResponderEvent, StyleProp, ViewStyle } from "react-native";
+import { NativeEventLayout } from "../../../types";
 export interface PayloadProps extends IMessage {
+    width?: number;
     style?: StyleProp<ViewStyle>;
     direction?: 'left' | 'right';
     showArrow?: boolean;
     isRecord?: boolean;
     onPress?: (e: GestureResponderEvent) => void;
-    onLongPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent, layout: NativeEventLayout) => void;
     onLoad?: (localPath: string) => void;
 }

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

@@ -6,11 +6,11 @@ import useTranslation from "../../../hooks/useTranslation";
 import dayjs from "dayjs";
 export const ReceiptBack = ({ message }) => {
     const { t } = useTranslation();
-    // console.log('ReceiptBack: '', message.receiptBackList.length, message.receiptBackList);
+    // console.log('ReceiptBack: ', message.receiptBackList.length, message.receiptBackList);
     return (<View style={styles.content}>
             <View style={{ flexDirection: 'row' }}>
                 <Text style={[styles.text, { width: dp(165) }]}>
-                    {dayjs(message.messageTime).format('YYYY-MM-DD hh:mm:ss')}
+                    {dayjs(message.messageTime).format('YYYY-MM-DD HH:mm:ss')}
                 </Text>
                 <Text style={styles.text}>{message.messageStatus === MessageStatus.EMIT_ERROR ? t('sendFail') : t('sent')}</Text>
             </View>

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

@@ -1,6 +1,8 @@
+import { IGroupMember } from "@smart-link/im-base";
 import React from 'react';
 export type TextMixMessageProps = {
     text: string;
+    atList?: IGroupMember[];
     onLongPressPhone?: (phone: string) => void;
     onLongPressURL?: (url: string) => void;
     textStyle?: any;

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

@@ -1,9 +1,9 @@
+import { mix, mixAtList } from "@smart-link/im-base";
 import React, { memo } from 'react';
 import { Text, StyleSheet } from "react-native";
-import { mix } from '../../../utils/text-mix';
 const TextMixMessage = memo(props => {
-    const { text, onLongPressPhone, onLongPressURL, textStyle, } = props;
-    const viewItems = mix(text);
+    const { text, atList, onLongPressPhone, onLongPressURL, textStyle, } = props;
+    const viewItems = mixAtList(atList, mix(text));
     return (<Text style={textStyle}>
             {viewItems.map((item, index) => {
             if (item.type === 'phone') {
@@ -21,6 +21,9 @@ const TextMixMessage = memo(props => {
                             {item.value}
                         </Text>);
             }
+            else if (item.type === 'at') {
+                return (<Text key={index} style={styles.at}>{item.value}</Text>);
+            }
             return item.value;
         })}
         </Text>);
@@ -33,5 +36,9 @@ const styles = StyleSheet.create({
         color: '#208aff',
         textDecorationLine: 'underline'
     },
+    at: {
+        color: '#208aff',
+        fontWeight: "700"
+    }
 });
 export default TextMixMessage;

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

@@ -11,7 +11,6 @@ import LocalImage from '../../../components/LocalImage';
 import useTranslation from '../../../hooks/useTranslation';
 import { getImManager } from '../../../init';
 import PayloadFile from './Payload/PayloadFile';
-import useDownloadSource, { useDownloadImgSource } from "../../../hooks/useDownloadSource";
 const voiceLeft = require('../../../../assets/voice-left.png');
 const { width } = Dimensions.get('window');
 export const QuoteTextMix = memo(props => {
@@ -27,10 +26,8 @@ export const QuoteTextMix = memo(props => {
 });
 export const QuotePicture = memo(props => {
     const { quoteTitle, quoteMessage, quoteStyle, color, textStyle, borderColor, backgroundColor, onPressQuote } = props;
-    const { height, width } = quoteMessage.payload;
+    const { height, width, localPath } = quoteMessage.payload;
     const theme = useTheme();
-    console.log('QuotePicture', quoteMessage);
-    const localImg = useDownloadSource(quoteMessage.payload);
     const sizeStyle = calculate(height || 100, width || 61.8, 100);
     return (<TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { backgroundColor: dark(color, 6) }]}>
             <Text style={[textStyle, styles.replyUserName]}>
@@ -38,7 +35,7 @@ export const QuotePicture = memo(props => {
                 {' : '}
             </Text>
             <View style={styles.h5}/>
-            {(!localImg) && (<View style={[
+            {(!localPath) && (<View style={[
                 styles.pictureEmpty,
                 Object.assign({ backgroundColor,
                     borderColor }, sizeStyle),
@@ -47,23 +44,21 @@ export const QuotePicture = memo(props => {
                     <ActivityIndicator color={theme.primaryColor} animating={true}/>
                 </View>)}
 
-            {localImg && (<LocalImage style={sizeStyle} resizeMode="cover" localPath={localImg}/>)}
+            {localPath && (<LocalImage style={sizeStyle} resizeMode="cover" localPath={localPath}/>)}
         </TouchableOpacity>);
 });
 export const QuoteVideo = memo(props => {
     const { quoteTitle, quoteMessage, quoteStyle, color, textStyle, borderColor, backgroundColor, onPressQuote } = props;
-    const { duration, height, width } = quoteMessage.payload;
+    const { duration, height, width, imagePath } = quoteMessage.payload;
     const theme = useTheme();
-    console.log('QuoteVideo: ', quoteMessage);
     const sizeStyle = calculate(height, width);
-    const localImg = useDownloadImgSource(quoteMessage.payload);
     return (<TouchableOpacity activeOpacity={0.5} onPress={onPressQuote} style={[quoteStyle, styles.leftBorder, { backgroundColor: dark(color, 6) }]}>
             <Text style={[textStyle, styles.replyUserName]}>
                 {quoteTitle}
                 {' : '}
             </Text>
             <View style={styles.h5}/>
-            {(!localImg) && (<View style={[
+            {(!imagePath) && (<View style={[
                 styles.pictureEmpty,
                 Object.assign({ backgroundColor,
                     borderColor }, sizeStyle),
@@ -72,8 +67,8 @@ export const QuoteVideo = memo(props => {
                     <ActivityIndicator color={theme.primaryColor} animating={true}/>
                 </View>)}
 
-            {localImg && (<View style={{ width: sizeStyle.width }}>
-                    <LocalImage style={sizeStyle} resizeMode="cover" localPath={localImg}/>
+            {imagePath && (<View style={{ width: sizeStyle.width }}>
+                    <LocalImage style={sizeStyle} resizeMode="cover" localPath={imagePath}/>
                     <View style={styles.playView}>
                         <AntDesign size={30} name="playcircleo" color="#fff"/>
                     </View>
@@ -91,8 +86,8 @@ export const QuoteFile = memo(props => {
                 {' : '}
             </Text>
             <View style={styles.h5}/>
-            <View style={[styles.popoverFile, { backgroundColor: dark(color, 10) }]}>
-                <PayloadFile {...quoteMessage} style={{ flex: 1 }} showArrow={false}/>
+            <View style={[styles.popoverFile, { backgroundColor: dark(color, 10), paddingHorizontal: dp(5), flexDirection: 'column' }]}>
+                <PayloadFile {...quoteMessage} style={{ flex: 1, padding: dp(5) }} width={width - dp(155)} showArrow={false}/>
             </View>
         </TouchableOpacity>);
 });
@@ -190,7 +185,7 @@ const styles = StyleSheet.create({
     popoverFile: {
         backgroundColor: '#fff',
         flexDirection: 'row',
-        paddingVertical: dp(8),
+        paddingTop: dp(8),
         width: width - dp(145),
     },
     voiceImage: {

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { IMessageQuote } from '@smart-link/im-base';
+import { IGroupMember, IMessageQuote } from '@smart-link/im-base';
 interface QuoteTextMixProps {
     text: string;
     quote?: IMessageQuote | null;
+    atList?: IGroupMember[];
     textStyle?: any;
     quoteBgColor: string;
     quoteStyle?: any;

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

@@ -5,7 +5,7 @@ import TextMixMessage from './TextMixMessage';
 import { PayloadType } from '@smart-link/im-base';
 const { TEXT, VOICE, VIDEO, PICTURE, FILE, MULTIPLE } = PayloadType;
 const TextMixQuoteMessage = memo(props => {
-    const { text, quote, textStyle, quoteStyle, quoteBgColor, onLongPressPhone, onLongPressURL, onPressQuote } = props;
+    const { text, quote, atList, textStyle, quoteStyle, quoteBgColor, onLongPressPhone, onLongPressURL, onPressQuote } = props;
     let quotePayloadType;
     let quoteMessageSeq;
     const haveQuote = quote && Object.keys(quote).length > 0;
@@ -20,15 +20,15 @@ const TextMixQuoteMessage = memo(props => {
                 }}/>)}
 
                     {quotePayloadType === PICTURE && (<QuotePicture quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} quoteStyle={quoteStyle} color={quoteBgColor} textStyle={textStyle} backgroundColor={quoteBgColor} borderColor={quoteBgColor} onPressQuote={() => {
-                    onPressQuote && onPressQuote(quoteMessageSeq);
+                    onPressQuote === null || onPressQuote === void 0 ? void 0 : onPressQuote(quoteMessageSeq);
                 }}/>)}
 
                     {quotePayloadType === VIDEO && (<QuoteVideo quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} quoteStyle={quoteStyle} color={quoteBgColor} textStyle={textStyle} backgroundColor={quoteBgColor} borderColor={quoteBgColor} onPressQuote={() => {
-                    onPressQuote && onPressQuote(quoteMessageSeq);
+                    onPressQuote === null || onPressQuote === void 0 ? void 0 : onPressQuote(quoteMessageSeq);
                 }}/>)}
 
                     {quotePayloadType === FILE && (<QuoteFile quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} color={quoteBgColor} textStyle={textStyle} onPressQuote={() => {
-                    onPressQuote && onPressQuote(quoteMessageSeq);
+                    onPressQuote === null || onPressQuote === void 0 ? void 0 : onPressQuote(quoteMessageSeq);
                 }}/>)}
 
                     {quotePayloadType === VOICE && (<QuoteVoice quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} color={quoteBgColor} textStyle={textStyle} onPressQuote={() => {
@@ -40,7 +40,7 @@ const TextMixQuoteMessage = memo(props => {
                     <View style={{ height: 10 }}/>
                 </>)}
 
-            <TextMixMessage text={text} textStyle={textStyle} onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL}/>
+            <TextMixMessage text={text} atList={atList} textStyle={textStyle} onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL}/>
         </>);
 });
 export default TextMixQuoteMessage;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 type UploadProgressProps = {
     show: boolean;
-    width: number;
+    width?: number;
     sendSize: number;
     totalSize: number;
 };

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

@@ -11,7 +11,7 @@ const UploadProgress = ({ show, sendSize, totalSize, width }) => {
         return null;
     }
     const progress = sendSize / totalSize;
-    return (<View>
+    return (<View style={{ width }}>
             <Bar progress={progress} width={width} height={dp(3)} color={'#999'} borderRadius={dp(1)}/>
             <Text style={styles.rate}>{numberToFileSize(sendSize) + ' / ' + numberToFileSize(totalSize)}</Text>
         </View>);

package/dist/pages/message/components/messageBar/EmojiPanel.js

@@ -2,16 +2,16 @@ import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from '
 import { View, Text, FlatList, Animated, TouchableOpacity, Dimensions } from 'react-native';
 import { face } from '../../../../utils/emoji';
 import { DeleteSvg } from './Icons';
+import { useAnimatedValue } from "../../../../hooks/useAnimatedValue";
 const emojis = Array.from(new Set([...face]));
 const EMOJI_SIZE = (Dimensions.get('screen').width - 20) / 8;
 const keyExtractor = (item) => item;
 const EmojiPanel = forwardRef(({ onCheck, onBackspace }, ref) => {
-    const visible = useRef(false);
-    const [, forceUpdate] = useState({});
+    const [visible, setVisible] = useState(false);
     const timer = useRef(null);
     const start = useRef(false);
     //通过动画设置表情面板高度
-    const [heightAnim] = useState(new Animated.Value(0));
+    const heightAnim = useAnimatedValue(0);
     const renderItem = ({ item }) => (<TouchableOpacity style={{
             width: EMOJI_SIZE,
             height: EMOJI_SIZE,
@@ -23,27 +23,26 @@ const EmojiPanel = forwardRef(({ onCheck, onBackspace }, ref) => {
         </TouchableOpacity>);
     useImperativeHandle(ref, () => ({
         show: (height) => {
-            visible.current = true;
+            setVisible(true);
             heightAnim.setValue(height);
-            forceUpdate({});
         },
         hide: () => {
-            visible.current = false;
+            setVisible(false);
             heightAnim.setValue(0);
-            forceUpdate({});
         },
     }), []);
+    console.log('EmojiPanel: ', heightAnim);
     return (<Animated.View style={{
             height: heightAnim,
             position: 'relative',
             flexDirection: 'column',
-            paddingBottom: visible.current ? 20 : 0,
+            paddingBottom: visible ? 20 : 0,
         }} pointerEvents='auto'>
             <FlatList numColumns={8} initialNumToRender={80} data={emojis} keyExtractor={keyExtractor} contentContainerStyle={{
             paddingHorizontal: 10,
             paddingBottom: 50,
         }} pointerEvents='auto' keyboardShouldPersistTaps={'handled'} renderItem={renderItem} scrollEnabled/>
-            {visible.current && <View style={{
+            {visible && <View style={{
                 position: 'absolute',
                 height: EMOJI_SIZE,
                 width: 80,

package/dist/pages/message/components/messageBar/MessageBar.d.ts

@@ -5,7 +5,7 @@ export interface MessageBarProps {
 export interface MessageBarMethods {
     reset(): void;
     focusTextInput(): void;
-    appendInputText(text: string): void;
+    inertText(text: string): void;
     setMessageText(text: string): void;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageBarProps & React.RefAttributes<MessageBarMethods>>>;

package/dist/pages/message/components/messageBar/MessageBar.js

@@ -56,6 +56,10 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.insertEmoji(emoji);
     }, []);
+    const onEmojiBack = useCallback(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.backspace();
+    }, []);
     const switchVoice = useCallback(() => {
         var _a, _b;
         (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
@@ -85,15 +89,13 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         }, timeout);
     }, []);
     const switchEmojiInputMode = useCallback(() => {
+        var _a, _b, _c;
         modeRef.current = 'emoji';
         setInputMode('emoji');
         Keyboard.dismiss();
-        setTimeout(() => {
-            var _a, _b, _c;
-            (_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current);
-            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focusNoSoftKeyboard();
-        }, keyboardDuration.current);
+        (_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current);
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focusNoSoftKeyboard();
     }, []);
     const switchOptionPanelMode = useMemoizedFn(() => {
         var _a;
@@ -111,7 +113,7 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         }, keyboardDuration.current);
     });
     const onKeyPress = useCallback((e) => {
-        if (e.nativeEvent.key === '@') {
+        if (['@', '＠'].includes(e.nativeEvent.key)) {
             if (!debounceAt.current) {
                 debounceAt.current = debounce(() => {
                     onKeyboardAt && onKeyboardAt();
@@ -162,16 +164,15 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
             (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
             (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
         },
-        appendInputText: (text) => {
+        inertText: (text) => {
             var _a, _b, _c;
-            tempText.current += text;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setText(tempText.current);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.insertText(text);
             setTimeout(() => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, keyboardDuration.current);
             (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
-            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide;
         },
         setMessageText: (text) => {
             var _a, _b, _c;
@@ -199,6 +200,7 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         }
         const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', event => {
             var _a, _b;
+            console.log(event.endCoordinates.height);
             keyboardHeight.current = Math.max(event.endCoordinates.height, 240);
             keyboardDuration.current = event.duration;
             (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
@@ -236,7 +238,7 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
                         </TouchableOpacity>)}
                 </View>
             </View>
-            <EmojiPanel ref={emojiPanelRef} onCheck={handleInsertEmoji} onBackspace={() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.backspace(); }}/>
+            <EmojiPanel ref={emojiPanelRef} onCheck={handleInsertEmoji} onBackspace={onEmojiBack}/>
             <OptionPanel ref={optionPanelRef}/>
         </>);
 });

package/dist/pages/message/components/messageBar/MessageInput.d.ts

@@ -15,6 +15,7 @@ export type MessageInputMethods = {
     setText: (text: string) => void;
     getText: () => string;
     insertEmoji: (text: string) => void;
+    insertText: (text: string) => void;
     backspace: () => void;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<MessageInputMethods>>>;

package/dist/pages/message/components/messageBar/MessageInput.js

@@ -58,6 +58,25 @@ const MessageInput = forwardRef(({ onChangeText, onKeyPress, style }, ref) => {
                 (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.setSelection(start + emoji.length, start + emoji.length);
             }
         },
+        insertText(text) {
+            var _a, _b, _c;
+            const { start, end } = selection;
+            let newText = ((_a = innerText.current) === null || _a === void 0 ? void 0 : _a.slice(0, start)) + text + ((_b = innerText.current) === null || _b === void 0 ? void 0 : _b.slice(end));
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newText);
+            innerText.current = newText;
+            setText(newText);
+            setSelection({
+                start: start + text.length,
+                end: start + text.length,
+            });
+            if (Platform.OS === 'ios') {
+                selectionIos.current = {
+                    start: start + text.length,
+                    end: start + text.length,
+                };
+                (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.setSelection(start + text.length, start + text.length);
+            }
+        },
         getText: () => {
             return innerText.current;
         },
@@ -152,7 +171,6 @@ const MessageInput = forwardRef(({ onChangeText, onKeyPress, style }, ref) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        position: 'relative',
         marginVertical: dp(6),
         maxHeight: dp(120),
     },

package/dist/pages/message/components/messageBar/OptionPanel.js

@@ -7,8 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { dp, Toast, useNavigation } from '@smart-link/rn-ui';
-import * as DocumentPicker from '@react-native-documents/picker';
+import { dp, useNavigation } from '@smart-link/rn-ui';
 import React, { forwardRef, memo, useImperativeHandle, useState } from 'react';
 import { View, Text, FlatList, TouchableOpacity, Dimensions, StyleSheet, Animated } from 'react-native';
 import { useConversation } from '../../../../hooks/useImSelector';
@@ -17,17 +16,18 @@ import { getImManager } from '../../../../init';
 import { FileIcon, PhotosIcon, ShootingIcon, UserIcon } from './Icons';
 import ImagePicker from 'react-native-image-crop-picker';
 import { startSendContact } from '../../../../slice/contact/contact.slice';
-import { copyFile, getExtensionFromMime } from '../../../../utils/file';
+import { copyFile } from '../../../../utils/file';
 import { scrollToBottom } from '../../../../utils/scroll';
 import { takeCamera } from '../../../../utils/take-camera';
 import FontAwesome from "react-native-vector-icons/FontAwesome";
+import { useAnimatedValue } from "../../../../hooks/useAnimatedValue";
 const OPTION_SIZE = (Dimensions.get('screen').width - 20) / 4;
 const keyExtractor = (item) => item.id;
 const OptionPanel = forwardRef((props, ref) => {
     const navigation = useNavigation();
     const [visible, setVisible] = useState(false);
     const { currentConversation } = useConversation();
-    const [heightAnim] = useState(new Animated.Value(0));
+    const heightAnim = useAnimatedValue(0);
     const { t } = useTranslation();
     const imManager = getImManager();
     useImperativeHandle(ref, () => ({
@@ -43,17 +43,18 @@ const OptionPanel = forwardRef((props, ref) => {
     }), [visible]);
     const sendPicture = (data) => __awaiter(void 0, void 0, void 0, function* () {
         scrollToBottom();
-        yield getImManager().sendPictureMessage(Object.assign({}, currentConversation), data);
-    });
-    const sendVideo = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        scrollToBottom();
-        yield getImManager().sendVideoMessage(Object.assign({}, currentConversation), data);
-    });
-    const sendFile = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        scrollToBottom();
-        const destPath = yield copyFile(data.localPath, data.filename, 'file');
-        yield getImManager().sendFileMessage(Object.assign({}, currentConversation), Object.assign(Object.assign({}, data), { localPath: destPath }));
+        yield imManager.sendPictureMessage(Object.assign({}, currentConversation), data);
     });
+    // const sendVideo = async (data: IPayload) => {
+    //     scrollToBottom();
+    //     await imManager.sendVideoMessage({...currentConversation!}, data);
+    // };
+    //
+    // const sendFile = async (data: IPayload) => {
+    //     scrollToBottom();
+    //     const destPath = await copyFile(data.localPath as string, data.filename!, 'file');
+    //     await imManager.sendFileMessage({...currentConversation!}, {...data, localPath: destPath});
+    // };
     const openAlbum = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             const images = yield ImagePicker.openPicker({
@@ -63,17 +64,18 @@ const OptionPanel = forwardRef((props, ref) => {
                 compressImageMaxWidth: 1080,
             });
             console.log(images);
-            images.map(item => {
-                sendPicture({
+            for (const item of images) {
+                const localPath = yield copyFile(item.path, item.filename, 'picture');
+                yield sendPicture({
                     filename: item.filename,
                     size: item.size,
-                    localPath: item.path,
+                    localPath: localPath,
                     type: item.mime,
                     lastModified: Number(item.modificationDate),
                     width: item.width,
                     height: item.height,
                 });
-            });
+            }
         }
         catch (e) {
             console.log(e);
@@ -89,31 +91,7 @@ const OptionPanel = forwardRef((props, ref) => {
     });
     const pickFile = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            const files = yield DocumentPicker.pick({
-                type: [DocumentPicker.types.allFiles],
-            });
-            const fileInfo = files[0];
-            console.log('chooseFile: ', fileInfo);
-            if (!fileInfo.uri) {
-                Toast.error(t("failedToObtainFilePath"));
-                return;
-            }
-            const ext = getExtensionFromMime(fileInfo.type);
-            if (!ext) {
-                Toast.error(t("unsupportedFileTypes"));
-                return;
-            }
-            if (!fileInfo.name.endsWith(ext)) {
-                fileInfo.name = fileInfo.name + ext;
-            }
-            yield sendFile({
-                // ios 中文名称编码了，需要解码
-                localPath: decodeURI(fileInfo.uri),
-                filename: fileInfo.name,
-                size: fileInfo.size,
-                type: fileInfo.type,
-                lastModified: Date.now(),
-            });
+            navigation.navigate('FileSelector');
         }
         catch (e) {
             console.log(e);
@@ -155,7 +133,7 @@ const OptionPanel = forwardRef((props, ref) => {
         {
             id: 'star',
             icon: <FontAwesome name="star" color="#000" size={32}/>,
-            text: t('collect'),
+            text: t('collected'),
             onPress: () => {
                 navigation.navigate('Collection');
             },

package/dist/pages/message/message.routes.js

@@ -2,6 +2,7 @@ import MessageList from './MessageList';
 import ChooseMember from './ChooseMember';
 import MessageRecord from './MessageRecord';
 import MessageBackup, { StartBackupPage, RestoreBackupPage } from './MessageBackup';
+import FileSelector from "./FileSelector";
 export const messageRoutes = [
     {
         name: 'MessageList',
@@ -26,6 +27,15 @@ export const messageRoutes = [
             title: '',
         },
     },
+    {
+        name: 'FileSelector',
+        component: FileSelector,
+        options: {
+            title: '',
+            animation: 'fade_from_bottom',
+            animationDuration: 150,
+        },
+    },
     {
         name: 'MessageBackup',
         component: MessageBackup,