@smart-link/rn-im 1.0.1

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleProp, ViewStyle, NativeSyntheticEvent, TextInputKeyPressEventData } 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;
+    focusNoSoftKeyboard: () => void;
+    blur: () => void;
+    clear: () => void;
+    setText: (text: string) => void;
+    getText: () => string;
+    insertEmoji: (text: string) => void;
+    backspace: () => void;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<MessageInputMethods>>>;
+export default _default;

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

@@ -0,0 +1,203 @@
+"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 MessageInput = (0, react_1.forwardRef)(({ onChangeText, onKeyPress, style }, ref) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [text, setText] = (0, react_1.useState)('');
+    const [showSoftInputOnFocus, setShowSoftInputOnFocus] = (0, react_1.useState)(true);
+    const innerText = (0, react_1.useRef)('');
+    const [selection, setSelection] = (0, react_1.useState)({ start: 0, end: 0 });
+    const selectionIos = (0, react_1.useRef)({ start: 0, end: 0 });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isFocused: () => {
+            var _a, _b;
+            return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.isFocused()) !== null && _b !== void 0 ? _b : false;
+        },
+        focus: () => {
+            var _a;
+            setShowSoftInputOnFocus(true);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 16);
+        },
+        focusNoSoftKeyboard() {
+            setShowSoftInputOnFocus(false);
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 16);
+        },
+        blur: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        },
+        clear: () => {
+            var _a;
+            setText('');
+            innerText.current = '';
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        },
+        insertEmoji: (emoji) => {
+            var _a, _b, _c;
+            const { start, end } = selection;
+            const newText = ((_a = innerText.current) === null || _a === void 0 ? void 0 : _a.slice(0, start)) + emoji + ((_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 + emoji.length,
+                end: start + emoji.length,
+            });
+            if (react_native_1.Platform.OS === 'ios') {
+                selectionIos.current = {
+                    start: start + emoji.length,
+                    end: start + emoji.length,
+                };
+                (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.setSelection(start + emoji.length, start + emoji.length);
+            }
+        },
+        getText: () => {
+            return innerText.current;
+        },
+        setText: (n) => {
+            innerText.current = n;
+            setText(n);
+            setTimeout(() => {
+                var _a;
+                setSelection({
+                    start: n.length,
+                    end: n.length,
+                });
+                if (react_native_1.Platform.OS === 'ios') {
+                    selectionIos.current = {
+                        start: n.length,
+                        end: n.length,
+                    };
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelection(n.length, n.length);
+                }
+            }, 10);
+        },
+        backspace: () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const { start, end } = selection;
+            if (start === end) {
+                if (start === 0) {
+                    return;
+                }
+                // 判断前一个字符是否是emoji
+                const prevChar = (_a = innerText.current) === null || _a === void 0 ? void 0 : _a.slice(start - 1, start);
+                const prevPrevChar = (_b = innerText.current) === null || _b === void 0 ? void 0 : _b.slice(start - 2, start);
+                const prevPrevPrevChar = (_c = innerText.current) === null || _c === void 0 ? void 0 : _c.slice(start - 3, start - 2);
+                // 使用正则表达式匹配 emoji
+                const emojiRegex = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F1E6}-\u{1F1FF}\u{1F200}-\u{1F2FF}\u{1F300}-\u{1F5FF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/u;
+                let emojiLength = 1;
+                let emojiMatch = '';
+                // 检查单个字符是否是 emoji
+                if (prevChar && emojiRegex.test(prevChar)) {
+                    emojiMatch = prevChar;
+                }
+                else if (prevPrevChar && emojiRegex.test(prevPrevChar)) {
+                    emojiMatch = prevPrevChar;
+                    emojiLength = 2;
+                }
+                else if (prevPrevPrevChar && emojiRegex.test(prevPrevPrevChar)) {
+                    emojiMatch = prevPrevPrevChar;
+                    emojiLength = 3;
+                }
+                if (emojiMatch) {
+                    const newText = ((_d = innerText.current) === null || _d === void 0 ? void 0 : _d.slice(0, start - emojiLength)) + ((_e = innerText.current) === null || _e === void 0 ? void 0 : _e.slice(end));
+                    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newText);
+                    innerText.current = newText;
+                    setText(newText);
+                    setSelection({
+                        start: start - emojiLength,
+                        end: start - emojiLength,
+                    });
+                    return;
+                }
+                const newText = ((_f = innerText.current) === null || _f === void 0 ? void 0 : _f.slice(0, start - 1)) + ((_g = innerText.current) === null || _g === void 0 ? void 0 : _g.slice(end));
+                onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newText);
+                innerText.current = newText;
+                setText(newText);
+                setSelection({
+                    start: start - 1,
+                    end: start - 1,
+                });
+            }
+            else {
+                const newText = innerText.current.slice(0, start) + innerText.current.slice(end);
+                onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newText);
+                innerText.current = newText;
+                setText(newText);
+                setSelection({
+                    start,
+                    end: start,
+                });
+            }
+        },
+    }), [selection, onChangeText]);
+    return (<react_native_1.View style={[styles.container, style]}>
+            <react_native_1.TextInput ref={inputRef} selection={react_native_1.Platform.OS === 'android' ? selection : undefined} multiline showSoftInputOnFocus={showSoftInputOnFocus} style={styles.textInput} value={text} onKeyPress={onKeyPress} onChangeText={n => {
+            innerText.current = n;
+            setText(n);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(n);
+        }} onSelectionChange={({ nativeEvent }) => {
+            setSelection(nativeEvent.selection);
+            selectionIos.current = nativeEvent.selection;
+        }}/>
+        </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        position: 'relative',
+        marginVertical: (0, rn_ui_1.dp)(6),
+        maxHeight: (0, rn_ui_1.dp)(120),
+    },
+    textInput: {
+        borderRadius: (0, rn_ui_1.dp)(4),
+        backgroundColor: '#fff',
+        fontSize: (0, rn_ui_1.dp)(15),
+        minHeight: react_native_1.Platform.select({
+            ios: (0, rn_ui_1.dp)(32),
+            android: (0, rn_ui_1.dp)(28),
+        }),
+        lineHeight: react_native_1.Platform.select({
+            ios: (0, rn_ui_1.dp)(20),
+            android: (0, rn_ui_1.dp)(20),
+        }),
+        paddingHorizontal: (0, rn_ui_1.dp)(5),
+        paddingVertical: react_native_1.Platform.select({
+            ios: 6,
+            android: 4,
+        }),
+    },
+});
+exports.default = (0, react_1.memo)(MessageInput);

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

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

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

@@ -0,0 +1,240 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        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 rn_ui_1 = require("@smart-link/rn-ui");
+const DocumentPicker = __importStar(require("@react-native-documents/picker"));
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useImSelector_1 = require("../../../../hooks/useImSelector");
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const init_1 = require("../../../../init");
+const Icons_1 = require("./Icons");
+const react_native_image_crop_picker_1 = __importDefault(require("react-native-image-crop-picker"));
+const contact_slice_1 = require("../../../../slice/contact/contact.slice");
+const file_1 = require("../../../../utils/file");
+const scroll_1 = require("../../../../utils/scroll");
+const take_camera_1 = require("../../../../utils/take-camera");
+const FontAwesome_1 = __importDefault(require("react-native-vector-icons/FontAwesome"));
+const OPTION_SIZE = (react_native_1.Dimensions.get('screen').width - 20) / 4;
+const keyExtractor = (item) => item.id;
+const OptionPanel = (0, react_1.forwardRef)((props, ref) => {
+    const navigation = (0, rn_ui_1.useNavigation)();
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const { currentConversation } = (0, useImSelector_1.useConversation)();
+    const [heightAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
+    const { t } = (0, useTranslation_1.default)();
+    const imManager = (0, init_1.getImManager)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getVisible: () => visible,
+        show: height => {
+            heightAnim.setValue(height);
+            setVisible(true);
+        },
+        hide: () => {
+            heightAnim.setValue(0);
+            setVisible(false);
+        },
+    }), [visible]);
+    const sendPicture = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        (0, scroll_1.scrollToBottom)();
+        yield (0, init_1.getImManager)().sendPictureMessage(Object.assign({}, currentConversation), data);
+    });
+    const sendVideo = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        (0, scroll_1.scrollToBottom)();
+        yield (0, init_1.getImManager)().sendVideoMessage(Object.assign({}, currentConversation), data);
+    });
+    const sendFile = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        (0, scroll_1.scrollToBottom)();
+        const destPath = yield (0, file_1.copyFile)(data.localPath, data.filename);
+        yield (0, init_1.getImManager)().sendFileMessage(Object.assign({}, currentConversation), Object.assign(Object.assign({}, data), { localPath: destPath }));
+    });
+    const openAlbum = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const images = yield react_native_image_crop_picker_1.default.openPicker({
+                mediaType: 'photo',
+                multiple: true,
+                compressImageQuality: 0.7,
+                compressImageMaxWidth: 1080,
+            });
+            console.log(images);
+            images.map(item => {
+                sendPicture({
+                    filename: item.filename,
+                    size: item.size,
+                    localPath: item.path,
+                    type: item.mime,
+                    lastModified: Number(item.modificationDate),
+                    width: item.width,
+                    height: item.height,
+                });
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+    });
+    const openCamera = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield (0, take_camera_1.takeCamera)(currentConversation);
+        }
+        catch (e) {
+            console.log(e);
+        }
+    });
+    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) {
+                rn_ui_1.Toast.error('获取文件路径失败');
+                return;
+            }
+            const ext = (0, file_1.getExtensionFromMime)(fileInfo.type);
+            if (!ext) {
+                rn_ui_1.Toast.error('不支持的文件类型');
+                return;
+            }
+            if (!fileInfo.name.endsWith(ext)) {
+                fileInfo.name = fileInfo.name + ext;
+            }
+            yield sendFile({
+                localPath: fileInfo.uri,
+                filename: fileInfo.name,
+                size: fileInfo.size,
+                type: fileInfo.type,
+                lastModified: Date.now(),
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+    });
+    const options = [
+        {
+            id: 'picture-o',
+            icon: <Icons_1.PhotosIcon size={30}/>,
+            text: t('imgOrDoc'),
+            onPress: openAlbum,
+        },
+        {
+            id: 'camera',
+            icon: <Icons_1.ShootingIcon size={40}/>,
+            text: t('camera'),
+            onPress: openCamera,
+        },
+        // {
+        //     id: 'phone',
+        //     icon: <TelPhoneIcon />,
+        //     text: t('voice'),
+        //     onPress: () => {
+        //     },
+        // },
+        // {
+        //     id: 'video',
+        //     icon: <VideoIcon size={26} />,
+        //     text: t('video'),
+        //     onPress: () => {
+        //     },
+        // },
+        {
+            id: 'file',
+            icon: <Icons_1.FileIcon size={40}/>,
+            text: t('file'),
+            onPress: pickFile,
+        },
+        {
+            id: 'star',
+            icon: <FontAwesome_1.default name="star" color="#000" size={32}/>,
+            text: t('collect'),
+            onPress: () => {
+                navigation.navigate('Collection');
+            },
+        },
+        {
+            id: 'user',
+            icon: <Icons_1.UserIcon size={34}/>,
+            text: t('contact'),
+            onPress: () => {
+                (0, init_1.getImManager)().store.dispatch((0, contact_slice_1.startSendContact)());
+                navigation.navigate('ChooseContact', { checkMode: 'single' });
+            },
+        },
+    ];
+    const renderItem = ({ item }) => (<react_native_1.TouchableOpacity style={style.item} onPress={item.onPress}>
+            <react_native_1.View style={style.icon}>{item.icon}</react_native_1.View>
+            <react_native_1.Text style={style.text}>{item.text}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>);
+    return (<react_native_1.Animated.View style={{
+            height: heightAnim,
+            position: 'relative',
+            paddingBottom: visible ? 20 : 0,
+        }} pointerEvents="auto">
+            <react_native_1.FlatList numColumns={4} initialNumToRender={8} data={options} style={{
+            flex: 1,
+        }} 
+    // @ts-ignore
+    keyExtractor={keyExtractor} contentContainerStyle={{
+            paddingHorizontal: 10,
+        }} pointerEvents="auto" keyboardShouldPersistTaps={'handled'} renderItem={renderItem} scrollEnabled/>
+        </react_native_1.Animated.View>);
+});
+const style = react_native_1.StyleSheet.create({
+    item: {
+        width: OPTION_SIZE,
+        height: OPTION_SIZE + 5,
+        alignItems: 'center',
+        marginTop: 10,
+    },
+    icon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: (0, rn_ui_1.dp)(60),
+        height: (0, rn_ui_1.dp)(60),
+        marginBottom: 5,
+        backgroundColor: '#fff',
+        borderRadius: (0, rn_ui_1.dp)(10),
+    },
+    text: {
+        fontSize: (0, rn_ui_1.dp)(14),
+        color: '#333',
+    },
+});
+exports.default = (0, react_1.memo)(OptionPanel);

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element>;
+export default _default;