@smart-link/rn-im 1.1.1 → 1.1.2

package/dist/pages/conversation/setting/GroupTransfer.js

@@ -15,14 +15,20 @@ import { ConversationActions } from '@smart-link/im-base';
 import { Checkbox, ListRow, NavigationPage, SearchInput } from '@smart-link/rn-ui';
 import React, { useEffect, useMemo, useState } from 'react';
 import { View, StyleSheet, FlatList, Text, TouchableOpacity } from 'react-native';
+import { Event, EventName } from "../../../utils/event";
 const GroupTransfer = ({ navigation }) => {
     const { t } = useTranslation();
     const { allMembers } = useConversation();
     const [checkedMember, setCheckedMember] = useState(null);
     const [keyword, setKeyword] = useState('');
     const list = useMemo(() => {
-        return allMembers === null || allMembers === void 0 ? void 0 : allMembers.filter(item => item.memberLevel !== 'owner');
-    }, [allMembers]);
+        return allMembers === null || allMembers === void 0 ? void 0 : allMembers.filter(item => {
+            if (keyword) {
+                return item.memberName.indexOf(keyword) > -1 && item.memberLevel !== 'owner';
+            }
+            return item.memberLevel !== 'owner';
+        });
+    }, [allMembers, keyword]);
     useEffect(() => {
         navigation.setOptions({
             title: t('chooseNewOwner'),
@@ -32,6 +38,7 @@ const GroupTransfer = ({ navigation }) => {
                             const imManager = getImManager();
                             yield imManager.store.dispatch(ConversationActions.groupTransfer(imManager, checkedMember));
                             navigation.goBack();
+                            Event.emit(EventName.ON_GROUP_TRANSFER_DONE);
                         }
                     })} style={{ marginRight: 10 }}>
                         <Text style={{ color: tintColor }}>{t('confirm')}</Text>

package/dist/pages/conversation/setting/Setting.js

@@ -11,6 +11,7 @@ import OptionGroup from '../../../pages/conversation/setting/OptionGroup';
 import OptionCancelGroup from '../../../pages/conversation/setting/OptionCancelGroup';
 import { startAddMember, startCreateGroup } from '../../../slice/contact/contact.slice';
 import { StackActions } from '@react-navigation/native';
+import { Event, EventName } from "../../../utils/event";
 const { MEMBER, MGR, OWNER } = MemberLevel;
 const { LIAISON } = GroupType;
 // 最大显示人数
@@ -60,11 +61,22 @@ const ConversationSetting = ({ navigation }) => {
         ConfirmActionSheets({
             title: t('leaveGroup'),
             confirm: () => {
-                imManager.store.dispatch(ConversationActions.doLeaveGroup(imManager, { chatGroupId: id }, () => {
-                    navigation.dispatch(StackActions.popToTop());
-                }, () => {
-                    Toast.error(t('leaveGroupFail'));
-                }));
+                const doLeave = () => {
+                    imManager.store.dispatch(ConversationActions.doLeaveGroup(imManager, { chatGroupId: id }, () => {
+                        navigation.dispatch(StackActions.popToTop());
+                    }, () => {
+                        Toast.error(t('leaveGroupFail'));
+                    }));
+                };
+                if (memberLevel === OWNER) {
+                    // 群主离开群，需要先转让群
+                    Event.on(EventName.ON_GROUP_TRANSFER_DONE, () => {
+                        doLeave();
+                    });
+                    navigation.navigate("GroupTransfer");
+                    return;
+                }
+                doLeave();
             },
             t,
         });

package/dist/pages/message/ChooseMember.js

@@ -40,7 +40,7 @@ const ChooseMember = ({ navigation, route: { params } }) => {
             headerTitle: params.atOther ? t('selectRemainder') : t('selectContacts'),
             headerRight: ({ tintColor }) => {
                 return (<TouchableOpacity activeOpacity={0.5} style={{ padding: dp(10) }} disabled={!checked.length} onPress={confirm}>
-                        <Text style={{ color: tintColor }}>{t('confirm')}</Text>
+                        <Text style={{ color: tintColor }}>{checked.length ? `${t('confirm')}(${checked.length})` : t('confirm')}</Text>
                     </TouchableOpacity>);
             },
         });
@@ -50,9 +50,11 @@ const ChooseMember = ({ navigation, route: { params } }) => {
         const members = list.filter(item => checked.includes(item.userId));
         if (params.atOther) {
             if ((_a = imManager.inputRef) === null || _a === void 0 ? void 0 : _a.current) {
-                (_c = (_b = imManager.inputRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.inertText(`${members[0].memberName} `);
+                const text = members.map(item => `@${item.memberName}`)
+                    .join(' ').slice(1) + ' ';
+                (_c = (_b = imManager.inputRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.inertText(text);
             }
-            imManager.store.dispatch(MessageActions.addAtUser(members[0]));
+            imManager.store.dispatch(MessageActions.addAtUsers(members));
         }
         if (params.removeMember) {
             imManager.store.dispatch(ConversationActions.removeGroupMembers({
@@ -64,16 +66,11 @@ const ChooseMember = ({ navigation, route: { params } }) => {
     const renderItem = ({ item }) => {
         const enableTopStyles = item.enableTop === 'on' ? styles.enableTop : null;
         return (<TouchableOpacity activeOpacity={0.5} style={[styles.row, enableTopStyles]} onPress={() => {
-                if (params.atOther) {
-                    setChecked([item.userId]);
+                if (checked.includes(item.userId)) {
+                    setChecked(checked.filter(id => id !== item.userId));
                 }
                 else {
-                    if (checked.includes(item.userId)) {
-                        setChecked(checked.filter(id => id !== item.userId));
-                    }
-                    else {
-                        setChecked([...checked, item.userId]);
-                    }
+                    setChecked([...checked, item.userId]);
                 }
             }}>
                 <View style={{ marginRight: dp(10) }}>

package/dist/pages/message/MessageList.js

@@ -74,7 +74,7 @@ const MessageList = ({ navigation }) => {
                 InteractionManager.runAfterInteractions(() => {
                     imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
-                    imManager.store.dispatch(MessageActions.resetState({}));
+                    imManager.store.dispatch(MessageActions.resetState());
                 });
             }
         });

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

@@ -39,7 +39,10 @@ const UpdateManager = ({ payload }) => {
     const { t } = useTranslation();
     console.log('UpdateManager: ', payload);
     const { targetUserName, memberLevel, opUserName } = payload !== null && payload !== void 0 ? payload : {};
-    const content = memberLevel === MemberLevel.MGR ? t('setToMgr', { userName: targetUserName }) : t('cancelMgr', { userName: targetUserName });
+    let content = memberLevel === MemberLevel.MGR ? t('setToMgr', { userName: targetUserName }) : t('cancelMgr', { userName: targetUserName });
+    if (memberLevel === MemberLevel.OWNER) {
+        content = t('setToOwner', { userName: targetUserName });
+    }
     return <Text style={styles.text}>{opUserName} {content}</Text>;
 };
 const PayloadNotify = ({ payload, payloadType }) => {

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

@@ -4,8 +4,8 @@ type EmojiPanelProps = {
     onBackspace: () => void;
 };
 export type EmojiPanelMethods = {
-    show: (height: number) => void;
-    hide: () => void;
+    show: (height: number, animated?: boolean) => void;
+    hide: (animated?: boolean) => void;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmojiPanelProps & React.RefAttributes<EmojiPanelMethods>>>;
 export default _default;

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

@@ -22,16 +22,33 @@ const EmojiPanel = forwardRef(({ onCheck, onBackspace }, ref) => {
             <Text style={{ fontSize: 22, color: '#333' }}>{item}</Text>
         </TouchableOpacity>);
     useImperativeHandle(ref, () => ({
-        show: (height) => {
+        show: (height, animated) => {
             setVisible(true);
-            heightAnim.setValue(height);
+            if (animated) {
+                Animated.timing(heightAnim, {
+                    toValue: height,
+                    duration: 300,
+                    useNativeDriver: false,
+                }).start();
+            }
+            else {
+                heightAnim.setValue(height);
+            }
         },
-        hide: () => {
+        hide: (animated) => {
             setVisible(false);
-            heightAnim.setValue(0);
+            if (animated) {
+                Animated.timing(heightAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: false,
+                }).start();
+            }
+            else {
+                heightAnim.setValue(0);
+            }
         },
     }), []);
-    console.log('EmojiPanel: ', heightAnim);
     return (<Animated.View style={{
             height: heightAnim,
             position: 'relative',

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

@@ -33,15 +33,14 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
     const lazy = useRef(false);
     const tempText = useRef('');
     const { currentConversation } = useConversation();
-    const { quote, messageText } = useMessage();
+    const { quote } = useMessage();
     const [showSend, setShowSend] = useState(false);
-    const keyboardDuration = useRef(100);
+    const keyboardDuration = useRef(150);
     const modeRef = useRef('text');
     const [inputMode, setInputMode] = useState('text');
     const keyboardHeight = useRef(240);
     const handleChange = useCallback((text) => {
         tempText.current = text;
-        // const trimTxt = text.trim();
         if (text.length && !lazy.current) {
             setShowSend(true);
             lazy.current = true;
@@ -89,31 +88,41 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         }, timeout);
     }, []);
     const switchEmojiInputMode = useCallback(() => {
-        var _a, _b, _c;
+        const animated = modeRef.current !== 'option';
         modeRef.current = 'emoji';
         setInputMode('emoji');
         Keyboard.dismiss();
-        (_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();
+        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, animated);
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focusNoSoftKeyboard();
+        }, keyboardDuration.current);
     }, []);
     const switchOptionPanelMode = useMemoizedFn(() => {
-        var _a;
-        if ((_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.getVisible()) {
+        if (modeRef.current === 'option') {
             switchKeyboardInputMode();
             return;
         }
+        const animated = modeRef.current !== 'emoji';
         setInputMode('option');
         modeRef.current = 'option';
         Keyboard.dismiss();
         setTimeout(() => {
             var _a, _b;
             (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-            (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current);
+            (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current, animated);
         }, keyboardDuration.current);
     });
+    const onFocus = useCallback(() => {
+        var _a, _b;
+        if (modeRef.current === 'text') {
+            (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+            (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+        }
+    }, []);
     const onKeyPress = useCallback((e) => {
-        if (['@', '＠'].includes(e.nativeEvent.key)) {
+        if (['@'].includes(e.nativeEvent.key)) {
             if (!debounceAt.current) {
                 debounceAt.current = debounce(() => {
                     onKeyboardAt && onKeyboardAt();
@@ -155,14 +164,16 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
         reset: () => {
             var _a, _b, _c;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
-            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide(true);
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide(true);
+            setInputMode('text');
+            modeRef.current = 'text';
         },
         focusTextInput: () => {
             var _a, _b, _c;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
-            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide(true);
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide(true);
         },
         inertText: (text) => {
             var _a, _b, _c;
@@ -200,14 +211,15 @@ 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();
             (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
         });
+        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', (event) => {
+            keyboardDuration.current = event.duration;
+        });
         return () => {
             keyboardDidShowListener.remove();
+            keyboardDidHideListener.remove();
         };
     }, []);
     return (<>
@@ -221,7 +233,7 @@ const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
                             <VoiceSvg />
                         </TouchableOpacity>)}
                 </View>
-                {inputMode === 'voice' ? <VoiceBar /> : <MessageInput ref={inputRef} onChangeText={handleChange} onKeyPress={onKeyPress}/>}
+                {inputMode === 'voice' ? <VoiceBar /> : <MessageInput ref={inputRef} onChangeText={handleChange} onFocus={onFocus} onKeyPress={onKeyPress}/>}
 
                 <View style={[styles.switchInput, { paddingRight: 0 }]}>
                     {inputMode === 'emoji' ? (<TouchableOpacity onPress={switchKeyboardInputMode}>

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

@@ -1,11 +1,6 @@
 import React from 'react';
-import { StyleProp, ViewStyle, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native';
+import { StyleProp, ViewStyle, TextInputProps } from 'react-native';
 export type InputMode = 'text' | 'emoji' | 'voice' | 'option';
-type MessageInputProps = {
-    style?: StyleProp<ViewStyle>;
-    onChangeText?: (text: string) => void;
-    onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
-};
 export type MessageInputMethods = {
     isFocused: () => boolean;
     focus: () => void;
@@ -18,5 +13,8 @@ export type MessageInputMethods = {
     insertText: (text: string) => void;
     backspace: () => void;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<MessageInputMethods>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    style?: StyleProp<ViewStyle>;
+    onChangeText?: ((text: string) => void) | undefined;
+} & Pick<TextInputProps, "onFocus" | "onKeyPress"> & React.RefAttributes<MessageInputMethods>>>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import { dp } from '@smart-link/rn-ui';
 import React, { forwardRef, memo, useImperativeHandle, useRef, useState, } from 'react';
 import { TextInput, View, StyleSheet, Platform } from 'react-native';
-const MessageInput = forwardRef(({ onChangeText, onKeyPress, style }, ref) => {
+const MessageInput = forwardRef(({ onChangeText, onKeyPress, onFocus, style }, ref) => {
     const inputRef = useRef(null);
     const [text, setText] = useState('');
     const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(true);
@@ -162,7 +162,7 @@ const MessageInput = forwardRef(({ onChangeText, onKeyPress, style }, ref) => {
             innerText.current = n;
             setText(n);
             onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(n);
-        }} onSelectionChange={({ nativeEvent }) => {
+        }} onFocus={onFocus} onSelectionChange={({ nativeEvent }) => {
             setSelection(nativeEvent.selection);
             selectionIos.current = nativeEvent.selection;
         }}/>

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

@@ -1,8 +1,7 @@
 import React from 'react';
 export type OptionPanelMethods = {
-    getVisible: () => boolean;
-    show: (height: number) => void;
-    hide: () => void;
+    show: (height: number, animated?: boolean) => void;
+    hide: (animated?: boolean) => void;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<OptionPanelMethods>>>;
 export default _default;

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

@@ -31,13 +31,30 @@ const OptionPanel = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const imManager = getImManager();
     useImperativeHandle(ref, () => ({
-        getVisible: () => visible,
-        show: height => {
-            heightAnim.setValue(height);
+        show: (height, animated) => {
+            if (animated) {
+                Animated.timing(heightAnim, {
+                    toValue: height,
+                    duration: 300,
+                    useNativeDriver: false,
+                }).start();
+            }
+            else {
+                heightAnim.setValue(height);
+            }
             setVisible(true);
         },
-        hide: () => {
-            heightAnim.setValue(0);
+        hide: (animated) => {
+            if (animated) {
+                Animated.timing(heightAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: false,
+                }).start();
+            }
+            else {
+                heightAnim.setValue(0);
+            }
             setVisible(false);
         },
     }), [visible]);

package/dist/utils/event.d.ts

@@ -0,0 +1,13 @@
+export declare enum EventName {
+    ON_GROUP_TRANSFER_DONE = "ON_GROUP_TRANSFER_DONE"
+}
+declare class EventEmitter {
+    events: Map<string, Function[]>;
+    constructor();
+    on(eventName: EventName, callback: Function): () => void;
+    off(eventName: EventName, callback: Function): void;
+    removeAll(eventName: EventName): void;
+    emit(eventName: EventName, ...args: any[]): void;
+}
+export declare const Event: EventEmitter;
+export {};

package/dist/utils/event.js

@@ -0,0 +1,32 @@
+export var EventName;
+(function (EventName) {
+    EventName["ON_GROUP_TRANSFER_DONE"] = "ON_GROUP_TRANSFER_DONE";
+})(EventName || (EventName = {}));
+class EventEmitter {
+    constructor() {
+        this.events = new Map();
+    }
+    on(eventName, callback) {
+        if (this.events.has(eventName)) {
+            this.events.get(eventName).push(callback);
+        }
+        else {
+            this.events.set(eventName, [callback]);
+        }
+        return () => {
+            this.off(eventName, callback);
+        };
+    }
+    off(eventName, callback) {
+        const index = this.events.get(eventName).indexOf(callback);
+        this.events.get(eventName).splice(index, 1);
+    }
+    removeAll(eventName) {
+        this.events.set(eventName, []);
+    }
+    emit(eventName, ...args) {
+        const tasks = this.events.get(eventName) || [];
+        tasks.forEach(fn => fn.call(null, ...args));
+    }
+}
+export const Event = new EventEmitter();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-link/rn-im",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "main": "./dist/index.js",
   "dependencies": {
@@ -62,8 +62,8 @@
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
-    "@smart-link/rn-ui": "^1.1.0",
-    "@smart-link/im-base": "^1.1.1"
+    "@smart-link/rn-ui": "^1.1.1",
+    "@smart-link/im-base": "^1.1.2"
   },
   "files": [
     "dist/**",